Today 요약

1. 프로젝트에 TS 적용하기
2. ESLint, Prettier, Husky

1. What I did?

1. 1 프로젝트에 타입스크립트 적용하기

이번에는 사전과제에 타입스크립트를 적용하면서 리팩토링 할 수 있는 부분은 같이 진행해보려고 해서 오늘 하나씩 시도해보았다. 일단 가장 상위 컴포넌트 부터 타입을 적용하고 프로젝트가 실행되는 순서에 따라 컴포넌트를 순차적으로 타이핑 하는 것이 가장 이상적인 방법일 것 같아 일단 index.ts 파일과 app.ts 파일 부터 시도했다. index.ts, app.ts 파일에 jsx 구문이 있어서 결국 tsx 파일로 변경해주거나 import로 모듈을 제대로 못 불러와서 esModuleInterop 플래그를 설정해주는 등 index.ts, app.ts 파일에서는 주로 문법적인 문제를 주로 해결했다.

그리고 Home 페이지에서는 navigate의 타입을 정의해주고 전달되는 prop들의 타입도 정의해주었다. 회원가입 페이지에 와서 input 태그나 form 태그의 타입을 정의하는 건 어렵지 않았지만 catch 구문의 error의 타입을 정의하는 것이 쉽지 않았다. 결국 오늘 해결하지는 못했다.

이번에 catch 구문의 error를 해결하는 방법을 제대로 알아두면 나중에 굉장히 유용하게 쓰일 것 같다는 느낌이 든다. 그렇기 때문에 대충 해결하고 넘기지 말고 제대로 된 해결책을 찾아보자.

1.2 ESLint, Prettier, Husky

일단 당분간은 협업하지는 않을 것 같아서 Prettier는 vscode에 맡기고, 나머지 ESLint에서 prettier의 오류가 나는 옵션을 off하는 방식으로 Lint 설정을 했었다. 하지만 협업하는 걸 가정하고 지금부터 prettier 설정은 따로 해보는 것이 좋을 것 같다. (멘토님 피드백을 받은 거 때문이기도 하지만 그 전에도 prettier를 따로 옵션을 주고 설정할지에 대해서 반반이었다.) 어차피 실무를 하게 되면 협업은 당연히 해야되기 때문에 지금부터 혼자 하더라도 협업하는 걸 가정하고 prettier 옵션 설정하는 것에 관심을 기울이고 있자.

그래서 ESLint rules에 있는 대부분의 옵션을 제거하고 prettier로 설정해주었다.
그리고 eslint-conifg-prettier를 설치해서 eslint와 충돌하는 prettier규칙이 있다면 prettier 규칙을 따르도록 설정해주었다. 그렇게 ESLint와 Prettier는 해결을 했고, 그 다음은 husky다. 커밋하기 전에 prettier을 한 번 더 체크해서 prettier 설정에 맞지 않으면 커밋시 오류가 발생하고, 깃허브에 push하기 전에 console.log가 남아있다면 push가 되지 않도록 자동화할 수 있다.

가끔 코드리뷰 받을 때 console.log를 지우지 않는 부분을 지적받는 경우가 있다. 그런 실수를 줄여주기 위한 아주 유용한 도구라고 할 수 있다. 이 부분을 오늘 진행했는데, 설정하는 부분에서는 크게 문제가 없을 거라 생각했는데, 막상 설치하는 부분에서 오류가 생겨서 거기서 급하게 마무리를 했다. 내일 마저 이 부분을 해결해보려고 한다.

2. What I curious?

TIW_2023_07_01