문제 github 블로그에 포스트를 push 했는데 몇 시간이 지나도 블로그가 업데이트 되지 않았다. github 서버 문제인 줄 알고 기다렸지만 며칠 뒤 확인해도 포스트가 올라오지 않았다..;; 메일함을 보니 블로그에 push할 때마다 ‘Page build failure’ 라는 메일이 와 있었다. jekyll 관련 파일을 수정한 적도 없고, ...

clearfix 요소에 float 속성을 사용하면 height 영역이 생기지 않기 때문에 뒤에 float이 아닌 요소가 오면 겹쳐지게 된다. float 요소들의 부모 요소의 가상선택자에 아래 clearfix 속성을 설정하면 요소들만큼의 height 영역을 차지하게 된다. content: ""; clear: both; display: block...

BEM이란? 블록 내 블록 중첩을 위한 구조로 HTML에서 수행하는 역할에 따라 CSS 클래스의 이름을 지정하는 방법이다. Block, Element, Modifier로 구성된다. Block 블록의 기준은 무엇인가? 독립적으로 재사용 가능한 컴포넌트 단위, html 기준으로 특정 기능을 감싼 부분 (wrapper)을 Block으로 이해할 ...

클래스형 컴포넌트 state, 라이프 사이클 기능이 있다. render 함수를 반드시 사용해야 한다. 함수형 컴포넌트 state, 라이프 사이클 기능이 없다. 리액트 16.8부터 hook을 이용해 위 기능을 구현할 수 있다. 클래스형 컴포넌트보다 메모리를 적...

설치 새로운 앱 만들기 npx create-react-app learn-redux redux 설치 yarn add redux 파일 만들기 테스트 파일 생성 src 경로에 test.js 파일 생성 상태 정의 const initialState = { counter: 0, text: "", list: [], }; 액션 타입...

구성 Action 상태를 변경시킬 때 객체 타입의 액션을 발생시킨다. 액션 객체는 type 필드를 필수적으로 포함해야 하며, type은 작업을 설명하는 이름을 제공하는 문자열이어야 한다. ex) todos/todoAdded 일반적으로 슬래시 기준 첫 번째 값은 이 작업이 속한 기능 또는 범주이고 두 번째 부분은 발생한 특정 일이다. 이 외에 ...

의문의 시작 보통 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...