전체 글
-
객체를 배열로 담아서 데이터 꺼내오기error handling 2022. 9. 9. 22:59
Firebase Real time Database에는 데이터가 객체 형태로 저장된다. 그래서 데이터들을 받아와서 반복문으로 map을 돌릴 수 없는 상황이 발생! 객체를 배열로 변경해서 꺼내오는 코드를 작성 const getAllPosts = async () => { const response = await getAllPostsData(); // async 함수 내 빈 배열 생성 const allPostArray = []; // for...in 문을 통해 새로운 객체로 담고, for (const key in response) { const postObject = { id: key, ...response[key] }; // 빈 배열에 push allPostArray.push(postObject); } let..
-
React에서 DOM에 직접 접근보다 useRef 쓰는 이유concept/React, Redux, RN 2022. 9. 9. 22:55
React에서 DOM에 직접 접근하는 것은 React way가 아니라고 한다. 그 이유가 뭔지 궁금해서 조금 찾아봤다. 직접적인 let 변수나, 객체를 선언해서 컴포넌트 내부 변수를 사용하는 것이 아니고 useRef를 사용하는 이유는, 직접적인 내부 변수를 선언할 경우 리렌더링 시에 변수 값이 초기화되기 때문이다. 반면, useRef의 경우 일반적인 자바스크립트 객체로서 메모리 heap에 저장되므로, 항상 같은 메모리 주소를 참조하여 컴포넌트가 아무리 리렌더링 되더라도 이미 저장된 값 자체는 삭제되지 않고 전역변수처럼 남아있게 된다. 참고자료 https://dev-note-97.tistory.com/314 https://dev.to/dylanju/useref-3j37?fbclid=IwAR0fl7xMjn_..
-
redux-persist로 로그인 유지 구현concept/React, Redux, RN 2022. 9. 9. 12:13
새로고침 했을 시 로그인이 풀리는 현상을 방지하기 위해서 Localstorage에 로그인 정보를 저장할 필요성이 생겼다. 마침 상태 관리를 위해서 redux를 사용하고 있는 중이었고 redux-persist를 이용하면 로컬스토리지를 활용한 로그인 유지를 간편하게 구현할 수 있다는 사실을 알게 되었으니 바로 도입! 하기 전에, Web Storage에 대한 개념부터 이해하고 도입을 해야 겠쥬? Web Storage는 키/값의 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로, 영구저장소 LocalStorage와 임시저장소 SessionStorage를 가지고 있다. 쿠키와 비슷하지만 개수와 용량의 제한이 없고,쿠키처럼 매번 서버로 전송하지 않아 네트워크 트래픽 비용을 줄여준다. 조금 더 상세하..
-
firestore 경로 설정error handling/Simple tips 2022. 9. 7. 12:27
파이어베이스 공식 문서가 최신화되어 있지 않은 건지 그대로 해도 안되는 경우가 많아서 삽질을 많이 했다 파이어베이스 관련 블로그 포스팅도 안드로이드가 대부분 ㅠㅠ 웹 자바스크립트를 하시는 누군가에게는 도움이 되기를 바라며 기록해 놓기 기존 공식문서 상 코드 import 'firebase/firestore'; export const firestore = firebase.firestore(); 에러로그 imageStorage.js:18 Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function at Module../src/firebase/imageStorage.js (imageSt..
-
React로 만든 앱에 PWA 적용하기concept/React, Redux, RN 2022. 9. 6. 12:04
PWA란? 프로그레시브 웹 앱 (Progressive Web App)의 약자. HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱 네이티브 앱을 개발하는 것보다 훨씬 빠르게 개발할 수 있고, 푸시 알림, 오프라인 지원같은 네이티브 앱의 특징도 제공 PWA로 만든 앱 트위터 스타벅스 핀터레스트 우버 React with PWA 만드는 방법 npx create-react-app my-app --template cra-template-pwa 이렇게 리액트 앱을 제작하기 앞서서 PWA를 함께 적용하는 create app 명령을 내릴 수 있다. 하지만 나는 이미 다 만들어진 react 앱을 PWA로 만들고 싶었기 때문에 수동으로 설정을 해 주었다. manifest.json React 프로젝트의 pu..
-
React 앱에서 dotenv 실행 시 Uncaught Error: Cannot find module 'fs'error handling 2022. 8. 15. 15:36
React 에서 env 파일을 사용하고자 env를 설치하고, 다음과 같이 코드를 작성 import React, { useState, useEffect } from 'react'; import './App.css'; import dotenv from 'dotenv'; dotenv.config() function App() { console.log(process.env.REACT_APP_API_KEY) return ( 앱 ); } export default App; 다음과 같은 오류가 나타났다. nodejs 환경에서는 dotenv import 가 필요하지만, create-react-app으로 구축한 리액트에서는 이미 dotenv가 내장되어 있기 때문에 import를 할 필요가 없음. import dotenv..
-
create-react-app 없이 리액트 개발환경 구축하기카테고리 없음 2022. 8. 14. 23:04
웹 팩을 어느 정도 이해하고 본격적인 실습을 위해서 create-react-app 없이 리액트 개발 환경을 구축해 보았다. 디렉토리 및 package.json 생성 mkdir pure-react cd pure-react npm init -y React 패키지 설치 npm install react // react 코어 패키지 npm install react-dom // react를 DOM과 연결 시켜주는 패키지 Webpack 패키지 설치 // webpack 관련 npm install webpack // 웹 팩의 코어 패키지 npm install webpack-cli // 웹 팩을 터미널(CLI) 에서 사용할 수 있는 패키지 npm install webpack-dev-server // 웹 팩을 빠르게 실시간..
-
firebase 에 이미지 저장하기error handling/Simple tips 2022. 8. 2. 21:38
firebase 의 실시간 데이터베이스 에 이미지를 저장할 때, 이미지는 파일 용량이 크기 때문에 firebase storage에 저장하고나서 저장된 위치를(url) 데이터베이스에 저장해야 한다. 그런데 firebase storage 에 저장한 이미지 경로는 gs 모듈이라서 불러왔을 때 접근이 불가하다. 이걸 https 로 바꿔주는 방법은 다음과 같다. 1. "https://firebasestorage.googleapis.com/v0/b/" 2. bucket object 3. "/o/" 4. correctly encoded path object. 5. "?alt=media" 6. token="..." 참고: https://stackoverflow.com/questions/38779713/how-to-st..