[1팀 한아름] Chapter 2-3. 관심사 분리와 폴더구조

.env.development

@@ -0,0 +1 @@
+VITE_API_BASE_URL=/api

.env.production

@@ -0,0 +1 @@
+VITE_API_BASE_URL=https://dummyjson.com

.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,8 @@
 {
-  "semi": false,
-  "printWidth": 120,
+  "semi": true,
+  "printWidth": 80,
   "tabWidth": 2,
-  "singleQuote": false,
-  "quoteProps": "consistent",
-  "trailingComma": "all",
+  "singleQuote": true,
+  "trailingComma": "es5",
   "singleAttributePerLine": false
-}
+}

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,8 +1,8 @@
-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 reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
 
 export default tseslint.config(
   { ignores: ['dist'] },
@@ -24,5 +24,5 @@ export default tseslint.config(
         { allowConstantExport: true },
       ],
     },
-  },
-)
+  }
+);

index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chapter 2-3. 관심사 분리와 폴더구조</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="/src/index.css" />
   </head>
   <body>
     <div id="root"></div>