김성근 | Notion

프로젝트 개요

"최애의 포토"는 서로의 포토카드를 구매, 판매 교환 가능 나만의 포토카드를 자랑하는 재미와 함께 상호 교류도 즐길 수 있는 플랫폼 서비스

기술스택
- 프론트엔드(Frontend) : JavaScript, React, Next.js
- 백엔드(Backend) : Node.js, Express
- 데이터베이스(DB) : PostgreSQL
- 공통 툴(Tool) : Git & GitHub, Discord

<aside>

로그인 & 로그아웃 페이지 UI
- https://github.com/MyBiasPhoto/7-MyBiasPhoto-team1-FE/issues/3#issue-3275728286
- https://github.com/MyBiasPhoto/7-MyBiasPhoto-team1-FE/issues/4#issue-3275729106

포토카드 생성 페이지
- https://github.com/MyBiasPhoto/7-MyBiasPhoto-team1-FE/issues/18#issue-3275935379

포토카드 생성 API
- https://github.com/MyBiasPhoto/7-MyBiasPhoto-team1-BE/issues/9#issue-3276100850
- AWS S3 + Presigned URL 방식으로 이미지 업로드 및 DB 저장
- 동작 방식
  1. 사용자가 사진을 선택하거나 AI 이미지 생성 버튼을 눌러 원하는 파일을 선택
  2. 프론트엔드는 서버에 Presigned URL 요청
  3. 백엔드에서 AWS SDK를 이용해서 S3에 업로드 할 수 있도록 URL 반환 후 프론트엔드에 응답으로 전달
  4. 프론트엔드는 URL을 이용해 S3에 업로드
  5. 업로드가 끝나면 프론트엔드가 서버에 S3에 저장된 파일의 URL 전달
  6. 서버는 URL을 DB에 저장해서 포토카드 생성 시 사용하거나 중복 시 재사용 가능
- 장점 : 배포 환경에서 저장 경로 관리를 S3로 해결 및 서버 부하 감소, 전송 속도 향상
(심화) AI 포토카드 생성하기
- Hugging Face Inference API 이용하여 AI 이미지 생성
- 동작 방식
  1. 사용자가 AI 이미지 생성 클릭 -> 프롬포트 입력 -> 생성 버튼 클릭
  2. 서버에서 Huggingface api key 로 API 호출
  3. 받은 데이터 프론트에서 미리보기 가능
  4. 이 이미지 사용하기 클릭 -> Presigned URL 발급 요청 후 S3에 직접 업로드
  5. 업로드 완료 되면 URL 생성 후 DB에 저장
- 장점 : 서버 부담 줄이고 쉽게 배포 가능하고 이미지를 빠르게 사용자에게 제공 </aside>

AWS S3 이미지 업로드 오류
- 문제 : S3를 처음 사용해봐서 Presigned URL 업로드 시 CORS 에러 발생
- 해결 : S3에서 버킷 정책 및 CORS 설정 수정 후 업로드
이미지 용량 과다
- 문제 : 업로드 이미지 용량이 커서 속도 저하
- 해결 : 업로드 이미지 용량 10MB 미만으로 제한