-
회고
이 프로젝트에 참여하게 된 이유는 라이브러리를 제작하는 프로젝트였기 때문이다. 일단 CRUD 말고 프론트엔드가 할 수 있는 것 들을 해보고 싶었다. 저번 프로젝트가 svg를 사용해서 지하철 노선도 만들어 보기인 이유도 여기에 있다.
이번 프로젝트에서 처음부터 이 프로젝트의 팀원이 아니었다. 기획 부분은 거의 참여하지 않았고 기획 이후 디자이너분들께서 디자인을 완성하고 나서 팀원으로 들어왔다. 프론트엔드 팀원 한분이 나가시고 나서 팀원의 제의를 받아 같이 작업하게 되었다. 처음 기획부터 같이 한 것은 아니지만 구현하는 부분은 처음부터 끝까지 참여했다.
첫 라이브러리 제작이기도 했고 디자이너분들과 첫 협럽이기도 해서 첫 회의를 진행할 때는 낯을 좀 가리기도 하고 긴장해서 떨렸다. 첫 회의는 나를 소개하는 자리와 figma에 제작되어 있던 라이브러리 안내 페이지의 디자인을 확인하고 디테일한 부분을 질문하는 방향으로 진행되었다.
페이지별 기능과 의문점 정리 
구현에 사용될 스택 정리 프로젝트에 필요한 스택들도 정리했다. 몇 달전 CRA보다는 vite를 사용하는 것이 좋다는 글을 보았기 때문에 그 이후부터는 vite를 사용해오고 있다. (https://junghan92.medium.com/%EB%B2%88%EC%97%AD-create-react-app-%EA%B6%8C%EC%9E%A5%EC%9D%84-vite%EB%A1%9C-%EB%8C%80%EC%B2%B4-pr-%EB%8C%80%ED%95%9C-dan-abramov%EC%9D%98-%EB%8B%B5%EB%B3%80-3050b5678ac8)
typescript 또한 javascript의 동적인 변수 타입을 정적으로 타입을 지정하여 오류를 사전에 방지 할 수 있기 때문에 사용해오고 있다.
위의 사진에는 있지만 Redux Tool Kit은 사용하지 않았다. 사용하기 위해 추가를 했지만 데이터를 따로 다른 곳에서 받아오는 것도 아니었고 전역으로 상태를 관리할 필요를 느끼지 못해서 사용하지 않았다.
프론트엔드가 나 혼자가 아니어서 코드의 스타일을 맞추고자 ESLint와 Prettier를 사용했다. air-bnb를 기준으로 사용했다.
ESLint 
Prettier react-code-block은 사용자에게 코드의 예시를 직접 보여주기 위해 사용했다.
react-color는 사용자가 icon의 원하는 색상을 페이지에서 고를 수 있게 구현하기 위해 사용했다.
본격적으로 프로젝트를 구현하기 전에 branch를 만들어 작업하기로 정했기 때문에 branch의 컨벤션을 정했다.
main은 배포용, dev는 테스트용, feat는 화면의 기능별로 나누어 branch를 만들기로 했다.
안내 페이지를 구현하면서 어려운 점은 없었다 화면만 구현하다보니 익숙해진건가 싶기도 하고 전 프로젝트에서 svg를 다룬 것이 다만 익숙해진 페이지를 만들 라이브러리를 따로 제작해야 된다는 것을 하는 도중에 깨달았다. 그래도 다행이라고 생각한건 컴포넌트 안에 넣을 데이터, 코드는 거의 구현을 해놓았기 때문이다.
npm을 배포하는데 지식이 없어 조사하고 적용하는데 프론트엔드 팀원과 반나절은 사용한 것 같다. 팀원과 같이 화면 공유하면서 무작정 인터넷에 있는 방법을 따라하며 배포를 시도했고 갈아엎고 따라하고 몇 번의 시도만에 성공하여 다른 프로젝트에서 one을 띄우는데 성공했다. 팀원과 나는 서로 수고했다 격려했고 나는 성취감을 느꼈다! 기분이 좋았다!(https://mylearningcoding.tistory.com/109)
이후 본격적으로 npm 배포하는 코드를 작성하고 배포하는데 여러 에러가 발생했지만 하나씩 원인을 분석하며 해결해 나갔다. (https://mylearningcoding.tistory.com/110)
페이지를 거의 완성했을때 한 컴포넌트의 랜더링 시간이 길다는 것을 발견하게 되었다. 대략 11초 사용자가 브라우저의 랜더링 시간이 3초만 넘어가도 90%이상 떠나간다는 통계를 본적이 있는데 이대로면 우리 페이지는 100% 사용하지 않게 된다는 것을 알 수 있었다. 리스트로 나열한 컴포넌트를 이미지로 바꾸고 filter 로직을 변경하고 lazy를 사용하여 최적화를 진행해 대략 1초대로 만들 수 있었다.
이로써 1달 반? 안되는 기간 동안 진행한 프로젝트가 마무리 되었다. 이제는 어느 정도 시간이 지날때 까지는 프로젝트를 진행하지 않을 것 같다. 취업...어서 됐으면! 사용하고 싶은 것이 있으면 진행할지 모르겠다.
아직 여러개로 나누어야 하는 컴포넌트 들도 있고 로직을 조금 더 추가해야 되는 부분이 존재하지만 기능은 다 구현해 놓은 상태이기 때문에 나중에 리팩토링 하는 부분이 될 예정이다.
* 프로젝트 링크
FOR{LOOP}: https://forloop.vercel.app
GitHub: https://github.com/sienna0715/forloop
npmPackage: https://www.npmjs.com/package/for-loop-icons