[우아한테크코스 레벨 2] 6주차 회고록

날짜: 2025-05-27 09:39

태그: #우아한테크코스 #회고

이번 주 목표 달성 (DoneList)

• 상품 목록 1단계
• 리액트 공식문서 스터디 (useMemo, useCallback, React.memo)
• 알고리즘 스터디 백트래킹 주간
• 회고 스터디
• 유튜브 근로
• 하루 10분 독서

• 새로운 자극 찾아내기.
  - [ ] 웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드 읽어보기.
  - [ ] 기타 등등

이번 주의 감정 (Emotion)

• 생각 프레이밍의 중요성
  - 생각의 프레임을 바꾸기로 했다..! 이번 주는 나에게 많은 것을 포기하게 했던 한 주였다. 모든 일정에 우선순위를 매겼고, 그 우선순위에서 밀린 일들은 과감하게 포기했다. 미션을 최우선으로 생각해서 회고도 일요일까지 작성하지 못했고, 캐릭터 워크숍도 포기했고, 근로 일도 코치님들과 쇼부를 봐서 최초의 영상 제작 마감 기한을 포기하고 한 주를 늘렸다. 이전까지 나는 모든 일을 마감일 전에 끝내야만 한다는 강박이 있었다. 그래야만 책임감 있는 것이라고 생각했다. 그리고 나의 여가시간과 낭비되는 시간을 줄이면, 그게 가능할 줄 알았다. 그렇지만 이것에는 분명한 한계가 존재했다. 쉬는 시간을 줄여서 일정을 다 마무리 해도, 쉬지 못해서 정신적으로 피폐해졌다. 결국 지속 가능한 방법은 아니었다. 그러다 생각을 달리 해보기로 했다. 일을 다 끝내지 못한 게 내 역량의 부족과 책임감 부족, 시간 관리 실패라고 생각하는 것 대신에 우선순위에 따른 선택과 집중이었다고 생각했다. 그러자 거짓말 같이 마음이 편해졌다. 같은 현상과 결과임에도 생각을 달리하는 것만으로도 마음가짐이 훨씬 가벼워지고, 멘탈에도 도움이 되었다. 생각의 힘은 강력하다.
• ContextAPI + Reducer / MSW를 통한 미션 수행
  - 해먼드의 리뷰를 받고, Product와 ShoppingCart를 하나의 ContextAPI로 결합하면서 React Reducer를 활용했다. 비슷한 구조를 갖는 두 데이터와 loading, error 상태를 하나의 reducer에서 key 값을 통해 구분하여 관리하면서 중복 코드를 줄일 수 있었다. 하지만, 두 데이터가 결합되면서 한 쪽만 바뀌어도 전체가 리렌더링 되는 문제가 생겼는데,, 이는 어떻게 해결해야 할지 아직 잘 모르겠다..
  - MSW를 처음 사용했는데 처음 세팅하는 것부터 난관이었고, 이를 프로덕션 코드에 적용하려 handler를 작성하는 것도 난관이었고, 테스트 코드에서 mocking 하는 것도 난관이었다. 그저 난관의 연속이었다. 어찌저찌 완성은 했지만, 테스트 커버리지가 매우 낮은 부분이 있었다. 신경써야 할 부분과 배워야 할 건 많은데, 리소스가 부족하니.. 선택과 집중을 할 수밖에 없는 것 같다..
• React 공식문서 스터디: Memoization
  - 공식문서 스터디에서 메모이제이션 공부를 했다. React.memo는 props가 바뀌지 않는 이상 리렌더링 되지 않는다. 그리고 useMemo와 useCallback은 한 끗 차이라는 것을 알게 되었다. 함수의 값을 메모이제이션 하면, useMemo이고 함수 자체를 메모이제이션 하면 useCallback이 된다. 즉, useMemo에서 함수의 값이 아니라 함수 자체를 메모이제이션 하면 useCallback과 같은 결과가 된다는 것이다. 그럼에도 불구하고, useCallback이 생겨난 이유는 더 명확한 의도를 보이기 위해서이다. 그러나 메모이제이션은 남발해선 안된다. 성능 최적화를 위한 것이므로 필요하지 않은 경우에는 오히려 캐싱 오버헤드를 발생시킬 수 있다.

TIL (This week I Learned)

• 생각 프레이밍의 중요성
• ContextAPI + Reducer / MSW
• Memoization
• 무턱대고 일을 벌리는 것은 무모한 짓이다.

잘한 것 (Keep)

• 생각의 전환
• 미션과 스터디에서 배운 개념 정리

아쉬운 점 (Problem)

• 미션을 급하게 마무리 하느라 성능 측면을 많이 놓쳤다..

다음 주 보완 계획 (Try)

• 선택과 집중을 잘하자..

다음 주 목표 (ToDoList)

• 장바구니 1단계
• 상품 목록 2단계
• 리액트 공식문서 스터디 (useContext, 프론트엔드 성능 최적화 가이드 1장)
• 알고리즘 스터디
• 회고 스터디
• 유튜브 근로
• 하루 10분 독서

GPT 선생의 한 마디

정말 인상 깊은 한 주였어요. 몇 가지 제가 느낀 점을 나눠볼게요.

1. 생각 프레이밍의 전환
   • 매일 ‘모두를 완벽히 해내야 한다’는 자기압박에서 벗어나, 우선순위에 따른 과감한 선택과 집중으로 마음의 여유를 찾은 모습이 멋집니다. 같은 결과라도 해석을 바꾸는 것만으로 스트레스가 확 줄어들 수 있다는 걸 다시 한번 깨닫게 해 주었어요.
2. 기술적 도전과 학습
   • ContextAPI + Reducer를 결합하면서 중복 코드를 줄인 시도는 훌륭합니다. 다만, 하나의 상태가 변경될 때 불필요한 리렌더링이 발생하는 문제는 React.memo나 useMemo, 또는 상태를 세분화하여 관리하는 방향으로 접근해 볼 수 있어요. 예를 들어, 각각의 컴포넌트가 관찰하는 state slice만 업데이트되도록 분리하면 리렌더링 범위를 줄일 수 있습니다.
   • MSW 세팅과 핸들러 작성, 테스트 코드 mocking까지 어려움이 많았다니 고생 많으셨어요. 리소스가 부족할 땐 “핵심 흐름에 대한 e2e 테스트” + “핵심 유닛 테스트” 두 축을 잡고 커버리지를 늘려 가면 도움이 될 거예요.
3. 메모이제이션에 대한 이해
   • React.memo, useMemo, useCallback의 차이를 명확히 짚고 넘어간 점이 좋아요. 말씀하신 대로 불필요한 캐싱은 오히려 오버헤드를 유발할 수 있으니, 프로파일링을 통해 실제로 병목이 발생하는 곳에만 적용하는 게 좋습니다.
4. 다음 주를 위한 제언
   • 할 일(ToDoList)이 많지만, 이미 ‘선택과 집중’을 몸으로 체득하셨으니 “오늘은 이 한 가지에만 몰입” 같은 작고 구체적인 미션으로 쪼개 보시면 좋겠어요.
   • 성능 최적화 가이드를 읽을 때, 직접 작은 샌드박스 프로젝트에 적용해 보면서 배운 내용을 즉시 확인하는 식으로 진행하면 이해가 더 빠릅니다.
5. 균형 잡힌 성장
   • 기술 학습에 몰입하더라도, ‘정신적 휴식’을 확보한 경험을 잊지 않으셨으면 해요. 결국 지속 가능한 페이스로 나아가야 더 멀리 갈 수 있으니까요.

이번 주 배운 것들을 잘 정리해 두셨으니, 다음 주도 “선택과 집중”의 힘을 믿고 과감하게 시도해 보시길 응원합니다!