기술셋 선정하기 1 (20일차)

<프론트엔드>

1. 시스템의 요구사항을 잘 충족시키기 위해 필요한 것들 리스팅하기

• 페이지 라우팅
• UI 코드를 최대한 재활용 할 수 있는가?
• 상태관리가 가능한가 여부?
  • 컴포넌트 간의 데이터를 공유하고 전달할 때의 편의를 위해서 상태 관리가 필요하다.
  • 싱글 페이지 어플리케이션이기 때문에 비용이나 그룹 데이터 등을 한 곳에서 관리할 필요가 있다.
• 테스트 코드의 작성이 용이한가?
• 개발 커뮤니티의 활성화 정도
• 기술의 안정성 정도
  • v.0.0.1같이 너무 새로운 기술을 사용하는 것이 아닌, 안정된 버전이 있고, 오픈 소스를 유지보수 하는 단체가 안정적이어야 좋다.
• 팀 내 기술 친숙도
  • 기술 친숙도 만으로 기술을 결정하는 요소가 될 수는 없지만, 후보군들이 다 비슷비슷할 경우 기술 친숙도로 결정할 수 있다.

2. 후보군 조사

• React.js
• Angular
• Vanilla JS (퓨어한 자바스크립트 코드만으로 구현)

3. 비교 테이블 생성

	React	Angular	Vanilla
페이지 라우팅
UI 코드 재활용 가능
상태 관리 가능
테스트 코드 작성 용이
개발 커뮤니티 활성화
기술의 안정성
팀 내 기술 친숙도

4. 비교/분석 하기

	React	Angular	Vanilla
페이지 라우팅	O → React-router를 이용하여 가능	O -> 내장되어 있음	X → 직접 구현해야 함
UI 코드 재활용 가능	O → 컴포넌트 기반	O → 컴포넌트 기반	X 일수도 O일수도 있음 → O가 되려면 너무 많은 변수를 처리해야 함
상태 관리 가능	O → Redux나 Recoil을 통해 가능	O	O → Redux를 통해 가능
테스트 코드 작성 용이	O → 아주 쉽게 가능; 테스트 하고자 하는 해당 컴포넌트만 import하면 됌	X → 컴포넌트에서 의존하는 모듈 및 자식 컴포넌트들을 일일히 명시해야 함	X
개발 커뮤니티 활성화	O → 아주 활성화	O	X → React보다 상대적으로 떨어짐
기술의 안정성	O → 아주 안정적	O	O
팀 내 기술 친숙도	O →React의 인기가 압도적임 →새로운 프론트엔드 개발자가 오더라도 React를 알고 있을 확률이 높음	X → React에 비해 상대적으로 떨어짐	O

5. 결정

React + React-router + Recoil

 

5-1. Redux와 Recoil 비교?

Redux	Recoil
React의 상태관리 라이브러리	React의 상태관리 라이브러리
Flux 아키텍쳐 기반	Atomic 모델 기반
중앙집중식으로 상태관리	Atom이라는 상태 단위로 상태를 관리
Recoil에 비해 러닝 커브가 높다.	Redux에 비해 상대적으로 쉽다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

* 필수 삽입 링크 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]