[Side-pjt] Tech-IT 사이드 프로젝트 시작하기

Jin·2022년 8월 27일
0

side-pjt

목록 보기
1/5
post-thumbnail

들어가기 앞서

지난 프로젝트들에 대해 아쉬움이 많이 있기도 했고, 새롭게 공부한 기술스택들을 활용해보고 싶었는데 마침 백엔드를 하는 지인이 사이드 프로젝트 관심없냐고 물어보았다. 프론트엔드를 담당하는 나로서는 좋은 기회였기 때문에 바로 관심이 있다고 대답을 하게 되었고 그렇게 사이드 프로젝트를 진행하기로 했다.

사이드 프로젝트를 시작하는 이유

  • 새로운 기술스택(next.js, recoil, react-query)을 사용 해보고싶어서
  • 이전 프로젝트들은 데드라인 때문에 기능 구현에만 초점을 두고 코드에 더 신경을 쓰지 못했는데, 이번에는 좀 더 근거를 가지고 코드를 잘 작성하고 싶어서
  • 테스트코드 작성 및 리팩토링 해보기

주제 선정이유

전자기계 쇼핑몰을 만들어보기로 했다. 그렇게 정한 이유는 아래와 같다.

  • 데이터가 있을것. 백엔드분이 많은 데이터를 다루고 싶어하기도 했고, 성능 최적화에 관심이 있는 나로서도 많은 데이터를 깔끔하게 렌더링 시켜보고 싶었다. 그렇게 api를 찾던 도중 best buy api를 발견하게 되었다
  • client state와 server state를 구분하여 관리하기 좋을 것 같았다. 장바구니, 선택한 상품들이나 다크모드 같은것들은 클라이언트에서 관리. 그리고 회원정보, 상품 정보들은 서버에서 관리 할 수 있을거같았다.
  • 새롭게 학습한 기술스택을 사용하기 좋을 것 같았다. recoil과 react-query를 사용하여 클라이언트와 서버 state들을 따로 관리할 수 있고, 검색에 노출이 많이 되어야하는 쇼핑몰 특성상 next.js를 사용하기에도 적합했다.

기술 스택 선정

  • Next JS - 쇼핑몰의 상품 등이 검색 결과에 더 자주 노출되도록 SEO를 하는것이 중요하다고 생각하여 사용.
  • Recoil - React에 최적화(React 동시성 모드) 되어있음. Redux처럼 다양한 구성이 필요가 없음(action, reducer 등)
  • React-Query - 효율적인 캐싱관리. 별도의 설정 필요없이 바로 사용 가능. 비동기 데이터 관리가 너무 쉬워짐 등.
  • tailwind-css & styled-components - css 라이브러리를 한번도 사용한적이 없어 사용해보고싶었음. 리액트의 장점인 재사용 가능한 컴포넌트를 위해 styled-component와 함께 사용
  • Jest - 페이스북에서 만들었기 때문에. 러닝커브가 낮음
profile
내가 다시 볼려고 작성하는 블로그. 아직 열심히 공부중입니다 잘못된 내용이 있으면 댓글로 지적 부탁드립니다.

0개의 댓글