1-2. Express와 Body-Parser모듈을 사용해서 POST와 GET으로 Hello World 보내보기!

안녕하세요 여러분~! 효근입니다!

오늘은 Express 모듈을 사용해서 Hello World를 보내보는 소스를 짜볼거에요! 

그럼 한번 간단하게 시작해볼까요?

우선 흔히 알고계시는

콘솔을 켜봅시다. (핑크핑크해서 좋쥬?)

cd desktop

mkdir first_node

cd first_node

흔히 알고 계시는 콘솔 명령어를 쳐서 폴더를 생성하고 접속해줍니다!

그 후 그 폴더를 1강에서 깔았던 Visual Code로 열어줍니다!

요로코롬 여시면 됩니다.

그리고 이제 js파일을 생성해줘야겠죠?

이렇게 파일에 +가 달린 모양의 버튼을 클릭하면

이런 창이 뜰텐데 app.js라고 입력해 주시면 됩니다. 

그럼 성공적으로

app.js 파일이 생성되었습니다! 그럼 이제 작업환경을 생성해줘야 할텐데요! 

다시 콘솔로 돌아와서

npm install express 

npm install body-parser

 

이렇게 입력해 주시면 간단하게 작업환경이 설정됩니다! 참 쉽죠?

그리고 Visual Code로 돌아가시면 

node_modules라는 폴더와 package-lock.json이란 파일이 생성될것입니다.

node_modules라는 폴더는 말 그대로 설치한 모듈들 (Ex. Express, body-parse, multer 등)이 들어있는 폴더, 

pacakage-lock.json이란 파일은  파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고 있는 파일입니다!

잠깐 근데 NPM이 뭐길레 저런걸 해주는걸까요?

NPM이란 

Node Packaged Manager의 약자입니다 먼저 Node는 Node.js,  Packaged라는 것은 package로 만들어진것,

Manager는 관리자! 다시말해 npm이라는 것은 Node.js로 만들어진 pakage(module)의 관리자입니다!

npm을 통해 여러가지를 할 수 있지요!

그럼 다시 본론으로 돌아와 express모듈을 사용해볼까요? 

 

express 모듈이 뭘까요?

express.js는 Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크입니다!

그냥 간단히 설명해 조금 더 쉽게 Node.js를 쓸 수 있게 해주는 모듈이라 생각하시면 편합니다.

한번 소스를 짜봅시다

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

우선 이부분 간단히 express를 선언하고 실행해주는겁니다.

그 후

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({limit:'1gb',extended:false}));

body-parser를 선언하고 사용해봅시다 

잠깐 body-parser가 무엇일까요? 클라이언트 POST request data의 body로부터 Params를 편리하게 추출해주는 모듈입니다! 

그 후

app.get('/get',(req,res)=>{
      console.log("Hellow World");
      res.send("Hellow World");
});

app.post('/post',(req,res)=>{
    console.log("Hellow World");
    res.send("Hellow World");
});

이렇게 소스를 작성했는데 여기서 app.get으로 연 곳은 get방식 통신 app.post로 연 곳은 post방식 통신입니다.

잠깐 (또?) 

GET과 POST가 무엇일까요?

일단 GET은 서버 정보 조회를 위해! 설계된 메소드입니다.
GET은 요청을 전송할 때 필요한 데이터를 BODY에 담지 않고, QUERY STRING 통해 전송합니다.

주소의 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 부릅니다.

그리고 POST는 

POST는 리소스를 생성하고 변경하기 위해서 설계되었기 때문에 GET과 달리 전송해야될 데이터를

HTTP 메세지의 BODY에 담아 전송합니다. HTTP 메세지의 BODY는 길이의 제약을 안받고 데이터를 전송할 수 있습니다. 

간단히 설명하면 POST는 보안면에서 GET보다는 안전하다라고 할 수 있죠.

하지만 F12눌러서 다 보이니 꼭!!! 꼭!!! 추후에는 암호화 하셔야 합니다!

 

그리고 그 내부에 '/get', '/post'는 URL 뒤에 붙는 (ex. www.효근효근.com/get)것입니다!

console.log는 잘 알다싶이 콘솔에, res.send는 Response.send 통신을 한 쪽에 전송하는 것입니다.

그리고 마지막으로

app.listen(3000,function(){
    console.log("server porting on 3000");
  });

이렇게 listen을 통해 포트번호를 설정해주시면 (3000은 보통 로컬호스트입니다) 간단히 HelloWorld를  Post와 Get으로 보내는

서버를 짤 수 있습니다.

그리고 이제 다시 콘솔로 돌아가서!

node app.js

이렇게 입력해주시면 서버가 로컬호스트에서 실행됩니다.

그럼 한번 테스트 해볼까요?

Postman | The Collaboration Platform for API Development

이 사이트에 들어가시면 바로 다운로드가 보이실거에요! 

다운로드 버튼을 눌러주시면 

이렇게 설치가 됩니다.

설치가 된 후 실행해주시면!

이러한 화면이 뜰겁니다

저기에서

 

이걸 누르시면 

이렇게 통신 방법이 뜹니다!  흐음.. 일단 GET부터 보내보죠!

이렇게 입력해줍시다 

localhost (로컬호스트) : 3000 (아까 입력한 포트번호)입니다.

그러고 Send를 보내면?

에러가 납니다... 왤까요? 바로 /get 또는 /post를 입력을 하지 않아서죠!

한번 입력해봅시다!

Send를 누르면...?

잘되네요!

콘솔(터미널)도 확인해보면!

참고로~ 웹 주소창에 치셔도!

 

잘 나오네요! 하하! 그럼 저걸 Post로 보내보면? 

에러가 납니다.. 왤까요? 통신방식이 GET인데 POST로 보냈으니... ㅠㅠ

그럼 이제 /post로 해볼까요?

오! 정말 잘되네요! 

그럼 Get처럼 웹에 넣어보면! 

안됩니다... 왤까요? 웹으로 접속하는건 GET방식이기에 POST가 되지 않는것이죠 ㅠㅠ..

물론

우리의 핑크 콘솔에는 잘 나오고 있습니다! 

뭐.. 해보니 서버도 별거 없죠? 푸하핫! 

좋습니다! 오늘도 매우 수고하셨습니다 여러분! 

항상 노력하는 당신이 BEST!!!