Next.js 시작하기 - 프로젝트 세팅 (2)

React Hook Form 설치하기

https://react-hook-form.com/

React Hook Form - performant, flexible and extensible form library

 

React Hook Form은 기존의 form 테그를 리액트에서 훨씬 편리하게 사용할 수 있도록 기능을 제공해준다. 또한 html form 테그를 사용할 때 submit을 한 뒤 페이지가 refresh 되는 현상이 발생하지 않는다. 이외에도 에러 문구를 처리하거나 submit 충족 조건을 설정하는 것 등에 대하여 다양한 기능을 제공해준다. (성능 최적화, Hook 기반 사용 등등등)

 

input을 통해 데이터를 받고 submit을 하는 form 형태의 코드는 모두 React-Hook-Form을 통해 처리하면 좋다.

 

주로 사용되는 기능들은 다음과 같다.

• register - input 필드를 React-Hook-Form과 연결하여 유효성 검사 규칙을 설정할 수 있는 함수
• handleSubmit - submit 이벤트를 처리한다.
• formState - 폼의 상태 정보를 제공한다.
• setValue - 초기 데이터를 설정하는 등 입력 필드 값을 동적으로 설정 가능하다.
• getValue - 현재 폼의 모든 입력 필드값 가져옴
• watch - 특정 입력 필드값 감시
• reset - 폼의 입력값 초기화

설치 방법

npm install react-hook-form

 

위와 같이 명령어를 작성해주면 react-hook-form 라이브러리 설치가 가능하다. 우선은 전체적인 프로젝트 세팅을 먼저 진행하는 것이 목표이기 때문에 각각의 라이브러리에 대한 사용 방법에 대해서는 추후 다시 언급할 예정이다.

 

MSW 설치하기

Mock Service Worker의 약자이다.

개발을 하다 보면 백엔드 API가 개발되지 않은 상태로 프론트엔드 개발을 수행해야 할 때가 많다. 사실상 api를 연결해야 동작하는 기능들이 많을 경우, API가 준비되기 전까지 아무것도 할 수 없어 시간만 보내게 되는데 MSW를 활용하면 API가 개발되는 동안 임시 데이터로 동작할 수 있다.

Service Worker API를 활용하여 실제 요청을 가로채는 역할을 수행한다. 이번 프로젝트는 별도의 백엔드를 개발할 생각은 없지만 api는 사용하고 싶은 마음에 msw를 사용하기로 했다. 

백엔드에서 API가 완료될 때 까지 아무것도 못하는 상황을 해결해준다. 그런고로, 백엔드가 없어도 개발을 계속할 수 있는 것이다.(아무튼 돌아감)

 

설치 방법

msw는 최근 2버전이 출시되었다. 때문에 업데이트된 Next.js 14 버전에서 해당 MSW 2버전을 설치하고 사용하려 할 경우 계속해서 에러를 발생시키는 일이 종종 나타났다. 1version과 2version은 코드 사용에 있어서 차이점이 있으니 2version을 설치해보고 제대로 라이브러리가 import되지 않는 문제가 발생한다면 1 version으로 낮춰 사용하는 것을 권한다.

이 프로젝트에서는 처음부터 1 version을 사용할 예정이다.

npm install -D msw@1.3.2

 

이후, scr 디렉토리 하위에 mocks 디렉토리를 생성하며 가로챌 api를 선언할 수 있는 handlers.ts 파일을 생성한다.

// src/mocks/handlers.ts

// import
import { rest } from "msw"; // msw 1.0v 기준

export const handlers = [
  // mock login
  rest.post("http://localhost:3000/login", (req, res, ctx) => {
    return res(ctx.status(200), ctx.json({ message: "Login successful" }));
  })
];

 

그 뒤, src/app/layouts.tsx 파일에 해당 handler를 사용할 수 있도록 한다.

"use client";

// import에 추가할 항목
import { setupWorker } from "msw";
import { handlers } from "@/mocks/handlers";

// msw mocking
useEffect(() => {
    if (typeof window !== "undefined") {
      const worker = setupWorker(...handlers);
      worker.start();
    }
}, []);

이때 MSW와 같은 경우, 기본적으로 SSR에서 동작하기 위해서는 msw/node를 별도로 세팅하여 사용하는 것이 일반적이지만, Next14에서 해당 세팅을 적용하려 할때 msw가 동작하지 않는 문제가 발생한다.

이와 관련하여 정말 다양한 방법들을 시도한 끝에 유일하게 동작하는 방법은 위와 같이 use client와 useEffect를 사용하는 방법이었다. msw의 worker는 클라이언트 컴포넌트이지만 next.js는 서버 컴포넌트 기반이기 때문에 worker를 찾을 수 없는 문제로 제대로 동작하지 않는 것이다.

 

때문에 use client를 통해 해당 컴포넌트가 클라이언트 컴포넌트로 동작하게 한 다음, useEffect를 통해 해당 컴포넌트가 랜더링되는 시점에 worker를 시작하게 하여 정상적으로 동작할 수 있도록 하는 방법을 사용했다.

 

마지막으로 아래의 명령어를 통해 mockServiceWorker.js 파일을 생성하면 기본적인 동작 세팅이 완료된다.

npx msw init public/

 

이제 npm run build 후 npm run start를 한다. 아래와 같이 콘솔 창에 나타나면 성공적으로 msw가 동작하는 것이다.

해외 사이트들도 Next14와 MSW 호환 문제에 대해서는 별다른 해결책이 없어 보이며 우선은 use client와 useEffect를 사용하여 MSW를 사용한 뒤 추후 제거할 필요가 있다.

 

어디까지나 해당 기능은 개발의 편의를 위한 것이며 실제 배포에는 사용되지 않을 기능이다보니 어떻게든 동작만 한다면 크게 문제될 부분은 아니다.