Node.js Setup #3 -module, server

1. module, 데이터 전달

1.1. module

이제 express까지 설치한 상태인데, 이 express는 무엇이며, 왜 필요한가?

우선 module에 대해 알 필요가 있다.

 

js파일안에 들어갈 정보가 커지면 이 js파일을 여러 개로 나눠야 할 때가 있다.

 

이때 각 파일을 module이라고 한다.

 

특히 다른 라이브러리를 사용할 때, (여기서는 express) 이 module의 개념이 적용된다고 보면 된다.

 

물론 각자 다른 파일이므로 다른 파일에 있는 데이터를 주고받고 싶을 땐 특수한 명령어가 필요하다.

 

현재 우리는 express를 설치한 상태인데, 잘 설치되었는지를 확인하려면 package.json 파일을 열면

 

설치된 package의 목록을 객체 형태로 볼 수 있다.

 

여기서 express가 있다면 잘 설치된 것이다.

 

1.2. require method

만약 a.js에 b.js의 데이터를 가져오고 싶다면 우선

 

b.js에서 파일의 어떤 부분을 넘겨줄 것인지도 지정해주고,

 

a.js에서 b.js의 데이터를 가져올 명령어를 추가하는 두 가지 작업이 필요하다.

 

우선 b.js에서 데이터를 넘겨주는 작업을 해보자.

/* b.js */

let obj = {
	name: 'lsj',
	age: 29,
	address: 'korea'
	}
    
    module.exports = obj; // 변수 obj를 export 한다는 명령어

 

 

마지막 줄의 method.exports에 obj 변수를 담으면 이를 다른 파일에 넘겨줄 수 있는 상태가 된다.

 

이제 a.js 파일로 가서 b.js파일의 지정된 데이터를 가져오는 코드를 작성하자.

 

/* a.js */

const bjs = require('./b.js')	// b.js의 데이터를 가져와 변수에 넣는다.

console.log(bjs)

가져온 데이터를 담은 변수를 출력해보면 데이터가 잘 전달되었는지를 확인할 수 있다.

 

express를 가져오는 것도 마찬가지로 수행할 수 있다.

 

불러와서 변수에 담아주면 된다. 데이터를 넘겨주는 코드는 이미 express에서 작성이 되어있으므로

 

우린 데이터를 가져와 변수에 담는 코드만을 작성하면 된다.

 

const express = require('express')
const app = express()

 

이제 이어서 이를 이용해 '서버'라고 불리는 것의 기본적인 원리를 구현해보자.

 

 

2. 서버 구동에 필요한 요소들

2.1. listen method

listen 메소드를 먼저 작성해보자.

 

app.listen(3000,() => {
	console.log('서버 구동')
	}

listen 메소드는 항시 실행되고 있는 코드이다. 

 

이 항시 진행되는 코드가 실행 중일때, 호스트는 클라이언트들로부터의 요청을 처리할 수 있는 상태가 된다.

 

즉 서버라는 것은 호스트가 클라이언트의 요청을 받아 그에 대한 응답을 보내는 것을 뜻하는 것이라고 봐도

 

무방할 것 같다.

 

listen은 2개의 인자값을 가지는데, 첫 번째는 포트로 보통 3000 아니면 8080을 가진다.

 

두 번째는 콜백 함수로, 여기서는 arrow 함수 형태로 넣어주었다. 서버가 문제 없이 구동이 시작되는지를

 

확인하기 위해 console.log로 텍스트가 출력되게끔 해두었다.

 

2.2. 응답

이제 응답을 주는 코드들을 작성해보자.

 

처음으로는 get 메소드를 사용할 것이다.

 

app.get('/', (req,res) => {
    res.send('<h1> hello server</h1>')
    }

get 메소드도 인자값을 2개 가지는데, 첫 번째 인자값은 포트 값을 포함한 URI를 의미한다.

 

'/' 만 써줄 경우 localhost와 port를 자동으로 지정한다.

 

브라우저 상에서 URI는 http://localhost:3000 로 알아서 읽힌다. 뒤에 다른 문자열을 추가해줄 수 있는데,

 

예를 들어 '/abc'를 넣어주면 브라우저 상에서 URI는 자동으로 http://localhost:3000/abc로 치환된다.

 

 

get 메소드의 두 번째 인자값은 콜백함수이며, 이 콜백함수도 인자값을 다시 2개 가진다.

 

각각 요청과 응답으로 여기서는 인자값의 이름을 각각 req, res로 정했다.

 

위에서 작성한 코드 res.send('<h1> hello server</h1>')의 경우, 

 

응답으로 <h1>hello server</h1>을 전송하겠다는 것을 의미한다.

 

 

인자값들을 살짝 변경해서 다음과 같이 작성하면

 

app.get('/ab', (req,res) => {
	res.send('<h2>hello ab/h2>')
    }

http://localhost:3000/ab 에서 hello ab 라는 텍스트가 <h2> 의 형식으로 출력된다.

/ 뒤에 추가적으로 주는 텍스트가 바로 path가 된다.

 

지금까지 작성한 코드를 정리해보면 다음과 같다.

const express = require('express')
const app = express()

app.listen(3000, () => {
	console.log('서버 실행중')
    }
    
app.get('/', (req, res) => {
	res.send('<h1> hello </h1>')
    }

app.get ('/ab', (req, res) => {
	res.send('<h2> hello ab </h2>')
    }

 

 

이런 식으로 html element도 express를 이용해 가져올 수 있는데,

 

문제는 다른 파일로 작성한 html을 가져오려면

 

그 html 파일을 전부 복사해 괄호 안에 붙여 넣어야 하고,

 

이 과정이 따옴표등의 문법적인 문제 때문에 시간이 오래 걸릴 뿐더러 가독성도 좋지 않다는 것이다.

 

그래서 이 과정을 좀 더 편하게 하기 위해 템플릿 엔진이라는 것을 사용한다.

 

그게 뭔지는 다음 시간에..