개발60 [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. [Flutter] Instance of {Object} 출력하기 코드 import 'dart:developer'; inspect(object) 결과 2022. 7. 12. [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. [Android/안드로이드] WebView 타이틀바 제거 # 배경 - 웹뷰에서 타이틀바가 나타남 (난 분명 지웠는데 나타남) - 다크모드가 있다는 것을 기억하자 # 해결방안 - themes 폴더를 보면 themes.xml 이 2개가 있음 (데이 앤 나잇) - 2개 파일 모두 아래 내용을 추가하자 - 테스트는 항상 데이 앤 나잇 모드 둘 다 확인할 것! false true 2022. 7. 3. [Android/안드로이드] WebView에서 화면 전환 시 Reload 이슈 # 배경 - 웹사이트를 안드로이드 웹뷰로 패키징했을 때 화면 전환 시 Reload 되는 문제가 발생 - 런타임 중에 화면 전환 시 Activity가 재시작된다고 함 # 해결방안 - AndroidManifest.xml 에 아래 내용을 추가 # 참고 https://cofs.tistory.com/206 2022. 7. 3. 내림(floor) - 자릿수 지정 할 때마다 찾는게 귀찮아서 정리 // 소수점이하 const value = 52 / 100 = 0.52 const floorRate1 = Math.floor(value * 10) / 10; // 0.5 const floorRate2 = Math.floor(value * 100) / 100; // 0.52 2022. 5. 10. [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. 이전 1 2 3 4 ··· 6 다음
