Express 시작하기(1)
Express는 Node.js의 웹 애플리케이션 프레임워크다. 웹 애플리케이션 프레임워크란, 웹 애플리케이션을 실행하기 위한 기능을 제공하는 모음이라고 할 수 있다.
다음은 Visual Studio Code에서 Express를 설정하는 것을 단계별로 설명하겠다.
(단, Visual Studio Code와 Node.js가 미리 설치되어 있어야 한다.)
1) 다음과 같이 Youtube라는 폴더에서 설정해보겠다. Youtube라는 폴더에 새로운 파일을 만든다.
2)새로운 파일의 이름은 index.js로 바꾼다.
3) npm init을 통해서 package.json 파일을 만들어준다. package.json 파일은 프로그램의 파일을 더 손쉽게 관리하기 위한 일종의 컨트롤 타워이다.
4) 여러가지 입력란이 뜨는데, 일단은 빈 칸으로 하고 Enter를 누르자. 혹은 description에 자신의 프로젝트에 관한 간략한 설명을 추가해도 괜찮다. 다 하고 나면 Is this OK? 라는 문구가 뜨는데 Yes를 입력하자.
5) 다음은 express를 설치해야 한다. express를 설치하기 위한 명령어는 npm install express이다.
6) 설치가 완료되면 다음과 같이 node_modules폴더와 package-lock.json 파일이 생성된다.
7) node_modules 폴더 안에는 express라는 폴더가 있다. Express 폴더안에는 express.js 파일을 포함해 Express 서버가 구동하기 위해 필요한 코드들이 있다. 이러한 코드들의 기능을 활용해서 express 서버를 동작시키는 것이다.
8) 다음은 Express 홈페이지로 이동한다. 홈페이지에서 '안내서-라우팅'으로 이동하면 기본적인 라우트 코드가 있다. 이것을 복사해서 Visual Studio code의 index.js 파일에 붙여넣자.
9) index.js파일에 추가했으면, app.listen(4000)을 코드 맨 아래에 추가한다. app.listen()은 포트에서 연결을 청취하기 위해 필요한 것이고, 4000은 포트의 넘버이다. 즉, '4000번 포트에서 연결을 들어라'이다. 그리고 node index.js를 입력하고 엔터를 누른다. node index.js는 'index.js를 실행하라'이다.
10) 엔터를 누르고 나서 localhost:4000으로 접속하면 'hello world'라는 문구가 뜬 것을 확인할 수 있다. 이는 로컬에서 express 서버가 성공적으로 연결되었음을 의미한다.
11) 이 때, express 서버 연결을 위한 index.js의 코드를 단계별로 구체적으로 설명하자면 다음과 같다.
var express = require('express'): node_modules폴더에 있는 미리 구현한 라우팅 모듈을 가져온다.
var app = express(): 새로운 라우터 객체를 만든다. 이 라우터 객체의 이름을 app으로 설정한다.
app.get('/', function(req, res){
res.send('hello world');
});
: 라우터 객체 app에서 get함수를 이용해서 로직을 구현한다.
첫번째 parameter인 '/'는 요청이 수행되는 주소이다.
두번째 parameter인 function(req, res)는 콜백함수이다.
콜백함수란 다른 함수의 인자로서 활용되는 함수이며, 어떤 이벤트에 의해서 호출된다.
여기서 req는 요청객체이고, res는 응답객체이다.
res.send()는 클라이언트에 문자열로 응답하기 위한 함수이다.
여기서 res.send('hello world')라고 했기 때문에, 화면에 hello world로 출력되었다.
Q & A
Q. package.json 파일로 프로그램 파일을 관리해주는 이유가 무엇입니까?
A. package.json 파일은 프로젝트에 대한 많은 메타 데이터를 담고 있는 파일입니다.
그 중에서 주목적은 다음과 같은 2가지입니다.
1) 프로젝트의 Dependencies를 관리하는 것
2) 프로젝트와 관련된 빌드를 생성하고, 테스트를 실행하기 위한 script를 관리하는 것입니다.
(참조: https://programmingsummaries.tistory.com/385
https://medium.com/beginners-guide-to-mobile-web-development/why-package-json-npm-basics-cab3e8cd150)
Q. 프로젝트의 Dependencies란 무엇입니까?
A. 프로젝트가 의존하고 있는 모듈들의 집합을 의미합니다.
Q. 프로젝트와 관련된 빌드를 생성한다는 것이 무엇입니까?
A. 컴파일과 링크 과정을 합쳐서 '빌드'라고 합니다.
소스 코드를 기계어로 번역하는 것을 컴파일이라고 하며,
분리된 파일들을 모아 하나의 실행 가능한 파일들을 만드는 것을 링크 라고 합니다.
Q. 테스트를 실행하기 위한 script를 관리한다는 것이 무엇입니까?
A. Script는 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어입니다.
package.json에서는 key-value 형식으로
script가 수행할 task의 이름(key)과 task를 수행하기 위한 command(value)을 저장합니다.
Q. 라우터 객체를 만드는 이유는 무엇입니까?
A. 라우팅은 URI 및 특정한 HTTP 요청 메소드(GET, POST)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다.
각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행됩니다.
라우트 정의에는 다음과 같은 구조가 필요합니다.
app.METHOD(PATH, HANDLER)
여기서, 1) app은 express의 인스턴스입니다.
2) METHOD는 HTTP 요청 메소드 입니다.
3) PATH는 서버에서의 경로입니다.
4) HANDLER는 라우트가 일치할 때 실행되는 함수입니다.
(참조: https://expressjs.com/ko/starter/basic-routing.html)
Q. 라우트란 무엇인가?
A. 많은 네트워크로 이루어진 인터넷에서 목적지 경로까지 가는 경로를 말합니다.
Q. URI란 무엇인가?
A. URI는 Uniform Resource Identifier의 약자입니다.
우리 말로는 통합 자원 식별자라고 하며, 인터넷에 있는 자원을 나타내는 유일한 주소입니다.
Q. 인터넷에 있는 자원이란 어떤 의미인가?
A. 인터넷에 있는 텍스트의 한 페이지, 비디오나 사운드 클립 등과 같은 것을 자원이라고 일컫습니다.
Q. 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것이 무엇인가?
A. 우선, 엔드포인트의 개념에 대해서 이해해야 합니다.
엔드포인트란 연결된 네트워크를 통해서 상호작용하는 멀리 떨어져 있는 컴퓨팅 디바이스를 의미합니다.
예를 들어, 데스크탑, 랩탑, 스마트폰, 태블릿, 서버 등이 엔드포인트가 될 수 있습니다.
애플리케이션이 응답하는 방법을 결정한다는 것은,
라우트의 메소드에 따라 특정한 응답 방법이 결정된다는 의미입니다.
Q. 각 라우트는 하나 이상의 핸들러 함수를 가질 수 있다는 것이 무슨 의미인가?
A. 핸들러란 특정 타입의 데이터 혹은 특정 기능을 수행하기 위해 특화된 루틴이나 함수를 의미합니다.
이 때, 일치할 때, 특정 핸들러 함수가 실행되도록 하는 것이 바로 라우트의 정의입니다.
Q. 이러한 함수는 라우트가 일치할 때 실행된다는 것이 어떤 의미인가?
A. 라우트가 일치한다는 것은 네트워크에서 올바르게 라우트를 찾았다는 것을 의미하며,
이 때, 올바른 라우트를 찾았다는 의미에서 라우트에 정의된 함수가 실행되도록 합니다.
Q. HTTP 요청 메소드란 무엇인가?
A. HTTP란 분산되고 협력적인 hypermedia 정보 시스템을 위한 애플리케이션 프로토콜을 의미합니다.
HTTP는 WWW을 위한 data 커뮤니케이션의 토대이며,
hypertext 문서들은 유저들이 쉽게 접근할 수 있도록 다른 자원에 대한 hyperlink를 갖습니다.
이 때, HTTP 요청 메소드란, 주어진 자원에 필요한 요청이 수행되게 하는 메소드를 의미합니다.
ex) GET 메소드 : 특정 자원의 표시를 요청합니다. GET을 사용하는 요청은 오직 데이터를 받기만 합니다.
POST 메소드: POST 메소드는 특정 자원에 엔티티를 제출할 때, 쓰입니다.
이는 종종 서버의 상태의 변화나 부작용을 일으킵니다.
Q. app이 express의 인스턴스라는 의미는 무엇입니까?
A. express 모듈에는 서버와 관련된 기능들이 구현되어 있습니다.
그리고 const app = express()는 실제로 서버 기능을 할 수 있는 객체를 만드는 것입니다.
Q. app.get()의 의미는 무엇입니까?
A. app.get()은 app 인스턴스가 get() 메소드를 활용하는 것을 의미합니다.
get()은 서버로부터 정보를 조회하기 위해 설계된 메소드입니다.
이 때, app.get()을 통해서 app으로 생성된 서버의 정보를 조회할 수 있습니다.
Q. app으로 생성된 서버의 정보를 조회할 수 있다는 것이 어떤 의미입니까?
A. 내가 지정한 라우트에 특정한 response(응답)을 받아올 수 있다는 것을 의미합니다.
Q. app.listen(4000)의 의미는 무엇입니까?
A. app.listen(4000)은 http 서버 인스턴스를 리턴합니다.
app.listen(4000)은 4000번 포트에서 서버의 연결을 청취합니다.
Q. 서버의 연결을 청취한다는 것이 어떤 의미입니까?
A.
"다음은 노마드코더(https://academy.nomadcoders.co/)의 [초급 풀스택] 유튜브 클론 코딩 강의를 참고하였습니다."
