[ 프로젝트 ] typescript + next

지금까지의 이야기

webpack + react + typescript 설정을 열심히 할고 있었는데 문제가 생겼다.

상황을 설명하자면, 설정이 끝나고 기본적인 디렉토리들을 설정하기전에
next를 설치하였다.
그 이후 pages 디렉토리에 index.tsx를 만들고, 어떻게 될까...? 하는 가벼운 마음에 next를 실행시켰다.

그런데.....

next가 .tsx파일을 자동으로 인식하고, tsconfig.json을 발견해서 필요한 설정을 호로록😅 해버리는게 아닌가.

매우 당황스럽다.
그리고 이 과정에서 next가 webpack 설정을 내장하고 있다는 것도 확실하게 깨달을 수 있었다.
자, 그럼 별 수 없다.

다시 시작!!

우선 next가 자동으로 설정한 것이 무엇인지 알아야한다.

안내 메시지를 보면 크게 추천 사항과 필수 사항으로 나누어질 것이다.

- 추천 사항 상세:

1. lib

   참고
   next가 자동으로 설정한 것들은 tsconfig.json의 target에 ES6가 할당되어 있으면 자동으로 불러지는 라이브러리들이었다.

   이 lib 설정에 들어간 값들에 대응하는 lib 파일이 TS안에 내장되어 있다. 이 파일들은 ECMAScript 규격에 정의된 자바스크립트 객체들에 대한 인터페이스들이 정의되어 있다.

   DOM은 Web API interaces들이다.
   DOM.iterables는 코드를 보니 말그대로 'iterables'를 모아둔 것으로 보인다.

2. allowJs

   Allow JS는 .ts나 .tsx 파일들 외에 .js파일들이 함께 있을 것인지?에 대한 설정이다.

   나는 우선 이 설정은 지우고 시작해야겠다. 최대한 ts 파일로 구성하려고 한다. (JS파일을 사용할 일이 있다면 그때 다시 설정하는 것으로 하자.)

3. noEmit

   typescript 공식문서
   JS로 컴파일을 실시하지 않는다. (서버를 만들 때 tsc하면 js파일들이 주루륵 생성이 되었었는데 이걸 하지 않는다.)
   공식문서를 보면 다른 도구들이 Typescript 파일을 활용할 수 있게 해준다고 한다. next.js가 타입체킹을 하고 페이지 구성등을 실시하기 때문에 noEmit 옵션을 true로 설정하는 것이 맞는 것으로 보인다.

4. include

   이 옵션은 그대로 두기로 했다. 있어도 없어도 크게 상관이 없다.

- 필수 사항 상세:

1. resolveJsonMoudle

   typescript 공식문서
   JSON파일을 그대로 import 할 수 있게 하는 옵션이다.

   터미널에 나온 메시지를 보면 to match webpack resolution이라고 되어있다.

2. isolatedModules

   이해하는 데에 좀 걸렸다. (아직 정확하게 아는 것 같지는 않다.)
   이해한 바에 따르면, enum이나 namepace와 같이 non-local한 정보를 필요로 하는 기능을 막는 것이라고 한다.

   예를 들어서,

// ./src/fileA.ts

export declare const enum E {
    A = 0,
    B = 1,
}

// ./src/fileB.ts

import { E } from "./fileA";

console.log(E.A);
//          ~
// error: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

는 에러를 뱉는데, 그 이유는 E.A가 어떤 값을 갖고 있는지 알기 위해서 fileA.ts의 내부로 들어가야하기 때문으로 보인다.

터미널에 나온 메시지를 보면 requirement for babel이라고 되어있다.
이는 babel이 저런 non-local한 정보를 사용하지 못하기 때문이겠다.

3. jsx

   이 옵션은 좀 명확하다.
   Controls how JSX constructs are emitted in JavaScript files. This only affects output of JS files that started in .tsx files.

   각 옵션마다 다음과 같은 작동을 한다.

   • react: Emit .js files with JSX changed to the equivalent React.createElement calls

   
   

   • react-jsx: Emit .js files with the JSX changed to _jsx calls
     
     

   • react-jsxdev: Emit .js files with the JSX to _jsx calls
     
     

   • preserve: Emit .jsx files with the JSX unchanged
     
     

   • react-native: Emit .js files with the JSX unchanged

   
   
   
   

   터미널에 나온 메시지를 보면 next.js implements its own optimized jsx transform이라고 되어있다.

   즉, .tsx 파일에 적용되는 옵션이며, 이것을 어떤 식으로 변환 할지에 대한 내용이다.
   preserve 옵션은 .tsx -> .jsx로 변환하고 끝난다. 이는 Next가 자신만의 .jsx 변환 방식을 갖고있기 때문이다.
   따라서 TS는 JSX 파일을 emit 하게 되고 이것을 next가 받아서 js로 컴파일 할 것이다.

위 내용처럼 next가 모든 것을 대신 처리해 버렸기 때문에 client 부분에서 더이상 만질 것이 없는 것으로 보인다.

설정끝!