[7팀 김민규] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍#48
[7팀 김민규] Chapter 2-2. 디자인 패턴과 함수형 프로그래밍#48suinkimme wants to merge 57 commits intohanghae-plus:mainfrom
Conversation
keyonnaise
left a comment
keyonnaise
left a comment
There was a problem hiding this comment.
민규님, 이번 주도 정말 수고 많으셨습니다. 오타 외에는 특별히 수정할 부분이 없는 것 같습니다. 오늘 푹 쉬시고, 다음 주에도 힘내셔서 만족스러운 결과를 얻으시기를 바랍니다!
| const App = () => { | ||
| return ( | ||
| <AuthProvider> | ||
| <ProductProvider products={initialProducts}> | ||
| <CouponProvider coupons={initialCoupons}> | ||
| <div className="min-h-screen bg-gray-100"> | ||
| <Navigation /> | ||
| <CartProvider> | ||
| <Content /> | ||
| </CartProvider> | ||
| </div> | ||
| </CouponProvider> | ||
| </ProductProvider> | ||
| </AuthProvider> | ||
| ); | ||
| }; |
There was a problem hiding this comment.
오프 코치님께서는 권장하지 않으셨지만, 저는 컨텍스트 헬 문제를 해결하기 위해 다음과 같은 방법을 시도해 보았습니다.
The React Context hell
제가 구현한 코드
관심 있으시면 한번 살펴보시고 의견 나눠주시면 감사하겠습니다!
There was a problem hiding this comment.
민규님 실력이면 통화 관련 유틸리티 함수를 별도의 함수로 분리하시는 것은 어렵지 않으실 것 같은데 조금 아쉽습니다 ㅠ
There was a problem hiding this comment.
ㅠㅠ시간이 부족하다는 핑계를 대는 게을러터진자여...ㅠㅠ
| import { useCouponContext } from "../../contexts"; | ||
| import { SectionTitle } from ".."; | ||
|
|
||
| const CouponMenagement = () => { |
There was a problem hiding this comment.
CouponMenegement 오타요!! 저번에 진솔님이 추천해주신 IDEA 익스텐션 중에서 'Spell Checker'를 사용해 보셨나요? 오타를 미리 감지해 줘서 정말 편리했습니다!
| /> | ||
| <InventoryProductDiscountList discounts={discounts} /> | ||
| <Button | ||
| onClick={() => handleAddToCart(cart, product)} |
There was a problem hiding this comment.
이 핸들러 함수를 컴포넌트 내부에서 직접 인라인으로 사용하는 대신, 먼저 함수를 선언한 후에 호출하는 방식으로 변경하면 코드를 읽기가 훨씬 수월해질 것 같습니다!
| {products.map((product) => { | ||
| return <InventoryProductItem key={product.id} product={product} />; | ||
| })} |
| @@ -0,0 +1,13 @@ | |||
| import { SectionTitle, NewProductForm, ProductList } from ".."; | |||
|
|
|||
| const ProductMenagement = () => { | |||
2 participants
과제의 핵심취지
https://suinkimme.github.io/front_5th_chapter2-2/index.refactoring.html
과제에서 꼭 알아가길 바라는 점
기본과제
Component에서 비즈니스 로직을 분리하기
비즈니스 로직에서 특정 엔티티만 다루는 계산을 분리하기
뷰데이터와 엔티티데이터의 분리에 대한 이해
entities -> features -> UI 계층에 대한 이해
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
Component에서 사용되는 Data가 아닌 로직들은 hook으로 옮겨졌나요?
주어진 hook의 책임에 맞도록 코드가 분리가 되었나요?
계산함수는 순수함수로 작성이 되었나요?
특정 Entitiy만 다루는 함수는 분리되어 있나요?
특정 Entitiy만 다루는 Component와 UI를 다루는 Component는 분리되어 있나요?
데이터 흐름에 맞는 계층구조를 이루고 의존성이 맞게 작성이 되었나요?
심화과제
재사용 가능한 Custom UI 컴포넌트를 만들어 보기
재사용 가능한 Custom 라이브러리 Hook을 만들어 보기
재사용 가능한 Custom 유틸 함수를 만들어 보기
그래서 엔티티와는 어떤 다른 계층적 특징을 가지는지 이해하기
UI 컴포넌트 계층과 엔티티 컴포넌트의 계층의 성격이 다르다는 것을 이해하고 적용했는가?
엔티티 Hook과 라이브러리 훅과의 계층의 성격이 다르다는 것을 이해하고 적용했는가?
엔티티 순수함수와 유틸리티 함수의 계층의 성격이 다르다는 것을 이해하고 적용했는가?
과제 셀프회고
과제를 하면서 내가 제일 신경 쓴 부분은 무엇인가요?
액션과 계산을 분리하기 위해 『쏙쏙 들어오는 함수형 코딩』을 챕터 6까지 읽고 과제를 시작했는데, 덕분에 테스트 코드를 작성할 때 훨씬 수월했습니다. 시간이 부족해 AI의 도움을 받기도 했지만, 계산 함수가 잘 분리되어 있어서 그런지 테스트 코드 작성이 한결 편했습니다.
과제를 다시 해보면 더 잘 할 수 있었겠다 아쉬운 점이 있다면 무엇인가요?
아직 관심사 분리나 Custom Hook 사용이 익숙하지 않아서, 전체적으로 코드가 난잡한 점이 많이 아쉽습니다. 특히 관심사를 분리할 때마다 계속 망설이게 되고, 생각이 길어지곤 합니다. 예를 들어 discount 같은 경우, 이게 cart의 책임인지, product의 책임인지, 아니면 완전히 새로운 관심사로 봐야 할지 애매하게 느껴집니다. 이런 모호한 부분들을 "이거다!" 하고 명확하게 구분 짓는 판단력이 아직은 부족하다는 걸 느꼈습니다.
리뷰 받고 싶은 내용이나 궁금한 것에 대한 질문 편하게 남겨주세요 :)
2025년 3월 말에 2년 1개월간 다니던 회사를 퇴사하고, 대학교로 복학할 예정입니다. 내년까지는 시간이 조금 있어서 크래프톤 정글에 참여해 CS 기본기와 팀 프로젝트를 통한 협업 능력을 키워보려고 합니다.
다만 고민되는 점이 하나 있는데요, 내년부터 다시 3년간 학교를 다니며 졸업을 목표로 하는 상황에서, 직장을 그만두고 대학에 복학했다는 점이 다음 취업 때 경력 단절로 불리하게 작용하지 않을까 걱정됩니다. 물론 복학 후에는 연구실 참여나 해커톤 등 다양한 활동을 할 계획이긴 합니다.
이런 선택이 장기적으로 괜찮은 방향일지, 혹은 경력 관리를 위해 다른 전략이 필요할지도 조언 부탁드립니다!
(대학을 졸업하고나면..,.,, 32살...이라는....ㅠㅠㅠㅠ)