🥓리액트 리뉴얼 프로젝트 후기🥓

🥓리액트 리뉴얼 프로젝트 후기🥓

프론트엔드 개발자로 첫 커리어를 시작하면서 완전 초기 세팅부터는 아니지만 꽤 큰 규모의 프로젝트에 참여하였고 배포까지 완료했다. 기존에 운영되던 서비스 웹사이트를 리액트로 전체 리뉴얼 하여 바꾸는 프로젝트 이기에 퇴근 후, 주말에도 시간을 많이 할애하였지만 배포 후 운영되는 사이트를 보니 너무 뿌듯하다. 첫 프로젝트인 만큼 배운점도 많고 부족한 점도 많이 느꼈기애 정리해보자 한다! 💪

🌟잘하고 있다고 느낀 점

1. 반응형 웹 / 스타일
   전체 페이지는 모바일, 태블릿, 데스크탑 분기로 반응형 웹으로 개발되었고 분기에 따라 레이아웃 구조도 많이 바뀌기에 css 작업시에 처음엔 시간을 많이 들였는데 이젠 익숙해져서 많이 는거 같다! 초반엔 디자인 가이드를 보고 디자이너분의 설명을 들어도 이해가 안가는 부분이 꽤 있었는데 역시 스타일 적인 거는 하면 할수록 느는거 같다. 한번도 안써본 css 속성도 많이 써보고 간단한 거지만 애니메이션도 적용해보았다

2. 많은 경우에 대해 생각해보기
   api를 통신하고 기존에는 무조건 되는 경우만 생각하여 작업을 하였다. 발생할 수 있는 테스트 케이스에 대해서도 부족하였고 이러한 설계없이 진행된 코드에서 문제가 발생하면 그걸 막기에 급급하여 코드는 지저분해지고 처음 설계부터 잘 못 되었다는걸 많이 느꼈다. 이전에 바로 새로운 컴포넌트를 생성한다면 import React from 'react'; 를 작성하기보다 이젠 발생할 수 있는 경우에 대해 생각하고 대응해야 할 점에 대해 정리를 하고 시작한다. 더 복잡한 경우는 플로우 차트를 그려 나가는게 놓칠 수 있는 케이스들을 줄여준다. 이는 단순히 퍼블리싱 작업을 한다고 할때에도 도움이 되는 습관인 거 같다! 퍼블리싱도 설계없이 무작정 들어가게 되면 수많은 div 를 남발하게 되고 다시 마크업 부터 들어가는 순간이 생긴다. 에러 핸들링은 여전히 어렵지만 이 부분은 경험에 따라 많이 늘것이라고 생각된다.

3. 성능 생각하며 코드 짜기
   이 부분은 그간 개인적으로 진행하던 프로젝트에선 전혀 고려하지 않은 점인데 왜냐하면 로컬에서만 작업이 되는 유저가 없는 프로젝트였기 때문이다. 앱의 규모가 커지고 유저가 있는 서비스라면 늘 성능을 생각하고 작업해야한다. 특히 프론트에선 스크롤, 리사이즈와 같은 무거운 이벤트를 꽤 많은 곳에서 사용하게 되고 돔의 위치를 파악하여 그 요소를 가지고 작업을 하는 경우도 많다. 사용한 이벤트와 상황에 맞게 적절하게 throttle, debounce 함수를 적용해보았고 useMemo와 useCallback 과 같은 메모이즈 역할을 하는 훅스를 사용했고 useRef를 사용했다. 분명 훅스 사용도 남발하지 않고 적절하게 사용해야 더 좋은 성능을 끌어 낼 수 있다. 이부분은 더 공부하고 알아보아서 추후 리팩토링 시에 반영해야겠다.

☔더 공부해야 겠다고 느낀 점

1. 공통적인 부분
   컴포넌트 재활용, 함수의 재활용은 여전히 어렵다. 사실 디자인 가이드가 완벽하게 나오지 않은 상태에서 해당 컴포넌트가 또 어느곳에서 쓰일지 예상을 하며 만들기가 어렵다. 그치만 초반 설계를 잘하면 분명 재활용 가능한 컴포넌트를 만들 수 있을 거라고 생각한다! 재활용의 중요성은 유지보수 때문이다. 디자인 적인 요소, 기획적인 요소, 데이터적인 요소 어떠한 요소로 인해 어떤 부분이 어떻게 바뀌게 될지 예측할 수 없기에 최대한 주어진 것들을 활용해 만들 수 있는 최소한의 컴포넌트만을 생성하여 유지보수에 소요되는 시간과 노력을 줄여야한다. 함수적인 면도 공통적인 부분은 함수로 생성하여 가져다 쓰는 방법으로 생각해 볼 수 있다.

2. 이론 공부
   현재 프로젝트에는 ssr 프레임워크가 적용되어 있지 않아서 메타 태그, 동적 타이틀 등 seo 적인 측면은 아직 진행 중이다. 아마 prerendering으로 spa에서 동적 메타태그 적용이 가능하도록 수정을 할 거 같은데 ssr이 가능하도록 지원해주는 프레임워크를 사용해 주면 이러한 문제를 손 쉽게 해결해 주기에 적용할 수 있는 나중을 위해 미리 공부해 두고 싶다. 그리고 프로젝트를 진행하던 전반적인 기간동안 느낀 점은 이론적인 부분을 쌓아야 겠단 점이다! 이론적인게 흔들리니 가장 원초적인 문제점을 파악하지 못하고 계속된 구글링으로 겉도는 느낌이 들어 다시 공식문서부터 제대로 읽기를 시작했다. 그리고 내가 많은 부분을 놓치고 있었구나도 파악됐다.