전체 프로젝트 보기

RYUNGFOLIO

RYUNGFOLIO

프론트엔드 개발자 포트폴리오 사이트

RYUNGFOLIO 대표 이미지
Github 바로 가기배포 사이트 바로 가기

프로젝트 정보

기한
2024/06/28 - 2024/08/10
규모 / 인원
개인 프로젝트
역할
Front-End
사용 기술
  • Next.jsNext.js
  • TypeScriptTypeScript
  • SupabaseSupabase
  • AxiosAxios
  • SASSSASS

기술 선정 이유

  • Next.js의 새로운 라우팅 방식인 App Router를 학습하기 위해 14버전을 채택했습니다. 서버 컴포넌트의 활용과 데이터 패칭 방식에 집중하며 사용했습니다.
  • nesting과 mixin 등 다양한 기능을 사용할 수 있는 CSS 전처리기 SASS를 스타일링 도구로 채택했습니다.
  • serverless DB 솔루션인 Supabase를 사용했습니다. 데이터를 RESTful API로 반환하여 패칭하는 과정을 쉽게 할 수 있고, SQL 관점으로 데이터를 바라볼 수 있는 기회를 다수 제공해 주었기에 채택했습니다.

주요 기능 및 개인 기여

📍 메일 작성 및 전송
Nodemailer 라이브러리를 활용하여 포트폴리오 소유자에게 메일을 발송할 수 있는 기능 구현
입력받은 form 데이터를 메일을 구성할 html 문서로 재구성
Next.js의 API Route를 활용하여 클라이언트에서 Nodemailer로 이메일 전송을 위한 요청(POST)을 보내고 수행
📍 애니메이션 효과 연출
CSS 고유 기능인 keyframes와 animation, 그리고 SASS 고유 기능인 변수 지정과 반복문 등을 결합하여 전체적으로 부드럽고 가벼운 애니메이션 효과를 연출
화면 스크롤 위치에 따라 스타일 클래스를 전환하는 방식 활용

연관 포스트