Next.js 시작하기 - 프로젝트 세팅 (3) Zustand/Typescript+Jest/MUI

Zustand 설치

상태 관리 라이브러리는 Redux를 많이 사용하지만 Zustand는 학습 난이도가 높지 않고 간편하게 사용할 수 있다는 장점으로 인해 개인 프로젝트에서는 Zustand를 자주 사용한다.

 

Zustand의 특징

• 간결하고 직관적인 사용 방법
• Hook 기반 API
• 중앙집중식 상태 관리 제공
• 컴포넌트 최적화

 

zustand는 아래의 명령어를 통해 설치 가능하다.

npm install zustand

 

zustand 공식 사이트에서 zustand는 다음과 같이 사용할 수 있다.

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

Jest 설치

Jest는 Javascript 테스트할 수 있는 기능을 제공한다.

 

한 가지 설치를 통해 Test Runner, Test Mock, Test Matcher을 모두 사용 할 수 있기 때문에 프론트엔드 뿐만 아니라 백엔드에서도 많이 사용되는 라이브러리이다.

 

Jest는 아래의 명령어로 설치가 가능하다.

npm install -D jest @types/jest ts-jest

 

jest를 설치하였으니 package.json과 동일한 위치에 jest.config.js 파일을 생성하여 아래의 코드를 넣는다.

module.exports = {
	preset: 'ts-jest',
	testEnvironment: 'node',
};

 

이때, Typescript에서 jest가 동작할 수 있도록 하기 위해서는 추가적인 설정이 필요하다.

아래는 babel을 커스터마이즈할 때 필요한 라이브러리들이지만, 기본 babel 세팅을 사용할 경우에는 필요없는 라이브러리이다.

npm i -D babel-jest @babel/core @babel/preset-env

 

 

React에서는 이후 Babel을 생성하여 추가 세팅을 하지만, Next.js는 기본적으로 Babel 설정을 가지고 있다. 커스텀한 babel을 적용하는 것 또한 가능하지만 이 경우 예상치 못한 부수적인 에러가 발생된다. React와 달리 별도로 설정하지 않아도 정상적으로 돌아간다.

이제 next.config.mjs를 열어 다음과 같이 코드를 수정한다.

/** @type {import('next').NextConfig} */
import { withJest } from 'next/jest';

module.exports = withJest({
	transform: {
		'^.+\\.(ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
	},
});

 

마지막으로 jest가 실행될 수 있도록 package.json에 scripts를 추가한다.

"test": "jest",

 

Jest 실행해보기

제대로 세팅이 완료되었는치 체크해보기 위해 샘플 함수를 생성해보도록 하자.

// src/components/sample.ts

const sum = (a: number, b: number) => {
	return a + b;
};

export default sum;

 

jest로 테스트하고자 하는 테스트 파일을 생성할 때, 간단히 파일명에 test를 넣으면 자동으로 테스트 대상이 된다.

// src/components/sample.test.ts
import sum from './sample';

describe('sum', () => {
	test('adds 1 + 2 to equal 3', () => {
		expect(sum(1, 2)).toBe(3);
	});

	test('adds 5 + 7 to equal 12', () => {
		expect(sum(5, 7)).toBe(12);
	});
});

 

이제 npm run test를 했을 때 아래와 같은 결과가 나오면 성공이다.

Test가 정상적으로 실행되었을 경우

MUI 설치

MUI는 리액트 컴포넌트 라이브러리의 일종이다. 깔끔한 디자인의 컴포넌트를 자유롭게 사용할 수 있고, 리액트와의 호환성이 좋기 때문에 해당 라이브러리를 사용하기로 했다.

 

Material UI는 아래의 명령어로 설치할 수 있다.

npm i @mui/material-nextjs @mui/icons-material @emotion/styled @emotion/react @emotion/cache

 

이때 @emotion/styled와 같은 경우, 개발자가 styled된 컴포넌트를 직접 생성하여 사용할 수 있도록 하는 라이브러리이다.

 

프로젝트 세팅 마무리

이제 전체적인 기본 라이브러리 세팅이 끝났다.

 

다음 포스팅에서는 간단한 login 창을 react-hook-form을 활용하여 만들어볼 예정이다. 첫 번째 컴포넌트와 기능, 페이지들을 만들면서 nextjs의 라우팅 방식과 함께 f-lab에서 프로젝트를 진행하면서 배운 프로젝트 세팅 규칙에 관한 이야기도 시작해볼 예정이다.