유저 아바타 AWS S3에 저장 서버 하드에 저장하면 서버 재배포 시 새로 생긴 경로는 모조리 삭제되서 초기화된다.. 이 문제를 마주하고 처음에는 서버를 재배포 할 때마다 서버에 있는 새로 생긴 폴더를 다 다운받으면 되지 않을까? 하는 생각을 했다. 크롬 확장도구인 Resources Saver를 사용하면 해당 페이지의 개발자 도구-Resources 탭에서 볼 수 있는 모든 파일을 다운해준다. 하지만 이 방법은 서버를 배포하기 전에 항상 내가 수동으로 작업해야하고, 한 번이라도 잊어버리면 모든 유저 이미지를 날릴 수 있는 위험이 있었다. AWS S3를 사용하기로 마음을 먹는데.. 프론트엔드를 시작해서 서버구축도 해보고 NoSQL도 생성해보고 많은 성장을 하고 있지만 AWS라는 단어는 조금 무서웠다. 하지만..
유저 아바타 변경 기능 multer를 사용해보자 이미지 업로드 버튼 클릭 시 파일을 첨부할 수 있도록 input태그를 사용했다. 이미지 업로드 onUploadHandler 함수 실행 시 유저가 input창에서 선택했던 파일을 FormData를 사용해 avatar라는 키의 값으로 넣어준다. 그리고 post통신으로 서버에 데이터를 보낸다. body에는 formData가 들어간다. const onUploadHandler = useCallback( (e) => { e.preventDefault(); const formData = new FormData(); formData.append('avatar', e.target.files[0]); fetch(`${process.env.API_SERVER}/api/user..