multer 패키지로 이미지 업로드 구현하기

npm install multer

 

이미지를 어떻게 저장할 것인지는 서비스의 특성에 따라 달라집니다. 

NodeBird 서비스는 input 태그를 통해 이미지를 선택할 때 바로 업로드를 진행하고, 

업로드된 사진 주소를 다시 클라이언트에 알릴 것입니다.

 

게시글을 저장할 때는 데이터베이스에 직접 이미지 데이터를 넣는 대신 이미지 경로만 저장합니다. 

이미지는 서버 디스크에 저장됩니다.

 

 

 

 

그럼 post 라우터와 컨트롤러를 작성해보겠습니다.

POST /post/img 라우터에서는 이미지 하나를 업로드 받은 뒤 이미지의 저장 경로를 클라이언트로 응답합니다. 

static 미들웨어가 /img 경로의 정적 파일을 제공하므로 클라이언트에서 업로드한 이미지에 접근할 수 있습니다.

POST /post 라우터는 게시글 업로드를 처리하는 라우터입니다. 

이전 라우터에서 이미지를 업로드했다면 이미지 주소도 req.body.url로 전송됩니다. 

비록 데이터 형식이 multipart이지만, 이미지 데이터가 들어있지 않으므로 none 메서드를 사용했습니다. 

 

이미지 주소가 온 것일뿐, 이미지 데이터 자체가 오지는 않았습니다. 

이미지는 이미 POST /post/img 라우터에서 저장되었습니다.

게시글을 데이터베이스에 저장한 후, 게시글 내용에서 해시태그를 정규표현식 (/#[^#\\s]+/g)으로 추출해냅니다. 

추출한 해시태그는 데이터베이스에 저장하는데, 먼저 slice(1).toLowerCase()를 사용해 해시태그에서 #을 떼고 소문자로 변경합니다. 

저장할 때는 findOrCreate 메서드를 사용했습니다. 

 

이 Sequelize 메서드는 데이터베이스에 해시태그가 존재하면 가져오고, 존재하지 않으면 생성한 후 가져옵니다. 

결괏값으로 [모델, 생성 여부]를 반환하므로 result.map(r => r[0])으로 모델만 추출해냈습니다. 

마지막으로 해시태그 모델들을 post.addHashtags 메서드로 게시글과 연결합니다.

Note: 실제 서버 운영 시

현재 multer 패키지는 이미지를 서버 디스크에 저장합니다. 

디스크에 저장하면 간단하기는 하지만, 서버에 문제가 생겼을 때 이미지가 제공되지 않거나 손실될 수도 있습니다. 

따라서 AWS S3나 클라우드 스토리지 같은 정적 파일 제공 서비스를 사용하여 이미지를 따로 저장하고 제공하는 것이 좋습니다.

이러한 서비스를 사용하고 싶다면 multer-s3나 multer-google-storage 같은 패키지를 찾아보면 됩니다.

이에 대해서는 16장에서 알아봅니다.

 

 

 

게시글 작성 기능이 추가 되었으므로 메인 페이지 로딩 시 메인 페이지와 게시글을 함께 로딩하도록 해봅시당

 

 

먼저 데이터베이스에서 게시글을 조회한 뒤 결과를 twits에 넣어 렌더링합니다. 

조회할 때 게시글 작성자의 아이디와 닉네임을 JOIN해서 제공하고, 게시글의 순서는 최신순으로 정렬했습니다. 

지금까지 이미지 업로드 기능을 만들었습니다.

 

남은 기능들을 마저 추가하고 서버를 실행해봅시다.