Mean스택 입문 (1) Angular cli + Node.JS Express 뼈대 만들기

(1) Angular cli + Node.JS Express 뼈대 만들기

 

Angular Cli와 Node.js 그리고 express프레임워크를 활용한 프로젝트를 만들어보자. 일명 MEAN스택 과정이다. 최근 REACT나 Vue + Nuxt.js로 넘어가는 경향이 있지만 그래도 기본은 MEAN스택이 Node.js 풀스택 개발자의 시작이었다. 전체적인 실행순서는 아래와 같다.

---

① node, npm이 설치되어 있는지 확인

② angular cli npm 모듈 설치

③ express 설치 (이미 설치돼 있다면 생략)

④ sever.js 파일 수정

⑤ 서버파일 실행

---

 

1:: 『Node.js설치』 

돌다리도 두들겨패고 건너라 하지 않았던가? 혹시나 하는 마음으로, 컴퓨터에 Node.js와 npm 패키지가 설치돼 있는지 버전확인을 한다. 윈도우는 cmd창, 맥이나 리눅스는 터미널을 띄워서 아래와 같은 명령어를 실행해보자.

 

 - node -v

 - npm -v

 - ng

 

node -v는 node.js 버전을 확인하는 명령어이며, npm -v는 npm 버전을 확인해준다. 또, ng 명령어는 angular cli npm 모듈이 설치되어 있는지 확인하는 명령어이다. 위의 명령을 실행하면 아래와 같은 결과가 나온다.

 

 

2:: 『 Angular cli설치』 

대부분 node.js는 설치돼 있지만 angular cli는 설치되지 않았을 가능성이 크다. angular cli를 사용하기 위해서 아래 사이트를 방문한다.

 

https://cli.angular.io  

 

angular cli 설명서에 의하면, npm install -g @angular/cli  를 cmd창에 입력하면, angular cli npm이 설치된다고 나와 있다.

//그대로 실행해보자.

-> npm install -g @angular/cli

 

angular cli 공식사이트에 있는 실행 명령어를 그대로 이행하면, 부지런히 angular에 필요한 모듈들이 자동으로 설치된다.

3:: 『 ng명령어 실행』 

angular/cli 를 설치하고나서 cmd창에 ng 명령어를 타이핑한다.

-> ng

'ng'를 실행했을 뿐인데, 위와 같이 쏼~라쏼~라 나온다면 ng 모듈이 성공적으로 설치된 것이다.

4:: 『 Angular프로젝트 생성』 

ng 모듈을 활용해서 새로운 Angular 프로젝트를 생성해보자.

-> ng new compAngularNode --routing --style=scss

 

'ng new'명령어 뒤에 생성할 폴더이름을 타이핑하고, 그 뒤에 '--routing --style=scss'명령어를 실행한다. ng new 명령어는 새로운 Angular 프로젝트를 생성하라는 의미이다. 현재, 폴더이름을 compAngularNode로 설정했다.

 

'--routing'은 자동으로 routing.ts 파일까지 생성하라는 의미이다. (--routing을 하지 않으면, 수동으로 라우팅 typescript 파일을 모두 만들면 된다. 하지만 귀찮다;;) '--style=scss '는 코딩을 할 수 있는 css파일 scss파일 형태로 껍데기 css파일을 자동으로 생성해준다.

 

cmd창에는 아래와 같이 성공 메시지가 나온다.

 

 compAngularNode 폴더가 생성되었고, 폴더안에는 아래와 같이 angular 파일들이 예쁘게 생성된다.

 

5:: 『 Express프레임워크 설치』 

이제 Angular 폴더에서 Express 프레임워크를 설치해보자~ 

 

compAngularNode 폴더로 이동한다.

 

- npm install --save express

 

위의 명령어를 실행해서 express 모듈을 설치한다. express 설치후 반드시 cmd창에서 ' npm install '명령어로 npm들을 install해준다.

 

6:: 『 server.js실행 』 

express 모듈을 설치했다면, 각자 사용하는 웹 에디터를 실행하고, server.js 파일을 생성한다. (필자는 sublime text)

New File에서 server.js 파일을 생성한다.

7:: 『 server.js기본뼈대 코딩』

server.js에서 express 기본 코딩을 한다.

 

---

const express = require('express');

const bodyParser = require('body-parser');

const http = require('http');

const path = require('path');

const app = express();

---

 

`` const express = require('express'); `` 

-> 해당 라인은, express 모듈을 불러오는 명령이다.

 

`` const bodyParser = require('body-parser'); `` 

-> body-parser 모듈을 사용하겠다는 의미이다. body-parser는 post방식 라우팅 데이터를 받을 수 있는 미드웨어다.

 

`` const path, http `` 

-> path, http 모듈을 이용하겠다는 의미다.

 

`` const app = express( ); `` 

-> app변수에 express(); 실행함수 넣는다.

 

8:: 『 body-parser미드웨어 지정』

아래 코드를 실행해보자.

---

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended:false });

---

 

`` app.use(bodyParser.json( )); ``  

-> json 데이터 형식으로 파싱한다는 의미이다.

 

`` app.use(bodyParser.urlencoded({ extended:false }); `` 

-> url 인코딩을 1번만 하겠다는 의미다. 

 

9:: 『 static폴더 지정』

angular 파일이 들어있는 static 폴더를 지정한다. 아래 코드를 실행한다.

 

---

app.use(express.static(path.join(__dirname,'dist')));

---

 

서버가 실행되면, 'dist'란 폴더에 있는 javascript파일, image파일 등..을 읽도록 지정해준다. 폴더이름은 알아서 지정하면 된다.

 

10:: 『 메인파일 연결』

메인으로 사용할 라우팅 파일을 연결해보자. 아래 코드를 실행한다.

 

---

app.use( '/api' , api );

app.get( ' * ' , ( req , res ) => {

res.sendFile( path.join(__dirname,'dist/index.html' ));

});

---

 

해당 파일을 실행하면, http://도메인주소/api  로 접속했을 때, api 모듈로 연결한 view파일을 실행한다.  ' * ' 은 모든 도메인을 의미한다. Angular는 단일 페이지 랜더링 방식이기 때문에 어차피 index.html파일 안에서 모든 것을 해결한다. 따라서 ' * ' , 모든 get방식 라우팅에 ES6 방식의 함수 =>{ };를 활용해서 index.html파일로 연결한다.

 

11:: 『 포트연결 』

서버에 접속할 라우팅 포트를 설정해보자. 아래코드를 입력한다.

---

const port = process.env.PORT || 3000;

app.set('port' , port );

---

 

`` const  port = process.env.PORT || 3000 ``

-> process express 내장메소드를 활용해서 3000번 포트를 사용하라는 의미다.

 

`` app.set('port',port); `` 

-> port 변수에 지정한 값으로 express 실행한다.

 

12:: 『 서버실행 』

최종적으로 서버를 실행해보자. 아래 코드를 입력한다.

 

---

const server = http.createServer(app);

server.listen(port, () => console.log(`Running on localhost:${port}`));

---

 

`` const server = http.createServer(app); ``

-> http모듈로 서버를 생성한다.

 

`` server.listen(port, () => console.log(`Running on localhost:${port}`)); ``

-> port는 위에서 지정한 3000포트, 익명함수로 서버가 실행되었을 때, console.log로 port가 몇번인지 콘솔에 출력한다. console.log( ) 괄호 사이에 홑따옴표는 esc키 아래에 있는 브라켓 기호로 처리해야 한다는 점 주의하자.

 

app.use('api', api); 코드는 일단 주석처리 해둔다. 현재, api 뷰파일을 설정해서 모듈로 불러오지 않았기 때문에 에러가 발생하기 때문이다. 잠시 주석처리 해두고, 이후 api 라우팅을 뷰파일로 만든 이후에 api를 미드웨어로 사용한다.

app.use('/api',api) 부분은 아직 라우팅을 걸지 않았으므로, 주석처리한다.

 

13:: 『 build실행 』

마지막으로 cmd 창으로 가서 빌드를 해준다. 아래 코드를 cmd에서 실행해보자.

 

---

-> ng build

-> node server.js

---

 

 

`ng build`는, 앞으로 많이 사용할 명령어다. Angular는 ng 명령어로 반드시 build를 해서 디버깅을 한다. node server.js 명려어는, 앵귤러 빌드가 끝난후 server.js 파일에서 node서버를 실행시킨다.

 

14:: 『 최종실행 』 

웹 브라우저에서 http://localhost:3000을 타이핑한다. 3000 포트에서 아래와 같은 Angular 로고와 아래처럼 나온다면 성공이다.

 

프론트는 Angular로 작성하고, 서버는 Node.js Express 프레임워크를 활용하는 기초뼈대가 완성되었다. 최종코드를 정리해보자.

 

>> server.js 최종코드 ( //표시는 주석처리 ) 

 

---

//기본 Express 실행코드

 

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();

 

// BodyParser 미드웨어

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended:false }));

 

// 서버 static

app.use(express.static(path.join(__dirname,'dist')));

 

// Set Main 라우팅

// app.use('/api',api);

 

app.get('*',(req,res)=>{
 res.sendFile(path.join(__dirname,'dist/index.html'));
});

 

// set Port
const port = process.env.PORT || '3000';
app.set('port',port);

// Create the HTTP Server

const server = http.createServer(app);

server.listen(port, () => console.log(`Running on localhost:${port}`))

---