Frontend/React

vite 기반 react + ts 프로젝트에서 emotion.js 설정하는 방법 🔶 emotion 관련 라이브러리 설치 yarn add @emotion/react @emotion/styled yarn add --dev @emotion/babel-plugin 🔶 vite.config.js 수정import { defineConfig } from "vite";import react from "@vitejs/plugin-react";import tsconfigPaths from "vite-tsconfig-paths";// https://vitejs.dev/config/export default defineConfig({ plugins: [ react({ jsxImportSource: "@em..

'CopyToClipboard' cannot be used as a JSX component.Its instance type 'CopyToClipboard' is not a valid JSX element.Property 'refs' is missing in type 'PureComponent' but required in type 'ElementClass'.ts(2786) react-copy-to-clipboard를 사용하려고 하는데 위와 같은 오류가 발생... yarn add react-copy-to-clipboardyarn add -D @types/react-copy-to-clipboardtype문제인가 싶어서 types도 설치 해줬고 IDE에서 typescript 도 재시작 해줬는데 안된다... ..

blocked by CORS policy: Response to preflight request doesn't pass access control check 강의를 보면서 firebase storage를 프로젝트에 셋팅하고,이미지 등록을 테스트 해보려고 하니위와 같은 CORS 에러가 났다. 404에러가 나고, 콘솔로그에 위와 같은 에러메세지가 떠있었다.공식문서를 참고해 해결했다. 강의와 다른점이 꽤 있었다... ㅠ아마 24년 10월 30일 파이어베이스가 유료로 바뀌고나서 바뀐건가 싶다... Firebase Storage 유료로 변경!!강의를 보면서 firebase storage 를 적용해보려고 했는데뭔가 정책도 바뀌고, 사용법도 바뀐 것 같다.강의 설명과는 달라서 참고용으로 글을 작성한다.  일단 24년..

강의를 보면서 firebase storage 를 적용해보려고 했는데뭔가 정책도 바뀌고, 사용법도 바뀐 것 같다.강의 설명과는 달라서 참고용으로 글을 작성한다.  일단 24년 10월 30일 이후로 스토리지를 사용하려면 Spark 무료 요금제에서는 사용이 안되는 것 같다.무조건 Blaze 요금으로 업그레이드를 진행해야한다. 2024년 9월에 발표된 Firebase용 Cloud Storage 변경사항에 대한 FAQ  |  Cloud Storage for Firebase의견 보내기 2024년 9월에 발표된 Firebase용 Cloud Storage 변경사항에 대한 FAQ 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Firebase는 Google 제품과 생태계를 안전firebas..

회사에서 프로젝트를 하다가 431에러를 만났다.404, 401 등의 에러는 익숙했는데...431에러는 또 처음 보는 것 같다. 431에러 정의 신기한게 로컬, 개발에서는 에러가 안났는데운영만 올라가면 생기는 일이여서 해결하는데 꽤 오래걸렸다.  일단 내가 분석한 이슈는 이렇게 된것 같다. 리액트 build 파일을 docker의 노드 가상환경으로 감싸서 띄우고띄운서버에 nginx를 통해 URL을 연결해줬는데 node의 index.js 안에 프록시를 백엔드 API URL로 해놨어야 했는데프론트엔드 API URL로 해놨다. 그래도 호출은 되지만 그 API가 호출하고, node의 index.js안에서 또 호출하고이게 반복되면서 무한루프 때문에 header가 길어져서 431 에러가 났던 것이다.  아니 근데 왜 ..

최신 버전의 react router dom 공식 문서 Home v6.25.1 | React Router reactrouter.com v5버전의 react router dom 공식 문서 React Router: Declarative Routing for ReactLearn once, Route Anywherev5.reactrouter.com 📌 React Router Dom 설치 명령어yarn add react-router-dom// typescript 사용할 경우, devDependencies로 type 같이 설치 yarn add -D @types/react-router-dom- typescript를 사용하는 경우 @types 를 같이 설치해줘야한다.- devDependencies는 로컬환경에서 개발,..

Creact React App 로 리액트 프로젝트 시작하기  Create React AppSet up a modern web app by running one command.create-react-app.dev 📌 설치 명령어// yarn 사용yarn create react-app [프로젝트명]// npx 사용npx create-react-app [프로젝트명]// 현재 디렉토리에 설치npx create-react-app . ⭐️ 타입스크립트 사용시yarn create-react-app [프로젝트명] --template typescriptnpx create-react-app [프로젝트명] --template typescript

tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법  text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],

Vite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다.  eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}