일단... 갑자기 이걸 들고 온 이유는 반드시 이걸 배워야겠다는 생각이 들어서이다. 물론 스프링도 들을 거긴 한데... 그전에, 지금 죽어가고 있는 FlowForge를 살려낼 희망을 여기서 찾았기 때문이다.
redux 가지고 react앱 개발하는 건 좋은 아이디어다. redux를 대체 어떻게 이용해 먹어야 하는지 도대체 알 수가 없다는 생각이 들기 전까지는. 일단 당장 코드가 언제 어떻게 쓰이는지 바로바로 직관적으로 이해할 수 없는 코드가 많기도 하고, action이랑 같이 있으니까 더욱 환장할 것 같았다.
지금은 되지도 않는 거에 투자하는 것 보다는 나중에 돌아오는 게 낫겠다 싶어 스프링을 들으면서 힐링하고 있었다. 역시 Java! 하고 있는데 문득 생각이 드는 게, Typescript를 쓰면 특유의 명시성, 다형성을 도입해서 일정 부분의 코드를 분명하게 만드는 게 가능해진다. 지금 당장 redux가 답이 없어진 이유가 "도대체 직관적이 지를 않음, 뭐하는지 모르겠음"임을 생각해 보면 충분히 카운터가 될 수 있겠다는 생각이 든 것이다. 하여간 이 상황을 타개하는데 도움이 될 것이다.
그래서 udemy에서 처음으로 강의를 끊었다. redux하고 typescript를 둘 다 수강할 것인데, 일단 리팩토링을 빠르게 시작하려고 typescript를 먼저 수강하는 중이다. (앞에서 이야기했듯이 spring도 들을 것이다. 이 포스팅 쓰고서 배우러 갈 듯. 역시 코딩은 명시적인 게 좋아...)
거두절미하고, TS세팅을 하면서 모르면 화나는 몇 가지 속성들이나 vite랑 엮이면서 문제가 된 부분을 여기에 남기려고 한다. tsconfig.json을 제대로 세팅하지 않으면 도대체 이해가 안되는 것들이 많기 때문에...
우선, 나의 tsconfig.json은 이렇다 :
{
"compilerOptions": {
"target": "ES6",
"useDefineForClassFields": true,
"module": "CommonJS",
"lib": ["ES6", "DOM", "DOM.Iterable", "ScriptHost"],
"skipLibCheck": true,
// /* Bundler mode */
// "moduleResolution": "bundler",
// "allowImportingTsExtensions": true,
// "resolveJsonModule": true,
// "isolatedModules": true,
// "noEmit": true,
// "allowJS": true, /* even compile js too! */
// "checkJS": true, /* Report errors in .js file */
// "jsx": "preserve", /* react i guess */
"sourceMap": true, /* browser source will know understand .ts files too! */
"outDir": "./dist", /* redirect compiled js to somewhere. */
"rootDir": "./src", /* specify the root directory of input files. */
"removeComments": true, /* remove any comments to the compiled js files. */
// "downlevelIteration": true, /* enables full support for es5, es6 iterable compileations */
"noEmitOnError": true, /* disable emit on error, prevent generating fault js files */
/* Linting */
"strict": true, /* a lot of things combined. */
//"noImplicitAny": true,
//"strictNullChecks": true,
//"strictFunctionTypes": true,
//"strictBindCallApply": true,
//"strictPropertyInitialization": true,
//"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true
},
}1. "noEmit": true false
vite로 프로젝트를 세팅했다면, 2024년 02월 기준, 이게 ture로 세팅되어 있을 것이다. 자동으로 tsconfig.json을 세팅해주는 것은 좋은데, 당장 TS를 배우려는 사람들에게는 별로 좋지 못하므로 주의해야 한다.
단순히 이게 뭔지 모르고 켰다면
tsc src/main.ts로 한 두 개는 컴파일돼서 js가 잘만 나오는데
tsc로 전체 컴파일은 안될 것이다. (정확히는 그런 것처럼 보일 것이다.)
js 파일 자체를 내보내지 말라고 하는 옵션이기 때문. 그럼 tsc는 단순히 체킹만 하게 된다. 배우는 입장이므로 옵션을 지우거나, 주석 처리하거나, false로 해두자.
1-1. "noEmitOnError": true
이 녀석은 위에 거랑은 자매품인데, 오히려 도움을 주는 녀석이다. 오직 컴파일 에러가 존재할 때만 js파일을 만들지 않기 때문이다. 반대로 이야기하자면, 컴파일 에러가 있는 ts파일이 js파일로 컴파일이 되는 것을 방지해 주는 옵션이다. 이건 실제로도 굉장히 유용할 것 같아서 나는 켜두기로 했다.
2. "rootDir": "./src", "outDir": "./dist"
기본적으로 tsc를 돌리면 js, map이 ts파일과 같은 곳에 생성된다. 그러면 쓸데없이 vscode의 파일 탐색기의 공간을 잡아먹게 되는 데다가. gitignore를 설정하는 것도 짜증 날 수 있다.
outDir 속성을 이용하면 컴파일된 것을 별개의 디렉터리로 바꿔서 내라고 설정할 수 있다.(내 경우에는 dist) 프로젝트 디렉터리가 굉장히 클린 해지므로 꼭 이용하자. (. gitignore에는 dist만 추가하면 된다.)
rootDir는 ts파일들이 어디에 있는지, 어디까지의 파일 구조를 outDir에 베껴야 할지 알려주는 속성이다. 없어도 어느 정도 동작하긴 한다만 ts파일을 몰아둔 파일이 있으면 위처럼 설정해 두는 게 좋다.
그렇지 않으면
1. tsc가 프로젝트 루트 디렉터리 안에 존재하는 모든 디렉토리를 뒤져서 ts를 찾아낸다.
2. 이렇게 하면 이미 낭비이다. 만약! 여기서 실제로 ts가 src 밖에 존재한다면,
3. 루트 디렉토리 안에 있는 src 같은 프로젝트 구조 + 그 ts가 존재하는 폴더도 같이 dist에 복사가 되는 대참사가 발생.
그러니까 그냥 설정해두자 오래 안 걸린다...
3. "sourceMap": true
vscode에서 ts 디버깅을 해야 한다거나 브라우저의 source에서 ts파일을 같이 보고 싶다면 "필수" 옵션이다. true로 세팅하자.
이렇게 하고
tsc를 돌린 다음 dist를 봐보면
이렇게 map파일도 같이 생긴다. 그래도 디버깅하기 전에 tsc -w를 해두거나 tsc를 한번 실행해서 map파일을 생성시켜야 한다. 안 그러면 제대로 디버깅이 안 된다.
4. 디버깅을 위한 포트 세팅!
나머지는 ts의 자체 성능에 관한 속성이 많으니, 건너뛰고 vscode, vite와 이용해 보도록 하자. debug를 시도하면 .vscode/launch.json이 생길 텐데(없으면 F5를 누르고 기다리면 나온다.) 아마 제대로 디버깅이 안될 가능성이 높다.
포트가 다르기 때문이다. 일단 launch.json 혹은 vite의 설정을 바꿔서 둘 중 1개를 기준으로 맞추면 된다.
이젠 제대로 디버깅이 된다. 만세!