이번엔 create-react-app의 eject 기능을 사용하지 않고, eslint 설정을 바꾸는 방법을 알려드리겠습니다.

create-react-app 이란?

create-react-app은 리액트 프로젝트를 처음 시작할때 사용하는 npm 패키지 입니다. 이를 통해 react-scripts라는 패키지 기반의 프로젝트 환경을 구축할 수 있도록 도와줍니다. 또한, 리액트 공식문서에서도 이를 사용하도록 되어있기 때문에 대부분의 리액트 시작하기 관련 글을 읽으시면 이를 이용해 시작하는 것을 볼수있습니다.

이 방식으로 프로젝트를 왜 많이 사용하냐면, 리액트 프로젝트에서 webpack, eslint 등 빌드 도구들에 이 빌드 도구들의 플러그인까지 설정할건 아주 아주 많습니다. 이를 한방에 해결해주는게 react-scripts 입니다. 그러면서 저희는 오직 리액트 앱 소스코드만 관리하면되는 장점이 있습니다.

2023년 기준으로 리액트 공식문서는 https://react.dev 로 옮겨갔으며, 프로젝트 시작을 CRA가 아닌 Next.js, Remix 등으로 시작하도록 바뀌었습니다.

문제

모든 빌드 도구와 플러그인을 관리해주었지만 그 설정을 바꾸는 방법은 어렵거나 알려지지도, 존재하지도 않습니다. 그저 이 react-scripts를 떼어내는 npm run eject라는 커맨드로 모든 빌드 도구들을 프로젝트 코드에 직접 설치해주는 방식을 사용한 방법이 많이 알려져있죠.

이 eject는 모든 툴들을 프로젝트 소스에 병합하는 형태라 한번 사용하게되면 되돌릴 수 없고, 또한 모든 툴들을 직접 관리해줘야 하죠. 예를들어 webpack의 버전을 업그레이드 하고싶다면 react-scripts를 업데이트하면 끝이지만, eject를 하게되면 webpack과 함께 같이 사용하는 플러그인들까지도 함께 맞는 버전으로 업그레이드 해줘야합니다.

해결방법

react-scripts에서는 환경변수를 통한 일부 기능을 활성화 할 수 있습니다. 환경변수 중 EXTEND_ESLINT 가 존재하고, 이를 활성화 하면 .eslintrc.json 을 통한 설정 정보 확장이 가능합니다. 이를 해주기 위해 저희는 react-scripts에서 기본으로 제공하는 dotenv를 이용해 환경변수를 추가할 예정입니다. 프로젝트 소스 코드 최상단에 .env라는 파일을 만들고 다음과같이 작성합니다.

EXTEND_ESLINT=true

.env 파일 내용

이 파일은 react-scripts의 dotenv패키지가 로드되면서 저희가 추가한 파일을 찾아 불러오게됩니다. 불러온 환경변수들은 모두 Node.js의 기본으로 저장되는 process.env라는 곳에 저장하게 됩니다.

이제 eslint를 저희가 설정할 수 있습니다. 그러니 .eslintrc.json을 만들어 저희가 사용할 eslint의 설정파일을 만들어줍니다.

{
	"extends": ["eslint:recommended", "react-app"],
	"env": {
		"browser": true,
		"node": true,
		"es6": true
	},
	"parserOptions": {
		"ecmaVersion": 6,
		"sourceType": "module"
	},
	"rules": {
		"no-console": "off",
		"strict": ["error", "global"],

		// 들여쓰기 2, switch 문에서 들여쓰기 사용
		"indent": ["error", 2, { "SwitchCase": 1 }]
	}
}

.eslintrc.json 파일 내용

이제 npm start를 실행해보시면 바뀐 eslint설정때문에 오류나 경고가 나올껍니다. 만약에 적용됬는지 잘모르겠으면 rules의 indent를 8로 설정해보세요. 대부분 사람들이 사용하는 코드 들여쓰기가 4 혹은 2로 설정되있어서 무조건 오류가 발생해야합니다.

eslint는 코드관리에 아주 중요한 도구입니다. 여기에 prettier에 husky까지 적용하면 여러 사람과 협업할때 각자의 코드스타일이나 사용안하는 변수, import등을 eslint를 이용해 찾아내고, 또한 CI/CD까지 적용해 Pull Request까지 막아버리시면 아주 좋은 코드 관리가 될 수 있겠습니다.