[MernStack] Blog 만들기 2. Express 서버 구동

필요한 환경을 설치하고 셋팅했으니 서버를 구동 시킬 차례다. 서버가 동작해야만 데이터를 주고 받고 할 수 있다.

이 포스팅은 싸플님의 MernStack 강의를 공부하며 작성하였습니다

 

1.필요한 폴더 및 파일 생성

 우선 server에 필요한 모듈을 만들기 위해 server라는 폴더를 생성하고  그 안에
  app.js 와  server.js라는 파일을 생성한다.

 

2. app. js 작성

<app.js>

import express from 'express'

const app = express();

app.get('/');

export default app;

server에 필요한 프레임워크 express를 불러와 
변수명 app으로 express 인스턴스를 초기화한다.
app.get('/')은 경로를 의미한다.( 자세하고 기초적인 문법은 여기 )
export default app은 지금 작성하고 있는 app.js를 모듈화하여 다른 곳에서도 import하여 쓸 수 있게 한다.

 

3. server. js 작성

<server.js>

import app from './app'

app.listen('7000', ()=>{
    console.log("hi");
});

위에서 모듈화한 app.js를 import하고 
app을 7000번 포트로 청취한다 (7000번 포트로 설정하겠다).
그리고 7000번으로 맞게 실행 시키면 ()=> consol에 'hi' 라고  log를 찍겠다는 뜻이다.

4. package.json 수정

그 다음 package.json의 파일로 이동하여

script의 value값 오브젝트 안에 "devl" 라는 키값으로 스크립트 문을 작성하였다.
원래는 서버를 실행시키기 위해 터미널에서 아래와 같은 스크립트를 적어야 함
$> npm run nodemon ./server/server.js --exec babel-node
 매번 실행시킬때마다 번거러우니
$> npm run devl 
로 줄여 수고를 덜하겠다는 뜻이다.  
 devl은 원하는 네임으로 고치면 되지만 개발 단계에서 사용한다는 의미로 dev를 넣었다.

스크립트 문 뒷쪽을 보면  --exec babel-node 라는 문이 있는데 이건 
 execute babel-node  라는 뜻이다.  전 편 포스터에서 babel설명을 하였듯이
최신 노드 버전의 문법을 사용하여 실행하겠다라는 뜻이다.
그래서 babel이라는 파일을 생성하여 실행 시킬수 있도록 하겠다.

스크립트 문 첫번째  "test" "echo \ "Error :~  ... " 이 코드는 삭제해도 무관하다. 

5. .babelrc 생성

<.babelrc> -- server 폴더에 .babelrc라는 이름으로 파일을 생성하면 된다.

{
    "presets": ["@babel/preset-env"]
}

최신환경으로 셋팅하기위에  .babelrc에 등록한다.

 

6.  실행

Terminal 창을 열고

$> npm run devl

아래와 같이 pakage.json에서 적어줬던 스크립트 문과 내가 log를 찍었던 'hi'가  찍힌다면 잘 실행이 된 것이다.

 

다음 포스팅은 MongoDB 의 모델링에 대해 작성하겠다