Next.js + Typescript + Styled-components + Jest 환경 구축하기

Next.js 설치하기

일단 Next.js부터 설치하고 봅니다. React처럼 그냥 create-next-app을 사용하면 됩니다.

Docs문서를 보고 따라했습니다.

npx create-next-app coinss

Install next, react and react-dom in your project:

npm install next react react-dom

이제 실행시켜봅시다.

cd coinss
npm run dev

TypeScript 연동하기

Next.js 홈페이지에서 제공하는 Typescript 연동 튜토리얼
다음을 보고 따라했습니다. 확실히 공식문서를 보고 따라하는게 젤 정석이겠죠?

create an empty tsconfig.json file in the root of your project:

touch tsconfig.json

Follow the instructions to install TypeScript:

npm install --save-dev typescript @types/react @types/node

이렇게 설치하고 npm run dev로 실행을 한번 시켜줘야 tsconfig.json에 옵션이 들어갑니다.

그리고 추가로 _app.tsx 도 만들어줍니다.
_app.tsx는 모든 컴포넌트에 적용되는 컴포넌트라고 보시면 됩니다.

// import App from "next/app";
import type { AppProps /*, AppContext */ } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

export default MyApp

styled-components 적용하기

styled-components는 CSS in JS 기술입니다. 자바스크립트 안의 CSS랄까... SCSS문법도 지원해줘서 편리한 것 같습니다.

npm install styled-components
npm install -D @types/styled-components babel-plugin-styled-components

설치 해주고 프로젝트 최상위 디렉토리에 .babelrc 파일을 추가해줘야 합니다.

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

그리고 각 파일에서 import해서 사용해주면 됩니다.

import styled from 'styled-components';

const Title = styled.div`
	color: red;
`

** Next.js에서는 styled-component가 렌더링 되면서 적용이 안되는 버그가 존재합니다. 이는 초기에 렌더링 될 때 SSR로 렌더링되어서 발생하는 문제라고 하는데요..

page/_document.tsx 파일을 만들어 해결해줄 수 있습니다.
_document.tsx파일은 SSR렌더링 할 때만 호출된다고 합니다.

import Document, { DocumentContext } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

class CustomDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } catch (error) {
      throw error;
    } finally {
      sheet.seal();
    }
  }
}

export default CustomDocument;

Jest 적용하기

Next.js와 TypeScript, Jest를 같이 쓰는 경우를 찾아봤는데 진짜 영어문서밖에 보이더라구요. 거기다가 영어 문서들은 뭔가 설명도 제대로 되어있지않고, 그대로 따라했는데 오류도 잔뜩나서 몇번을 지웠다가 다시 깔았습니다. ㅜ
지금 package.json을 보면 쓸모없는 모듈을 잔뜩 깔아둬서 안쓰는게 뭐인지 모르겠네요 ㅜㅜ

어쨋든 결국 Test하는 Jest는 TypeScript로 돌아가는 것이었기 때문에 Typescript로 jest를 실행시키는 방법을 찾아서 실행해보니 잘 돌아갔습니다.

일단은 Jest를 깔아봅니다.

 npm install --save-dev jest

이후 Jest를 Typescript에서 사용할 수 있게끔 ts-jest와 간단하게 요청을 테스트할 수 있는 supertest 모듈, jest의 type 모듈을 설치합니다.

npm install --save-dev ts-jest supertest @types/jest jest typescript

TypeScript에서 정상적으로 Jest를 작동시키기 위해 package.json에 몇가지 설정을 추가해줍니다.

{
    "jest": {
        "transform": {
            "^.+\\.ts$": "ts-jest"
        },
        "testRegex": "\\.test\\.ts$",
        "moduleFileExtensions": [
            "ts",
            "tsx",
            "js",
            "json"
        ],
        "globals": {
            "ts-jest": {
                "diagnostics": true
            }
        }
    },
}

위 코드를 추가해주고 scripts에도 실행명령어를 추가해줍니다.

{
    ...
    "scripts": {
        "test": "jest --detectOpenHandles --forceExit"
    },
}

express는 listen하면 이벤트가 계속 열려있어 종료되지 않는 문제가 생깁니다.

그래서 —detectOpenHandles 로 열려있는 리소스를 모두 닫아주고, —forceExit로 테스트가 끝나면 강제 종료를 해주는 옵션을 추가합니다.

Jest 기본 사용법

실행시킬 Test폴더를 하나 만들고 그안에 {파일이름}.test.ts 로 이름을 짓는것이 룰입니다.

// test/app.test.ts
test('did it run', () => {
  expect(itWillBe()).toBe(0);
})

이러면 itWillBe라는 함수가 0을 리턴하면 테스트가 통과하게 됩니다.
itWillBe 함수를 대충 위에 만들고 실행시켜봅니다.

실행은 다음명령어로 실행해줍니다.

npm test

다음과 같이 pass되며 잘 작동하는 지 확인해줍니다.

진행하면서 어려웠던 점

커뮤니티? 포스팅 수가 훨씬 적어진다는 점..
마치 대학교에서 교과서로 공부하다가 점점 전문적인 영역으로 갈수록 논문을 읽으며 공부해야하는 것처럼,,
분명 Javascript 부분은 책도 많고, 설명해주는 블로그나 글도 많습니다. 근데 React.js로 가면 조금씩 줄어들고, Typescript로 가면 더 줄어서 영어로 된 블로그가 더 많아지고, Next.js와 TypeScript부분은 한글로 된 블로그를 찾기가 힘들어집니다. 화룡점정으로 Jest까지 쓰려하면 진짜 한글문서가 없어요 ㅋㅋㅋ Next.js는 진짜 그냥 docs를 보면서 개발하는게 나을 것 같다는 생각을 했습니다.

훨씬 어려운 여정이 될 것 같네요. TypeScript + React도 익숙하지않아서 일단 공부부터 하고 진행해야 할 것 같아요 ㅎ