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

1. 시작

 

 

Node.js와 MongoDB 를 사용해서 이미지를 업로드하고 볼 수 있는

 

기초적인 웹 애플리케이션을 만들어 보고자 한다.

 

기본적인 기능과 디자인은 https://imgur.com/ 과 비슷한 형태가 될 것이라고 생각하고 있다.

 

평소에 Freequration 이나 Pixabay 같은 이미지 사이트를 유용하게 사용해와서 

 

동일한 기능의 사이트를 제작해보고 싶었다.

 

초기에 기획했던 기초적인 명세는 다음과 같다.

 

 

1. Client가 사이트에 이미지를 업로드하면, 사이트에 업로드의 시간순으로(최신순)

 

업로드된 이미지들을 볼 수 있다.

 

2. 업로드된 이미지를 클릭하면 이미지의 제목과 설명, 추가적으로 좋아요와 댓글을 

 

볼 수 있게 한다.

 

3. 기본적으로 메인 페이지(진입 페이지)와 이미지 페이지(이미지를 클릭하면 나오는 페이지)로

 

이루어져 있으며 두 페이지에 공통적으로 나타나는 사이드 바가 존재한다.

 

4. 사이드 바에는 최신 댓글, 좋아요 순으로 정렬된 이미지, 사이트 이미지들의 총 조회수, 좋아요 수 등이 

 

나타나게 된다.

 

이 명세들을 바탕으로 사이트를 제작하고자 한다.

 

 

 

 

이를 바탕으로 한 웹 사이트의 초기 결과물부터 공개하자면

 

웹 사이트의 진입점이다

 

 

위의 이미지는 이미 2개의 이미지를 업로드 한 상태이다. 

 

다음으로 어떻게 웹의 구성이 이루어졌는지 알아본다.

 

 

 

 

 

 

 

2. 과정

 

 

웹을 만드는데 사용한 기술 스택은 다음과 같다.

 

 

 

웹 애플리케이션 프레임워크 : Express

 

Express는 빠르고 간결하며 유연한 웹 프레임워크이다. 최소한의 기능으로 개발자에게 자유를 제공하면서 러닝 커브가 완만해 웹 프레임워크의 기능에 익숙해지는데 용이해 Express를 선택했다. 너무 마이너하지 않고 많은 조직에게 익숙해 커뮤니티가 잘 활성화 되어 있다는 것도 장점이다. 

 

 

서버 사이드 플랫폼 : Node.js

 

Node.js의 대표적인 특징은 싱글 스레드, 비동기 처리이다. 때문에 서버의 cpu를 전부 활용하지 못한다는 단점이 있지만 많은 동시 접속을 처리할 수 있다. 실시간 상호작용이 중요한 최근 웹 애플리케이션에서 큰 이점을 가지기 때문에 Node.js를 선택하였다.

 

 

데이터 베이스 시스템 : MongoDB

 

MongoDB는 Nosql에서도 도큐먼트 스토어로 분류된다. Json에 친화적인 환경이기 때문에 Node.js와 함께 사용시 데이터베이스와 서버가 같은 데이터 포맷을 사용한다는 장점을 누릴 수 있어 선택하였다. 또 Nosql이기 때문에 스키마를 쉽게 변경할 수 있어 유연한 개발이 가능하다는 점도 끌렸다.

 

 

클라우드 서비스 : AWS

 

사이트를 배포하는데는 AWS의 Elastic beanstalk를 사용하게 되었다. On-premise 환경에서 웹을 구축할 수도 있었지만 서버 역할을 하는 내 노트북이 24시간 돌아가야 한다는 점이 불안해서 클라우드 환경에서 구축하게 되었다. AWS는 클라우드 서비스 계의 1인자이기도 하고 저번에 취득한 AWS-SAA 자격증을 딴 만큼 AWS의 서비스를 이용하는 것이 맞다고 생각했다. 그 중에서도 Elastic beanstalk 서비스를 활용해 별다른 서비스 설정 없이 손쉽게 환경을 구축할 수 있었다.

 

 

AWS의 Elastic beanstalk를 이용해 웹을 배포했다.

 

 

 

 

 

디자인 패턴은 MVC 패턴을 사용해 데이터를 명시하는 Model,

 

시각적인 표현을 담당하는 View, 이벤트를 처리하는 Controller 부분으로 나누어 개발했다.

 

MVC 패턴을 사용하는 이유는 정형화된 패턴을 사용함으로써 정해진 규격 안에서 완성도 있는 웹을 만들 수

 

있기 때문이다. 한마디로 이미 정해진 규약을 따라 만듦으로써 쉽고 편하게 완성도 있는 개발을 할 수 있기 때문이다.

 

실제 개발 환경의 디렉토리는 다음과 같이 이루어져 있다.

 

 

Model -- Comments, Images, Index : 모델에서는 몽고DB에 쓰일 이미지와 댓글 데이터 스키마를 명시했다. 이미지에는 

 

좋아요 수, 조회수, 제목과 설명, 타임스탬프(이미지 등록 시간을 위한) 데이터가 명시되어 있으며, 댓글에는 이름,

 

이메일, 그라바타(그라바타를 사용한 아이콘을 위한), 댓글 내용이 명시되어 있다. 마지막으로 댓글과 이미지 명세를

 

한꺼번에 내보낼 index 파일을 만들어 쉽게 사용할 수 있도록 했다.

 

 

Controllers -- Home, Image : 컨트롤러에서는 진입 페이지인 Home과 이미지를 클릭하면 나오는 Image 페이지에서의

 

컨트롤을 명시했다. 각 파일에는 기능할 함수를 작성한 모듈을 포함했다. 예를 들어 Image 파일에서 Like 함수는 좋아요

 

버튼을 누를 시 좋아요 수가 늘어나는 함수를 명시했다.

 

 

View -- Layout, Partials : 레이아웃은 말 그대로 모든 페이지에서 나타나는 기본적인 틀을 나타냈다. Partials에는 진입 

 

페이지를 비롯한 다른 페이지의 뷰를 명시했다. 모든 페이지에  총 좋아요 수,조회 수, 이미지 수를 보여주는 사이드 바의

 

뷰도 포함되었다.

 

 

 

 

다음 글에서 이어짐