지우기 쉬운 코드 (feat. Next.js 페이지 라우팅)

한줄요약

하나의 페이지에서만 사용되는 컴포넌트나 함수라면 해당 페이지 폴더안에 모아놓자

좋은 코드란 무엇인가

개발자마다 기준이 다를 수 있겠지만, 필자는 최근 좋은 코드에 대한 새로운 기준이 하나 생겼다.

바로 "지우기 쉬운 코드"이다.

예를들어, 이벤트 프로모션 페이지 구현을 요구 사항으로 받는다고 생각해보자. 물론 해당 페이지는 재활용할 수도 있겠지만, 비즈니스 요구 사항에 따라 몇 일 후면 영원히 삭제해야 될 수도 있다.

후자를 위해 지우기 쉬운 코드를 작성해야 한다는 뜻이다.

지우기 쉬운 코드

그렇다면 지우기 쉬운 코드란 무엇인가?

흔히 말하는 "결합도"가 낮은 모듈을 만듦으로서 지우기 쉬운 코드를 만들 수 있다고 생각한다.

극단적으로 말하면 페이지 디렉토리를 싹 다 날려버려도 괜찮을 만큼 결합도를 줄일 수 있다.

Next.js > 페이지 라우팅을 기준으로, 이벤트 페이지에 해당하는 page 폴더 안에 /components, /types, /utils 등 해당 페이지에서만 사용되는 모듈들을 모아 놓는것이다.

한마디로, 사용하는 쪽 가까이에 배치하는 것이다.

실제로 적용해보기

최근 진행 중인 영화 스트리밍 웹사이트 프로젝트에서 이를 적용해보았다.

문제는 next.js의 pages 디렉토리에는 "페이지" 컴포넌트만 있어야 한다는 것.

개발 서버 localhost에서 실행할 때는 문제가 되지 않았지만, production 배포 시 다음 에러와 함께 배포가 중단된다:

Build optimization failed: found pages without a React Component as default export in

물론 각 컴포넌트, 타입, 훅들을 pages 폴더 밖으로 꺼낼 수도 있었다.

하지만 domain-specific한 모듈을을 한 군데 보관하고, 사용하는 곳 근처에서 관리하는게 유지보수 이점이 있을 것으로 판단하였다.

🍀 해결: next.config.js에 간단히 다음 설정을 추가하였다.

pageExtensions: ['page.tsx', 'page.ts']

그리고 실제 "페이지"로 렌더링 되어야 할 파일들을 위 포맷으로 바꾸어 주었다.

여기서 주의할 점은 _app.tsx, index.tsx 등도 바꿔줘야 한다 (_app.page.tsx, index.page.tsx).

그리고 tailwind도 바로 먹히질 않아서 한 줄 더 추가해줘야 한다:

// tailwind.config.js
 content: [
    './pages/*.page.{js,ts,jsx,tsx,mdx}', <-- 추가!
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],