nodejs, express and MongoDB

MinGeo·2022년 9월 1일

nodejs,express,MongoDB

목록 보기

1/1

오늘의 주제

서버에 대한 기초 개념, nodejs, express 설치 및 사용에 대해서 알아보자

서버란?

클라이언트의 요청을 받으면 서비스, 데이터를 제공하는 컴퓨터 혹은 프로그램을 말한다.
쉽게 설명하자면 사람의 요청을 받으면 요청에 따라 데이터를 제공하는 컴퓨터라고 생각하면 편하다.
우리가 네이버 스포츠 창을 클릭해서 네이버 스포츠 메인 창을 서버에게 요청하면, 서버는 우리에게 네이버 스포츠 메인 페이지를 보내주게 되는 것이다. 이게 기본적인 서버가 하는 역할이다.

유저, 클라이언트가 웹 서버에 할 수 있는 요청에는 4가지가 있다.

읽기(GET) 요청 (웹페이지를 읽을 때)

쓰기 혹은 생성 (POST) 요청 (글쓸 때, 로그인할 떄)

수정 (PUT) 요청 (글이나 댓글 수정)

삭제 (DELETE) 요청 (글이나 댓글 삭제)

nodejs, express 사용해보자

두개를 사용하려면 설치가 필요하다.
설치 방법은 구글에 검색하면 정말 많이 나온다. 맥북 유저의 경우 홈브루를 이용해 간단하게 설치가 가능하다.

GET 요청 처리해 보기

visual studio code에 nodejs, express, package.json 파일등 준비가 다 된 폴더를 열고, server.js, index.html 파일을 생성하고 server.js에 다음과 같이 작성해 주었다.

const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
});

위에 두 줄은 express 라이브러리 첨부와 사용, 아래 app.listen은 우리가 원하는 8080 포트 넘버에 서버를 오픈하는 문법이다.

위 코드를 작성하고 터미널을 열어 node server.js를 입력해 주면 서버가 작동하면서 터미널에 listening on 8080 이라는 글이 출력될 것이다.
그리고 우리가 연 서버를 브라우저에서 확인해 보려면, localhost:8080을 입력하고 접속하게 되면, 아무것도 없는 흰 페이지를 확인할 수 있다. 아직 페이지를 작성하지 않았으니, GET 요청을 배워보자.

app.get('/main', function(request, response) { 
  response.send('메인 페이지 입니다.')
})

이 코드를 server.js에 작성하게 되면, localhost:8080/main에 들어가면 브라우저에 '메인 페이지 입니다' 라고 적힌 것을 확인할 수 있다.

서버에 HTML 파일 전송 및 nodemon 사용하기

지금 nodejs를 사용해보면 페이지를 수정할 때마다 node server.js를 계속 입력해야한다. 하지만 nodemon을 이용하면 그럴 필요 없이 수정 사항이 그때 그때 바로 적용 된다.

터미널에 npm install -g nodemon을 입력하여 설치하고, nodemon server.js를 입력하면 실시간으로 작성해서 수정된 코드가 반영 될 것이다.

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <h4>안녕하세요 홈페이지입니다.</h4>
  </body>
</html>

위와 같은 index.html을 작성해 주고, 한번 localhost:8080으로 접속하면 메인 페이지로 index.html이 나오게 만들어 보자

app.get('/', function(request, response) { 
  response.sendFile(__dirname +'/index.html')
});

server.js에 app.listen 아래에 작성해 주면 된다.

/가 어떤 경로로 접속할때를 의미한다. 예를 들면 아까 /main 을 이용해서 app.get을 작성했는데, 아무것도 없이 /만 있으면 메인 페이지. 가장 기본 페이지를 의미한다.

__dirname은 현재 파일의 경로를 의미한다.

form에 입력한 데이터를 서버에 전송해 봅시다 (POST)

html에서 form 내 input등을 전송하려면 form에 다음과 같이 작성해주어야 한다.

<form action="/add" method="POST">
</form>

그리고 body-parser를 이용해야 하기 때문에 server.js 위에 다음과 같이 작성해 줍시다.

app.use(express.urlencoded({extended: true}))

그리고 server.js에 다음과 같이 작성해줍시다.

app.post('/add', function(request, response){
  console.log(request.body);
  response.send('전송완료')
});

이렇게 하면 form에서 서버로 데이터를 전송 가능하다.

마무리

오늘은 서버의 기본 개념과 nodejs, express로 get post 요청을 수행해 보았다. 다음 시간에는 MongoDB 셋팅 후 사용법에 대해서 알아보려 한다.

MinGeo