코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http')

, path = require('path');

// Express의 미들웨어 불러오기

var bodyParser = require('body-parser')

, static = require('serve-static');

// 익스프레스 객체 생성

var app = express();

// 기본 속성 설정

app.set('port', process.env.PORT || 3000);

// body-parser를 이용해 application/x-www-form-urlencoded 파싱

app.use(bodyParser.urlencoded({ extended: false }))

// body-parser를 이용해 application/json 파싱

app.use(bodyParser.json())

app.use(static(path.join(__dirname, 'public')));

// 미들웨어에서 파라미터 확인

app.use(function(req, res, next) {

  console.log('첫번째 미들웨어에서 요청을 처리함.');

  var paramId = req.body.id || req.query.id;

  var paramPassword = req.body.password || req.query.password;

  res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});

  res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');

  res.write('<div><p>Param id : ' + paramId + '</p></div>');

  res.write('<div><p>Param password : ' + paramPassword + '</p></div>');

  res.end();

});

// Express 서버 시작

http.createServer(app).listen(app.get('port'), function(){

console.log('Express server listening on port ' + app.get('port'));

});

로그

C:\Program Files\nodejs\node.exe app.js

Express server listening on port 3000
첫번째 미들웨어에서 요청을 처리함.
첫번째 미들웨어에서 요청을 처리함.

설명 

익스프레스 서버 시작 이후

Post 방식으로 id와 password를 던지면

Express 서버에서 응답한 결과입니다.

Param id : test1

Param password : 123456

결과를 확인할 수 있습니다.

아래의 코드로 Post 방식으로 받은 name 패러미터의 값을 변수에 저장하고 출력 시 사용한 것입니다.

var paramId = req.body.id || req.query.id;

var paramPassword = req.body.password || req.query.password;

코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http');

// 익스프레스 객체 생성

var app = express();

// 미들웨어에서 헤더와 파라미터 확인

// 아래 코드에서 파라미터는 GET 요청에 대해서만 처리 가능함 (POST는 req.body 객체 참조)

app.use(function(req, res, next) {

  console.log('첫번째 미들웨어에서 요청을 처리함.');

  var userAgent = req.header('User-Agent');

  var paramName = req.query.name;

  res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});

  res.write('<h1>Express 서버에서 응답한 결과입니다.</h1>');

  res.write('<div><p>User-Agent : ' + userAgent + '</p></div>');

  res.write('<div><p>Param name : ' + paramName + '</p></div>');

  res.end();

});

// Express 서버 시작

http.createServer(app).listen(3000, function(){

console.log('Express 서버가 3000번 포트에서 시작됨.');

});

로그

C:\Program Files\nodejs\node.exe app.js

Express 서버가 3000번 포트에서 시작됨. 
첫번째 미들웨어에서 요청을 처리함. 
첫번째 미들웨어에서 요청을 처리함.

설명 

http://localhost:3000/?name=%EC%B5%9C%EC%9E%90%EB%B0%94

익스프레스 서버 시작 이후 위 주소로 접속하면 위에서 생성한

Express 서버에서 응답한 결과입니다.

User-Agent : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36

Param name : 최자바

결과를 확인할 수 있습니다.

참고로 %EC%B5%9C%EC%9E%90%EB%B0%94 == 최자바 입니다.

get 방식으로 name 패러미터의 값을 최자바라고 지정했기에 결과가 위와 같이 나오는 것입니다.

아래의 코드로 헤더의 정보와 get 방식으로 받은 name 패러미터의 값을 변수에 저장하고 출력 시 사용한 것입니다.

var userAgent = req.header('User-Agent');

var paramName = req.query.name;

코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http');

// 익스프레스 객체 생성

var app = express();

// 미들웨어에서 redirect 메소드 사용

app.use(function(req, res, next) {

  console.log('첫번째 미들웨어에서 요청을 처리함.');

  res.redirect('http://google.co.kr');

});

// Express 서버 시작

http.createServer(app).listen(3000, function(){

console.log('Express 서버가 3000번 포트에서 시작됨.');

});

로그

C:\Program Files\nodejs\node.exe app.js

익스프레스 서버를 시작했습니다 : 3000Express 서버가 3000번 포트에서 시작됨.
첫번째 미들웨어에서 요청을 처리함.

설명 

http://localhost:3000/

위 링크로 접속 시 GOOGLE로 이동하게 되는데 redirect 메소드는 패러미터에 해당하는 URL로 페이지를 이동하기 때문입니다.

코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http');

// 익스프레스 객체 생성

var app = express();

// 미들웨어에서 응답 전송할 때 send 메소드 사용하여 JSON 데이터 전송

app.use(function(req, res, next) {

  console.log('첫번째 미들웨어에서 요청을 처리함.');

  res.send({name:'소녀시대', age:20});

});

// Express 서버 시작

http.createServer(app).listen(3000, function(){

console.log('Express 서버가 3000번 포트에서 시작됨.');

});

로그

C:\Program Files\nodejs\node.exe app.js

Express 서버가 3000번 포트에서 시작됨.
첫번째 미들웨어에서 요청을 처리함.
첫번째 미들웨어에서 요청을 처리함.

설명 

http://localhost:3000/

익스프레스 서버 시작 이후 위 주소로 접속하면 위에서 생성한

{"name":"소녀시대","age":20}

결과를 확인할 수 있습니다.

이전에 했던 HTML 태그 대신 send 메소드로 결과를 출력한 것입니다.

참고 : 위 자료구조는 JSON 형태입니다.

코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http');

// 익스프레스 객체 생성

var app = express();

// 첫번째 미들웨어에서 다음 미들웨어로 넘김

app.use(function(req, res, next) {

    console.log('첫번째 미들웨어에서 요청을 처리함.');

    req.user = 'mike';

    next();

});

// 두번째 미들웨어에서 응답 전송

app.use('/', function(req, res, next) {

    console.log('두번째 미들웨어에서 요청을 처리함.');

    res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});

    res.end('<h1>Express 서버에서 ' + req.user + '가 응답한 결과입니다.</h1>');

});

// Express 서버 시작

http.createServer(app).listen(3000, function(){

console.log('Express 서버가 3000번 포트에서 시작됨.');

});

로그

C:\Program Files\nodejs\node.exe app.js

익스프레스 서버를 시작했습니다 : 3000Express 서버가 3000번 포트에서 시작됨.
첫번째 미들웨어에서 요청을 처리함.
두번째 미들웨어에서 요청을 처리함.
첫번째 미들웨어에서 요청을 처리함.
두번째 미들웨어에서 요청을 처리함.

설명 

http://localhost:3000/

익스프레스 서버 시작 이후 위 주소로 접속하면 위에서 생성한

Express 서버에서 mike가 응답한 결과입니다.

결과를 확인할 수 있습니다.

두 개의 미들웨어를 만들고 첫 미들웨어에서 usr 값을 설정한 뒤 두 번째 미들웨어에서 결과 값을 출력한 것입니다.

코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http');

// 익스프레스 객체 생성

var app = express();

// 직접 미들웨어 객체를 만들어 설정

app.use(function(req, res, next) {

  console.log('첫번째 미들웨어에서 요청을 처리함.');

  res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});

  res.end('<h1>Express 서버에서 응답한 결과입니다.</h1>');

});

// Express 서버 시작

http.createServer(app).listen(3000, function(){

console.log('Express 서버가 3000번 포트에서 시작됨.');

});

로그

C:\Program Files\nodejs\node.exe app.js

익스프레스 서버를 시작했습니다 : 3000Express 서버가 3000번 포트에서 시작됨.
첫번째 미들웨어에서 요청을 처리함.

설명 

http://localhost:3000/

미들웨어 객체가 요청에 대한 응답을 하고 html 코드로 응답 페이지를 보여줍니다.

위 링크로 접속 시 

Express 서버에서 응답한 결과입니다.

이러한 결과 창을 볼 수 있습니다.

코드

// Express 기본 모듈 불러오기

var express = require('express')

, http = require('http');

// 익스프레스 객체 생성

var app = express();

// 기본 포트를 app 객체에 속성으로 설정

app.set('port', process.env.PORT || 3000);

// Express 서버 시작5

http.createServer(app).listen(app.get('port'), function(){

console.log('익스프레스 서버를 시작했습니다 : ' + app.get('port'));

});

로그

C:\Program Files\nodejs\node.exe app.js

익스프레스 서버를 시작했습니다 : 3000

설명 

http://localhost:3000/

익스프레스 서버 시작 이후 위 주소로 접속하면 위에서 생성한 서버에 접속됩니다.

express 모듈 호출 이후 3000번 포트를 연 것입니다.

이 게시글은 Visual Studio 2015 기준으로 작성되었습니다.

먼저 Fetch와 Pull의 차이를 이해해야 합니다.

둘은 비슷한듯 하나 아래와 같은 차이가 있습니다.

Fetch : 서버의 파일을 로컬로 가져온다. 현재 작업중인 소스들을 변경하는 Merge 작업은 하지는 않는다.

Pull : 서버의 파일을 로컬로 가져온다. 또한 현재 작업중인 소스들의 Merge 작업도 수행한다.

상황에 맞게 사용하면 됩니다.

이번에는 Pull을 해보겠습니다.

1) GitHub의 코드를 입력하고 Commit합니다.

2) 상단 바의 팀 -> 연결 관리로 팀 탐색기를 열고 [동기화]를 클릭합니다.

3) 이후 [끌어오기]를 클릭합니다. 끌어오기 버튼은 [Pull]을 수행해줍니다.

4) Pull이 완료됐다는 메시지와 함께 코드가 수정됐음을 확인할 수 있습니다.

5) 기존에는 서버와 로컬의 파일(소스코드)이 달랐지만 끌어오기(Pull) 이후 서버의 최신 코드로 동기화가 되었습니다.

성공적을 Visual Studio를 활용해 Pull을 성공했습니다.