노드 js 입문 공부 일지 3. 첫 서버 만들기 http , NPM & express

노드 기반의 서버 

 

노드를 이용하면 다양한 자바스크립트 어플리케이션을 개발할 수 있습니다. 
그 중에서도 노드는 서버를 개발하는 데 가장 많이 사용됩니다. 
서버는 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 말합니다.

클라이언트란 서버가 제공하는 정보나 서비스를 제공받는 주체로, 정보나 서비스가 필요한 클라이언트는 서버에게 요청을 보냅니다. 

 

클라이언트 

클라이언트가 요청을 하면 서버는 그에 대한 응답으로 정보를 제공합니다. 

클라이언트가 어떤 요청을 보내는가에 따라 응답은 달라집니다. 

 

 

 

로컬호스트와 포트번호 

 

IP는 전 세계 모든 컴퓨터에 주어지는 네트워크 상에서의 식별자입니다. 

로컬호스트(localhost)란, 컴퓨터 네트워크에서 ‘자신의 컴퓨터’를 의미하는 호스트명입니다. 
로컬호스트의 IP 주소는 127.0.0.1 입니다.

 

포트번호(port number)란, 로컬호스트 내에서 작동하는 어플리케이션을 식별하기 위해 사용하는 숫자입니다. 
네트워크 관점에서 포트 번호는 컴퓨터 간 상호 통신을 위해 프로토콜에서 이용하는 가상의 연결단을 의미합니다. 

3000번대에서 8000번대 사이로 서버를 구동을 시키게 됩니다. 

 

http 모듈 

http(Hyper Text Transfer Protocol)는 인터넷에서 데이터를 주고 받을 수 있는 프로토콜이며, 노드에는 그와 관련된 기능을 제공하는 http 모듈이 내장되어 있습니다. 

 

 

http.createServer 메소드는 ‘http 서버 오브젝트’를 반환하여 사용자가 서버를 운용할 수 있게 해 주는 메소드입니다. 
http 서버 오브젝트는 listen 메소드를 호출하여 서버가 시스템의 포트를 수신하도록 합니다.

 

 

server 는 우리에게 볼 때 하나의 변수에 불과하지만 이것은 하나의 서버이자 객체가 되는 것입니다. 

공용서버로 만들기 위해서 listen 을 사용하면 주어진 포트 번호에서 돌아가는 서버가 만들어집니다. 

 

const http = require("http")

const server = http.createServer() // 서버 앱 생성 

server.listen(4000, ()=>{     // 4000번 포트에 웹 서버를 개방해놓는다. 서버가 열려있는 상태가 되었을 때의 시그널동작.
console.log("내 서버가 4000번 포트에서 돌아가는 중")

})

 

4000번 포트를 실행했을 때 기능이 없기 때문에 사이트에 연결하여도 시간이 오래 걸린다는 메세지가 뜹니다. 

응답에 시간이 오래 걸린다고 하지만 사실상 서버는 구동되고 있는 상태인 것 입니다. 

 

NPM & express 모듈 

 

사실상 노드로 서버를 만들 때 http 기본 모듈보다 NPM & express  모듈을 주로 사용합니다. 

npm(Node Package Manager)는 노드 기반의 자바스크립트 프로그램(코드)을 등록할 수 있는 공개 커뮤니티입니다.

누구나 npm으로부터 코드를 내려받아 자신의 코드에 반영할 수 있습니다. 

 

https://www.npmjs.com/

npm

 

공개 커뮤니티이자 노드 기반의 라이브러리 거대 서버인 것입니다. 

누구나 모듈을 받아다가 쓸 수 있으며 모듈을 개발해서 올릴 수 있습니다. 

npm은 노드 설치 시에 함께 설치가 됩니다. 

 

npm 기반으로 서버 만들기 

 

package.json 작성

 

npm 기반으로 프로젝트를 작성하기 위해서는 반드시 선행해야할 것이 있습니다. 

 

프로젝트를 만들면 그 안에는 반드시 package.json 이 있어야 합니다.

내 프로젝트에서 사용하는 패키지와 모듈의 정보를 기록하는 것 입니다. 

계속적으로 프로그램을 업데이트하거나 관리를 할 때 필요합니다. 

 

프로젝트 폴더에 설치된 모듈을 비롯한 프로젝트 관련 사항들을 관리하기 위해 노드 프로젝트 폴더 안에 package.json 이라는 파일을 생성하는 것으로 디렉토리 내에 다음 명령어를 수행해서 package.json을 생성합니다. 

 

 

이 폴더를 노드 프로젝트 폴더로써 초기화할 것이라는 명령입니다. 

 

node.js 기반으로 서버를 만들기 위해 작업하는 폴더 firstserver를 만들어줍니다. 

아직 아무것도 생성되지 않은 폴더에 들어와서 터미널을 켠뒤 npm init를 입력합니다. 

 

 

firstserver가 노드 기반의 서버가 되기 위한 최소 기반의 준비가 됩니다. 

 

패키지 이름을 물어봅니다. 괄호 안은 기본 값입니다.

퍼스트서버 그대로 가겠습니다. 

 

그 다음은 version 버전을 몇 으로 할 것이냐고 묻기에 1.0.2 버전으로 입력합니다. 

그리고 그 서버에 대한 description 묘사 (상세 설명)을 묻길래 이것은 너의 첫 번째 서버라고 합니다. 

 

entry point 엔트리 포인트는 첫 메인 js 를 설정하라는 것 입니다. app.js로 설정해주었습니다. 

 

그 아래로는 죽 서버에 대한 정보를 입력하는 값이 나옵니다. 

이것은 내 서버에 대한 자체적인 기록을 위해 남기는 것으로 마지막에는 내가 만들고자 하는 서버의 내용이 맞는지 최초로 확인할 수 있도록 메세지가 뜹니다. 

 

 

기록한 내용을 바탕으로 패키지.json이 채워졌습니다. 

 

 

 

노드 기반의 프로젝트를 하는데 package.json 이 없다면 오류에 대한 복구 수정의 경우 하나씩 수정해야하는 번거로움이  있지만, package.json 은 내 프로젝트에 대한 로그를 작성함으로써 관리하게 편하게 해주기 때문에 무조건 만들어줍시다... 

 

만약 이 질문들이 번거롭다면 모두 기본값으로 만들 수도 있습니다. 

npm init을 입력할 때 옆에 -y를 붙여줍니다. 

npm init -y

기본값으로 설정이 된 것을 확인할 수 있습니다. 이 내용은 package.json 에서 직접 수정할 수도 있습니다. 

 

express 모듈 추가 

 

package.json 추가 된 이후에는 npm 에 존재하는 모듈을 내려받아 프로젝트 폴더에 추가할 수 있습니다. 

우리가 추가할 모듈은 express 입니다. 

 

터미널에 npm install express 를 입력합니다. 

 

 

입력하면 패키지.제이슨 하단에 자동으로 express에 대한 정보 로그가 작성됩니다. 

 

 

프로젝트 작업 시에 실수로 해당 내용이 삭제되더라도 이 로그의 내용을 토대로 재설치를 할 수 있습니다. 

최초로 외부 모듈을 설치하고 나면 이렇게 두 파일이 생성됩니다. 

 

● package- lock.json 

package.json에 작성되는 로그들이 자동으로 암호화가 되는 것으로 자동으로 업데이트가 됩니다. 

만약 모듈이 삭제 되었다면 package.json 이 있는 곳에서 노드 모듈을 복구시킬 수 있습니다.

npm install 을 입력하면 package.json에 작성되었던 로그를 기반으로 삭제된 모듈들을 복구시킵니다. 

 

 

● node-modules 

현재 프로젝트에서 사용하고 있는 모듈들이 들어있는 폴더입니다. 

이것은 외부 모듈이 설치되기 전까지는 노출되지 않다가, 하나라도 추가되면 목록에 드러납니다. 

즉 내가 작성한 모듈과 기본 모듈이 들어있는, 실제 사용되는 모듈 폴더 입니다. 

 

 

이렇게 두 파일은 우리가 직접 수정하거나 건드리지 않습니다. 

 

 

express 모듈 실행

이제 express 를 사용해볼게요.

express 는 노드 기반의 웹 프레임워크로써, 노드가 자체적으로 지원하지 않은 웹 관련 기능을 제공하여 빠른 웹 개발을 가능하게 해 줍니다.

 

express가 제공하는 메커니즘은 다음과 같습니다. 

● HTTP 통신 요청에 대한 핸들러를 만든다.  : http 요청이 들어오면 그것을 처리할 수 있게 해줍니다. 

 

● 템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다.  : http  정적인 문서를 준비해두었다가 내용을 변경해서 제공합니다. (제공하는 순간에 완성해서 제공합니다. 화면에 대한 것.) 

● 접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다. : 화면을 제공할지 데이터를 제공할지, 요청에 따른 데이터 응답인지에 대해 각기 다른 것들을 모듈화에서 구현할 수 있습니다. 

● 핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다 : 서버가 동작할 때 서버가 구동하고서 끝날 때까지의 중간 작업들을 한 라인에서 추가처리할 수 있습니다. 

 

이제부터 First express app을 작성해줍니다. 

 

app.js (서버 작성시 엔트리 포인트로 적은 스크립트) 를 생성해주고, 다음 코드를 실행시켜서 동작을 확인해봅니다. 

 

const express = require('express');
const app = express(); //익스프레스 기반의 서버 어플리케이션 객체 

handleListening = () => console.log("Now I am Listening on 4000")
app.listen(4000, handleListening);

 

앱의 기능을 추가하기 위해 express에서 미들웨어 (middleware)를 추가할 수 있는 use()메소드를 제공합니다. 

 

 

실행할 경우 아무 일도 안 일어나지만 express에서 제공하는 기능들을 추가하면 빠르게 적용이 됩니다. 

 

 

 

이제 서버가 제대로 생성이 되었는지 실행해볼게요. 

 

http://127.0.0.1:4000/  으로 접속해보면 다음과 같은 메세지가 출력되는 것을 확인할 수 있습니다. 

 

 

127.0.0.1 주소는 컴퓨터 네트워크에서 본인 컴퓨터의 주소를 의미합니다.

그래서 위의 접속 주소로 접속을 시도하면 현재 프로그램을 실행하고 있는  테스트 컴퓨터에서만 접속이 가능합니다.

로컬 주소의 자리에 호스트 주소(테스트 컴퓨터의 ip 주소)를 기재할 수 있으며 

호스트 주소를 입력하면 다른 디바이스의 브라우저로 테스트 컴퓨터 웹페이지를 접속할 수 있습니다.

 

 

여기까지 우리의 첫 서버를 만들어보았습니다.