예방이의 개발일기

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"}

네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데...네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!!해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub.github.comsmarteditor2를 받아준다.  나는 표시한 파일을 받아줬다...

React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..