Tech Stack

🛠️ Tech Stack

Language

Typescript

• 정적 타입 체킹을 통해 런타임 오류가 발생 가능한 상황을 사전에 방지
• 협업 시 서로가 만든 컴포넌트, hook 등에 필요한 파라미터와 리턴값이 어떤 형태인지 쉽게 파악 가능

Style

SCSS

• 기본 mixin, variables를 세팅을 잘 해두면 편리하게 사용가능
• scss의 mixin, extend, if, import (모듈화), nesting 같은 추가 기능들을 사용할 수 있음
• 가독성과 재사용성을 높여주어 유지보수가 쉬워지게 도와줌
• 스킬 레벨이 다른 팀원들과의 작업 시 발생할 수 있는 구문의 수준 차이를 평준화할 수 있음

Storybook

• 공용 컴포넌트를 테스트하기에 좋고, 다른 팀원이 만든 컴포넌트를 확인해보기도 편리함
• 컴포넌트를 독립적으로 개발하고 테스트할 수 있어, 프로젝트의 복잡성을 줄일 수 있음

Library & Framework

Next.js

• SSR, <Image> 등 next에서 제공하는 기본 기능들의 편리함을 누리고자 함

React Query

• api 호출과 에러 및 로딩 처리의 간편함
• 캐시를 사용하여 불필요한 호출을 줄이기 위함

Axios

• instance 설정 가능해서 auth 헤더 설정에 용이
• fetch처럼 json으로 하나하나 변환할 필요 없어서 편리함

React Hook Form & Zod

1. 유효성 검사 로직 분리 - zod는 데이터 유효성 검사를 처리하는 강력한 도구이며 react-hook-form 은 폼 상태 관리를 담당하는데 이 두 라이브러리를 함께 사용하면 유효성 검사 로직을 폼상태 관리 로직과 분리 할 수 있음
2. 타입 안전성 강화 - zod는 typesctipt와 함께 사용할 때 강력한 타입 추론을 제공함. 이로인해 유효성 검사에 대한 타입정보를 컴파일 시점에서 확인할 수 있으며 런타임에서 발생할 수 있는 유효성 관련 버그를 사전에 방지할 수 있음
3. 유연한 유효성 검사 - zod는 다양한 유효성 검사 조건을 지정할 수 있는 기능을 제공함. react-hook-form 을 사용하면 이러한 유효성 검사를 폼 필드에 적용할 수 있으며 필요에 따라 커스텀 검증 로직도 구현할 수 있음

Zustand

• 유저 정보를 전역적으로 관리하기 위해

React Modal

• 공식 문서가 잘 되어있고, 최근까지도 업데이트 지원
• custom styling 편리함
• key 입력(esc, enter) 지원됨

Day.js

• 날짜 데이터 포맷팅에 용이

React Day Picker

• 공식 문서가 잘 되어있고, 최근까지도 업데이트가 되고 있음

OpenAI

• 챗봇 기능 구현

Convention

StyleLint

• CSS 오류 방지 및 통일된 규칙 적용

Eslint & Prettier

• 코드 통일성
• 오류를 잡아내기 위함

Husky & lint-staged

• 에러가 나는 코드를 커밋하는것을 방지하기 위함