절대 경로 컴포넌트 추가
React 컴포넌트를 조합할 때 보통 상대 경로(import Button from '../../Button')를 사용하여 컴포넌트를 불러온다. 컴포넌트가 몇 개밖에 없으면 큰 문제가 되진 않지만, 프로젝트가 점점 커져서 컴포넌트가 더 많아지게 될 경우 프로젝트의 폴더 구조가 복잡하게 되어 어떤 경로를 지정하고 있는지 명확하게 파악하기 어렵다.
이런 문제점을 해결하기 위해 typescript 설정으로 간단히 해결할 수 있다.
이전에 생성했던 todo-list 프로젝트에서 tsconfig.json 파일에서 compilerOptions 필드에
"baseUrl": "src"
을 추가한다. 이는 상대 경로뿐만 아니라 절대 경로로 컴포넌트를 추가할 수 있게 된다.
baseUrl인 src 폴더 하위에 Component라는 폴더를 생성하고 App 컴포넌트와 관련된 파일들인 App.test.tsx, App.tsx, logo.svg를 Component 폴더에 이동시킨다.
그리고 src/index.tsx 파일을 열어 다음과 같이 절대 경로로 App 컴포넌트를 추가해본다.
터미널에 npm start을 입력하여 index 웹페이지가 렌더링되는 지 확인해본다.
그리고 npm run test를 입력하여 작성한 테스트 코드도 실행해본다.
Prettier
Prettier는 js, css, json 등을 지원하는 코드 포매터(Code formatter)이다. 미리 정의한 코드 스타일에 맞춰 자동으로 코드의 형식을 수정해주는 도구이다.
공식홈페이지 : Prettier
절대 경로 컴포넌트 추가 설정한 프로젝트에 Prettier를 적용하기 위해 다음 명령어를 입력하여 Prettier를 설치한다.
npm install --save-dev husky lint-staged prettier
husky : package.json 파일에서 githook을 사용할 수 있게 해준다. githook은 git에 특정 이벤트(소스 코드 커밋, 푸시 등)를 감지하여 이벤트를 실행하기 전에 특정 동작을 수행할 수 있도록 도와준다.
lint-staged : git의 stage된 파일들에 특정 동작을 수행할 수 있도록 해준다.
설치 완료됐으면 Prettier 설정 파일을 만들 필요가 있다. 프로젝트 루트 폴더에 .prettierrc.js 파일을 생성하고 다음과 같이 수정한다.
jsx 문법에서 괄호를 같은 라인에 표시하게 하고 싱글 쿼트(')를 주로 사용하도록 설정하는 등의 기본적인 Prettier 규칙을 설정한 것이다.
husky와 lint-staged를 사용하여 git 이벤트에 Prettier 명령어를 연동해본다. package.json 파일을 열어 script 필드 밑에 다음과 같이 추가한다.
husky를 사용하여 git의 커밋 이벤트 전에(pre-commit) lint-staged 명령어를 실행하도록 설정했다. 그리고 lint-staged에서는 src 폴더 하위 파일 중 jsx, css, json 등과 관련한 파일들이 있는 경우 Prettier의 명령어를 실행하도록 하였다. --write 옵션은 Prettier를 사용하여 파일을 직접 수정하도록 하는 옵션이다.
이제 Prettier는 소스 코드를 git에 커밋할 때 직접 정의한 규칙을 기반으로 소스 코드의 형식을 자동으로 수정해줄 것이다.
실무에서는 husky와 lint-staged는 보조적인 도구로 사용하고 개발할 때 사용하는 IDE에 플러그인 등을 추가하여 파일을 수정하고 저장할 때마다 코드의 형식을 자동으로 맞추도록 설정한다.
Github Repo
