song.log

본격적인 프로젝트에 앞서 Front-end(Client), Back-end(Server) 의 뼈대를 만들기 위해 틀을 만들어야 한다. React의 create-react-app과 Node.js의 미들웨어 'express', 'http-proxy-middleware'를 활용하여 연동해보자. 1. create-react-app 설치 npm install -g create-react-app create-react-app을 설치할 때 자동으로 설치되는 파일을 받기 위한 폴더에 다운로드 한다. create-react-app myexample 모든 다운로드가 끝나면 아래와 같이 자동으로 파일들이 생성 되어있다. 'npm start'로 리액트가 제대로 실행되는지 확인. 매번 리액트 작업을 확인하고자 할 때에는 'np..

1. Router 현업에 종사하다보면 Route가 엄청난 갯수를 이룰 때가 많다. 그렇다 보면 이를 보다 깔끔하게 정리하여 보는 것이 효율적일 때가 있다. 그 역할을 Router가 하는 것이다. 주소체계을 변경하여 Router를 만들 준비를 한다. 먼저 경로앞에 들어갈 키워드를 넣어 그룹화 한다. Router라는 새로운 폴더를 생성해주고 그 안에 topic이라는 파일을 생성한다. 여태까지 routing 했던 것을 topic.js 파일로 옮긴다. topic.js 파일에는 아래의 형식과 기존의 코드의 그룹화 한 것을 합쳐준다 var express = require('express'); var router = express.Router(); module.exports = router; app.use(expre..

1. Middleware 만들기 코드를 짤 때, 공통적으로 사용되는 부분이 겹칠 때, 그 함수를 middleware로 만들어서 사용하는 것이 가능하다. middleware의 형태는 다음과 같다. 여태까지 짠 main.js파일에서는 폴더 내의 파일 리스트를 읽는 작업을 반복적으로 했는데, 그 부분을 middleware로 만들어서 활용하는 것이 가능하다. app.use(function(request, response, next){ fs.readdir('./data', function(error, filelist){ request.list = filelist; next(); }) }); app.get('/', function(request, response) { fs.readdir('./data', funct..

1. Express의 Third-party middleware - body-parser : https://expressjs.com/en/resources/middleware/body-parser.html Third-party middleware는 Express가 제공하는 것이 아닌 제 3자가 만들어낸 소프트웨어를 칭하는 것이다. 그 중 post 방식으로 전송된 데이터를 body-parser라는 미들웨어를 통해 가져오는 방식에 대해서 보겠다. 우리가 지난 포스팅에 post 방식의 데이터를 가져올 때는 아래의 코드를 사용했다. app.post('/create_process', function(request, response){ var body = ''; request.on('data',function(dat..

Node.js에서 http 모듈만으로 웹 서버를 구성하게 된다면 사실 많은 것들을 직접 만들어야하고 번거로워진다. Node.js의 프레임워크 중 Express를 사용한다면 보다 편리하고 간편하게 웹서버를 구축할 수 있다. Express 프레임워크에 대한 자세한 내용은 공식 홈페이지에서 확인 가능 https://expressjs.com/ Express - Node.js web application framework Fast, unopinionated, minimalist web framework for Node.js $ npm install express --save expressjs.com Express부터는 VSCode 에디터를 사용 1. Express 설치 Terminal에 npm install ex..

1. 모듈의 형식 모듈은 그룹핑의 가장 큰 형태라고 볼 수 있음 모듈이 될 파일에 객체 하나를 작성 이 때, module.exports = '객체' 를 통해 다른 파일에서도 접근이 가능하도록 함 var M = { v: 'v', f: function(){ console.log(this.v); } }; module.exports = M; 이 객체에 접근하고자 하는 파일에서 require()를 통해 객체를 받아옴 같은 폴더 안에 있는 파일이기에 ./를 붙여서 가져오기 console.log('객체'); 를 통해 객체 안에 무엇이 있는지 확인할 수 있다. var M = require('./mpart.js'); console.log(M); M.f(); 2. 모듈의 제작 제작했던 main.js app 에서 templ..

1. 글생성: UI 만들기, Post방식으로 전송된 데이터 받기 기존 pathname '/' 이외에 pathname '/create'을 생성해 글을 작성할 수 있는 페이지를 작성 아래의 코드를 추가 기존의 template에다가 html form을 추가 else if(pathname === "/create"){ fs.readdir('./data', function(error, filelist){ var title = 'WEB - create'; var list = templateList(filelist); var template = templateHTML(title, list, ` `); response.writeHead(200); response.end(template); }); } form의 post ..

1. 동기/비동기 fs.readFile(path,option,callback) vs fs.readFileSync(path,option) 비동기 동기 동기에서는 Sample.txt를 읽고 나서 C를 실행할 수 있었지만, 비동기의 경우 Sample.txt를 읽는 것과 상관없이 C를 실행했기 때문에 순서가 다르게 나온다. 2. Callback 함수 자바스크립트에서는 변수에 함수를 할당할 수 있습니다. 따라서 변수에 할당된 함수를 다른 함수의 파라미터로 전달할 수 있습니다. 이렇게 파라미터로 전달된 함수를 다른 함수의 내부에서 호출하는 것이 콜백 함수입니다. 참조 : Do it! Node.js 프로그래밍 : 실제 서버로 구동 가능한 코드로 배운다! [전면개정판] 자바스크립트는 함수의 이름을 미리 정한 상태에서 ..