개발/React&Next.js7 [React] Firebase 연동 + CRUD (2) CRUD를 작성해보자. (여기에서는 Firebase v9 를 기준으로 합니다!) 1. Create 데이터를 저장하는 방법은 addDoc과 setDoc을 이용하는 2가지 방법이 있다. addDoc 과 setDoc의 차이 문서가 유의미한 ID인지 아닌지이다. addDoc을 사용하면 Cloud Firestore에서 자동으로 ID를 생성해준다. // 추가하고자 하는 데이터 const data = { ... }; // addDoc 예시 // feedbacks 컬렉션에 {randomID} document를 추가 const docRef = collection(fireStore, 'feedbacks'); await addDoc(docRef, data).then(() => { alert('등록되었습니다.'); handl.. 2023. 6. 16. [React] Firebase 연동 + CRUD (1) 작년에 진행했던 사이드 프로젝트의 API가 동작하지 않아 일부 기능을 Firebase로 변경하는 작업을 진행했다. React에서 Firebase 연동하는 방법에 대해 기록하고자 한다. 1. Firebase 프로젝트 생성 - 생성하러 가기 👉 https://console.firebase.google.com/ 2. 웹 앱에 Firebase 추가 - 생성한 firebase 프로젝트에서 웹 앱을 추가 3. Firebase SDK 추가 - 앱 등록 후 생성된 SDK 정보를 다른 곳에 저장 - 여기 👉 프로젝트 설정 > 일반 > 내 앱 > SDK 설정 및 구성 에서 확인 가능 4. React 프로젝트에서 Firebase 설치 $ npm install firebase // npm 사용시 $ yarn add fireb.. 2023. 6. 13. [React] react 16에서 17로 업그레이드 하기 요약 운영중인 커머스어드민과 판매자센터의 React 버전을 올리는 리팩토링을 맡게 되었음 결과적으로 버전을 올리지 못했음 React 버전을 올리는 게 문제가 된 것이 아니라 TypeScript 버전도 함께 올려야 하는 이슈가 발생 거의 모든 파일을 수정해야 하고 기존 3.7.5 버전에서 발생하고 있던 오류(동작하기에 고치지 않고 넘어갔던..)들이 대폭발 💣 혼자서 감당할 수 없었고 모든 기능들을 재검수할만큼의 자원이 없었음 협의 하에 Cancelled React 16 / 17 v16 return Array & string 가능 Error Boundaries componentDidCatch 를 통해 에러 대응(클래스 컴포넌트에서만 사용 가능) 작아진 파일 사이즈 (32% 감소) react is 5.3 kb.. 2023. 4. 1. [React] neo-async callback was already called 배경 - 잘 돌아가던 것이 안된다. - 실행은 되지만 파일을 수정하는 동시에 neo-async callback was already called 에러 발생 내용 - 찾아보니 craco.config.js 에서 빌드 속도 측정을 위해 추가한 SpeedMeasurePlugin 에서 문제가 발생하고 있었다. - 처음에는 해당 플러그인을 삭제할까 생각했지만 다른 작업 브랜치에서는 해당 플러그인이 삭제되어 있는 상태여서 내 작업 브랜치에서만 수정하기로 했다. 해결방법 - smp.wrap 위치를 변경하면 된다. - 귿 👍🏻 // craco.config.js const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const smp = new SpeedM.. 2022. 7. 4. [React] map을 Ramda forEach로 변경하기 # 배경 - map 을 Ramda 로 바꾸고 싶었음 (단순) # 작업내용 // before fieldArr.map((name: string) => { return resetValue(value, name, fieldValue); }); // after R.forEach((name: string) => resetValue(value, name, fieldValue))(fieldArr); 2022. 5. 9. yarn v1 hoisting https://toss.tech/article/node-modules-and-yarn-berry 에서 '유령의존성' 부분 https://maier.tech/posts/a-guide-to-understanding-how-yarn-hoists-dependencies-and-handles-conflicting-packagesd 에서 'Use yarn why and the yarn.lock file to understand hoisting' 부분 2022. 5. 3. [Next.js] scroll-position 1. 스크롤 했을 때 CloseButton이 보이게 2. CloseButton을 눌렀을 때 thumbnail image가 안보이게 3. https://www.npmjs.com/package/@n8tb1t/use-scroll-position import { useScrollPosition } from '@n8tb1t/use-scroll-position' // visible 여부, img position state 관리 const [isVisible, setIsVisible] = useState(false) const [imgPosition, setImgPosition] = useState('') useScrollPosition(({ currPos }) => { const scrollY = Math.abs(.. 2021. 12. 13. 이전 1 다음