[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용 #441

novice0840 · 2024-12-20T11:30:35Z

Issue Number

#429

As-Is

팀 컨벤션으로 지켜왔던 코드 규칙들 중 eslint로는 검사가 되지 않는 부분들이 존재

To-Be

추가된 eslint 커스텀 규칙

is keyword로 시작하는 경우에는 타입이 boolean 이여야 한다. 함수의 경우는 boolean을 반환
변수명 규칙

변수에 언더바()를 사용하는 경우 "대문자 + 언더바()"로 작성해야 합니다
변수명이 소문자로 시작하는 경우 특수문자를 사용하지 않고 camelCase를 사용해야 합니다

pages 폴더 안에는 Page로 끝나는 폴더와 해당 폴더명과 일치하는 tsx 파일이 있어야 한다.
components 폴더 안에는 컴포넌트 폴더와 해당 폴더명과 일치하는 tsx 파일이 있어야 한다.
컴포넌트의 props 타입은 interface로 나타내며 이름은 컴포넌트 명 + props이다.
함수를 선언할 때는 화살표 함수을 "권장"한다. 화살표 함수는 선언형 함수와 기능이 다소 다르게 동작하기 때문에 선언형 함수를 사용하는 경우도 생길 수 있다고 판단하여 에러가 아닌 권장으로 설정하였다.

추가된 내용

process를 TS에서 인지하지 못해 @types/node 패키지 추가
eslint 에러가 발생하는 코드들 수정

Provider 파일 Context와 Component 분리

한 파일에서 Context와 Component를 동시에 내보내면 fast refresh가 동작하지 않아
eslint 규칙에서 react-refresh/only-export-components 에러가 발생한다.

그래서 둘을 각각의 파일로 분리하였음

Check List

테스트가 전부 통과되었나요?
모든 commit이 push 되었나요?
merge할 branch를 확인했나요?
Assignee를 지정했나요?
Label을 지정했나요?

Test Screenshot

(Optional) Additional Description

package.json에 있는 eslint plugin들이 업데이트가 되면서 package.lock-json에 변경이 일어나면서 file-changed가 많이 생긴 것 같습니다.

Reference 🔎

공식문서에 있는 eslint 커스텀 설정 예제가 flat configuation 를 기준으로 되어 있어 이에 맞게 설정을 변경
eslint 8.21부터는 flat configuation이라는 방식이 도입되었고 eslint 9부터는 설정 파일의 이름은 기본적으로 eslint.config.js를 사용한다.

eslint-react-hook rule 넣는 방법
facebook/react#28313

https://typescript-eslint.io/packages/typescript-eslint#config
https://eslint.org/docs/latest/use/migrate-to-9.0.0

추가로 현재 우리가 사용중인 버전은 더이상 지원되지 않는 버전임

eslint-config-prettier

eslint-plugin-prettier만으로도 설정이 가능하다. eslint-config-prettier가 없어도 됨

https://github.com/prettier/eslint-plugin-prettier

AST란 무엇일까?

https://gyujincho.github.io/2018-06-19/AST-for-JS-devlopers

typescript-eslint에서 rule을 custom하는 방법

https://medium.com/@uriser/how-to-write-a-custom-typescript-eslint-rule-4cc3489f9815

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

rbgksqkr

와우,,,,꼼꼼한 커스텀 lint rule 설정 덕분에, 저희가 직접 정한 컨벤션을 놓치지 않고 반영할 수 있겠는데요??? 감사합니다 ㅎㅎㅎ 엄청 고생했어요 포메!!!!! 코드 리뷰할 때도 불필요한 리뷰가 많이 줄어들 것 같아서 좋네요~!
커스텀 린트룰은 이론적으로만 보고 실제 도입해보지 못했던 부분인데, 저희가 정한 팀 컨벤션 기반으로 코드를 보니 좀더 이해가 잘 되는 것 같아용
약간 생소한 부분이고, 패키지 수정이 많아서 질문을 좀 남겼는데 확인 부탁드려용

rbgksqkr · 2024-12-20T18:03:20Z

frontend/tsconfig.json

@@ -11,7 +11,7 @@
    "allowSyntheticDefaultImports": true, // default export 가 없어도 import 허용
    "sourceMap": true, // 디버깅 시 어떤 파일에서 에러났는지 추적 용이
    "resolveJsonModule": true, // JSON 파일 resolve
-    "types": ["jest", "@emotion/react/types/css-prop"],
+    "types": ["jest", "@emotion/react/types/css-prop", "node"],


💭 질문 💭

node를 추가하면 어떤 다른 기능을 하나요??

process와 같은 전역객체를 인식하기 위해 @types/node를 추가했고 이걸 ts에 적용하려면 node를 ts 설정 파일에 추가해줘야하더라고요!

rbgksqkr · 2024-12-20T18:06:18Z

frontend/eslint.config.mjs

+        },
+      },
+      globals: {
+        ...globals.browser,


💭 질문 💭

globals가 여기서만 사용되는데, 이걸 추가하지 않으면 어떻게 동작하나요?? 라이브러리가 추가돼서 궁금했습니다!

전역 객체를 정의할 때 사용되는 라이브러리입니다! 위 설정을 브라우저에서 사용되는 전역 객체들이 추가되어 eslint에서 인식 시켜줍니다

rbgksqkr · 2024-12-20T18:07:10Z

frontend/jest.polyfills.js

-  ReadableStream: { value: ReadableStream },
-  TransformStream: { value: TransformStream },
-});
+if (!globalThis.TextDecoder) {


💭 질문 💭

오호 이렇게 분기처리를 안하면 어떤 문제가 생기나요?? 어떤 점이 다른걸까요?

저게 없으면 테스트 코드에서 에러가 발생하더라고요!

rbgksqkr · 2024-12-20T18:11:26Z

frontend/package.json

+    "eslint": "^9.16.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-prettier": "^5.2.1",


💭 질문 💭

eslint-config-prettier 대신 eslint-plugin-prettier로 바꾼 이유가 있나요??
제가 예전에 eslint 설정으로 애를 좀 먹어서 블로그를 썼었는데, 해당 eslint가 동작하려면 vscode 포맷팅 설정을 eslint로 수정해야 하는건가요?

https://velog.io/@ghenmaru/react-typescript-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-eslint-prettier-%EC%84%A4%EC%A0%95

eslint-plugin-prettier/recommend가 설정파일에서 빠져서 추가하였습니다!

eslint-plugin-prettier/recommend를 사용하면 eslint-plugin-prettier와 eslint-config-prettier를 둘 다 설정해준다고 합니다. 다만 패키지 설치는 필요한 것 같네요!

둘 다 설정해준다는 게 혹시 어떤 의미일까요???

질문은 기존에 eslint-config-prettier 만으로 lint가 잘 동작한다고 생각했는데, 수정한 이유가 궁금했습니다!!

추가로 컨트롤 + s 로 저장했을 때 자동으로 포맷팅되는지 궁금하고, 그때의 vscode default formatter 설정이 궁금합니다!

rbgksqkr · 2024-12-20T18:14:24Z

frontend/src/providers/ModalProvider/ModalContext.ts

@@ -0,0 +1,22 @@
+import { createContext, RefObject } from 'react';


🙏 제안 🙏

오호 같이 두면 fast refresh 경고가 뜨는군요! ModalContext랑 ToastContext는 providers와 형제 폴더로 contexts 폴더에 분리하는 건 어떤가요?

분리했습니다!

rbgksqkr · 2024-12-20T18:25:28Z

frontend/package.json

@@ -40,6 +40,9 @@
    "@chromatic-com/storybook": "^1.6.1",
    "@emotion/babel-plugin": "^11.12.0",
    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@eslint/compat": "^1.2.4",
+    "@eslint/eslintrc": "^3.2.0",


💭 질문 💭

compat과 eslintrc는 import되서 사용되고 있지는 않은데, 내부 동작에 필요한 라이브러리 인건가요??

레거시 설정 파일과의 호환을 위해 필요한 패키지들인 것 같은데 저희 프로젝트 설정에는 필요 없는 것들이네요.

불필요한 패키지들 제거하였습니다!

rbgksqkr · 2024-12-20T18:31:21Z

frontend/eslint.config.mjs

+      importPlugin.flatConfigs.recommended,
+      react.configs.flat.recommended,
+      jsxA11y.flatConfigs.recommended,
+      ...pluginQuery.configs['flat/recommended'],


💭 질문 💭

기존의 @typescript-eslint 설정은 없어졌는데 typescript-eslint 내부적으로 동작하는 건가요??

tseslint.config 함수를 통해 동작합니다!

typescript-eslint 패키지가 기본적으로 위 방식을 권장하더라고요

rbgksqkr · 2024-12-20T18:35:15Z

frontend/eslint-ddangkong/eslint-plugin-ddangkong.js

@@ -0,0 +1,37 @@
+const enforceIsBoolean = require('./enforce-is-boolean');


🌸 칭찬 🌸

와우 이렇게 디테일하게 eslint rule을 지정할 수 있군요 대박,,,,너무 좋네요,,,,,

rbgksqkr · 2024-12-20T18:35:50Z

frontend/eslint-ddangkong/eslint-plugin-ddangkong.js

@@ -0,0 +1,37 @@
+const enforceIsBoolean = require('./enforce-is-boolean');


🙏 제안 🙏

이건 간단한 제안인데 해당 파일이 대표 파일 느낌인 것 같아서 파일명을 index.js 로 설정해도 괜찮을 것 같네용

폴더명과 파일명이 일치하니까 그게 좋을 것 같네요 수정했습니다!

rbgksqkr · 2024-12-20T18:37:57Z

frontend/eslint-ddangkong/component-folder-match.js

@@ -0,0 +1,42 @@
+const path = require('path');


🌸 칭찬 🌸

오옹 이런 방식으로 eslint rule 들이 만들어지는군요,,,한번 공부해봐야겠네용
머지되면 콘솔 찍어보면서 입력으로 들어오는 값들을 이해해보겠숨돠

rbgksqkr

코멘트 반영 감사합니다 포메~! PropsWithChildren 관련해서만 코멘트 하나 남겼는데 확인해주시면 좋을 것 같고, approve 할게용

novice0840 added 27 commits December 5, 2024 18:29

chore: eslint 설정 파일 확장자 변경 #429

d97adbf

chore: eslint 8 -> 9 migration #429

2388b6b

chore: eslint plugin 추가 #429

9646244

chore: eslint plugin flag configuration 모드로 변경 #429

10e8e46

chore: 테스트 용 커스텀 규칙 연동 #429

11deca3

feat: eslint enforce-is-boolean 규칙 추가 #429

33ee3b1

fix: stories 이름이 붙은 파일에만 eslint-plugin-storybook 적용 #429

f65f67f

fix: eslint files 경로 변경 #429

6c323fd

fix: enforce-is-boolean 조건에 함수 반환값 검사 추가 #429

27df64a

build: process 전역 객체를 인식하기 위해 @types/node 패키지 추가 #429

0c863c5

feat: enforce-is-boolean 규칙 예외 케이스 추가가 #429

5af175f

fix: import/named 에러 해결결 #429

fd55fa4

fix: 사용하지 않는 eslint-storybook 규칙 off #429

6f20ef9

fix: url 파일에 사용하지 않는 코드 제거거 #429

6d79a86

fix: interface import 시 type 명시 #429

e325fa2

fix: @types/node 추가해 process, Node 전역 객체 인식 못하는 문제 해결결 #429

b634d81

fix: context, component 분리해 eslint fast refresh 문제 해결결 #429

fd72c23

fix: modal provider, context 각각 파일로 분리하여 eslint-fast-refresh 에러 해결결 #429

eab383d

fix: eslint 에러 해결결 #429

33de947

fix: eslint-ddangkong recommended 설정 추가가 #429

cde54b8

feat: variable-naming 규칙 추가 #429

daf5d56

feat: page-folder-match 규칙 추가 #429

7f1aef2

feat: eslint component-folder-match 규칙 추가 #429

00f30c9

feat: page-folder-match 규칙 추가 #429

0c3a053

feat: eslint recommend-arrow-function 규칙 추가 #429

08cbd4a

refactor: eslint custom rules 메세지 추가 #429

a5146a7

feat: eslint component-props-interface 규칙 추가 #429

7b6b7ac

novice0840 added ♻️ refactor 리팩토링 ✨ feat 기능 추가 🫧 FE front end labels Dec 20, 2024

novice0840 requested review from rbgksqkr and useon December 20, 2024 11:30

novice0840 self-assigned this Dec 20, 2024

novice0840 linked an issue Dec 20, 2024 that may be closed by this pull request

[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용 #429

Closed

6 tasks

novice0840 added 4 commits December 20, 2024 20:51

fix: eslint 에러 해결 #429

7edad06

refactor: component-props-interface 규칙 문서 한글로 변경 #429

3ff4b0b

fix: 불필요한 코드 제거 #429

0f05799

fix: test 코드 상에서 무한루프 버그 해결 #429

4b24efb

rbgksqkr requested changes Dec 20, 2024

View reviewed changes

github-actions bot added D-2 2일 안에 리뷰 부탁드려요:) D-1 1일 안에 리뷰 부탁드려요:) and removed D-2 2일 안에 리뷰 부탁드려요:) labels Dec 22, 2024

novice0840 added 5 commits December 24, 2024 01:06

chore: eslint-plugin-prttier 추가 #429

f082295

refactor: contexts 폴더 분리 #429

8893b6f

fix: mockServiceWorker 파일 복구 #429

5654b19

fix: 불필요한 패키지 제거 #429

fa8964e

refactor: eslint-plugin-ddangkong 폴더명 변경 #429

9ccd5d8

rbgksqkr approved these changes Dec 24, 2024

View reviewed changes

github-actions bot added D-0 이제 그냥 머지합니다? and removed D-1 1일 안에 리뷰 부탁드려요:) labels Dec 24, 2024

refactor: ModalProps 타입 수정 #429

bcbd0e3

novice0840 merged commit fb36ff1 into develop Dec 26, 2024
2 checks passed

novice0840 deleted the feat/#429 branch December 26, 2024 09:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용 #441

[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용 #441

novice0840 commented Dec 20, 2024 •

edited by rbgksqkr

Loading

rbgksqkr left a comment

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024 •

edited

Loading

rbgksqkr Dec 24, 2024

rbgksqkr Dec 24, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

rbgksqkr Dec 20, 2024

novice0840 Dec 23, 2024

rbgksqkr Dec 20, 2024

rbgksqkr left a comment

		@@ -0,0 +1,22 @@
		import { createContext, RefObject } from 'react';

		@@ -0,0 +1,37 @@
		const enforceIsBoolean = require('./enforce-is-boolean');

[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용 #441

[FEAT] eslint을 커스텀해서 팀 코드 컨벤션 적용 #441

Conversation

novice0840 commented Dec 20, 2024 • edited by rbgksqkr Loading

Issue Number

As-Is

To-Be

추가된 eslint 커스텀 규칙

추가된 내용

Provider 파일 Context와 Component 분리

Check List

Test Screenshot

(Optional) Additional Description

Reference 🔎

추가로 현재 우리가 사용중인 버전은 더이상 지원되지 않는 버전임

eslint-config-prettier

AST란 무엇일까?

typescript-eslint에서 rule을 custom하는 방법

🌸 Storybook 배포 주소

🌸 Storybook 배포 주소

rbgksqkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

novice0840 Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

rbgksqkr left a comment

Choose a reason for hiding this comment

novice0840 commented Dec 20, 2024 •

edited by rbgksqkr

Loading

novice0840 Dec 23, 2024 •

edited

Loading