프로젝트 회고 (트리플 사전과제)

여행어플 트리플에 입사하기 위해 사전과제로 진행했던 프로젝트에 대해서 회고해보려고 합니다.

과제 소요 시간은 하루 정도 걸린 것 같습니다.😀

과제내용 간략 소개

트리플 홈페이지의 한 섹션을 홈페이지와 동일하게 React를 이용하여 구현하는 것이 과제였습니다!
제가 구현한 코드가 궁금하시다면 사전과제 Github를 확인하시면 좋을 것 같습니다!

• private 으로 변경했습니다.

기술 스택

저는 과제를 진행하면서 TypeScript, React, Styled-Components를 사용하였습니다.

좋았던 점

1. 맡게될 업무 간접 경험
   과제의 내용이 트리플 홈페이지의 한 부분을 직접 구현하는 것이다보니, 프론트엔드로서 업무를 맡게 된다면, 어떠한 역량이 필요하며 무슨 일을 하게 될 지 간접적으로 느낄 수 있어서 뜻깊은 시간이였습니다.

   코드를 작성하면서 정말 이게 효율적일까? 생각하게 되는 저를 돌아볼 수 있었습니다!🥰

2. TypeScript 적용
   이전 프로젝트에서 적용하지 못했던 TypeScript를 적용하여 과제를 진행하였습니다. 적용하면서 가장 좋았던 점은 매개변수 및 결과값의 타입을 빠르게 확인하고 오류를 최대한 줄일 수 있었습니다.

   앞으로 프로젝트를 진행하게 된다면 TypeScript를 응용해서 사용할 수 있도록 준비하리라 다짐했습니다!

3. 파일 구조
   과제를 진행하는 동안 최대한 효율적으로 표현하기 위해 파일 구조부터 컴포넌트 설계 그리고, Commit 메세지까지 세세하게 신경 쓰며 진행하였습니다. 개인적으로, 파일 구조를 기능별로 나눔으로써 개발 및 유지 보수가 향상되는 것을 체감할 수 있었습니다.

.
├─ README.md
├─ package.json
├─ tsconfig.json
└─ src
   ├─ index.tsx
   ├─ App.tsx
   ├─ components        	컴포넌트
   │  ├─ Award.tsx       	
   │  ├─ ContentLogo.tsx    
   │  └─ Metrics.tsx        
   ├─ hook             		커스텀 훅
   │  ├─ useCountUp.tsx
   │  └─ useFadeIn.tsx
   ├─ utils             	유틸리티 함수
   │  └─ animation.ts
   ├─ types            		타입 관리
   │  └─ fadeIn.ts
   ├─ constants                 상수 관리
   │  ├─ colors.ts
   │  └─ images.ts   
   ├─ styles           		전역 CSS 관리 (Reset.css)
   │  └─ globalStyles.ts
   ├─ images               	이미지 관리
   │  ...

아쉬웠던 점

1. 카운터 함수
   라이브러리를 사용하는 것보다 직접 구현하는 것이 저의 성장에 도움이 될 것이라 판단하였고, 프레임을 활용한 애니메이션을 추가하여 카운터가 증가하도록 구현하였습니다.

   개발을 진행하는 동안 애니메이션과 타이머의 함수의 실행 속도가 다른 것 뿐만아니라 퍼포먼스측면에서 메모리 누수를 발견하게 되었는데, 어떻게든 해결 해보기위해 다른 카운터 라이브러리 내부 구조를 직접들여다보기도 했지만 결국 해결하지 못했던 점이 너무 아쉬웠습니다😭

   프레임과 비동기 동작 방식 그리고 메모리 누수 해결에 대한 지식 부족을 느꼈고, 비동기 동작 방식과 메모리 누수 관련해서 찾아보고 정리할 계획입니다!