Node.js + MongoDB 공부 - part 1

YuJangHoon·2022년 2월 2일

TIL

서버란?

HTTP 요청

Node.js란?

왜 굳이 Node.js인가? : Non-blocking I/O

Web-Development

목록 보기

3/6

Node.js + MongoDB를 공부해보자! 위대하신 코딩애플(codingapple.com)님과 함께:)

서버란?

요청을 하면 요청한 것을 가져다주는, 말 그대로 서빙하는 사람(server) 같은 존재.
링크를 눌러서 특정 페이지를 달라고 하면? html파일을 갖다주는 프로그램.

HTTP 요청

읽기(GET) : 이런 페이지 주세요!
쓰기(POST) : 이런 글 작성할테니까 생성해주세요!
수정(PUT) : 이것 좀 이렇게 바꿔주세요!
삭제(DELETE) : 지워주세요!

Node.js란?

HTML은 홈페이지를 구성하는 뼈대, 문서와 같은 개념이다.
그렇다면, 그것을 움직이게 하는 것은 JavaScript이다.
근데 이 JS는 누가 해석하는가? 바로, 브라우저들이 엔진을 이용해서 해석한다.

그런데... 이 Chrome의 V8이라는 해석 엔진이 너무나도 뛰어나서 그만 뛰쳐나왔다(?).
그게 바로 Node.js!

왜 굳이 Node.js인가? : Non-blocking I/O

일반적인 프로그래밍 언어로 서버를 만들면,
요청을 받고 처리하고 요청을 받고 처리하는 식으로 진행된다.
이때의 문제점은 중간에 처리시간이 오래걸리는 요청이 들어오면,

그 다음 요청하는 사람은 기다려야한다는 것이다😥

그런데, Node.js를 사용하면, 일단 요청을 다 받아놓고, 처리속도가 빠른 것부터 처리해준다!
그러니까, 중간에 요청받는 것을 멈추지 않기 때문에 Non-blocking I/O 이다.
따라서, 채팅서비스나 SNS에 자주 사용된다.

이외에도 코드가 짧고 쉬워서 개발이 빠르다는 장점이 있다.

GET/POST 요청

서버 파일에 다음과 같이 적으면 서버를 열 수 있다!

<script>
const express = require('express');
const app = express();

app.listen(8080, function() {
    console.log('listening on 8080')
})
</script>

에서 끝나면 안되고, 무슨 뜻인지 알아야 다음에 새로운 서버를 열 때,
다른 내용을 공부할 때 쉽게 진행할 수 있다.

1,2번째 줄은 express라은 라이브러리를 사용한다는 말이고,
app.listen은 듣는다, 신호를 수신한다는 뜻이며 8080은 그 주소를 의미한다.

그 속에 있는 function(){}은 "콜백함수"이고 정의는 "함수안에 들어가는 함수"이다.

사용하는 이유는 Node.js 특성상 (위에서 말한 Non-blocking I/O),
코드를 연달아 적는다고 순차적으로 실행된다는 보장이 없기에, 순차적으로 실행하기 위해서 콜백함수를 꼭 사용한다.

GET

<script>
app.get('/write', function(req, res) { 
  res.sendFIle(__dirname + "/write.html")
})
</script>

위에서 GET은 읽기 요청이라고 말했었고, 위의 코드를 해석하자면

/write 라고 요청하면, res(response, 응답)에게 sendFile(파일전송)을 하는데, dirname(현재경로)에 있는 write.html이라는 파일을 보내주는 것이다.

오엥? 너무 쉽자나?

POST

일반적으로, form 태그 안에 우리의 사용자들께서 작성하신 input들이 들어있기 마련이다.
작성된 그 form안의 input들을 서버에 전송하고 싶다면, HTML에는 다음과 같이 작성한다.

<html>
<form action="/add" method="POST">
    <input type="text" class="form-control" name="title">
    <input type="text" class="form-control" name="date">
    <button type="submit" class="btn">Submit</button>
</form> 
</html>

대충 이렇게 form에서 전송버튼을 누르면 /add라는 경로로 POST 요청을 진행하게 된다.
action은 경로를, method는 GET/POST 중에서 어떤 요청을 진행할지 정하는 부분이다.
거기에 input 마다 name이라는 속성을 추가해서 어떤 내용이 담긴 input인지 구별한다!

서버 파일에는 다음과 같이 작성한다.

<script>
app.post('/add', function(req, res){
  console.log(req.body);
  res.send('전송완료')
});
</script>

해석하면, post 요청 중에서 /add라는 경로로 들어온 게 있으면, 로그에 req.body라는 입력된 데이터들을 출력하고, res에 '전송완료'라는 메세지를 보내라는 내용이다.

아니 너무 쉽쟈나?

API란?

웹개발에서 API란 서버와 고객 사이의 소통방법이다.
예를 들어 dict.naver.com에서 /en을 붙이면 영어사전 사이트로 들어가는 그런 소통방법을 말한다.

HTTP 요청을, 즉 API를 REST하게 작성하는게 좋고, 그게 거의 정론이다.

대충 6가지 규칙은

Uniform interface : URL은 간결하고 일관적으로. 예측가능해야한다.

Client-Server 역할 구분 : browser는 요청만, server는 응답만!

Stateless : 각 요청 간의 의존성이 없어야한다

Cacheable : 서버에서 보내는 정보는 캐싱이 가능해야한다. (브라우저가 잘 해준다)

Layered System, Code on Demand

위 6가지 중에서 1번이 가장 중요하다!

위에서 들었던 예시처럼 만들면 된다.
뒤에 /kor을 붙이면 국어사전, 뒤에 /chn을 붙이면 중국어 사전이 나올 것만 같은
느낌적인 느낌이 들기 때문이다.

되도록 명사를 사용하고, 하위문서는 슬래시 (/)를 통해서 띄어쓰기는 대시(-)를 이용하는 등의 규칙을 지키면 유지보수도 쉽고, 사용자도 편리한 URL이 만들어지지 않을까 싶다.