[5팀 김유현] Chapter 2-3. 관심사 분리와 폴더구조

.github/pull_request_template.md

@@ -3,6 +3,7 @@
 ### 기본과제
 
 #### 목표 : 전역상태관리를 이용한 적절한 분리와 계층에 대한 이해를 통한 FSD 폴더 구조 적용하기
+
 - 전역상태관리를 사용해서 상태를 분리하고 관리하는 방법에 대한 이해
 - Context API, Jotai, Zustand 등 상태관리 라이브러리 사용하기
 - FSD(Feature-Sliced Design)에 대한 이해
@@ -12,6 +13,7 @@
 - 어디에 무엇을 넣어야 하는가?
 
 #### 체크포인트
+
 - [ ] 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
 - [ ] Props Drilling을 최소화했나요?
 - [ ] shared 공통 컴포넌트를 분리했나요?
@@ -24,10 +26,9 @@
 - [ ] feature를 중심으로 api를 분리했나요?
 - [ ] widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?
 
-
 ### 심화과제
 
-#### 목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기 
+#### 목표: 서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
 
 - TanstackQuery의 사용법에 대한 이해
 - TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
@@ -45,8 +46,8 @@
 - [ ] 코드가 간결하고 유지보수가 용이한 구조로 작성되었는가?
 - [ ] TanStack Query의 Devtools가 정상적으로 작동하는가?
 
-
 ### 최종과제
+
 - [ ] 폴더구조와 나의 멘탈모데일이 일치하나요?
 - [ ] 다른 사람이 봐도 이해하기 쉬운 구조인가요?
 
@@ -60,23 +61,26 @@
 
 ### 이번에 배운 내용 중을 통해 앞으로 개발에 어떻게 적용해보고 싶은지 적어주세요.
 
-
 ## 챕터 셀프회고
 
 > 클린코드와 아키테쳑 챕터 함께 하느라 고생 많으셨습니다!
 > 지난 3주간의 여정을 돌이켜 볼 수 있도록 준비해보았습니다.
 > 아래에 적힌 질문들은 추억(?)을 회상할 수 있도록 도와주려고 만든 질문이며, 꼭 질문에 대한 대답이 아니어도 좋으니 내가 느꼈던 인사이트들을 자유롭게 적어주세요.
 
 ### 클린코드: 읽기 좋고 유지보수하기 좋은 코드 만들기
+
 - 더티코드를 접했을 때 어떤 기분이었나요? ^^; 클린코드의 중요성, 읽기 좋은 코드란 무엇인지, 유지보수하기 쉬운 코드란 무엇인지에 대한 생각을 공유해주세요
 
 ### 결합도 낮추기: 디자인 패턴, 순수함수, 컴포넌트 분리, 전역상태 관리
+
 - 거대한 단일 컴포넌트를 봤을때의 느낌! 처음엔 막막했던 상태관리, 디자인 패턴이라는 말이 어렵게만 느껴졌던 시절, 순수함수로 분리하면서 "아하!"했던 순간, 컴포넌트가 독립적이 되어가는 과정에서의 깨달음을 들려주세요
 
 ### 응집도 높이기: 서버상태관리, 폴더 구조
+
 - "이 코드는 대체 어디에 둬야 하지?"라고 고민했던 시간, FSD를 적용해보면서의 느낌, 나만의 구조를 만들어가는 과정, TanStack Query로 서버 상태를 분리하면서 느낀 해방감(?)등을 공유해주세요
 
+## 리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
 
+```
 
-## 리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
-```
+```

.prettierrc

@@ -1,9 +1,7 @@
 {
-  "semi": false,
-  "printWidth": 120,
+  "semi": true,
   "tabWidth": 2,
-  "singleQuote": false,
-  "quoteProps": "consistent",
-  "trailingComma": "all",
-  "singleAttributePerLine": false
-}
+  "singleQuote": true,
+  "printWidth": 80,
+  "trailingComma": "es5"
+}

README.md

@@ -35,12 +35,12 @@
 - FSD(Feature-Sliced Design)에 대한 이해
 
 - FSD를 통한 관심사의 분리에 대한 이해
- - 단일책임과 역할이란 무엇인가?
- - 관심사를 하나만 가지고 있는가?
- - 어디에 무엇을 넣어야 하는가?
-
+- 단일책임과 역할이란 무엇인가?
+- 관심사를 하나만 가지고 있는가?
+- 어디에 무엇을 넣어야 하는가?
 
 체크포인트
+
 - [ ] 전역상태관리를 사용해서 상태를 분리하고 관리했나요?
 - [ ] Props Drilling을 최소화했나요?
 - [ ] shared 공통 컴포넌트를 분리했나요?
@@ -54,8 +54,6 @@
 - [ ] widget을 중심으로 데이터를 재사용가능한 형태로 분리했나요?
 ```
 
-
-
 ## [6주차] 심화과제
 
 여러분들은 비동기 코드가 들어가고 서버와 통신을 하기 시작하니 상태관리가 엄청나게 복잡해진다는 것을 알았습니다. 그래서 서버상태관리를 도입을 하면 보다 함수형 패러다임으로 선언적으로 비동기를 관리할 수 있다는 사실을 알게 되었습니다.
@@ -72,13 +70,14 @@ TanstackQuery를 이용하여 코드를 개선하기
 
 ```markdown
 목표:
-서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기 
+서버상태관리 도구인 TanstackQuery를 이용하여 비동기코드를 선언적인 함수형 프로그래밍으로 작성하기
 
 - TanstackQuery의 사용법에 대한 이해
 - TanstackQuery를 이용한 비동기 코드 작성에 대한 이해
 - 비동기 코드를 선언적인 함수형 프로그래밍으로 작성하는 방법에 대한 이해
 
 체크포인트
+
 - [ ] 모든 API 호출이 TanStack Query의 useQuery와 useMutation으로 대체되었는가?
 - [ ] 쿼리 키가 적절히 설정되었는가?
 - [ ] fetch와 useState가 아닌 선언적인 함수형 프로그래밍이 적절히 적용되었는가?
@@ -90,10 +89,9 @@ TanstackQuery를 이용하여 코드를 개선하기
 - [ ] TanStack Query의 Devtools가 정상적으로 작동하는가?
 ```
 
-
 ## [6주차] 최종 과제
 
-FSD는 하나의 제안이지만, 여러분들은 FSD를 적용해보고 나면 조금 더 나은 구조를 만들 수 있다는 것을 알게 되었습니다. 
+FSD는 하나의 제안이지만, 여러분들은 FSD를 적용해보고 나면 조금 더 나은 구조를 만들 수 있다는 것을 알게 되었습니다.
 그래서 여러분들은 FSD를 적용해보고 나서 다음과 같은 추가적인 목표를 세웠습니다.
 
 **조금 더 현대적이면서도 기능 중심의 폴더 구조를 만들 수 있지 않을까?**
@@ -102,5 +100,6 @@ FSD는 하나의 제안이지만, 여러분들은 FSD를 적용해보고 나면
 FSD가 아닌 자신만의 기능 중심의 폴더 구조를 만들어보세요.
 
 꼭 기억할 점
-1. 자신만의 기능 중심의 폴더라고 했지만, 그 모습이 상당히 유니크하고 독창적이지는 않을 거에요. 아마 적절한 모법사례의 조합으로 수렴될 거에요. 
-2. 그리고 그게 잘하는 거에요. 좋은 코드는? 자신보돠 남들에게 모두에게 이해하기 쉬운 코드니까요.
+
+1. 자신만의 기능 중심의 폴더라고 했지만, 그 모습이 상당히 유니크하고 독창적이지는 않을 거에요. 아마 적절한 모법사례의 조합으로 수렴될 거에요.
+2. 그리고 그게 잘하는 거에요. 좋은 코드는? 자신보돠 남들에게 모두에게 이해하기 쉬운 코드니까요.

eslint.config.js

@@ -1,28 +1,49 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
+import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import prettierConfig from 'eslint-config-prettier';
 
 export default tseslint.config(
-  { ignores: ['dist'] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    ignores: ['dist', 'node_modules', 'coverage'],
+  },
+  // Global recommended rules
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+
+  // React specific configuration
+  {
     files: ['**/*.{ts,tsx}'],
+    ...pluginReactConfig,
     languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+      ...pluginReactConfig.languageOptions,
+      globals: {
+        ...globals.browser,
+      },
     },
     plugins: {
+      react: pluginReact,
+      'jsx-a11y': pluginJsxA11y,
       'react-hooks': reactHooks,
       'react-refresh': reactRefresh,
     },
     rules: {
+      ...pluginJsxA11y.configs.recommended.rules,
       ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
       'react-refresh/only-export-components': [
         'warn',
         { allowConstantExport: true },
       ],
     },
   },
-)
+
+  // Prettier config to disable conflicting rules
+  prettierConfig
+);

package.json

@@ -28,6 +28,9 @@
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",