Engineering_S/W & H/W

 안녕하세요. 알렉스 입니다. 이번에는 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 ( ...

  이전에 작성한 글들은 동기화 action입니다. action이 되면 바로 state에 반영되어서 적용이 되었습니다. 하지만 비동기인 상황에서는 대기시간이 걸립니다. 예로들어 API를 이용하여 데이터를 fetch하는 경우 입니다. 통신 상태에 따라 시간이 불규칙적으로 걸릴수 있기 때문입니다.  이번에는 axios 또는 fetch을 이용하여 코드를 짜보도록 하겠습니다. 일단 fetch을 하여 최종적으로 redux storage에 저장하는 것이 목적입니다. 그러기 위해서는 가장먼저 state를 설계해야 합니다. 내용과 구조는 아래와 같습니다. loading : API를 통해서 데이터를 다운로드 받고 있는 중일때 true, 완료 혹은 error는 false data : fetch(혹은 axios)를 통해 받은 데이터를 저장(여기서는 유저정보) error: fetch도중 에러가 발생시 error메세지 저장 State = {      loading : true,       data : [ ],      error: '' } 이제 action.type을 결정해야 합니다. 여기서 설정할수있는 action은 3가지 입니다. 내용은 아래와 같습니다. FETCH_USERS_REQUEST : users 리스트를 fetch합니다. FETCH_USERS_SUCCESS : fetch가 성공적으로 마무리 됬습니다. FETCH_USERS_FAILURE : fetch도중 error가 발생. 이제 reducer를 설정해야 하는데 위의 action을 이용하여 설정할수 있습니다. action.type FETCH_USERS_REQUEST   - loading : true FETCH_USERS_SUCCESS - loading : false - users : data (해당 API를 통해 다운) FETCH_USERS_FAILURE - loading : false - err : ...

이 글을 작성하면서 express의 middleware와 기능적인 면에서 비슷하다는 것을 알았습니다. 아래 링크를 참고해 주시기 바랍니다. 링크 : node.js Express Middleware 사용법 Redux의 middleware장점 1. 커스텀 기능을 확장할수 있는 방법 2. dispatching와 action사이에 제 3자 extension 접점을 제공하고 reducer에 도달한다. 3.  logging, 에러 리포트 등등 middleware에 사용이 가능하다. 일단 이번 예제에서는 Logger를 middleware에 사용하겠다.  Redux에 사용할 logger npm 사이트 https://www.npmjs.com/package/redux-logger 위 사진처럼 redux-logger를 설치한다. // 로거를 생성하기 위한 require const reduxLogger = require ( 'redux-logger' ); const logger = reduxLogger . createLogger (); 이전에 사용한 코드 맨 위쪽에 가서 위 2줄을 추가해 준다. 이렇게 하면 logger의 설정은 마무리가 됬다. // middleware추가하기 const applyMiddleware = redux . applyMiddleware ; 이제 middleware를 추가하기 위해서 위 코드를 작성해 줍니다. // 1. app의 state를 갖고 있는다. (인자로 reducer) // createStore를 이용하여 storage를 생성 // 다른 reducer가 합쳐진 rootReducer를 인자로 갖습니다. // createStore의 두번째 인자로 middleware가 추가 됬고 middleware의 인자는 logger이다. const storage = createStore ( rootReducer , applyMiddleware ( logger )); 저번 글의 마지막에서 2개의 reducer를 combineRe...

  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...

 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...