Express.js

블로그 포스팅 순서가 정말 중구난방이라는 것을 혹시 눈치채셨을까.

그 뜻은 내가 정말 아무것도 모른다는 것이다.

사실 나는 MERN 스택으로 웹 어플리케이션을 만드는 것이 목표이다.

 

react.js로 front-end 부분은 어느정도 구현을 한 상태로 MongoDB도 설치했다. 이제 그 둘을 연동시키기만 하면 되는 줄 알았다!!

 

안된다!!!!! ㅋㅋㅋㅋㅋㅋ

 

찾아보니 Express.js를 공부해야 할 것 같다. (사실 express를 안해도 될 줄 알았다ㅎ)

내 생각엔! express는 node.js framework 이며 react.js보다 큰 개념인 것같다. 이제라도 알았으니 다행이다.

 

난 react.js로 웹 앱을 만들었는데 MERN stack으로 프로젝트를 완성시키기 위해선 express 프로젝트를 생성해서 그 안에서 react를 사용해야할 것 같다.

 

...^^ 일단 진정하자.

 

폴더를 하나 생성하자.

cmd 창을 들어가서

 

mkdir hello-mern

 

cd hello-mern

 

npm init (프로젝트 초기화하기)

 

npm install express --save

 

npm install express-generator --save

 

express -h (express 명령어 목록을 볼 수 있다.)

 

express hi-mern (hi-mern라는 express project 생성)

 

이렇게 하면 create 가 쫘라락 뜨면서 hi-mern 디렉토리에 기본 파일이 생성된다.

 

express-generator를 설치한 이유가 여기서 나온다.

dependencies에 내가 필요한 파일들을 추가한다.

나는 react를 쓸 것이기 때문에 react와 관련 파일들, babel, webpack 등을 추가했다. 

 

  "dependencies": {
    "axios": "^0.15.3",
    "babel-cli": "^6.11.4",
    "babel-core": "^6.13.2",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "ejs": "^2.5.6",
    "express": "^4.16.4",
    "express-generator": "^4.16.0",
    "jade": "~1.11.0",
    "mongojs": "^2.4.0",
    "morgan": "~1.7.0",
    "react": "^15.4.2",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.4.2",
    "react-router": "^2.6.1",
    "serve-favicon": "~2.3.2"
  },
  "devDependencies": {
    "babel-loader": "^6.2.10",
    "http-server": "^0.9.0",
    "webpack": "^1.13.3"
  }

이렇게 추가하고 나서 hello-mern 디렉토리에서 npm install을 실행하면,

hello-mern 디렉토리 내에 있는 package.json의 dependencies를 참조하여 설치된 모듈을 검색하여 자동 설치 된다. 오 굉장히 편하다.