지난달 막바지에 인턴면접을 보았고, 운이 좋게 합격하여 인턴 업무를 맡고 있다.
스타트업이라 그런지 자리에 앉자마자 회사 데이터 ERD를 파악하며 그려보고, 코딩을 시작했다. 대표님께서 업무방향만 알려주시면 그에 맞춰서 혼자서 이것저것 알아보면서 개발해보는 것이 오히려 재미있게 느껴졌다. 내일이 월요일인데 회사가는 것에 전혀 거부감이 없다. 월요병이 있는 삶을 살지 않겠다고 다짐했는데, 어느정도 그 생각을 실현시킨 것 같아 기분이 좋다.
우리 회사 서비스인데 마케팅에 조금이나마 도움이 되고자하는 회사일원의 마음으로 링크를 걸어본다.
재밌는 점은 나는 운세나 타로카드같은 것을 믿지 않는다고 자기소개서에 적었는데 흔쾌히 같이 일하기로 한 회사라는 것이다. (물론, 이런 비과학적 미신의 순기능에 대해서는 긍정적인 경험을 겪어본 바 있다고 밝혔다).
이 블로그를 찾아주시는 분들에게도 포스가 함께하기를!
//
인턴으로 첫번째 맡은 임무는 회사의 데이터를 기반으로한 통계페이지를 만드는 것이었다.
아무래도 직전까지 열심히 하고있던 타입스크립트와 Angular가 당장 작업하기에 수월했다고 느껴졌다.
또, 간간히 공부했던 Express를 확실하게 공부하자고 생각했고, 이것들을 이용해 구축해보기로 했다.
데이터베이스는 MySql을 쓰도록 한다.
전체적인 흐름은 다음과 같다.
Angualr 자체가 SPA이다보니 서버에서는 요청에 맞는 라우터만 작성하면 되고, Angular에서는 뷰에만 신경쓸 수 있다는 점이 좋다.
필자의 개발환경은 OSX이며 VScode를 사용했다.
먼저 vscode를 설치하고 ctr+` 버튼을 눌러서 내부 터미널을 켜준다.
(node와 typescript는 기본적으로 설치되어있다고 가정하고 이야기한다)
$ mkdir type-express-ng-mysql && cd type-express-ng-mysql
연습에 사용할 디렉토리를 하나 만들고 디렉토리에 들어간다.
$ npm init -y
모듈설치를 위해 npm init을 시작한다
기본적으로 타입스크립트를 사용하므로 타입스크립트도 시작전에 설정을 해주어야 한다.
$ tsc -init
해당 명령어를 입력하면 tsconfig.json 파일이 생성되는데 실습을 위해 몇가지만 조정하도록 한다.
"outDir" : "./build" ==> 타입스크립트를 컴파일 한 후 컴파일되어진 js파일들을 모아두는 곳을 의미한다.
필자는 빌드했다는 것을 명시하기 위해 build라는 디렉토리명을 사용했다. 아무거나 써도 상관없다.
"include" : "src/**/*" ==> src 라는 디렉토리 아래에 서버를 작성해나갈 것인데 , 컴파일을 할 곳을 정해두는 것이다.
"exclude" : "webapp/*" ==> webapp이라는 디렉토리에는 angular 를 작성할 것이다. 버전관리를 서버와 따로따로 할 것이므로 exclude 속성에 명시해서 컴파일하는 것을 제외토록 한다.
작성된 tsconfig.json은 다음과 같다.
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"strict": true,
"outDir": "./build"
},
"include": [
"src/*"
],
"exclude": [
"webapp/*"
]
}
이제 익스프레스를 설치한다.
$ npm i express --save
src 디렉토리안에 main.ts를 기술한다.
import * as express from 'express';
export class Server {
public app: express.Application;
// 사용할 포트
private PORT: number = process.env.PORT || 3000;
constructor() {
this.app = express();
this.config();
this.routes();
}
config() {
this.app.listen(this.PORT, () => {
console.log(`Listening at http://localhost:${this.PORT}/`);
});
}
routes() {
}
public static bootstrap(): Server {
return new Server();
};
}
Server.bootstrap();
이 몇줄이면 서버가 뚝딱 생겨난다. 이것이 익스프레스의 훌륭한점 아닌가 싶다....!
포트는 3000번이다.
실행시키는 방법은 컴파일을 한 후에 node 명령어를 통해 해당 js파일을 실행시켜주어야 하는데
package.json을 통해 한 큐에 해결 할 수 있다.
"scripts": {
"start": "tsc; node ./build/main.js;",
"test": "echo \"Error: no test specified\" && exit 1"
},
script 속성 start 부분에 다음과 같이 적어두고 터미널에서 npm start를 실행하면 컴파일 된 파일을 실행시킬 수가 있다.
하지만 지금은 서버를 실행해도 보여줄 페이지가 없다.
우리가 보여주고자하는 페이지는 angular 앱이므로 angular를 만들어보도록 하자!
angular-cli가 있다면 아주 쉽게 angular를 시작할수가 있다.
현재 디렉토리에서 다음과 같은 명령어를 입력하자. (angular-cli를 설치했다고 가정 )
$ ng new webapp
뚝딱하고 만들어졌다. webapp에서 가장 수정해주어야 할 것은 해당 프로젝트를 빌드한 후 저장되는 곳을 지정해주는 것이다. 여기서는 tsconfig.json 파일이 아니라 angular-cli.json을 조작한다. outDir을 express 가 컴파일후 저장되는 곳과 동일하게 맞춰주면 된다 .
angular-cli.json의 일부분이다.
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "webapp"
},
"apps": [
{
"root": "src",
"outDir": "../build/webapp", /////////// => express가 컴파일되는 곳과 동일하게 맞춰준다.
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
그리고 express 프로젝트의 package.json 을 좀더 수정해주어야 한다.
"scripts": {
"start": "cd webapp; ng build ; cd .. ;tsc; node ./build/main.js;",
"test": "echo \"Error: no test specified\" && exit 1"
},
webapp 디렉토리로 가서 앵귤러프로젝트를 빌드시킨후에 다시 빠져나온 후 서버를 컴파일하고 실행시킨다.
npm start를 실행시킨뒤 localhost:3000으로 들어가면 앵귤러 앱이 보일 것 같지만
아직 보이지 않는다. express에서 해당 앵귤러 페이지를 보내주어야한다.
앵귤러를 빌드하게 되면 html 파일 뿐만아니라 여러가지 부속품들이 생겨나는데 해당 컨텐츠들은 static 자료로 express가 인식을 해야 한다.
main.ts config() 메소드에 다음 코드를 추가시킨다.
// SPA로써 Angular App 을 보냄.
this.app.use('/', express.static(__dirname + '/webapp'));
정적 파일들을 보낼 경로로 '/' 로 설정하고 해당 파일들을 webapp 디렉토리에 모아두었다고 명시하는 것이다. 따라서 서버에서 클라이언트에게 보내줄 정적자료는 angular이고, 각 페이지에대한 뷰는 angular 에서 담당해서 제작한다. express는 해당 요청에 맞는 데이터들을 가져다가 뿌려주면 되는 것이다.
npm start를 실행했을때 다음과 같은 페이지가 보이면 잘 작성된 것이다.
//
이제 여러분은 타입스크립트를 통해서 프론트페이지와 서버를 아우를 수 있는 환경을 구성하게 되었다.
댓글
댓글 쓰기