main-project 14~16일차 (22.09.21 ~ 23. AWS S3 이미지 업로드)

✅ 오늘 한 일

AWS S3 이미지 업로드 테스트

• 처음으로 팀원분들과 얘기를 나눴던 내용은 프론트에서 직접 S3로 이미지를 업로드 한 후 URL을 받아 서버에 넘겨주는 형식으로 작업하기로 했다.
• 하지만, 위의 방식은 AWS키 값을 프론트에서 직접 관리하기 때문에 보안상으로 좋지 않고, 사용자 측면에서 속도 저하가 일어난다고 한다.
• 그래서 파일을 백엔드측으로 전달 → 백엔드에서 S3로 이미지 업로드 → URL로 DB에 저장하는 형식으로 서버에서 처리를 해주시기로 했다. 이미지 업로드 방법은 수강하는 과정에서는 존재하지 않았다. 그렇기때문에 서버에서 되지 않을 경우를 생각하여 프론트에서 처리하는 방법도 계속해서 도전했다.
• 아래의 블로그를 참고하여 코드를 작성해 보고 왜 코드가 동작하는지 이해하여 팀원들에게 알려줄 수 있을 때 까지 계속 파헤쳐봤다.
• Error
  • AccessControlListNotSupported: The bucket does not allow ACLs
    위와 같은 에러가 나왔는데 해결 방안으로는 ACL 비활성화 → ACL 활성화를 해주니 해결되었다.
  • 이미지 업로드는 되지만 URL을 받아오는 것과 업로드된 이미지를 삭제하는 것이 되지 않는다.

참고자료

1, 2번 둘다 참고해야함

리액트활용-01.aws s3에 React를 이용한 file upload 기능 만들기 1/2

모달 구현

• 게시글 작성, 수정, 삭제, 회원가입 등 사용자에게 메시지를 전달해야하는 경우에 사용할 수 있도록 재사용이 가능한 모달창을 구현했다.

🥲 어려웠던 일

• AWS S3에 이미지 업로드하기가 진짜 너무 어려웠다. 블로그를 찾아보니 생략되는 것과 오타가 너무 많았다. 그래도 다양한 검색을 통해 해결할 수 있었다.

📌 해야할 일

• 판매점 상세 페이지 구현
• 판매점 게시글 작성 페이지 구현
• 판매점 게시글 수정 페이지 구현
• 판매점 게시글 리스트 페이지 구현