임대료 보증금 자동 상호전환 계산기
임대료 보증금 자동 상호전환 계산기
프로젝트 소개
개인 프로젝트로 SH 주택임대공사의 임대료 보증금 상호전환 계산기를 만들었습니다. 개인 프로젝트겸, 실효성이 있는 프로젝트를 하기위해 개발을 시작하였습니다. 프로젝트 배포까지 완료하고 공공임대주택 관련된 네이버 카페에 카페 회원들에게 공유하였습니다. 이후 반응이 좋았고, 더 많은 사람들이 사용할 수 있도록 개선하고 있습니다.
프로젝트 기여도
100% 개인 프로젝트
사용 기술
- Next.js
- React
- TypeScript
- Tailwind CSS
- Zustand
- Shadcn Ui
- PWA
- 반응형
사용 기능
SEO
-검색엔진 최적화를 위한 meta 태그를 적용하였습니다.
PWA
-웹앱 형식으로 개발하여 오프라인에서도 사용할 수 있도록 하였습니다.
Google Search Console
-구글 검색 콘솔을 사용하여 SEO를 최적화하였습니다.
Google Analytics
-구글 애널리틱스를 사용하여 사용자 행동을 분석하였습니다.
DNS
-hosting.kr에서 도메인을 구매하고 연결하였습니다.
Vercel 배포
-Vercel을 사용하여 배포하였습니다.
다크모드 라이트모드
-다크모드와 라이트모드를 적용하였습니다.
Zustand
-상태관리를 위해 Zustand를 사용하였습니다.
Shadcn Ui
-디자인을 위해 Shadcn Ui를 사용하였습니다.
프로젝트 후기
처음에는 아이디어가 떠오르자마자 그대로 개발을 시작했습니다. 결과적으로 하나의 페이지로 만들어졌는데, 이러한 방식으로 진행하다 보니 컴포넌트를 분리하지 않고 막무가내식으로 코드가 작성되었습니다. 배포 후에는 사람들로부터 좋은 반응을 받았고, 그에 따라 성능 개선과 추가적인 기능을 위해 노력하기로 했습니다. 그러나 입력값이 변경될 때 전체 폼이 리렌더링되는 문제가 발생하여 성능이 좋지 않았습니다. 이를 해결하기 위해 컴포넌트를 분리하고 Zustand를 사용하여 상태를 관리하고, 이를 통해 리렌더링과 성능을 최적화하기 위한 리팩토링을 진행하였습니다.