Nodejs로 서버만들기

목차

 

결국... 결국 백앤드까지 손을 대 버렸다...

프런트 앤드만 해도 할게 많은데!!!

풀 스택은 취업하고 할 생각이었는데!!!

그래도...

프런트엔드의 서버에서 데이터를 가져오고

서버에 데이터를 넘기는 과정에 대해

이해를 하기 좋으니,

어느 정도는 배워보는 것도 좋을 것 같다.

node.js 설치

nodeJs를 사용하려면 nodejs를 설치해야 한다.

 

Node.js

 

210223 node.js 화면

node js 페이지로 들어가

node js를 다운로드하자

 

프로그램을 설치할 땐 최신 버전보단 안정성을 중시하자.

 

버전 확인

설치를 다 한 후

cmd에

node -v를 입력하면

설치된 버전이 출력된다.

 

서버 만들기

코드 폴더를 만들어

서버를 만들 index.js 파일을 만들어주자

 

코딩

그런 다음 서버를 만들 코드를 입력해보자.

const http = require('http'); // 서버를 만드는 모듈 'http'!

var server = http.createServer( //서버를 만드는 함수
  function(request, response){
    console.log("사용자가 들어옴");
    }
);

server.listen(8080, // 포트에 연결하는 함수
    function(){
        console.log("8080 서버를 만듬!");
    }
);

실행

자!! 이제 코드를 다 입력하였다면

한번 실행을 해보자!!

VS Code에서 ctrl + ` (숫자 1 왼쪽에 있는 것)

을 터미널 창을 열자.

이것은 우리가 친해져야 할 명령 프롬포트와 같은 기능을 한다.

터미널이 무엇인지 알았다면,

다시 VS Code로 돌아가 우리가 만든 코드를 실행시켜보자!

우리는 node프로그램을 써서 실행시킬 거니

node란 명령어를 쓴 다음 코드 파일명인 index.js를 쳐준다.

자 코드가 실행되면서,

서버를 만들었다고 텍스트가 떴다!

그렇다면 브라우저에서 서버에 들어가 보자!!

브라우저 창에 localhost:8080을 입력하여 이동하자

그러면 터미널에

사용자가 들어왔다고 텍스트가 뜬다!!

우리가 진짜 서버를 만든 거다!!!

 

코드해설

자! 이제 어떤 현상이 이뤄지는지 봤으니 코드를 보면서

이해해보자!

const http = require('http');
// 일단 서버를 만드는 모듈 http를 불러온다

var server = http.createServer(); //서버를 만드는 함수
// 불러온 http 모듈의 createServer 함수를 써서 서버를 만든다.

server.listen(8080, // 포트에 연결하는 함수
    function(){
        console.log("8080 서버를 만듬!");
    }
);
// listen(연결)함수를 써서 만든 서버를 포트에 연결시킨다.

일단 require 메서드를 써서 http 모듈을 불러온다.

모듈이란 해당 위치에 존재하는 몇 개의 JavaScript 코드이다.

보통의 모듈은 우리가 가지고 있지 않기에, 다운로드해야 하지만

http는 node에 포함된 기본 모듈이라 다운로드하지 않아도 된다.

 

createServer 함수로 서버를 만들고,

listen 함수로 클라이언트가 접근할 수 있는 포트를 지정한다.

 

이제 여기서 우리는 클라이언트가 서버에 접근했을 때

"사용자가 들어옴"이라는 작동을 추가하였다.

const http = require('http');

var server = http.createServer(
  function(request, response){  // request 콜백함수
    console.log("사용자가 들어옴");
  }
);

server.listen(8080,
    function(){
        console.log("8080 서버를 만듬!");
    }
);

사용자가 서버에 접근한다.

서버에 접근한 뒤, 서버의 이용하기 위해 서버의 데이터를 요청한다.(request)

function(request, response){  // request 콜백함수
  console.log("사용자가 들어옴");
}

이때 작동하는 함수,

즉 request를 했을 때 반응하는(call back)하는 콜백 함수를 우리는 만들었다.

그리고 그 함수 안에 우리는 "사용자가 들어옴"이라고 뜨게 만들었다.

 

반응하는 서버 만들기

아까 브라우저로 localhost:8080으로 들어갔을 때,

계~속 로딩만 했을 것이다.

 

왜냐하면, 클라이언트가 서버에 데이터를 요청(request) 했지만,

우리가 되돌려준 건(response) 없기 때문이다.

이제 기다려준 클라이언트들에게 데이터를 줘보자!!

코딩

const http = require('http');

http.createServer(onRequest).listen(8080, madeServer);

function madeServer(){
    console.log("8080 서버를 만듬!");
}

function onRequest(request, response){
    console.log("사용자가 들어옴");
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end('<h1>Hello User</h1>');
}

위의 코드에서 추가한 건 2줄밖에 없지만,

어떻게 돌아가는지 이해를 한 우리들을 위해

코드를 좀 더 섹시하게 만들었다.

function으로 정리된 코드...

너무 좋다....

 

실행

서버를 만들었을 때와 같이,

터미널에 node index.js를 입력하여 서버를 만든 다음.

브라우저로 접근해보자!!

Wow!!! 와 와 와 와와와 저 이쁜 글자를 봐!!!

무려!! h1태그를 가진 굵은 글씨라고!!!

우리는 시작부터 태그와 함께 출력하는 방법을 배웠는 거야!!

지식이 1+1로 보너스 받은 이 느낌!! 너무 좋다

 

코드해설

일단, 라인안의 함수(Inline Function)를

밖으로 꺼내 정의하였다.

 

코드는 동작하는 게 다가 아니다.

 

코딩에 대해 모르는 사람이 봐도

와 깔끔하네(이쁘네 / 멋지네), 자세히는 모르겠지만 대충 어떤 건지는 알겠어.

라고 말할 수 있도록 짜야한다.

 

진짜 잘하는 사람은 다른 사람이 봤을 때 별것 아닌 것처럼 보인다.

그 일이 어려워도, 간단하게 해내기에.

const http = require('http');

http.createServer(
    function(request, response){
        console.log("사용자가 들어옴");
    }
).listen(8080, 
    function(){
        console.log("8080 서버를 만듬!");
    }
);

이 코드를

const http = require('http');

http.createServer(onRequest).listen(8080, madeServer);

function madeServer(){
    console.log("8080 서버를 만듬!");
}

function onRequest(request, response){
    console.log("사용자가 들어옴");
}

이렇게 바꾸었다.

 

그리고 request callback 함수에 우리는 데이터를 돌려주는 코드를 추가를 한다.

response.writeHead(200, {'Content-Type': 'text/html'}); // 반환데이터 정의
response.end('<h1>Hello DalKom</h1>'); // 반환데이터

 

일단

response.writeHead 함수를 써서,

우리가 돌려줄 데이터를 정의해준다.

이러이러한 데이터를 돌려줄 거야~ 하고.

 

여기서는 Content-Type(데이터 타입) : text/html (문자 / html로 구성된)

라고 지정해주었다.

이때, writeHead 대신, setHeader를 써도 같은 결과를 볼 수 있는데,

setHeader는 하나의 헤더 즉, 하나의 성질만 설정할 수 있다.

하지만 이미 헤더가 정의되어있을 때는 대체할 수 있다.

 

writeHead는 여러 헤더를 한 번에 정의할 수 있다.

 

으음... 프런트 앤드를 배우지 않고 백앤드를 시작하는 사람이 볼 수 있으니깐,

h1태그도 설명해야.. 겠지??

h1태그는 태그 안의 글자 크기를 크게,  굵기를 굵게 표현해준다.

 

이렇게 하여 결과물이 나왔다!

const http = require('http');

http.createServer(onRequest).listen(8080, madeServer);

function madeServer(){
    console.log("8080 서버를 만듬!");
}

function onRequest(request, response){
    console.log("사용자가 들어옴");
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end('<h1>Hello User</h1>');
}

끝