Portfolio (2024)

02기술 결정

문제, 선택, 결과 순서로 적었습니다.

1. 결정 01

   검증 규칙을 한 벌만 쓴다

   문제

   이전 프로젝트에서는 클라이언트와 서버에서 각각 정규식으로 검증했습니다. 규칙이 두 벌이라 한쪽만 고치는 실수가 나기 쉬웠고, 코드도 길었습니다.

   선택

   Zod 스키마를 하나 정의하고 클라이언트 폼과 서버 처리에서 같은 스키마를 임포트해 썼습니다.

   결과

   코드가 짧아졌고, 규칙이 어긋날 여지가 사라졌습니다. 타입까지 스키마에서 뽑아 쓸 수 있다는 점이 가장 큰 이득이었습니다.

2. 결정 02

   무거운 애니메이션 데이터를 세션에 캐시한다

   문제

   Lottie JSON이 커서 페이지를 새로고침할 때마다 다시 받아 왔습니다. 초기 화면에 있는 애니메이션이라 로딩 지연이 그대로 첫인상이 됐습니다.

   선택

   처음 받은 데이터를 Session Storage에 저장하고, 이후 로드에서는 저장된 것을 먼저 쓰도록 했습니다.

   결과

   새로고침해도 다시 받아 오지 않아서 초기 로딩이 나아졌습니다. 보기 좋은 효과에도 비용이 든다는 걸 실감했습니다.

3. 결정 03

   개발·배포 환경을 Docker로 나눠 본다

   문제

   Docker를 학습 중이었지만 튜토리얼만으로는 실제 쓰임새가 손에 잡히지 않았습니다.

   선택

   개발용과 프로덕션용 Dockerfile을 따로 작성하고 compose로 실행 환경을 구성해 봤습니다.

   결과

   이미지 레이어와 빌드 캐시가 왜 중요한지 직접 겪어 보고 이해했습니다. 배포 환경을 코드로 남긴다는 개념도 여기서 잡혔습니다.

03주요 기능

• Zod 기반 문의 폼

  클라이언트와 서버가 같은 스키마로 검증하고 Nodemailer로 메일을 보냅니다.

• Lottie 애니메이션 + 캐싱

  Session Storage에 애니메이션 데이터를 캐시해 재요청을 없앴습니다.

• Intersection Observer 스크롤 연출

  스킬 섹션이 화면에 들어올 때 순차적으로 나타납니다.

• Weather API 연동

  현재 날씨를 가져와 화면에 표시하는 소소한 장치.

• Docker 환경 구성

  개발용과 배포용 이미지를 분리해 구성.

04화면

05회고