카일_

multer

Project/SENTENCE U

Day 26 | 이미지 AWS S3 업로드

유저 아바타 AWS S3에 저장 서버 하드에 저장하면 서버 재배포 시 새로 생긴 경로는 모조리 삭제되서 초기화된다.. 이 문제를 마주하고 처음에는 서버를 재배포 할 때마다 서버에 있는 새로 생긴 폴더를 다 다운받으면 되지 않을까? 하는 생각을 했다. 크롬 확장도구인 Resources Saver를 사용하면 해당 페이지의 개발자 도구-Resources 탭에서 볼 수 있는 모든 파일을 다운해준다. 하지만 이 방법은 서버를 배포하기 전에 항상 내가 수동으로 작업해야하고, 한 번이라도 잊어버리면 모든 유저 이미지를 날릴 수 있는 위험이 있었다. AWS S3를 사용하기로 마음을 먹는데.. 프론트엔드를 시작해서 서버구축도 해보고 NoSQL도 생성해보고 많은 성장을 하고 있지만 AWS라는 단어는 조금 무서웠다. 하지만..

Project/SENTENCE U

Day 23 | 이미지업로드/클라우드타입 배포자동화

유저 아바타 변경 기능 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..