Portfolio
Portfolio
프로젝트 소개
개인용 포트폴리오 사이트를 개발하였습니다. Next.js를 사용하여 제작하였고, Tailwind CSS를 사용하여 디자인을 하였습니다. Zustand를 사용하여 상태를 관리하였고, Shadcn Ui를 사용하여 디자인을 하였습니다. weather API를 사용하여 날씨 정보를 가져와서 보여주는 기능을 추가하였습니다. Lottie를 사용하여 애니메이션을 추가하였습니다. web api intersection observer를 사용하여 스크롤 이벤트를 추가하였습니다. 문의하기 기능을 만들었고 nodemailer를 사용하여 메일을 보낼 수 있도록 하였고, Zod 라이브러리를 사용하여 프론트엔드 및 백엔드에서 유효성 검사를 하였습니다. 그리고 Docker를 사용하여 개발 환경과 배포 환경을 따로 구축해보았습니다.
프로젝트 기여도
100% 개인 프로젝트
사용 기술
- Next.js
- React
- TypeScript
- Tailwind CSS
- Docker
- Zustand
- Zod
- CSS Module
- Shadcn Ui
- 반응형
- Weather API
- Lottie
- Intersection Observer
- Web API
- Nodemailer
사용 기능
Docker
-Docker를 사용하여 개발 환경과 배포 환경을 따로 구축해보았습니다.
Weather API
-weather API를 사용하여 날씨 정보를 가져와서 보여주는 기능을 추가하였습니다.
Lottie
-Lottie를 사용하여 애니메이션을 추가해보고 session storage에 저장하여 성능저하를 최소화 하였습니다.
Intersection Observer
-web api intersection observer를 사용하여 스크롤 이벤트를 추가하였습니다.
Nodemailer
-nodemailer를 사용하여 메일을 보낼 수 있도록 하였습니다.
Zod
-Zod 라이브러리를 사용하여 프론트엔드 및 백엔드에서 유효성 검사를 하였습니다.
프로젝트 후기
이전 프로젝트에서 Nodemailer를 사용하여 프로젝트를 진행한 경험이 있습니다만, 전 프로젝트에서 유효성 검사를 정규식 및 데이터 검증을 직접하였습니다. 이번에는 Zod 라이브러리를 사용하는 방법을 공부할겸 적용해 보았습니다. 이를 통해 프론트엔드 및 백엔드에서 유효성 검사를 진행하였고 직접 하드코딩하는 것보다 코드양을 줄이고 가독성을 높일 수 있었습니다. 메인 페이지 SKILLS에서는 Intersection Observer를 사용하여 스크롤 이벤트를 소소하게 추가해보았습니다. 이번에 사용한 Lottie 애니메이션은 파일이 꽤 커서 페이지 리로드시 웹사이트의 성능저하가 있었습니다. 이를 해결하기위해 Lottie 데이터를 Session Storage에 저장하여 페이지 리로드시 성능저하를 최소화 하였습니다. 포트폴리오를 제작하기 전 Docker를 학습하고 있었고 이번 포트폴리오에 Docker를 적용하여 보았습니다.