아키텍쳐
.png&blockId=5bb9c513-bdf9-4506-a90d-d337e40ddd31)
주요 기능
제휴 병원 리스트 (전체, 지역별) 유저들의 후기를 통한 병원 비교 건강검진 예약 서비스 실시간 상담 건강테스트기술적 의사결정
React.js
1.
SPA 기반의 프론트엔드 개발 프레임워크
2.
컴포넌트 단위의 독립적인 블록을 이용한 개발
1.
Props, state를 통해 안전하고 효율적으로 데이터를 공유함.
Next.js
1.
다양한 렌더링 방식(SSG, ISR, SSR, CSR)을 최대한 활용하여 빠르고 효율적인 화면 전환을 구성할 수 있음.
2.
App Routing을 통해 간편하고 직관적으로 routing을 할 수 있음.
3.
<Image> 컴포넌트의 자체 이미지 최적화 기능을 활용할 수 있음.
TypeScript
1.
컴파일 타임에 타입 에러를 잡아낼 수 있기 때문에 개발 시간을 더욱 효율적으로 관리할 수 있음.
2.
타입을 지정하여 좀 더 안전하고 효과적인 기능 구현을 할 수 있음.
Zustand
Store에 action과 reducer를 모두 작성하는 간결한 보일러플레이트를 통해 Redux보다 더욱 쉽고 간편하게 전역 상태를 관리할 수 있음.
Tanstack-Query
1.
서버와의 비동기 통신을 효율적으로 수행할 수 있음.
2.
Query Key로 데이터를 저장하여 동일한 요청이 발생하면 data caching으로 불필요한 네트워크 요청을 방지할 수 있음.
3.
isLoading, isError, isSuccess 등 data fetching의 상태를 확인할 수 있는 메서드가 내장되어 있어 편리함.
Supabase
1.
DB에 접근 가능한 할당량과 횟수가 Firebase에 비해 압도적으로 좋음.
2.
SQL 문과 유사한 문법을 사용하여 더욱 편리하게 구현이 가능함.
3.
간편한 인증/인가 및 소셜 로그인을 지원함.
4.
사용방법에 대한 설명이 자세히 나와있음.
Tailwind CSS
1. Utility-first로 html 태그 안에 정해진 className을 적용하여 디자인을 쉽고 빠르게 적용할 수
있고, 일관된 디자인을 구현할 수 있음.
2. tailwind.config.js 파일을 이용하여 스크린, 색, 폰트 등을 커스텀하기가 쉬움.
Next UI
1.
필요했던 디자인 컴포넌트를 제공하고 Tailwind CSS 기반으로 호환성이 좋음.
2.
응용 프로그램이 커지면 크고 복잡한 앱을 처리 할 때 속도가 느려지지 않음.
3.
매우 유연하며 React를 기반으로하여 JavaScript 응용 프로그램을 구축하는 데에 알맞음.
Yarn
1. npm에 비해 빠르게 설치할 수 있고 한 번에 여러 모듈들을 설치할 수 있음.
2. yarn.lock으로 버젼을 일관되게 유지함.
트러블슈팅
실시간 상담 작성 - 이미지 리스트
실시간 상담, 후기 - 이미지 최적화
실시간 상담 - Default Image를 가져오지 못 하는 문제
예약 페이지 - Type Error로 DB에 정보를 넣지 못 하는 문제
서버와 통신하는 함수의 중복으로 인한 성능 저하
예약하기의 캘린더 - 날짜에 따른 시간 활성화 비활성화
팀원
팀 노션 :
Table
Search