개요
이전에 했던 팀 프로젝트에서는 프로덕트의 일부만을 담당해서 맡은 부분에 대한 경계라거나, 구현해보지 못했던 기능에 대한 아쉬움이 남아있었다. 이번에는 백엔드1, 프론트엔드1로 구성된 팀으로 프론트 파트를 혼자서 모두 담당해보려고 한다.
서비스 상세
gocamp는 네이버 map api와 공공데이터(국내 야영장 데이터) api를 활용하여 국내 야영장의 위치와 간단한 정보를 알려주는 서비스이다.
gocamping이란 비슷한 서비스가 존재하나, UI 측면에서 더 세련되게 해볼 수 있을 것 같아서 만들어보려고 한다.(google map을 따라하는 수준이겠지만..?)
사용기술
CSR - React
- 이번에는 서버사이드렌더링이 중요한 서비스가 아니기도하고 아직 순수 react 프로젝트를 제대로 해본 적이 없어서 next.js가 아닌 react를 사용해보려고 한다. 그래서 프로젝트 하는 김에, react의 동작 원리라거나, 구성 요소, hook, react18 버전 활용 등등 실험해볼 수 있는 건 다 해보면서 프로젝트를 진행하려고 한다.
CSS - Emotion
- 이번에도 이모션을 사용한다. 사용 이유는 이전과 유사하다.
- jsx 문법에서 html을 바로바로 확인할 수 있는게 가독성 면에서 더 좋다고 느껴지고, css props를 더 잘 활용해보고 싶기 때문이다.
- 위에서 말한 것 같이 이번에는 emotion을 단순히 nested된 css로만 활용하는 것이 아니라 함수형으로 활용해서 재사용성, 효율성을 더 올려보고 싶다.
상태 관리 - recoil
기존에는 react-query(server state)와 recoil(client state)을 같이 사용해보려고 했지만, 두 개를 찍어먹어보는 수준만 될 것 같아서 차라리 recoil를 제대로 공부하면서 사용해보려고 한다.
기존에 사용했던 redux에서는 아래와 같은 불편함을 느꼈다.
- api 작성의 번거로움 비동기 작업 시 모든 상태에 대해 정의해줘야함
- store 세팅이 복잡하고 무거움.(미들웨어,next.js 호환 등)
- 위와 비슷한 이유로 next.js에 친화적인 라이브러리가 아님.(앞으로 next.js를 많이 사용할 예정이기 때문에)
recoil을 아직 사용해보지 않아서, 이게 더 좋다고 말할 순 없지만, 서칭해본 결과 redux보다 훨씬 간결하고, 단순하고, react 친화적이다.
recoil을 통해 동기, 비동기 상태 관리를 진행보면서 장단점을 비교해볼 생각이다.
목표
프론트엔드 개발자스럽게 코딩
- 프론트엔드 개발자스럽게...라는 부분은 정의내릴 수 없지만 내가 부딪힌 기술적 문제를 여러 요소(성능, 효율, 가독성, 객체/함수 지향적)를 고려하면서 해결해보고 싶다는 뜻이다. 이전에는 사실 에러가 발생하거나, 어떤 문제에 부딪혔을 때 빨리 해결하는데에 급급했던 것 같아서, 이번에는 이런 부분을 더 집중해서 접근해보고 싶다.
상태 관리
- recoil 사용하면서 목표하는 바는 두가지이다.
- 내장된 훅을 제대로 이해하고 사용
- selector를 통해 관리하고 있는 전역 상태들을 다양한 방식으로 활용
성능 관리
- 재렌더링, 서스펜스, 코드 스플리팅을 직접 관리해보면서 개선한 성능을 수치로 확인하고 싶다.
css
- 이번에는 UI framework을 사용하지 않는다. (icon 제외) 직접 css를 처음부터 끝까지 작성해볼 생각이다.
- 또한 이전에 해보고 싶었던 코드 재사용성 올리기. 이상하더라도 나만의 디자인 시스템 구축하는 걸 흉내내보는게 목표다.
- emotion을 함수 형태로 활용해볼 예정이다.
react의 이해
- react 동작 방식을 이해하고 활용.
(optional) PWA 해보기
프론트엔드 개발자