File Upload

1. Multer

 - 파일 업로드를 위한 middleware를 사용

 - https://www.npmjs.com/package/multer

multer

 - 우리 form이 다르게 encode 될 거라는 의미임

   - 이 것이 파일을 upload 하기 위한 유일한 조건

 - API를 참고하여 middleware를 만들어야함

 - multer에는 configuration object가 있는데, 그 중 하나는 dest

   - user가 파일을 upload 하면, 그 파일을 어디에 둘지 지정해야 함

   - 일단은 우리 pc에 저장

 - middleware를 만들고 저장하자마자 폴더가 생성되어버림

 - 이제 middleware를 controller가 아닌 route에 사용할거임

 - 파일을 하나만 올리므로 single을 사용

 - input의 name이 avatar인 것

 - multer는 쩔기 때문에, input으로 avatar를 받아서 그 파일을 지정한 폴더에 저장한 다음, 파일 정보를 postEdit에 전달

    - middleware가 먼저 실행되고, 그 다음 postEdit이 실행

 - 이렇게 하면, request에 req.file이 추가됨

 - upload 해보면 console에 파일 정보가 나오고 uploads 폴더에도 파일이 생김

2. Path

 - 이제 경로를 찾아야 하므로 file object에서 path를 꺼냄

 - 문제는 사용자가 avatar를 바꾸지 않는 경우가 있음

   - 파일을 업로드하지 않고 user 정보를 변경하면 에러가 발생

 - 즉 파일이 존재하지 않으면 file.path를 사용할 수 없음

 - 다른 방법을 사용해볼려는데 session으로 user 정보를 사용할 수 있었음

 - file이 존재하면 file.path가 있다는 얘기고 user가 input으로 file을 보냈다는 것

 - file이 존재하지 않으면 user가 upload하지 않았고 기존 avatarUrl로 저장

   - 새로운 avatarUrl을 session의 user object에 있는 기존 것으로 사용

   - 강조하자면 session에는 user object가 있고 우리는 거기에 있는 정보를 사용할 수 있음

 - user에는 avatarUrl이 있고, loggedInUser는 현재 로그인된 사용자고, localsmiddleware를 통해 pug에 전달되고 있음

 - 근데 이미지가 엑박으로 보임

   - 개발자 도구에는 경로가 잘 나오는거 같은데 console에는 404에러가 발생

 - 이렇게 경로를 바꿨지만 아직 안됨

 - 우리는 이런 url을 만든적이 없음

   - express한테 uploads 폴더가 있다고 알려줘야함

3. Static Files Serving

 - 브라우저가 서버의 아무 폴더로든 갈 수 있으면 보안상으로 좋지 않음

 - 그렇기에 우리는 브라우저가 어떤 페이지와 폴더를 볼 수 있는지 알려줘야 하므로 Static Files Serving을 활성화 할거임

   - 폴더 전체를 브라우저에 노출시킨다는 의미

이제 사진이 잘나옴

 - 현재의 문제점이 있는데 우리는 file을 서버에 저장하고 있음

 - 서버는 종료되고 시작되고를 반복하는데, 뭔가가 update되면 새로운 서버를 만들어서 다시 시작함

 - 그 전 서버에 저장되어 있던 파일들은 날아감

 - 서버가 두개 필요할 수도 있는데, 하나의 백엔드를 만들더라도 서버 두개가 필요할 때가 있음

   - 방문자가 너무 많을 때

 - 그럴 때 두개의 서버에서 uploads 폴더를 공유한다는건 이상함

 - 서버가 죽을 때도 있는데, 서버를 시작할 수 있는 코드를 가지고 다른 서버에서 시작할 수는 있음

   - 하지만 죽었을 때 upload된 file이 있다면 그대로 날리는거임

 - 나중에는 이 문제점을 수정할건데 file을 서버에 저장하는게 아니라, 다른 곳에 저장

   - 서버가 사라져도 파일은 그대로 있을수 있도록 안전하게 저장

   - 실제 서버에 배포할 때 바꿀거임

 - 또한 db에 file을 저장하면 안됨

   - db에는 file 자체가 아니라, 위치를 저장

   - file의 원본은 Amazon의 하드드라이브 같은 곳에 저장