-
Notifications
You must be signed in to change notification settings - Fork 1
기술 문서
Language | |
---|---|
Library | |
Build | |
Package | |
Http | |
State Management | |
Data Fetching | |
Route | |
Style | |
Code Format | |
Deploy | |
Co-work |
1. TypeScript
타입스크립트는 개발 초기 오류 방지와 가독성 향상을 통해 코드 품질을 높일 뿐 아니라, 팀 프로젝트에서 협업 일관성을 유지하고 개발 생산성을 향상시키며 코드 안정성을 높이는 데 도움이 됩니다.
2. React
뷰와 달리 리액트는 라이브러리로서 자유로운 JavaScript 문법을 사용하여 개발할 수 있고, TypeScript와의 결합이 용이하고 컴포넌트 분리와 재사용 측면에서 효율성이 좋습니다. 또한 많은 개발자들이 사용하고 있기 때문에 오픈 소스와 자료가 많아서 코드를 쉽게 개선할 수 있습니다.
3. Vite
브라우저가 ESM(EsmaScript Module)을 사용하여 모듈을 동적으로 로드할 수 있어 빠른 빌드가 가능하며(Webpack은 정적 빌드), 설정이 매우 간단하여 빌드 설정에 시간을 투자할 필요가 없습니다.
4. npm
npm과 yarn 사이의 성능 및 보안 차이가 크지 않게 되었습니다. 또한 npm은 기본 제공 도구로 사용되므로 호환성이 좋고 에러 확률을 줄일 수 있으며, 최근에는 속도 측면에서 yarn에 비해 거의 차이가 없다고 알려져 있다. 따라서 npm을 선택하게 되었는데, 이는 개발자가 익숙하게 사용하던 도구이기도 합니다.
5. axios
axios를 사용하는 이유는 간단하고 직관적인 API, 프로미스 기반의 비동기 처리가 되기 때문입니다.
또한 강력한 에러 처리가 가능하고, 브라우저와 서버 호환성이 좋아 개발 생산성을 향상 시켜 줍니다.
6. recoil
Recoil은 직관적이고 간단한 구조, 비동기 처리 간소화, 짧은 프로젝트 기간에 러닝 커브가 낮습니다.
또한 React와 통합이 용이하며, Hooks와 호환되며, 코드 복잡성을 낮추고 유지 보수를 간편하게 만들어주며, 비동기 데이터 처리와 상태 업데이트를 보일러플레이트 없이 간단하게 처리할 수 있습니다.
7. react-query
React Query는 데이터 관리와 관련된 작업을 효과적으로 처리할 수 있으며, Hook 기반으로 구성되어 상태 변화를 쉽게 감지하고 리렌더링을 유발합니다. 이로써 개발자는 데이터 로딩과 상태 관리에 집중하고 개발 생산성을 향상시킬 수 있습니다. React Query는 데이터 캐싱을 통해 성능을 최적화하고 중복된 API 요청을 방지하여 사용자 경험을 개선합니다. 따라서 프로젝트의 데이터 관리와 상태 업데이트를 효율적으로 다룰 수 있습니다.
8. Emotion
Emotion은 컴포넌트 스코프 내에서 스타일을 관리하여 스타일 간의 충돌을 방지하고 컴포넌트 간의 독립성을 유지할 수 있습니다. 또한, 적절한 네이밍으로 컴포넌트의 구조를 파악하기 쉬워지며 컴포넌트 상태에 따라 동적으로 스타일을 변경하거나 조건부 스타일을 적용할 수 있습니다. Emotion은 CSS-in-JS로 스타일을 JS로 작성하며, 코드베이스를 하나로 관리하여 개발 생산성과 유지보수성을 향상시킬 수 있습니다. 또한, 컴포넌트 기반 스타일링을 통해 코드의 재사용성을 높일 수 있으며, Emotion은 번들 사이즈가 작고 퍼포먼스가 우수하다는 이점이 있어 선택하게 되었습니다.
9. Eslint, Prettier
ESLint와 Prettier를 사용한 이유는 코드 스타일과 포맷을 일관되게 유지하여 코드의 가독성을 향상시키고, 프로젝트를 진행하면서 발생할 수 있는 에러 확률을 줄이기 위함입니다. 또한, ESLint는 코드 품질을 검사하고 오류나 경고를 제공하여 버그를 미리 방지하고 코드 품질을 향상시키기 위해 도입했습니다. 이로써 개발 과정에서 일관된 코드 품질을 유지하고 프로젝트의 안정성을 높이는 데 도움이 되었습니다.