플러스프로젝트 배경
1) 예상 리스크 및 대응 계획 - 편집 폼의 모든 필드 변경이 미리보기 패널에 즉각 반영되도록 React 상태 동기화 구조를 설계하면서 불필요한 리렌더링을 최소화하는 과제 - vCard 3.0 표준의 인코딩 및 줄바꿈 규칙을 준수하면서 한국어 특수문자와 이모지를 안전하게 처리하는 직렬화 로직 구현 과제 - Presigned URL 발급 후 브라우저 직접 업로드 시 CORS 정책과 파일 크기 제한을 함께
프로젝트 성과
실시간 미리보기 렌더링 파이프라인 구현
편집 폼 입력값과 미리보기 패널을 200ms 이내로 동기화하는 React 상태 흐름을 설계하여 끊김 없는 편집 경험을 구현합니다.
RFC 2426 준수 vCard 동적 생성 엔진 설계
프로필 데이터를 vCard 3.0 포맷으로 변환하는 서버 사이드 로직을 구현하여 iOS/Android 연락처 앱과 완전한 호환성을 확보합니다.
Presigned URL 기반 이미지 업로드 아키텍처
서버 경유 없이 브라우저가 AWS S3에 직접 업로드하는 방식을 적용하여 이미지 처리 서버 부하를 구조적으로 제거합니다.
HttpOnly Cookie 기반 XSS 방어 인증 구조
리프레시 토큰을 HttpOnly Cookie에 저장하고 액세스 토큰을 메모리에서만 관리하는 이중 토큰 보안 설계를 적용합니다.
slug 실시간 중복 검사 UX 구현
Debounce 적용 API 호출로 URL slug 입력 즉시 가용 여부를 피드백하여 사용자 혼란 없이 커스텀 주소 설정을 완성합니다.
핵심 기능
프로필 빌더 편집기
실시간 미리보기와 함께 명함 정보를 편집하는 WYSIWYG 빌더
진행 단계
DB 스키마 설계 및 JWT 인증 API 구현
2026.04
User, Profile, RefreshToken 모델 설계, JWT 이중 토큰 인증 미들웨어 및 회원가입/로그인 API 구현
프로젝트 상세
1) 포트폴리오 소개 JWT 기반 인증과 실시간 미리보기를 갖춘 디지털 명함 프로필 빌더 MVP를 설계합니다. 사용자가 직관적인 편집 인터페이스로 프로필을 구성하면 고유 URL이 자동 생성되고 vCard 파일을 즉시 다운로드할 수 있는 퍼블릭 뷰어를 구현합니다. 2) 작업 범위 - 프로필 빌더 편집기: 실시간 미리보기와 함께 명함 정보를 편집하는 WYSIWYG 빌더 - 퍼블릭 프로필 뷰어: 고유 U
