[11팀 박근백] [Chapter 2-2] 디자인 패턴과 함수형 프로그래밍 #12
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Geunbaek
changed the title
Comment on lines
+1
to
+2
| export * from './model'; | ||
| export { ProductAddForm, ProductEditForm, ProductManagementItem } from './ui'; |
There was a problem hiding this comment.
저번에 Slice에서도 한 번 더 배럴 파일을 사용하신다고 한 게 이거였군요!
Comment on lines
+6
to
+25
| const router = createBrowserRouter( | ||
| [ | ||
| { | ||
| path: '/', | ||
| element: <RootLayout />, | ||
| children: [ | ||
| { index: true, element: <CartPage /> }, | ||
| { | ||
| path: '/admin', | ||
| element: <AdminPage />, | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| { basename: '/index.advanced.html' }, | ||
| ); | ||
|
|
||
| export function AppRouter() { | ||
| return <RouterProvider router={router} />; | ||
| } |
There was a problem hiding this comment.
그런데 index.advanced.html 을 실행하는거라 라우팅 하는게 쉽진 않네요 /admin 경로에서 새로고침을 하면 계속 페이지를 찾을수 없다고 나오는데 혹시 해결방법을 아신다면 공유해주시면 감사합니다 !!
Comment on lines
+5
to
+17
| async function enableMocking() { | ||
| if (process.env.NODE_ENV !== 'development') { | ||
| return; | ||
| } | ||
|
|
||
| // eslint-disable-next-line import/no-internal-modules | ||
| const { worker } = await import('../../mocks/browser.ts'); | ||
|
|
||
| return worker.start(); | ||
| } | ||
|
|
||
| await enableMocking(); | ||
|
|
There was a problem hiding this comment.
entities 에 들어가는 데이터라는 느낌을 확주기 위해 모킹을 했습니다.
|
오 근백님이 적용하신 FSD를 보니까 제가 적용한 FSD가 부끄러워지네요.
라고 봐도 될까요? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
과제 체크포인트
기본과제
React의 hook 이해하기
함수형 프로그래밍에 대한 이해
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
심화과제
뷰데이터와 엔티티데이터의 분리에 대한 이해
엔티티 -> 리파지토리 -> 유즈케이스 -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
과제 셀프회고
refactoring
advanced
app : 애플리케이션 전반적인 설정
pages : 하위 레이어들을 조합하여 페이지를 완성시키는 레이어
widgets : 하위 features 와 entities 레이어에서 정의된 기능을 모으는 레이어
features : 프로젝트가 다루는 기능들 ( 상태와 관련된 기능들 )
entities : 프로젝트가 다루는 데이터 영역 ( 서버에서 받아오는 데이터, 클라이언트에서 변함이 없는 데이터 )
shared : 앱 전체 영역에서 사용할 수 있는 도메인 없이도 사용할 수 있는 기능들의 집합
과제에서 좋았던 부분
과제를 하면서 새롭게 알게된 점
과제를 진행하면서 아직 애매하게 잘 모르겠다 하는 점, 혹은 뭔가 잘 안되서 아쉬운 것들
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문
제가 가진 기준들 + fsd 의 규칙에 따라 최대한 컴포넌트를 나누고 적절한 위치로 분류시켜보았는데요.
컴포넌트를 분리하면 분리할수록 뭔가 해당 컴포넌트가 어디있을지 예측하는것이 힘들어졌는데요...
아직 데이터를 기준으로 분류하는 것이 어색해서일까요? 아니면 분류 기준을 좀 더 명확하게 구분하지 않아서일까요?
컴포넌트를 계속해서 분리하다보니 상태가 변경될 때마다 해당 상태를 구독하고 있는 작은 단위의 컴포넌트만 리렌더링 되도록 구성이 되었는데 혹시 이렇게 컴포넌트를 잘게잘게 나누는것도 과한 최적화라고 봐야할까요? 아니면 프론트엔드 개발자로서 추구해야하는 목표일까요?