[7팀 최용훈] Chapter 1-3. 프레임워크 없이 SPA 만들기

[yhun940731]

과제 체크포인트

배포 링크

https://hanghae-plus.github.io/front_6th_chapter1-3/

기본과제

equalities

• shallowEquals 구현 완료
• deepEquals 구현 완료

hooks

• useRef 구현 완료
• useMemo 구현 완료
• useCallback 구현 완료
• useDeepMemo 구현 완료
• useShallowState 구현 완료
• useAutoCallback 구현 완료

High Order Components

• memo 구현 완료
• deepMemo 구현 완료

심화 과제

hooks

• createObserver를 useSyncExternalStore에 사용하기 적합한 코드로 개선
• useShallowSelector 구현
• useStore 구현
• useRouter 구현
• useStorage 구현

context

• ToastContext, ModalContext 개선

과제 셀프회고

과제를 진행하면서 React hooks의 내부 동작 방식을 보다 깊이 있게 이해할 수 있었다. 라이브러리 없이 SPA를 직접 구현하다 보니, hooks가 어떻게 동작하고 컴포넌트 상태나 렌더링에 어떤 영향을 미치는지 논리적으로 고민할 시간이 많았다. 큰 어려움은 없었지만, 가끔 예상치 못한 동작을 마주치면 전체 흐름을 직접 따라가며 해결해볼 기회가 생겨 좋았다.

기술적 성장

• Context API에서 state와 dispatch 함수를 다른 Context로 분리해서 선언 시, 리렌더를 최소화할 수 있다는 것을 학습했다.

자랑하고 싶은 코드

개선이 필요하다고 생각하는 코드

학습 효과 분석

이번 과제를 통해 라이브러리 내부 구현 원리에 대한 이해가 크게 향상되었다. 라이브러리가 제공하는 핵심 로직을 직접 다뤄볼 수 있는 좋은 경험이었다.

과제 피드백

학습 갈무리

리액트의 렌더링이 어떻게 이루어지는지 정리해주세요.

메모이제이션에 대한 나의 생각을 적어주세요.

컨텍스트와 상태관리에 대한 나의 생각을 적어주세요.

리뷰 받고 싶은 내용

커스텀 hooks 및 context 분리 구현이 실제로 리렌더링을 최소화하는 데 효과적인 구조인지, 추가로 개선할 점이 있다면 피드백을 받고 싶습니다.

[BangDori]

항상 열심히 하시는 우리 용훈쨩 1-3 과제때는 회사일로 많이 바쁘셧나봐요 PR 내용이 하나도 없..어..

개인적으로 궁금해서 질문드리는 건데 용훈님은 작업 하실 때, 작업을 모두 완료하신 후에 PR을 작성하시는 편이신가요??

[yhun940731]

@BangDori 네 보통 작업 빠르게 하고 PR 작성하는데 그쯤 가면 까먹는 것도 많네요.. 중간중간 작성해야하나...

[BangDori]

@yhun940731

작업 다 하구나서 PR을 작성하려고 하면 아무래도,, 이게 정말 중요했던? 기억에 남는 몇 가지를 제외하고서는 모두 까먹게 되더라구요.. 그래서 저는 3주차부터 시작하고 있는 중인데 "기록하며 작업하기"를 하려고 노력하고 있습니다!

사실 막 거창한 건 아니구요, 옆에 md 파일이나 메모장 켜두고 작업을 해요. 그러다가 어떤 특정 지점들이 발생할 때마다 일기쓰듯이 써요.

나 이거이거 구현했음.

• 아 근데 이거 하려고 했는데 막혔음
• 무지성으로 console 찍었다가 3시간 날림
• 아 근데 생각해보니까 Context 쪽에 문제가 있엇네?
• 아.. 무지성 나가

이런식으로.... 그리고 pr을 작성할 때에는 위 뼈대에 살을 붙여서 제 의식의 흐름을 드러낼 수 있도록 글을 쓰려고 노력해요!

도움이 되실진 모르겠지만 용훈님도 일기 쓰듯이 옆에 기록하면서 작업을 같이 해보시죠! 생각보다 되게 기억에 오래 남고 재밌어여

[yhun940731]

@BangDori 친절한 뱅준상... 오늘부터 실천해보겠읍니다...