김영준

기술 스택과 사용 이유

언어

• 타입스크립트는 변수, 매개변수, 함수 등에 데이터 타입을 지정할 수 있다. 이로써 코드의 안정성을 높여 런타임 오류를 사전에 방지할 수 있다.

• 코드의 의도가 명확해지며, 코드를 이해하기 쉽고 유지보수하기 용이하다.

라이브러리

• 가상 DOM 개념을 활용하여 실제 DOM을 조작하는 대신 가상 DOM에서 변경 사항을 처리하고 효율적으로 실제 DOM 업데이트를 수행함으로써 빠른 렌더링 과 성능을 제공한다.

• 컴포넌트 기반 아키텍처를 기반으로 하며, UI를 작은 독립적인 컴포넌트로 분해하고 이러한 컴포넌트를 조합하여 복잡한 UI를 구축할 수 있다. 이로써 코드의 재사용성과 유지보수성이 향상된다.

• 많은 개발자들이 사용하고 있기 때문에 오픈 소스와 자료가 많아서 코드를 쉽게 개선할 수 있다.

상태 관리

• 사용 방법이 단순하고 직관적이다.

• Recoil은 React와 완전히 통합되어 React 컴포넌트와 함께 사용하기에 적합하다.

• React Hooks와 함께 사용할 수 있으며, 기존의 React 상태 관리 패턴과 호환된다.

비동기 작업

• axios는 간단하고 직관적인 API를 제공한다. HTTP 요청을 보내고 응답을 처리하기 위한 메서드와 옵션을 사용하기 쉽게 설계되어 있다. 이로써 빠르게 익히고 사용할 수 있다.

• 프로미스 기반으로 동작하기 때문에 비동기 요청을 쉽게 처리하고 응답을 기다릴 수 있다. 프로미스를 사용하면 콜백 지옥을 피하고 코드를 더욱 가독성 있게 작성할 수 있다.

• HTTP 요청에서 발생한 오류를 캐치하고 상세한 오류 정보를 제공한다. 이를 통해 디버깅 및 오류 해결을 용이하게 할 수 있다.

번들러 도구

• 빠른 개발 서버를 제공한다.

• 빠른 빌드 속도를 제공한다.

CSS

• 스타일을 컴포넌트에 묶어 캡슐화하는 방식으로 스타일을 관리하므로 컴포넌트 스코프 내에서만 적용되어 스타일 간의 충돌을 방지하고 컴포넌트 간의 독립성을 유지할 수 있다. 이는 리액트의 컴포넌트 기반 아키텍처와 적합하다고 생각한다.

• 적절한 네이밍으로 컴포넌트의 구조를 더 쉽게 파악할 수 있다.

• 컴포넌트의 상태에 따라 스타일을 변경하거나 조건부 스타일을 적용할 수 있다.

패키지 매니저

• 기본 제공 툴이므로 호환성이 좋고 에러 확률을 줄일 수 있다.

• 예전에는 yarn에 비해 속도가 느리다고 하는데 요즘은 거의 차이가 없다고 한다.

배포

• Git 저장소와의 연동을 통해 코드 변경을 감지하고 자동으로 배포하는 기능을 제공하여 배포 프로세스를 자동화하고 단순화할 수 있다.

• 초기에는 무료 플랜을 제공한다.

협업 툴

• 실시간으로 협업을 지원하므로 여러 개발자들이 동시에 같은 디자인 파일을 편집할 수 있다.

• Git 버전 관리 시스템을 기반으로 하며, 프로젝트 협업 시 코드 변경을 추적하고 관리할 수 있도록 도와준다.

• 이슈 트래킹, 프로젝트 보드 등 프로젝트 관리 도구를 제공한다. 이를 통해 프로젝트의 진행 상황을 시각화할 수 있다.

그 외

• 코드 스타일과 포맷을 일관되게 유지하기 위해 사용 - 코드의 가독성 향상

• ESLint는 코드 품질을 검사하고 오류나 경고를 제공하여 버그를 미리 방지하고 코드 품질을 향상시킨다.