프론트엔드 개발 포트폴리오 | 동물 병원 비용 정보 플랫폼

내일배움캠프 4기 웹 개발 과정 React 트랙 수료생 최종 프로젝트 ‘펫피탈’을 소개합니다.
Aug 16, 2023
프론트엔드 개발 포트폴리오 | 동물 병원 비용 정보 플랫폼
 
notion image
 

🐶 동물 병원별로 천차만별인 병원비, 펫피탈에서 확인하세요. 🐱

동물 병원 별로 손쉽게 비용 정보를 찾을 수 있으며, 다른 유저와 반려 동물에 관한 궁금증을 나눌 수 있습니다.

🛠️ 아키텍쳐

notion image

🔧 기술적 의사 결정

주요 기술

사용 기술
기술 설명
Recoil
Recoil은 Redux에 비해 아직 불완전한 면이 있지만, 리덕스에 비해 가볍고, 짧은 코드로 작성할 수 있기 때문에 소규모 프로젝트에 어울린다고 생각해 선택.
Next.js
React만으로는 SEO등 웹의 지향점을 충족하지 못한다는 단점이 있어 그 부분을 충족함과 동시에 프레임 워크를 공부하기 위해 선택
React Query
React query를 사용하여 서버와 통신을 하면 기본적으로 제공하는 다양한 내장 기능이 존재하고, Devtool이 있어 데이터의 상태를 쉽게 파악할 수 있는 이점이 있어 선택
Typescript
개발 도중 발생할 수 있는 오류를 사전에 방지하고, 유지/보수가 용이해지기 때문에 선택

☄️ 트러블 슈팅

지도 페이지 렌더링 오류가 발생하는 부분
리액트 앱에서 자바스크립트를 사용해서 중간마다 렌더링을 강제로 시켜줘서 오류가 발생 → 리액트스러운 코드로 전체적으로 리팩토링
Share article
Subscribe to our newsletter

내일배움캠프 블로그