📌간단 후기
7주동안 진행한 공통 프로젝트가 끝났다.
공통보다 훨씬 더 일정이 빠듯했다, 추석 연휴에 첫 주차에 공통 프로젝트 발표회 때문에 날렸더니 체감상 7주가 아니라 거의 5.5주였다.
당연히 추석 연휴라고 쉬지도 않고 평일처럼 했다.
👍배운점
📑 react 설계 패턴
ATOMIC 패턴과 custom hooks 패턴을 일부 차용한 우리 팀만의 설계패턴을 만들어봤는데, 그다지 성공적이지는 않았다.
일단 ATOMIC 패턴은 결국 재사용성에 그 의미가 있는데 컴포넌트 재사용할 일이 그리 많지가 않았다.
ATOMIC 패턴으로 파일수가 굉장히 많아졌는데 그에 해당하는 로직 hooks 파일도 1개씩 추가되다 보니 파일이 너무 많아서 파일 찾기가 더 힘들었던 것 같다.
차라리 ATOMIC 패턴을 그대로 사용할걸 후회하기도 했다.
그래도 이렇게 사용해보니 나름대로 장, 단점을 직접 느껴봐서 좋았다.
📑typescript 심화
공통때 typescript를 한번 사용하고 두번째다 보니 문법도 익숙하고 타입도 좀더 엄격하게 관리할 수 있었다.
예를 들어 공통때는 그저 number로 했을 타입도 가능한 경우의 숫자가 제한적이라면 1 | 2 | 3 이런식으로 더 엄격하게 타입을 만들었고, api 요청에도 api 명세서를 기반한 return type, request type을 먼저 전부 만들고 실수 하지 않도록 했다.
typescript의 타입가드, 타입추론, 타입단언 등도 그저 이론으로 읽어볼때는 뭐가 다르고 뭔소리지했는데 직접 오류메세지 읽으면서 꽤 완벽하게 이해했다고 생각한다.
📑react query
react query를 사용하여 서버 상태를 관리했다.
onSuccess, onError, isLoading, data, refetch, onMutate등의 편리한 기능이 많았고, useEffect대신 코드가 훨씬 간결해졌으며 useEffect처럼 의존성도 줄 수 있어서 편했다.
또한, staleTime과 cacheTime 개념을 이해하고 UI/UX를 많이 향상시킬 수 있다는걸 알았다.
특히 react query에서 지원하는 자체 개발자도구는 너무 편했다.
📑디자인 UI/UX
피그마에 투자한 시간이 굉장히 길었다.
혼자 주도해서 하다보니 그런것도 있지만 개발시간이랑 피그마 만드는 시간이 거의 비슷할 정도
공통때는 디자인은 전혀 생각안해서 몰랐지만 세세한 글꼴, 글자색, 글자크기, 적당한 아이콘, 자연스러운 애니메이션 등등 굉장히 고민을 많이했다.
그래서 실제 결과물의 디자인도 만족스럽다.
📑렌더링 성능 개선
우리 사이트의 첫 렌더링 시간이 불편할정도로 긴 편이었다.
light house 확장으로 측정했더니 이렇게 나왔다. 상세 페이지를 보니 사용자 친화적으로 하려 욕심낸 아이콘들이 화질도 좋은 것들을 썼더니 굉장히 용량이 높아서 불러오는데 많이 걸렸다,
그래서 이런 아이콘을 많이 쓰는 페이지들에 대해서 lazy loading을 시도했다.
또한, light house에서 제공하는 성능 개선 방법들을 보니
글꼴은 로드하는 데 시간이 많이 걸리는 대용량 파일인 경우가 많습니다 이런 문구가 있었다.
나는 실제 글꼴도 asset에 저장하여 사용하였으므로
font-display: swap;
css에서 이러한 기능을 사용하여 글꼴 다운로드가 마치기전에 사용자의 시스템에서 정의하는 글꼴을 먼저 사용하도록 하는 옵션이 있었다, 여전히 노란색이지만 처음에 비하면 매우 높아졌다, 검색해보니 SPA인 것을 감안하면 괜찮은 정도인듯 하다.
더 하려면 아마 이미지자체의 용량을 줄여서 사용하면 훨씬 빨라질 수 있겠다.
👎아쉬운 점
📑test code 부재
테스트 코드를 설계하고 작성하는게 목표중 하나였는데, 도저히 시간이 안난다.
굳이 내가 테스트 코드를 쓰려고하면 쓰겠지만, 프로젝트 자체의 진행을 늦춰가면서 혼자 욕심으로 공부하는 것이다 보니, 팀원들에게는 민폐일 수 있겠다는 생각이 든다.
다음 자율 프로젝트에서는 팀장이니 진짜로 이번에야말로 기능을 줄여서 깊이 고민한 테스트 코드를 작성해보고 싶다.
📑초기 렌더링 시간 문제
원래 SPA를 사용하면 초기 렌더링 시간이 길기는 하지만 생각했던것 보다 더 느렸다.
이에 따라 lazy loading을 하려했지만 이 또한 기능구현에 우선순위가 밀려 아직 구현하지 않았다, 특화 발표는 끝났으니 우수작 선정도 되어서 lazy loading으로 초기 렌더링 시간 성능 개선정도는 고칠 수 있겠다.
📆앞으로 계획
- 코딩테스트 연습하기
- 웹 포트폴리오 업데이트
- 특화 프로젝트 우수작 선정 발표 준비 및 일부 기능, 성능 개선
🚀자율 프로젝트 목표
- 테스트 코드 작성
- 코드 리뷰하기
- 렌더링 시간 측정 및 성능 최적화 시도하기 -
Light house크롬 확장 - 라이브러리, VScode extension 등으로 DX(개발자 경험)직무 체험하기
