Like Goseungduk

styled-componets 와 next.js 을 사용하여 개발하다보면 PropclassNamedid not match 라는 오류를 본 사람이 있을 것이다. 오류가 발생함과 동시에 페이지의 CSS 가 다 풀려버리는 경우가 생기는데, 서버사이드로 렌더링되는 next.js 쪽 파일과 클라이언트 사이드에서 렌더링 되는 styled-components 의 css 의 className 이 불일치해서 생기는(?) 문제라고 한다. 이를 일관성 있게 만들어주려면, _document.tsx 를 만들어주어야하고 babel-plugin-styled-components 을 사용하여야한다. yarn add -dev babel-plugin-styled-components 일단 설치해주고, 바벨 옵션이 적용되도록 루트 디렉토리에..

ESLint : Javascript 파일 및 JSX(TSX) 파일에 대한 문법 감시 도구. 문법에 맞지 않는 코드, 참조되지 않는 변수 등등을 감시하여 정해진 기준에서 벗어난 코드를 쓰지않도록 도와주는 길잡이 역할을 함. Prettier : 코드의 들여쓰기를 비롯한 여러 심미적 요소들을 코드 developing 하는데에 있어서 더 효율적일 수 있게 만들어줌. 말 그대로 코드를 이쁘게 만들어쥼. VS CODE 확장 프로그램에도 있숨. yarn --dev add eslint prettier yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser yarn add --dev eslint-config-prettier eslint-plug..