[Node, Vue] 클론코딩 Zoom(1) Node와 Vue 프로젝트 세팅

* 노마드 코더의 Do it! 클론코딩 줌 책을 정리한 포스팅입니다.

1. 프로젝트 폴더 초기화

1. package.json 파일 자동 생성

npm init -y

2. package.json description 수정

3. README.md 파일 생성

 

2. 서버를 위한 준비 작업

1. nodemon 설치

nodemon은 소스 코드를 수정할 때마다 코드의 변화를 감지해서 자동으로 서버프로그램을 재시작해주는 도구

nodemon은 코드를 Node.js 기반으로 실행해주는 것은 물론이고 모니터링까지 해준다.

npm i nodemon -D

그럼 아래와 같이 변경된다.

-D 옵션은 개발 및 테스트를 위해 설치하는 패키지라는 의미이다.

{
  "name": "noom",
  "version": "1.0.0",
  "description": "Zoom Clone using NodeJS",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}

2. babel 관련 패키지 설치하기

최신 자바스크립트로 코드를 작성하기 위한 패키지들 설치

npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

(패키지 설치시 패키지명을 공백으로 구분해서 입력하면 패키지를 한번에 여러개 설치할 수 있다)

아래와 같이 변경된다

{
  "name": "noom",
  "version": "1.0.0",
  "description": "Zoom Clone using NodeJS",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.21.5",
    "nodemon": "^2.0.22"
  }
}

3. 서버 파일과 설정 파일 생성

1. 루트 디렉터리에 src 폴더를 만들고, 그안에 server.js라는 파일 생성

server.js

console.log("hello");

2. 루트 디렉터리에 nodemon.json과 babel.config.json 파일 생성

3. 설정 파일 수정

(1) babel은 자바스크립트 컴파일러이고, nodemon은 코드를 실행해주는 런타임. 컴파일은 코드의 실행보다 먼저 처리되어야 하므로, nodemon.json에는 babel을 이용해 컴파일 한 다음에 코드를 실행하겠다는 설정 추가

nodemon.json

{
	"exec": "babel-node src/server.js"
}

(2) babel이 최신 자바스크립트를 쓸 수 있도록 설정

babel.config.json

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

(3) package.json에 명령어 추가

{
  "name": "noom",
  "version": "1.0.0",
  "description": "Zoom Clone using NodeJS",
  "scripts": {
    "dev": "nodemon"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.21.5",
    "nodemon": "^2.0.22"
  }
}

(4) npm run dev 

서버의 코드가 정상적으로 잘 동작하는 것을 확인할 수 있다.

nodemon이나 babel 설정에도 문제가 없고, 프로젝트 구조에도 문제가 없다는 뜻!

 

* 실행 중인 nodemon을 종료해 터미널을 원래대로 돌려놓으려면 ctrl + c 누른다음 y를 입력하여 작업 종료하기

4. Express 설치

express는 node.js 환경에서 api 서버를 개발할 때 사용할 수 있는 웹 프레임워크이다.

npm i express

5. server.js 수정(서버 열기)

아래와 같이 server.js를 수정한다.

import express from 'express';

const app = express();
const handleListen = ()=>console.log("Listening on 3000 port");
app.listen(3000, handleListen);

최신 자바스크립트 문법인 import와 from을 이용해 express를 서버에 가져온다. 그걸 토대로 서버를 생성하고, localhost의 3000번 포트에서 서버가 열리도록 코드를 위와 같이 작성한다.

 

이제

npm run dev

를 하면 터미널은 다음과 같이 출력된다.

웹페이지 localhost:3000 의 상태이다

6. 프런트엔드 준비작업

src 폴더 안에 새 폴더를 하나 만들고 이름을 public으로 짓는다. public 폴더 안에는 js라는 이름의 폴더를 만들고 그 폴더 안에는 app.js를 생성한다. 나중에 public 폴더 안에 css라는 폴더도 만들어서 스타일 시트를 작성할 예정이다.

(1)

좀 더 편하게 데이터를 전송하고 표현하기 위해 뷰 엔진을 사용해보도록 한다.

Vue 시작하기 - Web 개발 학습하기 | MDN (mozilla.org)

Getting Started – Pug (pugjs.org)

npm i pug

뷰 엔진이란, 서버에[서 처리한 데이터 결괏값을 정적인 페이지에 더욱 편리하게 출력해주기 위해 사용하는 시스템이다. 뷰 엔진이 요구하는 형태로 템플릿 파일을 만들고, 서버에서 처리한 데이터를 해당 템플릿 문서에 전달하면 화면에 출력할 수 있다.

 

현재까지의 package.json

{
  "name": "noom",
  "version": "1.0.0",
  "description": "Zoom Clone using NodeJS",
  "scripts": {
    "dev": "nodemon"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.21.5",
    "@babel/core": "^7.21.8",
    "@babel/node": "^7.20.7",
    "@babel/preset-env": "^7.21.5",
    "nodemon": "^2.0.22"
  },
  "dependencies": {
    "express": "^4.18.2",
    "pug": "^3.0.2"
  }
}

(2) view 폴더 생성하고 뷰 만들기

이번에는 src 폴더 안에 views라는 폴더를 하나 생성한다. 뷰 엔진을 사용해 만든 문서를 '뷰'라고 하는데, 제작할 뷰는 모두 이 폴더 안에 보관할 것이다. view 폴더를 만들었다면, 그 안에 home.pug라는 이름으로 첫번째 뷰를 만들어본다. pug의 문법에 맞게 코드를 작성해준다.

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
    body
        h1 It works!

HTML 코드보다 훨씬 간편하다. 일일이 태그를 열고 닫을 필요없이 들여쓰기 만으로 부모 태그와 자식 태그를 구분할 수 있다.

(3) server.js에 뷰 엔진 설정하기

뷰가 서버를 통해 사용자에게 제공될 수 있도록 한다. 서버는 server.js 파일에서 만들어지므로 내용을 조금 수정해서 뷰를 제공하도록 한다.

import express from 'express';

const app = express();
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

app.get('/', (req, res) => res.render("home"));
app.get('/*', (req, res) => res.redirect("/"));

const handleListen = ()=>console.log("Listening on 3000 port");
app.listen(3000, handleListen);

__dirname은 Node.js 기본 전역 변수로, 현재 실행하는 폴더의 경로를 의미한다. 여기서는 src 폴더 경로를 할당한다.

app.set 메서드를 이용하면 설정하고자 하는 항목을 지정해 원하는 설정값을 입력할 수 있다.

view engine 항목을 pug로, views 항목을 만든 views 폴더로 각각 설정하였다.

그 아래에 있는 app.get 메서드는 서버에 http 요청이 왔을 때 지정한 콜백을 이용하여 라우팅처리를 해준다. 사용자에게 home.pug를 제공하기 위한 라우팅 설정을 해두었다. 어떤 주소를 입력해서 서버에 접근하더라도 사용자는 home.pug를 제공받을 것이다.

(라우팅이란, 주소를 보고 어떤 페이지(뷰)를 제공할지 결정하는 작업을 뜻한다)

(4) 실행

서버에 뷰 엔진 설정을 추가하였으니, 이제 서버를 실행하면 뷰가 제공되는 것을 확인할 수 있다.

npm run dev

(5) 뷰를 위한 스크립트 추가

서버가 잘 실행되고 있고, 뷰도 잘 렌더링되는 것을 확인하였이다.

그 상태에서 이제 home.pug에 스크립트를 추가해보도록 한다.

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
    body
        h1 It works!
        script(src="/public/js/app.js")

마지막 줄에 앞서 public 폴더 안에 app.js 파일을 만들어 둔 것을 추가하였다.(home 뷰를 위한 스크립트)

(6) server.js 수정

파일을 추가한 것 만으로는 스크립트가 완전히 적용되었다고 볼 수 없다.

왜냐하면 뷰는 서버를 통해 제공되므로, 서버에서 /public 경로에 대한 설정까지 추가해주어야 한다.

따라서 아래와 같이 수정한다.

추가된 코드

app.use('/public', express.static(__dirname + '/public'));

는 app.use 메서드를 이욯해서 /public 경로가 src 폴더에 있는 public 폴더라고 정의한 것이다. 이제 뷰에서 /public 경로를 잘 찾아갈 수 있다.

import express from 'express';

const app = express();
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');
app.use('/public', express.static(__dirname + '/public'));

app.get('/', (req, res) => res.render("home"));
app.get('/*', (req, res) => res.redirect("/"));

const handleListen = ()=>console.log("Listening on 3000 port");
app.listen(3000, handleListen);

(7) nodemon 설정 추가

nodemon은 코드 변화를 감지해서 서버를 재시작해주는 기능이 있다. 이 기능은 무척 편리하지만, 코드를 바꿀 때마다 매번 서버가 재시작되는건 번거로울 수 있다. 그래서 nodemon.json 설정 파일에 내용을 추가한다. 앞으로 public 폴더 내부의 코드가 변할 때마다 서버가 재시작되지 않도록 설정한다.

{
    "ignore" : ["src/public/*"],
	"exec": "babel-node src/server.js"
}

참고로 nodemon 설정 파일을 수정한 다음에는 nodemon을 종료했다가 다시 실행해야 설정이 적용된다.

(8) home.pug와 app.js 수정하기

home.pug

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Noom
    body
        header
            h1 Noom
        main
            h2 Welcome to Noom
        script(src="/public/js/app.js")

app.js 

alert("hi!");

 

(5) 실행

npm run dev

alert 아주아주 잘된다.

(6) 스타일 시트 추가(라이브러리 파일 가져다 추가)

디자인 감각을 보충하기 위해 MVP.css라는 라이브러리를 사용해보도록 한다.

MVP.css는 태그에 class나 id 같은 특성을 추가해주지 않아도 자동으로 스타일을 적용해주는 편한 라이브러리이다.

페이지에 연결하기만 하면 모든 스타일이 자동으로 완성되어 러닝커브도 없다.

뷰에 Mvp.css의 URL을 다음과 같이 추가한다.

h1은 가운데 정렬, h1과 h2 사이에는 여백이 추가된 모습.