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..

#한국전력 #전력데이터활용 신서비스 개발경진대회 글을 굉장히 오랜만에 쓴다... 써야지 써야지 다짐하지만 글 하나쓸때 대충쓰고싶지 않다는 핑계로 계속미루는 듯하다. ㅋㅋ 정말 바쁜 2학기를 보내고 있는데, 하반기 시작하면서 진행했던 대회 수상 소식을 매~우 늦게나마 적어본다. 7월 말에 전역하고 좀 쉬어볼까 하다가 접수마감이 얼마 남지 않은 대회에 대해서 듣게 되었다. 접수기간이 04/15 ~ 06/14 였는데, 아마 6월 1일 쯤에? 소식을 듣고 부랴부랴 프로젝트 컨셉을 준비했던 것 같다. 정확히는 재생에너지 발전량 예측제도 를 시행할 때 쓰일 서비스를 제작하는 것이었다. 제도 시행의 배경에는 재생에너지(풍력, 태양열, 수력 등등)의 과발전(?)으로 인해서 설비를 설치하고도 가동을 안하는 날이 많은 것..