express 프레임워크 1_[node.js], [express.js]

 

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용.

 

오늘은 Express 프레임워크에 대해 알아보는 이야기를 해볼거에요.

 

Express란 Node.js의 대표 웹 프레임워크입니다.

 

이를 이용하여 웹을 구현하는 방법에 대해서도 알아봅시다. 

express generator을 설치하고 이 속을 들여다 볼거에요. 그리고 간단히 서버를 연결해볼게요.

---

Express.js를 사용하는 이유는 무엇일까요?

코드가 복잡해지면 점점 웹을 구현하는 것이 힘들어집니다.

이 때 node.js의 웹프레임워크를 사용하면 간편하게 웹서버를 구축할 수 있습니다. 

---

 

1. express generator 설치하기

 

git bash에서 npm install -g express-generator 작성

 

** 참고: npm install -g : node package manager을 global(전역)에 설치한다. 

 

2. express 프로젝트 만들기

 

폴더를 하나 만든다. 여기서 폴더명은 20200201 이라 정해보자. 

 

git bash에서 20200201폴더에 들어간 후 20200201폴더에서 

express --no-view 를 작성한다. 

그리고 20200201 (express) 프로젝트를 열어보자. 

 

3. express 프로젝트에서 npm install 하여 의존패키지들을 설치한다. 

 

 

[package.jason 들여다보기] 

 

scripts": {
    "start": "node ./bin/www"
  }

>> node를 사용해서 bin 폴더의 www를 실행시키겠다는 뜻이다. 

package.jason

 

 

[www 파일 들여다 보기]

 

www라는 파일은 우리가 express 서버를 띄우는데 도움을 주는 파일이다.

그래서 www 파일을 실행하면 서버가 실행된다. 

 

**참고: port: 하나의 연결통로

process.env.PORT란?

node.js에는 환경설정이 있다. node.js는 javascript를 실행할 수 있는 환경이며 이 환경은 실행이 계속 되어 그만의 process가 있다. 

이러한 process들의 데이터를 가지고오기 위해서 node.js 환경에서 process.env.PORT에서 process를 가지고 온다.

여기서 env는 환경을 가지고 오는 방법이다. 그리고 환경의 port를 가지고 온다. 

**env : environment의 약자

 

그러나, 기본적으로 environment는 port를 가지고 있지 않다.

그런데 왜 가지고 올까? environment에는 사용자가 마음대로 데이터를 삽입할 수 있다. 그러나 port가 없으면 undefined가 뜬다. 

즉, 아래 port = normalizePort(process.env.PORT || '3000'); 는

port에는 사용자가 마음대로 데이터를삽입할 수 있는데 port가 없으면(undefined) port에 3000를 삽입하겠다.

라는 뜻이다. 

하나의 연결통로를 뜻하는 port는 프로그램에서 port를 0000~65523 까지 가능하도록 만들어 놓았다. 

이 중 우리가 일반적으로 서버 프로그래밍할 때 사용하는 port는 3000이다. 

 

**참고: null은 사용자가 임의로 빈값을 넣었을 때이고, undefined는 애초에 빈값으로 값을 찾을 수 없다 라는 뜻이다.

 

process란? 정형화된 하나의 실행흐름이다. 

>> node.js의 procee란? node.js 환경에서 실행되는 하나의 흐름

실행되는 데이터들을 process가 가지고 있으니 process안에는 환경설정이 있다. 

 

www 파일 들여다보기

 

 

[app.js 들여다보기]

실질적인 서버를 만드는 것은 app.js 이다. 

express는 node.js를 더 쉽게 사용할 수 있는 모듈이다. 

app.js 파일 들여다보기

routes 폴더에 index.js, users.js 파일을 만들어 require로 불러왔다. 

불러올 때 보통 import로 불러오는데 여기서는 require로 불러온다. 

var indexRouter = require('./routes/index')  >> routes폴더의 index를 불러온다.

var usersRouter = require('./routes/users')  >> routes폴더의 users를 불러온다.

 

require로 불러온 다음, app.use로 연결시킨다. 

app.use ( '/', indexRouter ) >> indexRouter를 사용한다 라는 뜻으로 연결시키는 작업이다.

app.use ( '/users', usersRouter ) >> usersRouter를 사용한다 라는 뜻으로 연결시키는 작업이다.

 

var indexRouter = require('./routes/index'); >> 아직 연결 안한 상태
app.use('/', indexRouter); 를 함으로써 >> indexRouter를 사용한다. 연결 시킴

 

 

 

[routes 폴더안의 index.js 파일 들여다보기]

routes 폴더 속 index.js 파일 들여다보기

router.get (' / ', function( req, res, next ) { } ) ;

첫번 째 인자 : 경로

두번 째 인자 : 함수

 

함수의 parameter 인 req, res, next :

req : request : 사용자가 요청했을 때

res : response : 사용자가 다시 받을 수 있게 데이터를 반환

next : 다음 실행할 함수

 

---

앞 포스팅에서 제작한 마이리얼트립 프로젝트를 express를 이용하여 서버에서 불러와 페이지를 구현해 보자.

 

[postman 설치하기]

1. postman 공식 홈페이지에서 설치한다. 

2. 로그인

3. localhose:3000/ > send 한다. 

4. express 프로젝트에서 

  - npm install (초기에 함)

  - npm run start 

  - node ./bin/www 가 되었다면 완료가 된 것이다. 

 

 

[앞서 진행한 마이리얼트립 프로젝트를 서버에서 불러오는 방식으로 실행해 보기]

 

1. 마이리얼트립 프로젝트에서 npm run build 작성

 

2. 마이리얼트립 프로젝트에 build 폴더가 생성됨

 

3. express 프로젝트의 public 폴더 속 파일을 모두 지운다. 

 

4. 마이리얼트립 프로젝트 속의 build 속 파일들을 모두 express프로젝트의 public 폴더속으로 복사한다.

 

5. 서버를 껐다 켠 후 다시 npm run start 하면 완성!!!!

 

이렇게 오늘은 express 프레임워크를 이용하여 서버에 연결해보았습니다.

다음 시간에는 Express프레임워크의 이해도를 높이기 위해 이론적인 글과

실제 마이리얼트립 화면을 구현하여 서버를 연결하는 이야기로 찾아뵐게요.

 

express 이론과 실제 서버 연결하여 화면 구현해보기

https://hjp-recipe.tistory.com/42?category=835412 

express 프레임워크 2_[express] 서버연결하기