Express + MongoDB, 간단한 프로젝트 만들기

안녕하세요 〰️ 

오늘은 지난 번 포스팅 'MongoDB, 어렵지 않게 시작하기' 에 이은 2번째 시리즈입니다.

지난번에는 NoSQL에 대한 특징, MongoDB설치 등 기본적으로 프로젝트를 만들기 위한 기반을 마련했습니다.

코드는 따로 적어두지 않았으며, 모든 코드는 Github에 올려두었으니, 참고바랍니다 〰️ 

 

이번에는 Express와 MongoDB를 직접 사용해보는 시간입니다 ❗️ 

 

 

1. express 프로젝트 생성하기

 

express 프로젝트를 하나 만들고, 필요한 노드 모듈을 설치 ( npm install ) 설치하는 명령어를 입력해주세요 ❗️

 

$ express { project-name }
$ cd { project-name }
$ npm install

 

 

2. mongoDB 설치하기

 

 

$ npm install --save express mongoose body-parser

 

명령어를 입력해서 mongoose, body-parser library를 설치해줍니다.

 

 

자, 이제부터 기능을 구현하텐데요, express 사용이 익숙하지 않은 분이라면 조금 힘드실 수도 있습니다.

구조를 먼저 알려드릴게요

 

자, 왼쪽의 구조를 따라 만들어 나아갈 것 입니다.

데이터의 흐름을 먼저 알려드리자면, 

user의 요청 -> route -> controller -> models -> controller -> route -> user에게 반환

이 과정을 알고 계신다면, 쉽게 이해하실 수 있을 것입니다.

 

왼쪽에 파란색으로 표시되어 있는 디렉토리/ 와 파일.js 이 보이는데요, 이건 직접 만들어주셔야 하는 것들이니 먼저 만들어두고 시작해주세요!

 

저희가 작업할 파일은 

controllers/todolistController.js

models/todolist.js

routes/ user.js를 제외한 나머지 전부

app.js

를 다뤄볼 예정입니다. 잘 보고 따라와 주세요❗️ 

 

 

 

3. route 기능 구현하기

API는 아래와 같습니다.

Verb	Path	Use for
GET	/todolist	모든 todos 를 조회
GET	/todolist/:todoId	todoId에 해당하는 특정 todo 조회
POST	/todolist	todo 작성
DELETE	/todolist/:todoId	todoId에 해당하는 특정 todo 삭제

 

먼저, routes/index.js에 todolist를 사용하게끔 만들어줍니다. 

 

router.use('/todolist', require('./todolist'));

두 번째로는, routes/todolist/index.js에 위와 같은 코드를 작성해줍니다.

포스팅에 코드를 다 적기에는 너무 길어질 것 같아서, Github에 올려둘테니 참고해주시길 바랍니다.

물론, 스스로 타이핑 하는 것이 가장 좋은 방법인 듯 합니다.

 

코드를 간단히 설명해드리자면, 

 

// controllers/todolistController.js 모듈을 가져와 todolistController 변수에 담는다.
const todolistController = require('../../controllers/todolistController');

// localhost:3000/todolist 의 'get'요청이 들어오면 todolistController 모듈에 있는 readAll을 실행한다.
router.get('/', todolistController.readAll);

 

위와 같은 방식으로 실행됩니다.

 

 

4. controller 기능 구현하기

 

controller는 대부분의 기능을 구현하는 파일입니다. 연결이 되었으면, controller에서 모델에 접근해 데이터를 쓰거나 받고, 특정 기능을 처리한 후 반환해주는 역할까지 합니다.

그래서 이 프로젝트에서도 '모델에 접근'하고, '결과를 반환'해주는 역할을 하는데요. 눈에 보이시나요?

하나만 예시를 들어보도록 하겠습니다.

 

// todo 모듈 중 read 비동기 함수
read: async (req, res) => {
		// 파라미터로 받은 todoId를 변수에 담는다. (localhost:3000/todolist/5e6e4743ea803ad69a8f82b8) 
        const todoId = req.params.todoId;
        // Todo(models/todolist.js) 모듈의 find()함수에 todoId를 인자로 넣어 실행한다.
        const todo = await Todo.find(todoId);
        try {
        	// 만약, 결과값이 존재하지 않는다면 존재하지 않는 글을 보려 시도한 것.
            if (!todo.length) 
                return res.status(404).send({ err: 'Todo not found' });
            // 존재한다면 find successfully와 함께 성공한 객체 출력
            res.send(`find successfully: ${todo}`);
        } catch (err) {
        	// 서버 오류 발생시 500 status 반환
            res.status(500).send(err)
        }
    },

 

 

나름 자세하게 적은 것 같은데 혹시 헷갈린 점이 있다면 댓글로 질문해주세요 〰️ 

 

 

5. model 기능 구현하기

자! 이제 mongoose를 직접적으로 사용하는 model을 구현해볼까요?

 

// schema를 생성, 데이터는 아래의 3종류.
const todoSchema = new mongoose.Schema({
  userName: { type: String, required: true },
  content: { type: String, required: true },
  completed: { type: String, default: false }
},
// options
{
  timestamps: true,
  collection: 'todos'
}, );

 

mongoose에 데이터를 만들 때에는 Schema를 생성하고 Model을 만들어 반환합니다.
Schema와 collection이 헷갈리는 분들도 계실텐데요, 이 전 포스팅에 적어두었으니 참고하시길 바랍니다!

 

대강 눈으로 보면 userName의 타입을 String으로, 필수의 값으로 설정해두었다는 느낌이 오시죠?

options에는 두 가지를 설정해두었는데요, timestamps를 true로 설정해두었어요!

이건, 나중에 테스트를 하면 아실텐데 자동으로 생성 날짜와 업데이트 날짜를 표시해줍니다.

또, collections 옵션은 특정 collection에 데이터를 넣기 위해서 설정해두었습니다. 따라서, todos라는 이름을 가진 collections에 데이터들이 담기겠죠?

 

그 아래의 코드들은 mongoDB명령어들이 있습니다.

이 포스팅으로 다 다루기에는 무리가 있으니, 언젠가 한 번 정리하는 날이 왔으면 합니다 😁

 

6. app.js 

 

마지막으로 구현하는 단계입니다❗️ 

app.js에mongoose, body-parser을 적용시켜봅시다 〰️ 

첫 번째로, mongoose, body-parser를 불러옵니다.

두 번째로, 각각의 기능이 구현되도록 코드를 입력해주세요!

mongoose.connect 에는 연결시킬 DB를 적어주시면 되는데, 따로 정한 username이나 password가 있다면 여기를 참고해주세요!

 

 

자, 이제 모든 구현이 완료되었습니다 〰️ 

이제 프로젝트를 실행시켜볼까요?

 

$ npm start

 

다시 한 번 강조하지만, 실행은 프로젝트의 최상위 폴더(package.json이 포함된 가장 위 폴더)에서 실행시켜주셔야만 합니다❗️ 

 

 

 

테스트 해보기

테스트는 어떻게 하냐면, postman을 사용합니다! postman은 개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼입니다. 

 

설정할 것 1. HTTP Verb(Method)를 상황에 맞게 설정 - POST

설정할 것 2. URI(URL)을 알맞게 부여할 것. - localhost:3000/todolist

설정할 것 3. Request Body는 raw -> JSON 형태로 바꿔서 채워둘 것 - 반드시 JSON 형태로 요청해야 합니다. 꼭❗️ 

설정할 것 4. 모든 인자를 넣어 SEND - 필수 요소인데 넣어주지 않으면 에러 발생

자, 이렇게 4가지를 꼭.꼭. 체크하고 테스트를 해보면 아래와 같은 결과가 나옵니다.

 

결과값이 보이시나요? 데이터가 아주 잘 들어갔습니다 〰️ 

로컬 mongoDB에 잘 들어갔는지 까지 확인해볼까요?

 

설정할 것 1. HTTP Verb(Method)를 상황에 맞게 설정 - GET

설정할 것 2. URI(URL)을 알맞게 부여할 것. - localhost:3000/todolist

으로 설정하고 다시 한 번 요청해보세요!

간단히 테스트하는 용도라 보기 좋게 출력을 하지 못했네요😅

어쨌든, 테스트가 성공적인 것을 볼 수 있습니다.

 

 

이 번 포스팅에서는 mongoose 사용하는 전체적인 흐름에 대해서 안내해드렸습니다.

자세한 내용은 다루지 않았어요!

그건, 이 포스팅을 보는 여러분들이 더욱 더 찾아보면 정말 금방 나올 것입니다.

별로 어렵지 않았길 바라고, 이 포스팅이 꼭 누군가에겐 도움이 되었으면 합니다 😄

 

그럼 'Express + MongoDB, 간단한 프로젝트 만들기' 는 여기서 이만 마치도록 하겠습니다❗️