의문의 시작 보통 for문에서는 변수를 선언할 때 let을, for…of문에서는 const를 사용하는데, 왜 그랬는지 까먹었다. for (const item of [1, 2, 3]) { console.log(item); } // 1, 2, 3 새삼 신기한 for…of문 MDN 문서를 보면 블록 내부 변수를 수정하지 않는 경우 const를...

mongoose 스키마의 다양한 속성 dotenv 모듈을 import 하는 중에 can’t resolve ‘fs’ 에러가 발생했다. webpack에서 node 모듈에 대한 폴리파일을 포함하지 않아서 발생하는 에러라고 한다. next.config.js에 아래 코드를 추가하여 해결했다. webpack(config) { config.resol...

firebase 설치 npm install firebase Firebase SDK 사용 리액트 앱에서 firebase.js 파일 생성 firebase 프로젝트 설정 페이지 하단의 [내 앱] - [SDK 설정 및 구성] 항목의 SDK 코드 복사 2에서 복사한 코드를 1의 파일에 붙여넣기 apiKey 등은 .env.local ...

Firebase Project 시작하기 Firebase console에서 [프로젝트 추가] 클릭 프로젝트 정보 입력 프로젝트 생성 완료 Project에 앱 추가하기 생성된 프로젝트 클릭 “앱에 Firebase를 추가하여 시작하기” 문구 밑의 앱 아이콘 클릭 앱 이름 입력 [콘솔로 이동] 클릭 Cloud Fires...

인증 자격 증명 만들기 사용자 인증 정보 페이지로 이동한다. [자바스크립트] 구글 로그인 API 쉽게 구현 방법 및 예제- OAuth 2.0, Javascript, Jsp 를 참고하여 동의 화면 구성, API 키, OAuth 클라이언트 ID를 생성한다. Google Platform 라이브러리 로드 Google 로그인을 연동할 html ...

이벤트 핸들러 attribute 방식 <button onclick="handleClick()">Click me</button> <script> function handleClick() { console.log(this); // window } </script> 위 예제의 handleClic...

의존성 배열을 사용하는 경우 상태값을 이용해 api를 호출할 때 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }, [userId]); 의존성 배열을 잘못 관리하면 생기는 일 의존성 배열에 입력해야 할 값을 입력하지 않으면 오래된 값을 참조하는 문제...

주저리 SSH 키 생성하고 Github에 추가하기 포스트에서 해결하지 못했던 문제를 해결했다. 윈도우에서 git push를 할 때 Authentication failed 에러가 났었는데, git config --global --unset credential.helper 다른 문제를 해결하려고 위 명령어로 git credential을 지워버려서...

webpack entry index.html 에 link된 css 파일이 번들링되지 않아 고생했다. webpack의 entry를 수정하면 원하는 파일을 추가하여 번들링할 수 있다. entry의 프로퍼티 값을 배열로 설정할 수 있다는 걸 몰랐었다. module.exports = { //... entry: { main: ["./pub...

MiniCssExtractPlugin 번들링 할 때 css를 js 파일에 포함시키지 않고 따로 파일을 분리할 때 사용하는 플러그인이다. dist 폴더에 js 파일과 css 파일이 각각 따로 생성된다. linkType, filename 등의 옵션을 설정할 수 있다. Install npm install --save-dev mini-css-extr...