FE 프로젝트 시 선택하는 기술스택들 - yarn, emotion, materail UI...

프로젝트를 시작하면, 수많은 선택의 기로에 놓이게 된다. 바로.. 기술스택들

사실 일전엔 큰 고민없이 많이 쓰이기 때문에 선택한 것들이 있었지만,

이번 프로젝트는 나에게 매우 크고 소중하기에 선택지들을 비교해보겠다!

 

---

1.  Package Manager  - npm vs yarn

npm (node package Manager)

Node.js 기본 패키지 관리자

 

yarn

npm과 크게 차이는 없지만 , 버전 차이로 인한 버그를 방지하고 패키지가 약간 더 가벼움

• 가볍고 빠르다
• 속도와 안전성이 미세하게 좋지만 performance 차이는 크지 않다.
• 병렬적 패키지 설치, 버전차이로 인한 버그 방지 가능

✔️ 둘 사이에 큰 의미가 없지만 장점이 더 한 yarn을 안 쓸 이유가 없기에 yarn선택

 

 

2. Frame Work - CNA vs CRA

CNA

webpack 설정 없이 SSR을 제공하는 Next.js를 사용한 app을 빠르게 만들어주는 프레임워크

CRA

webpack 설정 없이 React app을 빠르게 만들어주는 프레임워크

 

 

✔️ 두가지 다 webpack이나 모듈 설정을 따로 할 필요없이 빠르고 간편하게 app 생성시 만들어주는 프레임워크인데, 

사실 SEO가 좋으려면 CNA가 좋지만 , AWS와  EC2관리 등 내부 사정으로 인해 CRA를 사용하게 되었다. 

 

-> Next.js에 대한 소개는 여기에 자세히 적어놓았다.

 

3. Design - Material UI vs Antd Design

 

Material UI

• React 개발 시 사용할 수 있는 UI framework

 

Ant Design

• 브라우저, 서버, 렌더링 환경 지원
• 사용자 정의가 쉬움
• props에대한 type지정이 되어 있음

✔️ 더 다양한디자인을 보유한 MaterialUI와 고민했지만, 그에 상응하는 체계적인 문서화가 되어있고 type안내가 잘 되어있어 선택

 

4. Style Library - SCSS vs styled-component vs emotion

 

SCSS

• CRA에 내장되어 있으며 html과 css 가 분리됨

styled-component

• 대표적인 CSS-In-JS로 JS안에서 CSS를 처리하는 라이브러리

emotion

• CSS-In-JS
• 가벼운 환경, 다양한 style 작성방식 지원 (styled-components , SCSS , inline )

✔️ styled-component보다 가벼우면서 다양한 방식을 지원하는 확장성을 고려하여 emoiton 선택

 

 

5. 상태관리 - Redux vs Recoil

 

Redux

• 다양한 라이브러리 지원과 자료
• dev tool의 편리함

Recoil

• 가벼운 setting 환경
• 비동기 데이터처리와 계산된 값 처리가 내부 모듈로 가능
• 데이터 서브셋을 대상으로 변경 감지, 업데이트 가능

✔️ hook 과 비슷해 사용하기 편리하고 Component 데이터 조각만 사용 가능하고 비동기데이터 흐름 제어하는 솔루션이 존재하기 때문에 선택

 

 

6. Test Library -  Enzyme vs react-testing-library

 

잠깐! JEST란?

: JavaScript Testing Framework 로 테스트 라이브러리를 실행시키는 테스트 러너

 

JEST 테스트러너 기반에 사용할 라이브러리 선정해야 한다.

mobile-web의 test 주 목적은 사용자 행동 기반의 test 진행
사용자 시나리오에 기반한 test code 작성 후 필요에 따라 라이브러리 취사선택할 예정

ex) 상품 등록 (testing-library) → state 확인(hooks-library) → DOM 변경 확인(testing-library) 느낌

 

Enzyme

동작 위주 테스트

• Airbnb에서 만든 testing library
• 가상 DOM을 기준으로 test 가능
• props , state 를 사용하여 테스트를 진행하기 때문에 props , state 검증에 용이한 반면 테스트는 취약함.

행동 기반의 test를 하기에 불필요한 단위 test 위주며, Class 형 component 기반의 test code를 제공하고, 내부적인 구성 요소에 중점을 두기 때문에 주 목적과 맞지 않음.

 

 

react-testing-library

행위 주도 테스트

• CRA 사용 시 기본 제공
• React 에서 권장하는 test library
• 실제 DOM 기준으로 test (jsdom 라이브러리 사용)
• React component 단위테스트 및 통합테스트 가능

✔️ 사용자 경험에 따른 React 어플리케이션을 동작하는 관점의 test 진행이 가능하여 주 목적에 적절하다고 판단하여 선택

 

 

6-2) 그렇다면.. Rcoil / hooks/ 전역상태 관리는 어떻게 할까?

 

react-hooks-testing-library

• 여러 component에서 사용하는 state 관리 시 사용
• hooks의 파라미터와 반환 값 확인 가능
• 여러 custom hooks 가 여러 component와 연결된 경우 사용
• 필요에 따라 Wrapping 필요
  • <RecoilRoot >
  • <Suspense>

recoil의 atom 과 selector를 필요에 따라 custom 하여 test 할 수 있음. 사용자 interaction 에 따른 상태 test시 사용하기 적절

 

react-recoil-hooks-testing-library

• weekly downloads 1,584 😮
• 그래도 TypeScript 기반인 점은 다행

 

✔️ 현재 서드파티 라이브러리를 사용할 필요성이 느껴지지 않음. 구현 중 필요함을 느끼면 사용할 예정

 

 

 

---

이렇게 프로젝트에 사용할 기술 스택들을 선정했다.

물론 이 선택들은 필요에 따라 바뀔 것이다. 그래도 이유를 알고 쓰는 것과 모르는 것에 차이가 있다는 것을 알기에.. 😎