항해99

항해99 - [Chapter 5] 클론 프로젝트 (W7) - WIL

김핵센 2023. 1. 2. 01:03

이번주 WIL 키워드는 "클론 프로젝트를 진행하면서 내가 가장 신경 쓴 부분 / 기술에 대한 정리" 이다.

이번주 우리 조의 클론 프로젝트는 인스타그램으로 선택하였다.

인스타그램으로 고른 이유는 현재 우리가 기본적인 CRUD 이외의 추가 기능을 선택해서 프로젝트에 반영할 수 있을 것 같다는 의견이 한데 뭉쳐서 인스타그램으로 선택하게 된 것 같다.

내가 인스타그램 클론 프로젝트를 진행하면서 가장 신경 쓴 부분은 프론트와의 협업이지 않았나 싶다.

인스타그램의 무한스크롤 기능을 구현하기 위해서 프론트에서 요청한 페이지네이션 조회 API를 요청한 방식에 맞춰서 구현하였다. 

프론트에서 페이지 번호를 보내주면 그 번호마다 데이터를 5개씩 잘라서 보내주기만 하면 구현이 가능했기에 Sequelize 쿼리 문법의 offset과 limit을 통해 데이터를 잘라서 보내줄 수 있다는 것을 알게 되었다.

또한 프론트단에서 추가적인 데이터가 필요한 경우 해당 API를 즉시 수정해서 프론트와의 소통을 중점적으로 진행하려고 노력했던 것 같다.

기술에 대한 부분은 사진 업로드 기능이다.

사진 업로드를 하기 위해서 multer(서버에 이미지를 저장할 때 사용되는 모듈)와 multer-s3(이미지 업로드 시 로컬 서버가 아닌 S3에 이미지를 업로드), AWS-SDK(AWS 서비스를 연결하기 위한 모듈)를 사용했다.

기능 구현 순서는 아래와 같다.

  1. AWS에서 S3 버킷 생성
  2. IAM 설정
    - IAM이란 AWS 리소스에 대한 엑세스를 안전하게 제어할 수 있는 웹 서비스이다. 이를 통해 리소스를 사용하도록 인증하거나 권한 부여된 대상을 제어한다.
  3. 필요한 모듈 설치 (multer, multer-s3, AWS-SDK)
  4. awsconfig.json 파일 생성 (accessKeyId, secretAccessKey,region)
  5. postImg.js(upload 모듈) 파일 생성
  6. post.route.js파일에 postImg.js 파일 불러온 후 게시글 작성 API에 upload미들웨어 추가
    - router.post('/', upload.single('postImg'), authUserMiddleware, postController.createPost);