[Node.js] Express로 서버 실행하기

✅ Express란?

Express는 node.js로 서버를 만드는 framework이다. 

---

✅ Express로 서버 실행하기

 

우선 Node.js 서버를 구축하기 위해 개발 툴은 Atom Editor를 사용할 것 이다.

 

Atom 은 https://atom.io/  에서 다운로드가 가능하다.

---

1. 프로젝트 폴더 생성 및 원격 저장소 연동

 

 

자신이 원하는 폴더명으로 폴더를 생성(mkdir)하여 그 폴더를 git 저장소(git init)로 만든다.

 

 

그 후 자신의 GitHub에 폴더명과 동일한 Repository를 생성한다.

 

 

  

    
    
    
    
  
$ git remote add origin [원격저장소 주소]

명령어로 자신의 원격 저장소 주소를 연동한다.

 

---

2. node 프로젝트 생성

 

 

  

    
    
    
    
  
$ npm init

 

npm init 명령어로 현재 폴더에 node 프로젝트를 생성한다. 명령어를 실행하면 "name", "version" 등 입력을 받는데 일단 아무것도 입력하지 않고 엔터키로 넘긴다. (기본 값이 설정된다.)

 

그러면 현재 폴더에 package.json 파일이 생성된다.

 

 

pacage.json은 프로젝트에 관한 설명이 적혀있다.

 

프로젝트명, 프로젝트 설명, 버전, 원격 저장소 주소 등이 저장되어있다.

 

여기서 중요한 부분은 "main" : "index.js"이다. 프로젝트의 메인 코드 파일명이 기록되어있는 부분이다.

 

index.js 파일이 기본값으로 저장되어있으니 touch명령어로 index.js 파일을 생성해본다.

 

 

그다음 현재 폴더에 Express를 설치한다. NPM을 통해 설치할 수 있다.

 

 

  

    
    
    
    
  
$ npm install --save express

 

npm 명령어로 생성된 package들은 node_modules 폴더에 저장된다.

 

 

--save 옵션을 입력해주었기 때문에 dependencies에 express가 추가되었다.

 

dependencies에 package가 추가되면 나중에 프로젝트를 다운로드하였을 때 npm install 명령어로 해당 package들을 쉽게 다운할 수 있다.

---

3. 코드 작성

 

 

atom . 명령어로 현재 폴더를 atom editor로 연다.

 

 

atom editor에서도 파일, 폴더 삭세 생성 이동이 모두 가능하다.

 

  

    
    
    
    
  
//index.js

const express = require('express'); // 설치한 express module을 불러와서 변수에 담는다.
const app = express(); //express를 실행하여 app object를 초기화.

app.get('/', function(req, res) { // '/' url로 접속하는 'get'요청을 받는 경우
  res.send('Hello World!'); // 응답으로 "Hello World!"를 보낸다.
});

const port = 8080; // 사용할 포트 번호를 port 변수에 저정
app.listen(port, function(){ // 8080번 포트에 node.js 서버를 연결.
  console.log('server on! http://localhost:'+port); //서버가 실행되면 콘솔창에 메시지 표시
});

require(모듈명) 함수는 node.js에서 기본적으로 주어지는 함수로, modules폴더 안에 설치된 모듈을 불러오는 함수이다.

 

express 모듈을 express 변수에 담고, express()로 app object를 초기화하는 것은 Express framework에서 항상 가장 처음 하는 것이다.

 

app.get, app.listen은 해당 부분의 코드가 index.js 실행 시 바로 실행되는 것이 아니라, app.get 부분은 서버에 get요청이 있는 경우,app.listen은 서버가 실행되는 경우에 각각 실행이 된다.

 

이렇게 어떠한 조건이 갖춰지면 실행되는 코드를 가지는 함수를 event listener라고 한다.

 

 

app.get 부분을 보자

  

    
    
    
    
  
app.get('/', function(req, res) { // '/' url로 접속하는 'get'요청을 받는 경우
  res.send('Hello World!'); // 응답으로 "Hello World!"를 보낸다.
});

 

  

    
    
    
    
  
app.HTTP_Method('url경로', 콜백함수, 콜백함수, 콜백함수...)

app.HTTP메서드()  구성으로 , 로 구분하여 여러 개의 콜백 함수를 구성할 수 있다.

 

콜백 함수에는 req, res, next의 파라미터들이 자동으로 전달된다. 순서만 중요하므로 파라미터 명은 변경하여도 된다.

 

req

• request에 관련된 값들과 함수들이 저장되어 있는 object.
• HTTP request header, 요청 url, cookies, query, body 등의 정보가 저장.

res

• response에 관련된 값들과 함수들이 저장되어 있는 object.
• HTTP response header, cookies, HTTP code 등의 정보를 확인하고 값을 변경 가능
• 어떠한 방식으로 응답할지도 정할 수 있다. 위 예제에서는 send함수를 사용해서 텍스트를 응답하였다.

next

• 만약 여러 개의 콜백 함수를 사용한다면 이 함수를 호출하여 다음번 콜백 함수로 넘어갈 수 있다.
• 위 예제에서는 함수가 하나뿐이므로 parameter에 적지도 않았다.

---

4. 서버 실행

 

  

    
    
    
    
  
$ node index.js

 

위 명령어를 실행시키면 서버를 실행할 수 있다.

 

 

app.listen() 함수에 적은 server on! http://localhost:포트번호 가 console에 출력되는 것을 볼 수 있다. 

 

그렇다면 서버가 정상적으로 실행된 것을 의미한다.

 

http://localhost:8080에 접속하여 정상적으로 실행되는지 확인해보자.

 

여기서 localhost는 http프로토콜에서 자기 자신의 서버에 접속할 때 사용되는 주소이다.

다른 환경에서 접속할 때는 localhost 대신 서버 컴퓨터의 ip주소를 적으면 된다.

 

 8080은 서버에 접속하는 포트 번호이다. 

한 서버에 여러 가지 서버 프로그램이 작동하는 경우 포트 번호를 달리해서 구별한다. 

 

 

정상적으로 서버가 작동 중이다.

 

우리가 웹브라우저의 url을 직접 입력해서 접속하는 경우는 get 방식으로 웹에 접근하는 것이다.

 

그러므로 작성했던 app.get() 함수의 콜백 함수에 입력했던 Hello World! 가 출력되는 것이다.

---

5. 원격 저장소에 올리기

 

 

 

.gitignore 파일은 git에서 제외할 파일, 폴더명을 적는 곳이다.

 

.gitignore 파일 생성하여 node_modules 폴더를 제외시킨다.

 

node_modules에 저장된 node package들은 용량이 커질 수 있고, npm install 명령어로 복구가 가능하기 때문에 보통 git에는 저장하지 않는다.

 

 

프로젝트 설명용 README.md 파일도 추가해준다.

 

 

git add와 git commit -m "메시지"로 작업 내용을 commit 해준다.

 

 

git push -u origin master 명령어를 입력해 원격 저장소로 업로드해준다.

 

 

Github의  hello_world repository에 정상적으로 업로드된 것을 볼 수 있다.

---

출처 : https://www.a-mean-blog.com/ko/blog/Node-JS-%EC%B2%AB%EA%B1%B8%EC%9D%8C/Hello-World/Express%EB%A1%9C-%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0

---