[Project] React 개인 프로젝트 기술 스택 정의

Project

React 개인 프로젝트 시작 - 기술 스택 정의

React 개인 프로젝트

구현 내용

웹 어플리케이션

매일매일 먹어야 할 약 및 영양제를 나타내주는 웹 어플리케이션

구현 페이지

• 로그인
• 메인 페이지

해야하는 것

• 처음에는 기능보다는 내가 무엇을 할 것이고, 배울 것인지에 초점 맞추기, 기본에 대한 공부
• 프로젝트 하는 도중에는 어떤 어려움이 있는지, 발생한 문제에 대해 원인 파악/해결 방법까지 빠짐없이 기록
• 완료가 되고 나서는 내가 무엇을 배웠는지에 대한 회고
• 완료가 된 후에도 끝내지 않고 코드에 대한 지속 리팩토링, 기능 추가

하지말아야 할 것

• 남에게 휘둘리지 않기, 나를 믿고 묵묵히 해나가기
• 이상한 기능에 정신 팔려서 붙잡고 있지 않기
• 아직 구현 능력도 부족하므로 너무 코드 신경 써서 늦어지지 않기

기술 스택

JS Library

• React:
  React를 공부 중이며 아직 하나의 JS 라이브러리도 정확하게 개념을 숙지하고 있는 상태가 아니기 때문에 React를 계속 학습하고자 한다.
  또한, 학습하는 입장에서 방대한 커뮤니티와 라이브러리를 무시할 수 없다고 생각한다.

Language

• JS 먼저 구현 → TS 리팩토링 예정:
  현재 JS만 학습이 된 상태이며 TS는 추후에 할 예정이다.
  따라서, 먼저 JS로 구현한 후 TS를 학습하고 또 학습하는 과정에서 리팩토링을 할 예정이다.

CSS

• styled-component:
  가장 많이 사용하고, 성능면에서 뛰어나며, PostCSS로 모듈화하여 사용했었고, styled도 사용했었지만,
  styled는 css만 알아도 굉장히 직관적으로 느껴졌고, 로직 또한 작성할 수 있는 강력한 장점을 가지고 가고 싶다.

개발 환경 설정

• Webpack:
  번들러 개념에 대한 이해가 매우 부족한 상태이다.
  따라서, 개념을 공부하고, 크지 않은 앱이지만 CRA에만 의존하지 않고 Webpack 설정을 시작해보고 싶다.
• babel:
  트랜스파일러에 대한 정확한 역할을 알지 못하는 것 같다.
  아직 무엇을 모르고, 무엇을 아는지 모르는 상태이다.
  그저 babel은 ES6 문법을 ES5로 변환해주어 크로스 브라우징을 지원한다는 것 밖에 알지 못한다.
  따라서, babel 또한 CRA에 의존하여 아무 학습없이 끝내고 싶지 않아서 개념에 대해 공부하고, 설정을 처음부터 하기로 한다.
• Prettier:
  Formatter 설정 학습
• ESLint:
  문법 검사 툴 설정 학습
• 추후 TS 세팅

상태 관리

• Redux:
  아직 Redux 디자인 패턴(flux)에 익숙해진 것이 아닌데 다른 상태관리를 배워 라이브러리들을 얕게 배우는 것보다 Redux saga를 사용해보면서 기본기를 쌓고 싶다.
  추후에 Recoil을 사용해보거나 React query 등을 사용했을 때 Redux가 어떤 장점이 있었고, 단점이 있었는지를 좀 더 정확하게 판단할 수 있으면 좋을 것 이라 생각한다.
• Redux-saga:
  redux middleware로 thunk만 사용했었는데, 더 강력한 기능을 제공하는 generator 기반 saga를 학습해보고 싶다.
  generator에 대한 개념 또한 이론만이 아닌 실전으로 체득하고 싶다.

백엔드

• firebase:
  서비스를 만들고자 하는 시간 대비 서버 구축을 한다면 러닝 커브가 너무 길어져 서비스 완성이 늦어질 것이라고 판단하여 firebase를 사용하고자 한다.

디자인 패턴

• MVVM:
  MVVM 디자인 패턴에 대해 좀 더 이해하고자 한다. View(UI)의 재사용성을 높일 수 있도록 하고, Redux를 이용해 M을 구현하는 등 최대한 MVVM을 이해하고자 한다.
• Container-Presenter Pattern:
  리액트에서 자주 사용하는 패턴인 Container Presenter 개념을 이해하고자 한다.
• atomic design:
  폴더 구조를 아토믹 디자인에 기반하여 작성하고자 한다.
  Component를 쪼개고, 구성하는 데에 시간이 오래 걸릴 것으로 예상되지만, 구조를 확인하기 좋고, 컴포넌트 재사용성을 높일 수 있다고 생각한다.

테스트

• TDD 적용:
  TDD 도입을 하여 Test 코드를 작성해본 적이 없어 학습하려고 한다. 하지만, 우선순위를 조금 미루고자 한다.(Webpack, TS, redux saga 학습 및 아직 부족한 구현이 먼저)
• Jest:
  가능하다면 Unit test를 도입하고자 한다.

형상 관리

• git: git 컨벤션 적용 (feat: updated / refactor: updated / 등등)
• github: repo 생성

기타

• figma: 디자인 시 사용

추가

와이어 프레임

pinterest 및 dribble 디자인 참고하여 디자인에 너무 몰두하지 않도록 한다. figma 사용 디자인 시안 완성 필요

기능

세부 기능들 확실하게 정하기 firebase collection/document 저장 어떻게 할 것인지 정하기