오랜만에 돌아온 끊을 수 없는 운명의 React Native
이번에야말로 제대로 하나씩 부셔보자는 마인드로 적어가는 메모용 포스팅 입니다만?! :)
#이 정도 개발할 줄 알면 이제 나도 시니어 개발자?
라고 생각했던 1년차 개발자였던 나는 어느덧 3년이 지나고 4년차를 바라보고 있다. 텅 비어있던 나의 머릿속에 지식이 하나둘 채워지는 사이 개발단에서도 억시 많은 변화가 이루어졌다.
React Native로 첫 개발을 시작했을 때가 0.67 버전대였다. 그땐 내 기억으로 auto linking이 안되는 라이브러리들도 몇 개 있었던 것 같은데...
(엥? 아닌가? 아님말고)
그땐 사실 버전이 뭔지도 모르고, 아무 생각 없이 개발만 집중할 때 였는데 어느덧 0.75버전까지 업데이트가 되어있더라.
(마치 내 나이처럼 무럭무럭 자라더라...)
세상이 너무 빨리 변하는 까닭으로, 이미 레거시가 되어버린 코드들이 나의 블로그 및 깃허브에 가득해져있었다!
그 중에서도 내가 가장 사랑하는 Prettier,ESLint는 어느 순간, 복사 붙여넣기의 반복으로 인해 왜 실행되는지도 모르고 작성하는 지경이 되어버렸고, 당연히 최신 버전에서 버전 오류가 빈번하게 발생했다..🔥
그래서 서두가 너무 길었지만,
이 글의 결론은 ESLint 적용 방식을 리뉴얼한(NEW!) 버전이다
(인데 이제 ChatGPT..를 곁들인..)
Prettier는 논외지만, 간단하니 소개만 하고 넘어가자!
Prettier
.prettierrc.js 파일에서 내가 원하는 룰을 설정하면 된다.
...끝이다!
자주 사용하는 룰은 요정도..? 인듯 하다. 이것은 취향차이
module.exports = {
arrowParens: 'avoid',
bracketSameLine: false,
bracketSpacing: true,
singleQuote: true,
trailingComma: 'all',
};
ESLint
그럼 이제 본격적으로 ESlint 세계로 들어가 보도록 하자.
✏️ babel-plugin-module-resolver
일단 절대경로를 좋아하기 때문에 항상 설정해준다.
yarn add -D babel-plugin-module-resolver설치 후,
// babel.config.js
module.exports = {
...
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: { '@src': './src' },
},
],
],
}해당 파일을 업데이트 해준다. 다들 널리 알고 있는 절대경로를 적용하기 위한 방법인데, 코드를 분석해보자면 아래와 같다.
- root 옵션은 모듈을 찾을 루트 디렉토리를 지정하며, 여기서는 프로젝트의 최상위 디렉토리를 가리킴
- alias는 경로에 별칭을 지정하는 옵션이며. @src라는 별칭을 ./src 디렉토리에 매핑하고 있으므로 @src를 사용하여 ./src 디렉토리로 접근할 수 있음
하지만 ESLint가 해당 설정을 이해하지 못해서 모듈을 찾지 못하는 경우,
yarn add -D eslint-import-resolver-babel-module추가 설정을 통해 ESLint의 import 관련 규칙들이 Babel의 모듈 경로 별칭을 인식할 수 있도록 해주자. 그리고 추후에 생성되는 .eslintrc.js 파일에
module.exports = {
...
settings: {
'import/resolver': {
'babel-module': {},
},
},
...
};설정을 넣어주자. 이후에 한번 더 언급할 예정이다. (아마도?)
이렇게 하면 🔥절대경로 췤🔥 완료다
절대경로는 너무 소중한 것 같다. 아직까지는 적용하지 않을 이유를 찾지 못했음,,
✏️ ESLint 초기화
본격적인 ESLint 설정 초기화 시간이다.
npm init @eslint/config해당 명령어를 이용해서 초기화를 진행해주자!
이 때, 원하는 옵션을 선택해서 세팅을 완료하면 eslint.config.mjs 파일이 생성되는데, gpt왈 해당 파일은 크게 중요하지 않다고 한다. 왜냐,
.eslintrc.json만으로 충분히 모든 설정이 가능합니다
라고 하셨기 때문에...
뭔가 lint 오류를 명령어로 찾을 때, 에러가 발생하는 것 같기도 하고 해서 그냥 eslint.config.mjs 파일은 지워버리고 시작했다.
airbnb의 ESLint를 좋아하는 관계로 airbnb 설정을 진행해보자.
$ npm info "eslint-config-airbnb@latest" peerDependencies
$ npm info "eslint-config-airbnb-typescript@latest" peerDependencies위 명령어를 통해 peer dependencies를 체크해준 뒤, 설치를 진행하면 된다.
$ npx install-peerdeps --dev eslint-config-airbnb
$ npx install-peerdeps --dev eslint-config-airbnb-typescriptyarn을 이용하고 있을 경우, peer dependencies를 하나씩 설치해줘야 하는 듯!
이 때 안전하게 명시된 버전을 꼭 적용해서 설치하도록 하자
(그래야 마음이 편하다)
✏️ ESLint 와 Prettier
여기까지 ESLint를 설정하며 한가지 생각해야 할 부분은 바로
ESLint와 Prettier의 통합이다.
그게 무슨 말이냐? 는 필요한 플러그인들과 함께 분석해보도록 하자.
eslint-plugin-prettier
📝 Prettier를 ESLint 규칙으로 통합하는 역할
📝 ESLint가 Prettier의 포맷팅 규칙을 적용한 코드를 검증할 수 있으며, 코드 스타일에 관한 문제가 있으면 ESLint가 경고나 오류를 발생시킴
eslint-config-prettier
📝 ESLint의 스타일 규칙과 Prettier의 포맷팅 규칙이 충돌하지 않도록 비활성화하는 역할
📝 Prettier가 관리하는 코드 스타일 규칙을 우선시하기 위해 ESLint의 스타일 관련 규칙을 비활성화함. 따라서 Prettier와 ESLint를 함께 사용할 때 충돌을 방지하고, 코드 스타일은 Prettier에 의해 처리되도록함
정리하면 ESLint와 Prettier의 통합 과정에서 필요한 처리를 진행해주는 플러그인들이라고 볼 수 있을 것 같다. 각각에 대해 자세히 뜯어본 적은 없었는데 아마 이번이 처음 것 같다
머쓱 ;;)
✏️ 추가 정보
이후 필요한 tsconfig.json 파일과 .eslintrc.js에 필요한 정보를 추가하면 세팅을 마무리 할 수 있다.
(적다보니 되게 별 것 없는 것 같아서 좀 화나네)
tsconfig.json
일단 필요한 tsconfig.json 파일의 기본적인 세팅을 진행해보자.
"extends": "@react-native/typescript-config/tsconfig.json",
"compilerOptions": {
"jsx": "react",
"module": "es2015",
"target": "esnext",
"esModuleInterop": true,
"skipLibCheck": true,
"paths": {
"@src/*": ["src/*"]
},
"baseUrl": "./",
"typeRoots": ["./node_modules/@types"]
},
"include": [
...
],
"exclude": [
...
]
아마 이정도면 충분하지 않을까 싶다.
작업 진행하면서 또 추가하면 좋다.
.eslintrc.js
필요한 .eslintrc.js 파일의 경우 좀 길다. 나머지는 기본적으로 제공해주는 코드를 따르고, 가장 자주 사용하는 rules 정도만 적어보려고 한다.
module.exports = {
...
rules: {
'import/order': [
'error',
{
pathGroups: [
{ pattern: 'react*', group: 'builtin', position: 'before' },
{ pattern: '@src/**', group: 'external', position: 'after' },
],
pathGroupsExcludedImportTypes: ['builtin'],
alphabetize: { order: 'asc' },
},
],
...
}
}
바로바로 import/order의 순서!
너무너무 중요하다.(나에겐) ESLint를 사랑하는 이유 중 하나
그리고 필요한 rules들은 기호에 맞게 추가로 적용해주면 완성!
그리고 앞서 한번 더 이야기하려고 했던
module.exports = {
...
rules: {
...
}
...
settings: {
'import/resolver': {
'babel-module': {},
},
}
},eslint-import-resolver-babel-module 해당 플러그인에 적용되는 세팅 또한 해당 파일에서 놓치지 않도록 하자
이렇게 하고 코드로 돌아오면, 아마 잘 적용되어 있을 것이다. 만약 적용이 잘 안되는 것 같다 하면
shift-command-Q
를 이용해서 Restart ESLint Server옵션을 적용하거나, Reload Window옵션을 이용해 새로고침을 진행 해보자. 웬만하면 해결되고 행복한 코딩을 할 수 있을 것이라고 생각한다!
이렇게 ESLint 탐방을 일단은 마무리해 보려고 한다. 자세히 뜯어놓을 것 처럼 써놨지만 사실 그렇지 않은 것 같기도 하지만...?
어차피 나의 메모장이니까 괜찮아...
그럼 여기서 끝!
P.S. 진행한 React Native는 0.75.2 버전 입니다.
