lou@blog $ _

styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다. babel-plugin-styled-components 설치 먼저 babel-plugin-styled-components를 설치한다. yarn add babel-plugin-styled-components .babelrc에서 SSR를 사용하도록 설정 .babelrc에는 ..

Next.js에서 제공하는 Image 컴포넌트를 사용해서 이미지 로딩을 하는 중, 거의 700ms 정도에 육박하는 충격적인 로딩속도를 보여주어서 구글링 해봤다. 이건 Image 컴포넌트가 사용하는 기본 이미지 프로세서 때문이라고 하는데, sharp 패키지를 설치하면 해결된다. 패키지를 설치하면 정말 빠르게 이미지가 로딩되는 것을 확인할 수 있다. yarn add sharp

환경변수를 프론트에서 사용하려 했을때 .env.*에 선언되어있음에도 불구하고 undefined로 나올 것이다. 다음과 같이 환경변수가 선언되어있다고 가정하면, MY_NAME="lou" Next.js Version 9.4 이상 Next.js 버전이 9.4+ 인경우, 환경변수 이름에 NEXT_PUBLIC_을 프리픽스(prefix) 붙여주면 사용가능해진다. 따라서, MY_NAME 환경 변수명을 NEXT_PUBLIC_MY_NAME으로 바꾸어준다면 해결된다. Next.js Version 9.4 미만 그렇지 않을 경우 next.confg.js에 사용할 환경변수를 설정해주어야한다. module.exports = { env: { MY_NAME: process.env.MY_NAME, }, }

오래전에 배워 손에 익은 jQuery를 놓치못하던 틀딱같은 나... 웹 개발은 재미없기도하고 개인 프로젝트나 정말 잠깐잠깐 회사에서 바쁠때 도와주는 식으로만 건드려서 제대로 해볼 생각이 없었다. 특히 React의 useXXX는 처음 시작하는 사람을 어질어질하게 만드는 면이 있다. 그렇게 흥미를 잃고있던 와중 아는분이 심리테스트를 만들어보고싶다고 얘기해서 이참에 요새대세 Next.js로 도와줘볼까? 해서 시작하게되었다. 심리테스트라 난이도도 어렵지 않고 돈벌려고 하는 것도 아니니 github에 오픈소스로 공개해서 정리도 제대로 해보려한다. https://nextjs.org/learn/foundations/from-javascript-to-react 역시 공식이 최고지! 아직도 전통적 방식의 html/css..