✅ 방법

총 세 가지 지점의 세팅이 필요하다.

1. Webpack
2. Typescript
3. Eslint

1. Webpack

ignore-loader - npm 를 사용한다. 패키지명대로, 웹팩 빌드(를 위한 로드) 시 특정 파일을 무시하게 도와주는 라이브러리이다.

NextJS의 웹팩 설정은 next.config.js를 통해 변경할 수 있다.

// next.config.js
const nextConfig = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: //\/src\/_deprecated\/./*/$//i, 
      loader: 'ignore-loader',
    });
    return config;
  },
};

• loader: 어떤 로더를 적용할 지 적는다. 참고로 꼭 로더 패키지를 설치해주어야 한다!
• test: 로더를 적용하고 싶은 파일들과 매치하는 정규표현식을 적는다. 나 같은 경우 src/_deprecated 폴더를 제외시키고 싶었기 때문에 위 코드와 같이 기입했다.

2. Typescript

TSC(TypeScript Compiler)가 내가 원하는 폴더를 컴파일하지 않도록 하면 된다. tsconfig를 수정한다.

{
	...,
  "exclude": [ ..., "src/_deprecated"]
}

exclude 프로퍼티에 폴더의 경로를 기입한다.

3. ESlint

마지막으로, Eslint가 이 폴더에 대해 린팅을 하지 않도록 설정한다. eslintrc를 수정한다.

module.exports = {
  ...,
  ignorePatterns: ['src/_deprecated'],
};

ignorePatterns 프로퍼티에 폴더 경로를 기입한다.

🐢 과정

문제 정의

이번에 NextJS로 마이그레이션 하는 과정에서 react-router-dom을 제거하게 됐다. 현재 사용되지 않는 이전 스프린트 코드들을 _deprecated 폴더에 모아두었는데, 패키지를 제거하자 해당 폴더의 코드들이 에러를 뿜어냈다. 이 에러들로 인해 빌드가 불가능했다.
그러나 이전 코드를 재활용할 가능성이 있어서 삭제할 수 없는 상황. 빌드 시에 이 폴더를 제외하는 방법을 찾아야 했다.

삽질 과정

온갖 영어, 한국어 키워드로 구글링을 해봤지만... 답이 나오지 않아서... 삽질을 할 수 밖에 없었당...
우리가 사용하는 NextJS, vscode, TSC 등등의 도구들은 우리의 생각보다 훨씬 많은 일들을 해주고 있다. 개발자가 코드를 작성하는 동안 뒷단에서 어떤 일들이 일어나고 있는지 개발자인 나는 완벽히 이해할 수가 없다.

이 문제가 어려웠던 이유도 유사한 맥락이었다. 빌드 명령어를 입력하면 여기 저기서 온갖 에러를 뿜어대는데, 대체 어디서 누가 어떤 설정 파일에 의해 에러를 발생시키는건지 를 알기가 어려웠다. 그래서 직접 에러 로그를 분석하고, 몇몇 파일들을 폴더에서 제외시켜보고, 구글링을 하면서 감을 잡아갈 수밖에 없었다.

그 결과, 에러가 크게 세 가지로 나뉘는 걸 알 수 있었다.

1. Eslint의 import/named rule이 내는 에러
2. TSC가 타입스크립트를 자바스크립트로 컴파일하는 과정에서 내는 에러
3. NextJS가 빌드하면서 내는 에러
   3-1. NextJS가 pages 폴더에 대해 내는 에러

무려 세 가지 주체가 뒤섞여 한 덩어리의 에러를 내고 있었다. 그 중 tsconfig, eslintrc는 이전에 공부하고 건들여본 적이 있던 터라 내가 원하는대로 수정하기 쉬웠다. 문제는 웹팩이었다. NextJS가 빌드 시 사용하는 웹팩 설정을 건들여야 하는데. 우선 웹팩이 무엇인지에 관한 이해가 없었고, 웹팩의 어떤 부분을 건들여야 하는지는 더더욱 알기 어려웠다. 하나 더 나아가서 NextJS의 웹팩 설정은 어디에 기입되어 있으며, 이를 수정하는 방법을 알 수 없었다.

웹팩 전체를 공부하는 것보다 NextJS의 웹팩 설정을 보면서 뭘 수정해야 할 지 파악하는 게 빠를거라는 🥝님의 조언이 있었다.

// next.config.js
const nextConfig = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
	  console.log(config); // 로그에 config를 찍어보면 된다.
    return config;
  },
};

module.exports = nextConfig;

로그에 찍힌 config 객체와 웹팩 공식문서를 번갈아 보면서 각 프로퍼티의 의미를 알음알음 이해했다. 그러다 내가 원하는 바는 로더와 관련 있을 것 같다는 직감이 왔고, 무한 구글링을 하다 마주쳤던 ignore-loader를 떠올렸다.

또한 NextJS는 file-system에 기반한 라우팅을 하기 때문에, pages 폴더를 특별취급한다. pages폴더 내의 파일들을 모두 페이지 컴포넌트로 간주하기 때문에, 각 파일을 페이지로 빌드하고자 한다. pages폴더의 하위 폴더를 빌드로부터 제외시키는 방법은 존재하지 않았다.

이에 따라 내가 선택할 수 있는 방안은 두 가지였다.

1. src/pages/_deprecated, src/components/_deprecated 폴더를 src/_deprecated 로 이동
2. page extensions 사용하기

두 방안을 🥝님께 말씀드렸고, 첫번째 방안으로 결정했다.
src_deprecated 라는 경로를 NextJS config, tsconfig, eslintrc에 기입함으로써 문제를 해결할 수 있었다.

느낀 점

상황에 맞추어 어떻게든 해내야 하는 상황에서 배울 수 있는 것들이 많다. 머리 터질 뻔 했지만 대략 4시간만에 공부와 해결을 둘 다 해내서 뿌듯했다.

이번 문제를 해결하면서 내가 이해한 웹팩은 다음과 같다.
웹팩은 엔트리(진입점) 파일에서 시작해서 타고타고 들어가며, 어플리케이션을 만들기 위해 필요한 모든 모듈들을 찾아나간다. 그 모든 것들을 모으고 연결해서 executable한 형태의 어플리케이션을 완성한다. 모으고 연결하는 과정에서 바벨과 같은 여러 도구들을 사용한다.

이름에 힌트가 있다! pack = 무언가를 싸다, 포장하다