언어 - TypScript
단순히 JS를 쓰는 것보다 TS를 사용함으로써, 개발 초기 단계에서 오류를 확인하고 수정을 반영할 수 있습니다.명시적인 정적타입을 지원하면서 코드의 가독성을 높일 수 있다. 그리고 현재 우리는 혼자 개발하는 것이 아니라, 5명의 팀원이 함께 개발해야 하므로, 변수와 함수들에 어떤 타입이 어떻게 들어가는지를 파악함으로써 팀원들의 코드를 더 쉽고 명확하게 이해할 수 있다.
라이브러리 - React
상태관리 - Recoil
우리는 리액트를 사용하기로 했고, 리액트는 단방향 바인딩을 지원한다. 따라서 부모에서 자식으로
state를 prop으로 전달할 수 있다. 컴포넌트와 데이터가 복잡해지면 props drilling이 발생할 수 있고, 이는 불필요한 리렌더링을 유발할 수 있다. ⇒ 상태관리 라이브러리가 필요
Redux 대신 Recoil을 사용하는 이유
- Redux의 높은 러닝커브와 큰 보일러플레이트 코드
=> 3주라는 짧은 기간인 우리 프로젝트와는 맞지 않다고 생각했음
- 간단한 Recoil 의 개념 Redux 를 이해하고 사용하려면 공부해야 할 것들이 많다. 데이터의 흐름을 추상화 하여서 익히려고 하여도 여러가지 복잡한 흐름을 이해하는 건 쉽지 않다. 이에 비해서 Recoil 에서 state 를 관리하는 방법은 굉장히 간단해 보인다.
- 쉽게 사용하는 비동기 로직 Redux 에서 비동기를 활용하기 위해서는 middleware 을 활용한다. 비동기 통신을 한다면 통신의 결과가 Success 일수도 있고 Fail 일 수도 있다. 이를 구분하여 state 관리를 해야하는데, 이를 쉽게 하기 위해서 Redux 에서는 Redux-thunk 혹은 Redux-saga 같은 미들웨어를 활용한다. 하지만 Recoil 에서는 내장된 개념인 selector 을 활용해 추가적인 미들웨어의 사용 없이 쉽게 비동기 로직을 구현할 수 있다.
스타일링 - styled emotions
- styled emotions는
CSS in JS로, 기존의 CSS 파일처럼 스타일시트를 문서 레벨로 관리하는 것이 아닌 컴포넌트 레벨로 추상화하여 관리를 하는 개념이다. 이를 React 프로젝트에서 사용할 때 가장 큰 장점은 React의 컴포넌트와 그에 맞는 style 코드를 같은 파일에서 관리가 가능하여 이후 코드 가독성과 유지보수가 편해진다는 점이다.
- 기존의 CSS를 사용하게 되면 스타일이 필요한 대부분의 요소에 클래스명을 중복되지 않게 지어줘야하며 가독성을 위해 명시적으로 지어줘야한다. 하지만 CSS in JS 개념의 라이브러리를 사용한다면 컴포넌트 내에서만 중복을 피하면 되기 때문에 클래스명 생성에서 오는 개발의 난이도가 낮아진다.
- Styled-component와 Emotion 중, Emotion을 고른 이유는 큰 차이는 아니지만, emotion이 styled component보다 번들 사이즈가 작고, 퍼포먼스가 좋다.
포맷팅 - Eslint, Prettier
코드 스타일을 맞추지 않고 개발을 진행하다보면 에러가 생길 확률이 프로젝트가 진행하면 할 수록 커질 수 밖에 없어진다. 이 점을 방지하기 위해 코드 스타일을 컨벤션으로 정하고 프로젝트를 진행하게되는데 문서화된 컨벤션만으로는 강제성을 띄우기 힘들어진다. 강제성을 높이기 위해 ESLint와 Prettier를 이용한다.