코드

// 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을 성공했습니다.

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

- 충돌 상황 생성 및 충돌 알림 확인

1. 강제로 충돌 상황 생성

- 충돌 상황 해결

2. Fetch 및 새분기(브런치) 생성

3. 로컬 / 서버 파일 비교 기능 사용

4. 코드 수정 / 코드 통합 및 병합

- Commit / Push 결과 및 병합 코드 확인

5. Commit 및 Push 재시도

6. Github에서 변경 내용 확인

위의 과정을 이 게시물에서 다룹니다.

1. 강제 충돌 상황 생성

1) 로컬에 아래와 같은 코드를 작성합니다.(printf("hello local\n");을 주목)

2) 서버에는 아래와 같은 내용을 작성합니다.(printf("hello server\n");을 주목)

3) Visual Studio에서 Commit을 시도합니다. 그러면 정방향 업데이트가 아닌 업데이트가 발생한다는 메시지를 확인 할 수 있습니다. 서버와 로컬이 동기화가 되지 않아 정상적으로 Commit이 진행되지 않았습니다.

2. Fetch 및 새분기(브런치) 생성

4) 이를 해결하기 위해 Fetch 및 새분기(브런치) 생성을 진행합니다.  홈에서 [동기화]를 클릭합니다.

5) [페치]를 클릭해 서버의 파일을 로컬로 가져옵니다. 이 작업을 하면 Visual Studio와 GitHub가 자동으로 최신 커밋 이력을 이름 없는 브랜치로 로컬에 가져옵니다. 이 브랜치의 이름을 별도로 정하지 않았지만 'FETCH_HEAD'의 이름으로 접근할 수 있습니다.

6) 페치가 완료되면 충돌이 있다는 메시지와 이를 해결하라는 메시지가 나옵니다. [충돌 해결]을 클릭합니다.

7) 화면에 [편집된 위치]가 나옵니다. 편집된 위치가 상이한 파일이 공존하므로 충돌이 발생한 것입니다.

8) [파일 비교]를 클릭하면 상이한 부분에 표시가 됩니다.

9) [병합]을 클릭해 코드를 통일화합니다. Editter에 "hello merge"를 입력해 병합을 진행했습니다.

3. Commit / Push 결과 및 병합 코드 확인

10) 병합 사항을 저장하면 "남아 있는 충돌 사항이 없습니다."라는 메시지가 나옵니다. 이후 Commit 및 Push를 진행하면 정상적으로 진행됩니다.

11) GitHub에서 이전 과정에서 병합했던 코드가 정상적으로 적용됐음을 확인합니다.

12) Visual Studio에서도 정상적으로 병합된 코드를 확인합니다.

성공적으로 충돌 문제를 해결하고 서버와 로컬의 코드를 동기화했습니다.