[Next.js + TS] today i learned 7/24: 개발용어사전 프로젝트 초기 세팅

음 슬랙 클론코딩 강의를 마치고, 이제 본격적으로 한달?여간 Next.js + TypeScript를 사용한 프로젝트를 진행해보고자 한다. 근데, 시작부터 뭔가 이상한게..

이렇게 메인에 styled-components를 작성하려고 했는데 갑자기 계속 Invalid Hook Call 에러가 뜨는 것이었다. 그래서, 이유를 찾아봤더니.. styled-components를 설치할 때

npm install --save styled-components
npm install --save @types/styled-components

로 깔아줬는데 이 --save 부분 때문에 제대로 설치가 되지 않은 것 같다. 스택오버플로우를 참고하면, npm 5.0.0 버전부터 --save의 역할을 그냥 install도 하게끔 바뀌었다고 한다. 그래서 문제였나 싶고.. 결국 다시 save를 제외한

npm i styled-components
npm i @types/styled-components

styled-components와 그에대한 타입들을 설치해준 결과 잘 실행이 되었다. 그런데, 렌더링 직후에 styled-components가 적용이 되지 않는 문제가 생겼다. 그래서 찾아보니까, 문자열 안에 스타일이 들어가는 경우는 또 따로 babel이 필요했다.

 

그래서 babel-plugin-styled-components를 다운받고 루트 디렉토리에 .babelrc를 작성해준 뒤 다음과 같은 내용을 넣어주었다.

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "styled-components",
      {
        "ssr": true,
        "displayName": true,
        "preprocess": false
      }
    ]
  ]
}

이렇게 처리를 해주니 되어서, 시험삼아 HomeWrap과 Main을 각각 만들고 스타일 반영을 해준 뒤 렌더링을 해줬다.

 

이외의 일부 설정을 해줬고, 전역적 styled-components 설정 및 외에 기타 세부 설정은 이후에 할 예정이다.