Engineering_S/W & H/W

 안녕하세요. 저번 글에 이어서 실제로 세션을 이용하여 코드를 작성하도록 하겠습니다.  세션에 대한 개념적 설명을 링크 를 참고해 주시기 바랍니다. 먼저 npm init을 진행합니다. npm 초기화 방법은 링크 를 참고해 주시기 바랍니다. 4개의 npm 모듈을 설치합니다. express, express-session, cookie-parser, nodemon 이중 nodemon은 해당 링크 에서 설치 및 사용법이 나와 있습니다. 설치가 완료가 된 다음 위와 같이 index.js파일을 만들어줍니다. const express = require ( "express" ); const session = require ( "express-session" ); const cookieParser = require ( "cookie-parser" ); const app = express (); const PORT = 5000 ; // 서버 동작을 확인하기 위한 파트 app . get ( '/' , ( req , res ) => { res . status ( 200 ); res . send ( "<h1>Working Well</h1>" ) }) app . listen ( PORT , () => console . log ( `Server at ${ PORT } ` )); 위 코드와 같이 작성하고 테스트를 합니다.  위 2개 사진과 같이 서버도 정상 동작 되고 root url의 get 요청도 정상적으로 되었습니다. const express = require ( "express" ); const session = require ( "express-session" ); const cookieParser = require ( "cookie-pars...

 안녕하세요. 알렉스 입니다. 이번에는 Express를 이용해서 Client에서 들어온 request의 Body를 JSON형식으로 읽어보도록 하겠습니다. const express = require ( 'express' ) const app = express (); // POST app . post ( '/login' , ( req , res ) => { console . log ( req . body ) // body확인 가능 부분 res . status ( 201 ); res . send ({ message : "Login Successful" , body : req . body }) }) app . listen ( 3500 , () => { console . log ( "Server is working" ); }) 위 코드와 사진을 확인하면 실제 Postman에서 request한 body내용이 전혀 읽혀지지 않은것이 확인이 됩니다. 이렇한 원인은 통신에 있습니다. http통신의 body는 한번에 들어오는 것이 아닙니다. 부분(또는 chunk) 부분 들어오고 그것을 조합하고 나야 완전한 body가 되는 것입니다. app . use ( function ( req , res , next ) { let data = '' ; // chunk를 하나로 모음 req . on ( 'data' , function ( chunk ) { data += chunk ; console . log ( chunk ); }); // chunk를 모으는 것이 끝남 req . on ( 'end' , function () { // req.rawBody = data; console . log ( 'on end: ' , data ) if ( ...

  const express = require ( 'express' ); const app = express (); // 홈페이지 코드 작성 const PORT = process . env . PORT || 5000 ; app . listen ( PORT , () => console . log ( `Server Started on PORT : ${ PORT } ` )); 일단 간단한 코드를 위와 같이 작성하고 index.js파일로 저장을 합니다. // 홈페이지 코드 작성 app . get ( '/' , ( req , res ) => { // HTML코드를 작성하여 Client에 응답한다. res . send ( '<h1>Hello World</h1>' ). end (); })  GET요청을 client에서 받으면 '<h1>Hello World</h1>'을 전달해 줍니다. 참고로 '<h1>'은 tag로서 HTML 코드 입니다.    이후 서버를 동작시키면 위와 같이 Hello World가 출력되는것을 알수 있습니다. 하지만 이것은 매우 간단한 코드이고 이제 조금더 HomePage처럼 만들어 보겠습니다. <! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < ti...

저번에는 하나의 파일에 GET응답을 코드에 넣었지만 이번에는 router를 통해서 client에 get요청을 하겠습니다. Router를 사용하지 않고 하나의 js파일에 코드를 작성한 경우 Router를 이용하여 다른 js파일에 작성한후 index.js파일에 삽입하는 경우 const express = require ( 'express' ); const members = require ( './member' ); // members 데이터 저장 const app = express (); app . get ( '/members' , ( req , res ) => { res . send ( members ). end (); // 모든 멤버를 client에 보낸다. }); app . get ( '/members/:id' , ( req , res ) => { // id를 받고 존재하는지 확인후 client에 send한다. // id존재유무 확인 // req.params.id는 client가 입력한 id(문자열)이다. const bool = members . some ( member => member . id === parseInt ( req . params . id )); // 만약 bool이 참이면 id가 members에 존재 if ( bool ) res . send ( members . filter ( member => member . id === parseInt ( req . params . id ))); // 만약 bool이 거짓이면 id가 members에 존재하지 않는다 else res . status ( 404 ). json ({ message : `ID ${ req . params . id } NOT FOUND` }); res . end (...

 저번 글에서 GET요청을 받을때 모든 members의 데이터를 보냈습니다. 이번에는 client가 특정 id를 server에 보내면 server에서 해당 id에 맞는 member를 보내는 것이다. 만약 존재하지 않는다면 상태코드 404를 출력하고 잘못됬다고 알려준다. const express = require ( 'express' ); const members = require ( './member' ); // members 데이터 저장 const app = express (); app . get ( '/members' , ( req , res ) => { res . send ( members ). end (); // 모든 멤버를 client에 보낸다. }); const PORT = process . env . PORT || 5000 ; app . listen ( PORT , () => console . log ( `Server Started on PORT : ${ PORT } ` )); 위 코드에서부터 시작한다. 위 코드는 이전에 작성한 코드이다. 이전 글을 참고하면 된다. app . get ( '/members/:id' , ( req , res ) => { // id를 받고 존재하는지 확인후 client에 send한다. }); 저번의 app.get과 다른점이 있다. ':id'가 추가가 됬는데 이는 url마지막에 숫자를 기입하면 서버에서는 이것을 id로 인식한다. app . get ( '/members/:id' , ( req , res ) => { // id를 받고 존재하는지 확인후 client에 send한다. // id존재유무 확인 // req.params.id는 client가 입력한 id(문자열)이다. const bool = members . some ( member =>...

Express로 GET요청을 server에 보내고 그에 따른 응답을 받아서 출력하는 코드를 작성하도록 하겠습니다.   const express = require ( 'express' ); const members = require ( './member' ); // members 데이터 저장 const app = express (); const PORT = process . env . PORT || 5000 ; app . listen ( PORT , () => console . log ( `Server Started on PORT : ${ PORT } ` )); 일단 기본적으로 위 코드를 작성합니다. 여기서 members가 있는데 이는 배열이며 원소는 Object입니다.  app . get ( '/members' , ( req , res ) => { }) '/members'는 client가 입력해야할 url주소. req는 client 요청사항, res는 서버쪽 응답사항 입니다. 위 코드에서는 전체 members를 보내면 되기 때문에 GET요청을 받으면 전체 members로 응답해 줍니다. const express = require ( 'express' ); const members = require ( './member' ); // members 데이터 저장 const app = express (); // client로부터 GET요청을 받았다 app . get ( '/members' , ( req , res ) => { res . send ( members ). end (); // 모든 멤버를 client에 보낸다. }); const PORT = process . env . PORT || 5000 ; app . listen ( PORT , () => console . log ( `Serv...

 node js에서 express를 사용할때 middleware를 사용할수 있다. middleware는 client로부터 요청을 받을때 무조건 거쳐가는 코드라고 보면 된다. // Previous Code const express = require ( 'express' ); const moment = require ( 'moment' ); // 날짜 기록 const app = express (); // Middleware // Next Code const PORT = process . env . PORT || 5000 ; app . listen ( PORT , () => console . log ( `Server Started on PORT : ${ PORT } ` )); Middleware는 작성을 안한 상태이기 때문에 주석만 적어놓은 상태이다. 위와 같은 코드를 작성한다. moment는 날짜를 출력하는 모듈이다. app . use (( req , res , next ) => { next (); }) middleware의 코드를 작성할때 주의해야 할 점은 받드시 next()를 사용해야 한다는 것이다. 사용하지 않을시 오류가 생기므로 middleware를 작성할때 미리 적자. app . use (( req , res , next ) => { // logger작성 console . log ( ` ${ req . protocol } :// ${ req . get ( 'host' ) }${ req . originalUrl } :` + ` ${ moment (). format () } ` ); next (); }) 이제 console.log를 이용하여 터미널에 출력할 logger를 작성한다. client에서 접속을 시도하면 위 middleware를 거치게 되고 url과 시간이 terminal에 출력하도록 작성하였다. Postma...