안녕하세요 프론트엔드 개발자 Garden, 오소현입니다:)
저는 요즘 항해 플러스 프론트엔드 3기 코스 과정에 참여하면서 공부하고 있는데요!
오늘은 그 3주차의 회고를 진행해보려고 합니다 !

[1] 과제 회고

우선 이번주차 과제는 "React, Beyond the Basics" 과제였습니다!
기본과제로는 얕은비교, 깊은비교를 만들어보며 직접 React의 hooks를 구현해보고, 심화과제로는 제가 구현한 훅을 가지고 불필요한 렌더링을 최적화 하는 과정을 구현하는 과제를 진행하게 되었습니다!

주요한 토픽 1-2가지

Topic 1. ⚛️ 랜더링 최적화 개선 ( by. React Profiler )

심화 과제를 진행하기 전, 제가 기본과제에서 작성한 hook을 이용하여 렌더링 최적화를 진행하기 전에 얼마나 개선될지 개발자도구의 Profiler를 통해 확인했습니다.

시나리오 1) 초기 렌더링 시 모든 컴포넌트가 한 번씩 렌더링되어야 한다

Before	After

총 19.8ms 에서 최적화 후 9.1ms로 로드 속도가 개선된 것을 확인했습니다 😲

시나리오 2) 로그인/로그아웃 시 Header, ComplexForm, NotificationSystem만 리렌더링되어야 한다

심화 과제를 구현하기 전의 초기 렌더링 성능

로그인	로그아웃

기본 과제 hook을 이용하여 렌더링 최적화 된 후 렌더링 성능

로그인	로그아웃

로그인 시 37.2 ms -> 4.6ms / 로그아웃 시 61.3ms -> 1.8ms 로 로드 속도가 개선된 것을 확인했습니다 😲

😲 How to??

1) useMemo 훅을 사용한 최적화

// 📦 packages/assignment/src/provider/UserProvider.tsx

  //useMemo을 사용하여 사용자 상태 변경에 따라 컨텍스트 값을 재계산
  const value = useMemo(() => ({ user, login, logout }), [user]);

useMemo 훅은 계산 비용이 높은 연산의 결과를 메모이징함으로써 성능을 최적화한다고 학습했습니다.
이번 제 과제에서 useMemo는 Context.Provider에 제공되는 값 객체를 메모이징합니다.
결과적으로 객체 리터럴은 컴포넌트가 렌더링될 때마다 새롭게 생성되므로, 이 객체를 의존성으로 사용하는 자식 컴포넌트들이 불필요하게 재렌더링되는 것을 방지하는 데 useMemo를 사용했습니다.

2) useCallback 훅을 사용한 최적화

// 📦 packages/assignment/src/provider/UserProvider.tsx

  const login = useCallback((email: string, password: string) => {
    setUser({ id: 1, name: '홍길동', email });
    addNotification('성공적으로 로그인되었습니다', 'success');
  }, [addNotification]);

  const logout = useCallback(() => {
    setUser(null);
    addNotification('로그아웃되었습니다', 'info');
  }, [addNotification]);

useCallback 훅은 함수의 재생성을 방지하고, 불필요한 리렌더링을 줄여 성능을 개선한다고 학습했습니다.
이번 제 과제에서 useCallback는 각 Provider에 제가 만든 useCallback 훅을 사용해서 각각의 Provider의 함수들에게 컴포넌트의 리렌더링에 의해 재생성되지 않도록 적용했습니다.

🤔 고민되는 점

메모이제이션은 결국 메모리를 사용하는 것 이기 때문에 무분별하게 사용하지 않는게 좋다고 하는데 그 기준이 무엇일까,,, 최적화를 진행해서 성능을 개선해 나가는 것은 좋지만 useCallback과 useMemo를 많이 사용하지 않도록 그 기준이 고민 되었습니다
과도한 사용은 오히려 성능 저하를 일으킬 수 있으므로, 실제로 성능 향상이 필요한 경우에만 신중히 사용해야 한다고 말씀해주셨는데 그 기준이 궁금하더라고요!

---

Topic 2. 📂 폴더 구조 (관심사 분리)

//현재 제 과제의 폴더 구조 입니다 :)
📦src
 ┣ 📂components
 ┃ ┣ 📜ComplexForm.tsx
 ┃ ┣ 📜Header.tsx
 ┃ ┣ 📜ItemList.tsx
 ┃ ┣ 📜NotificationSystem.tsx
 ┃ ┣ 📜ThemeComponent.tsx
 ┃ ┗ 📜index.ts
 ┣ 📂context
 ┃ ┣ 📜NotificationContext.tsx
 ┃ ┣ 📜ThemeContext.tsx
 ┃ ┣ 📜UserContext.tsx
 ┃ ┗ 📜index.ts
 ┣ 📂hooks
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜useNotification.ts
 ┃ ┣ 📜useTheme.ts
 ┃ ┗ 📜useUser.ts
 ┣ 📂provider
 ┃ ┣ 📜NotificationProvider.tsx
 ┃ ┣ 📜ThemeProvider.tsx
 ┃ ┣ 📜UserProvider.tsx
 ┃ ┗ 📜index.ts
 ┣ 📂types
 ┃ ┗ 📜type.ts
 ┣ 📜App.tsx
 ┣ 📜main.tsx
 ┣ 📜setupTests.ts
 ┗  📜utils.ts

저는 처음에 구현할 때 각각의 컴포넌트, 훅, provider를 모두 분리하였고, 사용되는 type들을 한 곳에 모두 선언한 type 폴더를 만들어 사용했습니다. 팀원들과 코드를 리뷰하면서 제 폴더 구조가 너무 분리 되어있나? 라는 생각을 하게 되었습니다.
이번주 멘토링 시간에 추천해주신 테오 코치님의 프론트엔드 개발자 관점으로 바라보는 관심사의 분리와 좋은 폴더 구조 (feat. FSD)
글을 읽으며 FSD 구조를 반영해 폴더 구조를 리팩토링해보게 되었고, FSD 구조를 기반으로 한번 제 코드의 관심사 분리 및 폴더 구조를 다음과 같이 개편해보기도 했습니다. (이번 주에도 좋은 글 감사합니다 테오코치님! Vv)

느낀 점,,👀

이번주차 과제는 최적화를 챙겨본 적이 사실 많이 없었는데 1주일간 성능 지표만을 보면서 최적화 해나가아가는 과정이 재미있었습니다! 회사에서는 많이 챙기지 않았는데,, 반성 중,, 틈틈히 이미 구현된 컴포넌트들에 대한 최적화를 진행해보려고 합니다 아좌좌!

[2] 멘토링과 과제 리뷰

이번주 멘토링은 오프 코치님께 :) 받았습니다.
개인적으로 위와 같은 내용에 대한 멘토링을 진행하고, 개인적으로 회사에서 테스트 코드에 대한 질문을 작성하면서 테스트 코드 발제를 담당해주시는 오프코치님의 피드백을 들을 수 있어서 정말 좋았어요 ㅜㅜ

그리고 제가 궁금했던 위의 두 궁금증에 대한 답변을 들을 수 있었습니다 :)

[3] 과제 결과

두 과제 모두 PASS와 BestPractice를 받았네요 ㅎㅎㅎ

[4] 다음 주를 맞이하며,,

Keep : 현재 만족하고 계속 유지할 부분

과제를 주말 내로 마무리하고, 계속해서 고도화한 점을 칭찬합니다 !
그리고 다른 팀과 페어 리뷰를 진행하고, 10분 이상에게 코드 리뷰를 남기는 등bb
코드 리뷰를 적극적으로 활발하게 해서 좋았습니다

특히 다른 팀의 동기분들과 함께 과제 제출하고 기술 토론을 진행했는데 매우매우 유익 했습니다 앞으로 열심히 소통하고, 재밌는 기술 얘기 하는게 좋은 것 같습니다 ㅎㅎ

+) 추상화란,,,?

Problem : 개선이 필요하다고 생각하는 문제점

리뷰를 받고 싶은 PR 내용 정리를 너무 늦게 하는 경향이 있었댜,,, 금요일 마감에 맞추지 말고 다른 분들은 리뷰를 빨리 해주시기 때문에 PR을 오픈하고 최대한 빠르게 정리해서 작성하자!

Try : 문제점을 해결하기 위해 시도해야 할 것

과제 끝나고 계속 검토를 하면서 정리하는 습관을 가지자!

[5] 항해 플러스 다음 기수 합류하기

신입 개발자는 왜 항해 플러스에 승선했을까?

저는 올해 8월에 대학을 졸업한 쌩 신입 개발자입니다
학부때부터 항상 야생에서 팀 프로젝트를 개발하면서 개발을 배운터라, 언제나 불안감이 많았습니다. 그래서 작년에는 우아한테크코스와 같은 부트캠프를 꼭 들어보고 싶다는 생각에 지원하기도 했었는데요, 결국은 부트캠프를 꼭 해보고 싶었으나,, 이래저래 여건이 되지 않았었습니다
취업하고 나서는 퇴사를 해야하니 " 아 이제는 못해보겠구나.." 했습니다 ㅎㅎ,,

그런데 항해99에서 4년차 이하 주니어 개발자를 대상으로 10주간 현직자 부트캠프를 진행한다는 것을 보게 되었고 여러 후기들을 보면서 꼭 합류하고 싶었고, 결국 3기로 합류하게 되었습니다.

우수한 시니어 코치진 라인업이 가장 장점이라고 생각했습니다. 테오 코치님, 제가 인프런에서 자주 들었던 테스트 코드 강의를 진행하시고 블로그를 챙겨봤던 오프 코치님, 그리고 리액트와 js의 동작원리를 위주로 양질의 블로그 글을 작성해주셔서 즐겨찾기 해놓고 보았던 해먼드 코치님 3분을 모두 알고 있었고 이 분들이 진행하시기 때문에 거의 망설이지 않고 지원하고 결제했던 것 같습니다 ㅎㅎ...

신입 개발자이지만 이때 배워야 더 나을 것 같다고 생각했고 부족한 실력이지만 감내하고 도전하게 되었습니다.

저는 현재 4주차를 진행하고 있지만 3주동안 위와 같은 이유로 열심히 몰입해서 공부하고 있는데요!
바로 다음 기수인 항해 플러스 프론트엔드 코스 4기를 모집하고 있다고 하여 공유드립니다!

현재는(24.10.18)에는 슈퍼 얼리버드 기간으로 약 46% 할인을 받을 수 있습니다!

저도 3기 입과할때 슈퍼 얼리버드 기간에 합류해 추천인 할인까지해서 제일 최대 할인된 가격에 합류할 수 있었습니다 ㅎㅎ

또한 추천인 제도로 [추천인] 코드에 “fWHY9o”를 입력하시면 20만 원 추가 할인 혜택이 있으니 결제하실때 꼭 추천인 할인 코드도 함께 입력해주세요!

제 항해 플러스 프론트엔드 후기 글을 보고 궁금한 사항이 있으시다면 댓글이나, 벨로그 프로필 이메일, 링크드인으로 문의주세요 :)