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 일단 설치해주고, 바벨 옵션이 적용되도록 루트 디렉토리에..

#AWS #React #Nginx ※ 본 글은 [AWS EC2] EC2에 React 앱 + Node.js 서버 배포 2 - Nginx + React 글을 출처로 하여 작성합니다. 오랜만에 개발로 글쓴다 :) 요즘은 개발 일 투성이라 백/프론트에 몰두 하고있다. 여태까지는 React 로 개발하면서 디버깅 모드로 그냥 로컬에서 끄적이면, PM 하시는 분이 알아서 배포해주셔서 "음, 잘돌아가눈군" 하고 말았었는데 요번에는 내가 개발과 더불어 배포까지 맡게 되면서 부랴부랴 AWS 에 배포하는 방법을 찾아보았다. 그래서 찾아본게 AWS EC2 + Nginx 조합이다. 보안하면서는 웹서버로 Nginx 보다는 apache,tomcat 부류를 볼일이 많았는데 개발 쪽에서는 Nginx 가 상당히 가볍고(?) 편해서 많이..

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

.container { display: "flex" ... } 가로, 세로 축 정렬을 할 때 flex display 방식을 많이 썼는데 갑자기 justify-content 가 제대로 작동을 안했던 일 때문에 찾아봄. justify-content property isn't working 결론적으로는 flex 내부 아이템들이 고정되고 나서도 밖의 컨테이너와의 남은 여백이 있어야 justify-content 가 잘 작동한다는 당연한 사실이었다. 자세한 이유는 아래와 같다. if your flex items are all inflexible (flex: none or flex: 0 0 auto), and smaller than the container. if your flex items are flexi..