프론트엔드 개발 포트폴리오 | 동물 병원 비용 정보 플랫폼
내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘펫피탈’을 소개합니다.
Aug 16, 2023
Contents
🛠️ 아키텍쳐🐶 동물 병원별로 천차만별인 병원비, 펫피탈에서 확인하세요. 🐱
동물 병원 별로 손쉽게 비용 정보를 찾을 수 있으며, 다른 유저와 반려 동물에 관한 궁금증을 나눌 수 있습니다.
- 서비스 둘러보기: 펫피탈(링크)
- 깃허브 주소: (링크)
🛠️ 아키텍쳐
🔧 기술적 의사 결정
주요 기술
사용 기술 | 기술 설명 |
Recoil | Recoil은 Redux에 비해 아직 불완전한 면이 있지만, 리덕스에 비해 가볍고, 짧은 코드로 작성할 수 있기 때문에 소규모 프로젝트에 어울린다고 생각해 선택. |
Next.js | React만으로는 SEO등 웹의 지향점을 충족하지 못한다는 단점이 있어 그 부분을 충족함과 동시에 프레임 워크를 공부하기 위해 선택 |
React Query | React query를 사용하여 서버와 통신을 하면 기본적으로 제공하는 다양한 내장 기능이 존재하고, Devtool이 있어 데이터의 상태를 쉽게 파악할 수 있는 이점이 있어 선택 |
Typescript | 개발 도중 발생할 수 있는 오류를 사전에 방지하고, 유지/보수가 용이해지기 때문에 선택 |
☄️ 트러블 슈팅
지도 페이지 렌더링 오류가 발생하는 부분
리액트 앱에서 자바스크립트를 사용해서 중간마다 렌더링을 강제로 시켜줘서 오류가 발생 → 리액트스러운 코드로 전체적으로 리팩토링
Share article
Subscribe to our newsletter