[#03] Recap

지금 껏 한 것을 정리해본다.

---

1. 개발환경 구축

Nodemon을 설정하기 위해 nodemon.json을 생성했다.

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

nodemon은 프로젝트를 살피고 변경사항이 있을 시 서버를 재실행 해주는 프로그램이다.
public 안의 코드 변화가 있을 때는 반응하지 않도록 설정했다. 서버를 재시작하는 대신 babel-node를 실행하게 된다.

Babel은 작성한 코드가 일반 NodeJS 코드로 컴파일 해주는데 그 작업을 src/server.js에서 해준다.

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

---

server.js 파일에서는 express를 불러와 express를 통해 어플리케이션을 구성한다.

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

// pug로 view engine을 설정, express에 template이 어디 있는지 지정
app.set('view engine', 'pug');
app.set('views', __dirname + '/views');

// public url을 생성해서 유저에게 파일을 공유
app.use('/public', express.static(__dirname + '/public'));

// home.pug를 render 해주는 router handler를 만든다.
app.get('/', (req, res) => res.render('home')); // router handler, 현재 프로젝트에서는 home url만 쓸 것이다.
app.get('/*', (req, res) => res.redirect('/')); // user가 어떤 url로 이동하던지 home으로 돌려보낸다.

const handleListen = () => console.log(`Listening in http://localhost:3000/`);
app.listen(3000, handleListen);

1. view engine을 pug로 설정하고, veiws 디렉토리가 설정된다. ( '/views' );
2. public 파일들은 front-end 에서 구동되는 코드이다. public 폴더를 user에게 공개해준다.
3. home.pug를 render 해주는 router handler를 만든다.

doctype html
html(lang='ko')
  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 Soom
    link(rel="stylesheet" href="https://unpkg.com/mvp.css")
  body
    header 
      h1 Zoom
    main
      h2 Welcome to Zoom
    script(src="/public/js/app.js")

CSS 작업을 하기 전 기본적으로 조금 이쁘게 보이게 하기 위해 MVP CSS(https://unpkg.com/mvp.css)를 활용했다.