Node.js + MongoDB 로 이미지 웹 만들어보기 (2)

본 글은 이전 글 Node.js + MongoDB 로 이미지 웹 만들어보기(1)에서 이어진다.

 

 

 

Node.js + MongoDB 로 이미지 웹 만들어보기(1)

Node.js + MongoDB 로 이미지 웹 만들어보기 (1)

 

 

이전 글에서 웹 애플리케이션을 만드는데 필요한 기술 스택과 개략적인 구조를 알아보았다.

 

 

이제 본격적으로 웹에서 이미지를 업로드해 저장되는 과정을 알아보자.

 

 

 

웹의 진입 사이트 화면

 

 

Client는 찾아보기 버튼을 통해 이미지 파일을 올린 뒤 제목과 설명을 적고 Upload Image 버튼을 누르면

 

이미지를 업로드할 수 있다.

 

이 과정의 첫 번째는 뷰에서 명시한 입력 form에 위의 요소들을 Post하는 데서 시작한다.

 

enctype을 "multipart/form-data" 으로 해야 한 번의 post에 이미지 파일과 text들이 동시에 보내진다는 것에

 

유의해야 한다. REST 설계의 규칙은 URI가 정보의 자원을 표현해야 하고, 자원에 대한 행위는

 

HTTP method로 표현해야 하므로 method는 "post", action은 /images 로 설정해

 

HTTP method를 통해 자원을 처리하는 RESTful한 웹 애플리케이션의 규칙을 따르기로 한다.

 

 

다음올 Post method를 통해 보내진 파일과 텍스트들은 Controller의 Image를 관리하는 함수에서 가공된다.

 

우선 받은 파일이 이미지 형식인지 확인하기 위해 파일을 Temp 폴더에 임시적으로 저장한 뒤 확장자를

 

확인하고 (.jpg,.png...) 제목과 설명 추가 등 기존의 스키마에 맞게 가공해 MongoDB에 저장한다.

 

마지막으로 DB에 추가된 이미지는 다시 웹에서 호출되어 이미지 리스트에 띄워진다.

 

 

 

 

 

 

 

 

 

이미지를 클릭했을 때 볼 수 있는 화면

 

 

 

 

이미지를 클릭했을 때 볼 수 있는 /images 화면에서는 위와 같이 이미지의 제목, 설명, 이미지,

 

좋아요 기능, 삭제 기능, 댓글 기능이 있다.

 

좋아요와 댓글은 Post method를 요청하더라도 페이지 전체를 새로고침하지 않도록 Ajax 기법을 사용했다.

 

덕분에 댓글을 남기거나 좋아요 버튼을 눌러도 페이지가 새로고침되지 않고 Post를 반영한 화면을 띄워준다.

 

비동기적인 웹을 구성할 수 있는 자바스크립트 기반 웹의 장점이라고 볼 수 있다.

 

Jquery를 통해 이같은 기능을 구현할 수 있었다.

 

댓글에는 이름과 이메일, 댓글 내용을 적을 수 있다. 이메일은 이전에 말했던 "Gravatar" 서비스를 이용해 이용자를

 

독자적으로 구별할 수 있는 독특한 아이콘을 띄워주는 데 필요하다.

 

메인 화면과 이미지 화면 둘에서 볼 수 있는 사이드 바 메뉴는 시간순으로 정렬한 최신 댓글, 좋아요 수에 따라 정렬한

 

이미지, 모든 이미지들의 총 정보를 볼 수 있는 Stat 단으로 이루어져 있다. 이러한 구성을 손쉽게 처리할 수 있었던 것은

 

웹 템플릿 엔진인 Handlebars의 도움이 컸다. Handlebars의 헬퍼 개념을 통해 기존 코드를 재사용하기 용이했고 페이지

 

를 구성하는 데이터를 쉽게 처리할 수 있었다.

 

 

 

 

 

 

 

 

 

이렇게 내 첫번째 웹 애플리케이션 제작기를 마친다. 이 글의 목적은 정보를 공유한다기 보다 사이트를 제작하며 내가

 

느꼈던 것들을 적는 일기에 더 가까웠다. 정보에 대한 상세한 설명은 글에서 나온 키워드를 구글링하면 더 자세한 설명

 

이 나올 것이다. 사이트를 하나 제작하고 나니 내가 배워야 할 것의 경계가 명확해졌다.