Node.js Express?(mini-node-server 구현하기-상세설명)

 

 

Express.js :

Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크

 

지난 시간에는 쌩 Node.js로 서버구현을 해봤지만 이 Express 프레임워크를 이용하면

좀 더 간결하게 서버 구현을 할수있다

 

결국 express는 서버구현을 좀더 편하게 하기위해 만들어진거 개발을 편하게하기위해~!

 

Express에서 중요한 개념은 두가지다

라우팅 && 미들웨어

 

라우팅(Routing):

 

메소드와 URL로 분기점을 만드는 것

 

어제구현했던 순수 Node js이용한 라우팅 : if url어쩌구~ method 어쩌구~ 길죠? 이렇게 처리하기가 힘든걸 express에서는 좀 손쉽게 라우팅을 통하여 구현가능하다 

const requestHandler = (req, res) => {
  if(req.url === '/lower') {
    if (req.method === 'GET') {
      res.end(data)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // do something ...
      })
    }
  }
}

 

express 라우팅 :

app.post('/upper', function (req, res) {
  res.send('express 라우팅에대해 설명중');
});

자세한 설명은 공식문서를 참고하자!

(라우팅부분 공식문서는 읽으면서 이해하기 어려운부분이없다.)

 

 

미들웨어

 

공식문서를 참고해보면

 

미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 

공식 문서는 참 읽으면서도 이해하기가 어렵다.

그래서! 좀 더 쉽게 설명하자면

 

 

이전시간에는 HTTP요청이 들어오면 그에 따른 작업(라우트 작업)을 하여 HTTP응답을 날렸다

미들웨어는? 이중간에 들어가는 작업!

 

미들웨어 만들어보기

const myLogger = function(req,res,next){
	console.log(req,url);
    next() //<- 요걸 실행하면 다른 미들웨어를 실행하거나, 라우팅작업을 실행한는거
};

app.user(myLogger)

함수를 만들어서 -> app.use에 넣어주면 완성! 

미들웨어에서 젤 중요한건? 콜백으로 받은  next()

 

 

그러니까 결국 function(req.res,next){

next()} 

이부분이 메들웨어 함수!

 

app.use() ? app.get()?

 

처음 읽었을때는 그럼 app.use()를 쓰는게 미들웨어를 쓰는거구나! 했는데 그것이 아니였다!

app.get()등의 안에서 function(req,res.next){} <- 얘도 미들웨어 사용이다. (조건부 미들웨어 사용이라고 생각하면 될것같다.)

 

그냥 전범위에서 사용하고싶다면 app.use()를 사용했던것임을 잊지말자!

 

모든요청에 대해서 밑에내용을 콘솔로그로 찍히게하고싶다면? app.use() 얘를 사용해야할것같은 느낌이 온다..와..맞을까?

 

 

 

아래 코드를 사용해봤다. (포스트맨으로 요청을 보내본다 : 이 블로그 보시는분이 계시다면 ! 따라하세요 postman과 console.log로 흐름 파악하는게 이 섹션의 핵심이에요! 포스트맨을 어서켜세요)

 

const express = require('express')
const app = express()
const port = 4999


const ip = 'localhost';

const myLogger = function (req, res, next) {
  console.log(`http request method is ${req.method}, url is ${req.url}`); // 
  next();
};

app.use(myLogger);


app.listen(port, () => {
  console.log(`서버오픈확인스`)
})

 

왓따! 맞았다! 찍혀진다! 얏호! 

(진짜 코알못. Section1때 울면서 남들이 콘솔찍을때 콘솔 어디다 어케 찍을지도 몰랐는데 많이 성장한거같다. 아직밑바닥이지만 ^^)

 

 

자이제 실습으로 들어가보자.

 

지난 시간에 구현했던 코드를 그럼 Express를 사용하여 다시 구현해보자

 

Step 0.

npm init, npm install express,npm install nodemon 등 프레임워크를 사용할수있게 기본 설치를 한다.

 

Step 1.

express라는 모듈을 가져와야한다.

const express = require('express')

Step 2.

애플리케이션 객체를 만들어야한다

const app = express()

Step 3.

애플리케이션 객체가 가지고있는 메소드 중에 listen을 통하여 서버연결!

이 애플리케이션이 4999 포트에 연결되면 콜백함수가 실행되면서 콘솔로그에 찍힌값이 나온다 (콘솔에 서버연결이됬는지 확인하려고 콜백함수사용)

const port = 4999

app.listen(port, () => {
  console.log(`서버연결됨! 히히`)
})

 

대략적인 틀은 잡혔다.

우리가해야하는것?

post와 option이 필요하다! 하지만 option은 cors를 처리하는것이다. 

이것은 cors라는 모듈을 설치후 가져오면 된다!

 

Step4.

require~ 어쩌구를 쓸때는 모듈다운후 쓰는것이므로 npm install 어쩌구~를 꼭해줘야한다.

npm install cors

 

설치했으면? 사용해야겠쥬?

전범위서 사용하려면 ? => app.use()

const express = require('express')
const cors = require('cors')
const app = express()
const port = 4999


const ip = 'localhost';

app.use(cors())



app.listen(port, () => {
  console.log(`서버오픈확인스`)
})

 

Step5. 

 

우리가 지금해야할것? cors로 옵션이였던 부분도 처리해줬고

post부분만 처리해주면되는것!

 

app.post()<-이것만 이제 사용하면 될것같지않나요???

 

공식문서에있는 기본 라우팅을 보면서 따라해보자.

 

첫시도. req.body부분이 어떻게 나오는지 알아야지 우리가 body부분을 toLowerCase()를 해줘서 다시 응답을 보내주겠죠?

그러니 req.body를 확인해보려면 콘솔을 찍어야한다! 

const express = require('express')
const cors = require('cors')
const app = express()
const port = 4999


const ip = 'localhost';

// app.use(express.json()) 
app.use(cors())

app.post('/lower',(req,res)=>{
  console.log(req.body)
  res.send('보내보자')
})



app.listen(port, () => {
  console.log(`서버오픈확인스`)
})

postman에서 응답으로 보내보자는 들어왔으나. body가 undefined로 찍힌다.

 

 

이유가 뭘까?

App.js폴더로가보자

이부분을 확인해보면 

받아온 body를 stringfy하고있다. 그렇다면 읽을수가있을까?

못읽는다! 

 

그렇기에~!

공식문서에 있는 메소드 express.json()이 필요한것

 

가져온 바디를 모든 전범위에서 사용해야하니

app.use()를 써야한다

 

하지만 여전히 미친듯한 에러. JSON어쩌구 뭔데!?

몇시간 개삽질을 했으나.

 

이 원인의 해답은 공식문서에서 찾을수있었다. 

이문제로 몇시간 삽질한게 한둘이아님을 알게되어 평안을 얻긴했다.

 

strict부분을 보면 ony accepting arrays and object부분이 보인다. ^^ 개빡치네 ^^

 

그래서! 우리가 해줘야할것은?

 

{strict : false} <-이것을 해줘야한다.

 

*{strict : false} 이짓거리를 하고싶지않다? 하시는 분계실텐데 그렇다면 app.js를 수정해주면됩니다.

 

 

 

express(json())은 그대로두고

app.post('/upper')<- 이부분처럼 body.a.toUpperCase로받아야됨 

이유 app.js 에서 객체로 body를 받아와서~~

a b c d 원하는것을 Key값으로 지정하면된다.

 

 

-------------------------------------------------------------

아래는 {strict: false}를 사용한것

콘솔로그가 찍히는게 이제 확인된다!

얏호!

 

Step 6. 

 

소문자, 대문자화 시켜서

응답이 오는지 전체점검을 해보자  

const express = require('express')
const cors = require('cors')
const app = express()
const port = 4999


const ip = 'localhost';

app.use(express.json({strict : false})) 
app.use(cors())

app.post('/lower',(req,res)=>{
  res.send(req.body.toLowerCase())
})

app.post('/upper',(req,res)=>{
  res.send(req.body.toUpperCase())
})



app.listen(port, () => {
  console.log(`서버오픈확인스`)
})

Step 7. 

 

postman에서는 잘 찍히지만.

index.html 창에서 찍히지않는 이유?

이부분 때문이죠

render를 해서 보여주는부분입니다. 

 

아주중요한 부분!!

포스트맨에서는 되지만 index.html에서 안되는이유입니다.

프로세스를 보면.

 

처음 어떤 문자열을 친다 sophie

 

sophie => stringfy되어 "sophie" json형태로 서버로 요청을 보낸다 (여기까지 App.js부분)=>

서버에 json형태였던 "sophie" 가 들어오면서 app.us(express.json())이부분에서 다시 원래형태 sophie가된다.

*toLowerCase() 와 toUpperCase()이 메소드는 스트링타입에만 가능한 메소드. 그렇기에 원래형태의 sophie일때만 function사용이가능

완성되면 SOPHIE 를 다시 보낼건디 그냥 보낼수가있나요? 데이터전송이? JSON화시켜 보내야겟죠?

 

이부분까지완성이된거고 이제 클라이언트는 응답을 받습니다.

그 응답받은것을 .then()으로 받습니다.

데이타를 받은거죠. 그것을 어케하고잇죠? 다시 json()을 사용하요 원래대로 돌려놓죠

그러면 화면에서는 SOPHIE가 문자열 그대로 원상복귀된상태에서 대문자화된것으로 보입니다.

 

완성코드 

const express = require('express')
const cors = require('cors')
const app = express()
const port = 4999


const ip = 'localhost';

app.use(express.json({strict : false})) 
app.use(cors())

app.post('/lower',(req,res)=>{
  res.json(req.body.toLowerCase())
})

app.post('/upper',(req,res)=>{
  res.json(req.body.toUpperCase())
})



app.listen(port, () => {
  console.log(`서버오픈확인스`)
})

 

끝. 이제 다음시간 응용해서

공부해보자