'firebase.apps.length' 부분에서 객체에 대한 길이를 반환시켜 값의 존재유무에 따라 app의 값을 다르게 앱에 적용하려고하는데 해당 내용에서 자꾸만 에러가 출력되었다. 기존 코드는 login auth() 관련해서 기능을 구현하려고하였다. 바뀐 부분은 import 부분. firebase의 버전은 v8이다. // 변경 전 import * as firebase from "firebase/app"; // 변경 후 import * as firebase from "firebase"; // 하단의 전체 코드 const firebaseConfig = { ... }; let app; if (firebase.apps.length === 0) { app = firebase.initializeApp(fireb..

FrontEnd/React.js 2022. 3. 31. 14:10

1. redux/toolkit npm install @reduxjs/toolkit Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org redux를 사용할때에 매우 유용한 라이브러리다. Extension의 redux를 설치해야하며, 타임머신 기능을 제공하여 에러를 찾기도 편리하다. 2. date-fns npm i date-fns 날짜 형식을 사용할때 편리하게 사용하고 귀찮게 일일이 시간 타입을 선언하여 사용할 필요가 없다. // 현재와의 시각 차이를 만들 수 있음 // Slicer.js date: sub(new Da..

FrontEnd/React.js 2022. 3. 29. 16:10

안녕하세요 상훈입니다. node.js 를 이용한 백엔드 개발 중 .js 파일을 require 말고 import 시키고 싶었는데 안되었던 경험이 있으실 수 있습니다. 그때에는 package.json 혹은 eslintrc.json 파일의 parserOptions 항목을 살펴보셔야합니다. ecmaVersion은 2016이상으로 맞춰주시길 바랍니다. 제 eslintrc.json 입니다. "parserOptions": { "sourceType": "module", "ecmaFeatures": { "jsx": true }, "ecmaVersion": "latest" }, sourceType: module 을 추가해주시거나, 변경해주시거나 package.json에서 type: 'module' 을 추가해주세요. 이제 ..

FrontEnd/JavaScript 2022. 3. 15. 14:08

안녕하세요 상훈입니다. 리액트를 다루는 기술이라는 책의 21강에서 사용되는 koa-router는 현재의 리액트 버전(17)에서는 사용할 수 없습니다. 설치방법 npm i koa-tree-router 사용 방법 const Koa = require("koa"); const Router = require("koa-tree-router"); const app = new Koa(); const router = new Router(); router.get("/", function(ctx) { ctx.body = "hello, world"; }); app.use(router.routes()); app.listen(8080); // 혹은 app.listen(8000, () => { console.log('listeni..

FrontEnd/React.js 2022. 3. 15. 10:01

안녕하세요 상훈입니다. 1. .eslintrc.json 2. .prettierrc 파일에 대해서 간단한 설정 몇 가지를 작성해보려고 합니다. 1. .eslintrc.json 일단 사용환경이 React.js 라서 ecmaFeatures 와 같은 경우 jsx 문법을 사용하고 있습니다. commonjs를 적용해 eslint를 설치하였습니다. - 사용하지 않은 변수에 대한 알림 및 에러 처리 하단에 보시면 no-unused-vars: "warn" 이라는 항목이 있는데, 해당 항목을 error, warn, off 로 설정이 가능합니다. 2. .prettierrc 1) singleQuote: 싱글 쿼터로할지 더블 쿼터로 할지 설정입니다. Vue.js 에서는 싱글을 추천하고, React.js 에서는 더블을 권장하고 ..

FrontEnd/JavaScript 2022. 3. 14. 18:02

React.js, function component style RestAPI 등 외부 API를 적용하여 데이터를 외부에서 받아와서 useEffect Hooks 내에서 데이터를 풀어줄 때의 주의사항 중 한개를 서술한다. 기본적으로 REST API와 같은 외부 데이터들은 promise.then 형식으로 데이터를 받는다. 그럴 때 async await을 사용하는데, React.js useEffect() Hook에서는 async를 직접적으로 사용하면 안된다. useEffect ( async () => { await something... }) 이렇게 사용하면 안된다는 뜻이다. async await을 사용하려면, 내부에서 사용해야한다. useEffect (() => { const result = async () ..

FrontEnd/React.js 2022. 3. 11. 13:18

React.js 17 버전은 다르게 다운로드 받아야합니다. 에러 내용 npm ERR! Could not resolve dependency: npm ERR! peer react@"^15.3.0 || ^16.0.0-alpha" from react-virtualized@9.22.3 npm ERR! node_modules/react-virtualized npm ERR! react-virtualized@"9.22.3" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an ..

FrontEnd/React.js 2022. 3. 10. 09:58

안녕하세요 상훈입니다. react.js에서 return 내에 jsx로 html 요소를 작성해야할 때, 보통은 태그로 모든 항목을 감싸서 1개의 요소를 반환시키도록 합니다. 그러나 이를 사용하고싶지 않을 때 Fragment를 사용할 수 있는데요, 이는 React Version 16 이상 사용이 가능합니다. 간단한 예시) return ( Hello? ) 이렇게 return 부분이 작성되어져 있을 때, return ( Hello? ) 혹은 return ( Hello? ) 이렇게 작성할 수 있습니다.

FrontEnd/React.js 2022. 3. 7. 17:07