🚩 FE 기술 선택이유

분야	작성자	작성일
FE	조배경	24년 11월 06일

React

사용자 인터페이스를 만들기 위한 라이브러리

컴포넌트 기반 아키텍처

• 리액트는 재사용 가능한 단위로 컴포넌트를 만들 수 있고, 이러한 컴포넌트를 조립하여 UI를 개발할 수 있다. 따라서 새로운 기능이나 요구사항에 대한 유연한 대응이 가능하다.
• 컴포넌트별로 책임과 역할을 명확하게 분리한다면 코드 관리와 유지보수가 편리하다.
• 이러한 장점을 살려서 이번 프로젝트를 통해 컴포넌트를 유지보수가 쉽게 설계해보고 싶다.

SPA(Single Page Application)

• 이번 프로젝트는 한 페이지에서 많은 동작이 이뤄지는, 대시보드 형태가 많다.
• SPA는 새로운 데이터 요청이 있을 때 필요한 데이터만 전달받아 페이지를 갱신하기 때문에, 인터렉션에 대한 반응이 좋다. 따라서 따라서 사용자 경험 향상을 위해, SPA 방식이 필요하다.

Next.js를 선택하지 않은 이유

• Next.js의 장점인 SSR 기능을 사용하기보다는, 우선 컴포넌트 설계와 재사용에 집중해보고 싶었다.

Vite

리액트 빌드 도구

기존의 webpack, rollup과 같은 번들러 도구보다 훨씬 빠르고 간단한 설정 때문에 선택하게 되었다.

번들링이란?

• 빌드과정 중 하나로, 여러 개의 javascript 파일을 하나로 합치는 과정이다.
• 번들링을 통해 프로그램 파일의 크기를 줄이고, 실행 속도를 빠르게 할 수 있다.
• webpack, rollup과 같은 도구로 실현할 수 있다.

왜 번들링 과정을 거쳐야할까?

• 스코프 문제
  • 여러 모듈이 있을 때, 각 모듈에서 정의된 변수나 함수는 서로 다른 스코프를 가진다.
  • 번들링을 통해 하나의 파일로 합치면, 이 파일 내에서 스코프를 관리하기 쉬워진다.
• 성능 최적화
  • 번들링을 통해 HTTP 요청 수를 줄일 수 있다.
  • 여러 파일을 하나로 합치면 브라우저가 서버에 요청하는 횟수가 줄어들어, 페이지 로딩 속도가 빨라진다.

Vite의 장점

• 기존의 번들러 대비 10-100배 빠른 속도를 제공한다.
• Vite의 역할
  • Dev Server: 개발 환경에서 HMR 기능을 제공하는 개발용 서버 기능
  • Build: Production 배포를 위한 소스코드 번들링 기능

기존 번들러 기반 도구의 문제	vite
모듈 개수가 늘어날수록, 성능 병목 현상이 발생할 수 있다.	rollup을 기반으로 한 빌드 시스템을 사용하여, 프로덕션 환경에서 최적화된 결과물을 제공한다.
소스 코드를 업데이트하게 되면 번들링 과정을 다시 거친다.	수정된 모듈과 관련된 부분만 교체하고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.

Tailwind CSS

유틸리티 클래스 기반의 CSS 프레임워크

• tailwind의 유틸리티 클래스를 사용함으로써,
  • 편리하고 빠르게 개발할 수 있고, html과 css의 분리 되어 있지 않아 관리가 용이하다.
  • 또한 일관된 디자인이 가능하다.
  • 매번 클래스명을 고민할 시간을 절약할 수 있다.

Utility-First

• 미리 정의된 작은 단위의 유틸리티 클래스를 조합하여 사용하는 접근 방식

TanStack Query

서버로부터 가져오는 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리

편리한 상태 관리

• tanstack query를 통해 데이터 패칭을 하면, 로딩 상태, 에러 상태, 데이터 상태를 쉽게 관리할 수 있다.
• 데이터가 변경될 때 자동으로 UI를 업데이트할 수 있다. 따라서 사용자의 UX 경험이 향상될 수 있다.

캐싱

• 쿼리키를 통한 캐싱을 통해 동일한 데이터에 대한 중복 요청을 줄일 수 있다.

서버 상태 동기화

• 서버와 클라이언트 간의 상태를 쉽게 동기화할 수 있다.

Axios

브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

fetch에는 없는 요청 타임아웃, interceptor 기능, json 처리를 쉽게 사용할 수 있어 선택했다.

fetch와 axios의 비교

• fetch는 es6 내장 라이브러리로, axios와 마찬가지로 http 요청을 보낼 수 있다.

fetch	axios
응답을 json으로 변환하기 위해 .json()을 호출해야한다.	응답 데이터를 자동으로 JSON으로 변환한다.
interceptor 기능이 내장되어 있지 않다.	요청이나 응답을 가로채어 처리하는 interceptor 기능을 제공한다.
타임아웃 기능이 없다.	요청 타임아웃을 설정할 수 있어, 지정된 시간 내에 응답이 없으면 자동으로 요청이 취소된다.
구형 브라우저와의 호환성 문제가 있다.	모든 주요 브라우저와 node.js 환경에서 일관되게 작동한다.

React Router

React에서 URL 경로에 따라 컴포넌트를 렌더링하고, SPA에서 매끄러운 페이지 전환을 관리하는 라이브러리

SPA에서의 라우팅 관리

• URL 경로에 따라 컴포넌트를 렌더링하여, 사용자 경험을 향상시킬 수 있다.

중첩 라우트

• 부모 라우트가 자식 라우트를 포함하는 계층적인 구조를 만들 수 있어, 복잡한 UI 구조를 쉽게 구현할 수 있다.

URL 파라미터와 쿼리

• 사용자에게 필요한 정보를 URL에 포함시켜 관리할 수 있다.

Tanstack Router를 채택하지 않은 이유

• tanstack router의 장점으로 꼽히는 타입 안정성, 라우팅 데이터 패칭의 통합이 잘 와닿지 않았다. 이것의 필요성을 느끼게 될 때쯤 사용해보고 싶다.
• 그 외의 이유로는 react router보다 작은 커뮤니티, 처음 접하는만큼 겪게될 러닝커브가 있다.

Storybook

UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있게 해주는 오픈 소스 도구

이번 리액트 사용의 목표로 컴포넌트의 재사용성과 유지보수성 향상인데, 스토리북을 사용하면 컴포넌트를 쉽게 시뮬레이션하고 테스트할 수 있기 때문이다.

또, 문서화를 통해 모든 팀원의 컴포넌트에 대한 이해를 향상시키고 적응하고자 한다.