감으로 코딩하던 내가 알고 코딩할 때까지

·nodemon 모듈을 이용하면 파일을 변경할 때마다 서버를 끄고 키는 과정 없이 자동으로 갱신해줌

1) nodemon 설치: 터미널에 npm install nodemon -g

 -"-g" 명령어로 전역 설치 하기

2) "npm 파일경로" 대신 "nodemon 파일경로"명령어로 서버 가동

 -서버를 한 번 가동한 뒤에는 파일 내용 변경후 저장하기만 하면 자동을 ㅗ서버가 껏다켜지며 해당 내용이 적용됨

3) package.json파일에서 npm start 명령어에 저장해둔 명령을 "npm 파일경로"에서 "nodemon 파일경로"로 바꾸면 npm start 명령어를 사용해 nodemon으로 서버를 여는 기능 구현 가능

·"localhost:3000/login"으로 서버에 접근했을 때 보여지는 화면인 login.ejs파일과 화면의 동작을 담당하는 JS파일 연결

1) src > public > js > home 폴더를 생성한 후 login.js라는 이름으로 자바스크립트 파일 만들기

2) 자바스크립트 파일에는 간단하게 아래와 같은 코드 작성

// login.js
"use strict";

console.log("Hello");
console.log("bye");

3) login.ejs파일에는 자바스크립트를 연결시킬 코드 작성

// login.ejs
// 아무곳에나 코드 삽입하면 됨
<script src="/js/home/login.js"></script>

4) app.js에도 js폴더로 접근할 수 있도록 해주는 미들웨어(app.use) 생성

// app.js

app.use(express.static(`${__dirname}/src/public`))
// __dirname은 현재 파일이 있는 디렉토리 이름
// 해당 경로(app/src/public 폴더)를 정적 경로로 추가해주겠다는 의미

5) 서버 가동 후 localhost:3000/login에 접속하면 다음과 같이 자바스크립트 파일의 동작이 실행됨

·서버를 띄워주는 app.listen을 모듈화

1) 새로 bin 폴더를 만들어 폴더 안에 www.js라는 파일 생성

2) www.js 파일에 app.listen 부분 붙여넣기

// www.js
"use strict";

const app = require("../app.js"); // bin의 상위폴더('../')에서 app.js에 접근

app.listen(3000, () => {
  console.log('서버 가동');
});

3) app.js에서는 app.listen부분은 지우고 대신 www.js로 app객체를 넘겨줄 수 있도록 코드 작성(마지막 줄 수정)

// app.js
"use stirct"

// 모듈
const express = require('express'); // require를 사용하여 express라는 모듈 다운
const app = express(); // app이라는 변수에 express를 실행시켜서 넣어주기
const PORT = 3000;

// 라우팅
const home = require('./routes/home'); // 괄호 안의 경로에 있는 파일(index.js)을 읽어달라는 요청


// View 분리
app.set('views', './views'); // 화면 뷰를 저장하고 관리해줄 파일을 ./views로 지정
app.set('view engine', 'ejs'); // views 폴더 안에 생성될 html코드들을 어떤 엔진으로 해석할지 결정('ejs', 그냥 html이랑 비슷)

app.use('/', home); // use는 미들웨어를 등록해주는 메소드, index.js의 라우터를 받아옴

// 모듈화를 위해 내보낸 app.listen 함수가 www.js 파일에서도 app이라는 객체를 인식할 수 있도록 내보내기
module.exports = app;

 - app.listen에 포트 번호를 PORT객체를 통해 줬다면 www.js로 넘겨줬을 때 PORT를 숫자로 직접 바꿔야 함

3) 서버가동은 www.js파일을 통해 시켜야하므로 터미널에 'node ./bin/www.js'를 입력하여 실행

  -실행 명령어 단축키로 하는 방법

   (1) package.json파일 에서 "scripts":{} 안에 지정

// 원래 test만 있던 scripts에
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},
  
// 명령어 단축키 추가(start만 치면 node .bin/www.js 명령어가 실행됨
"scripts": {
  "start": "node ./bin/www.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

   (2) 터미널에 'npm start' 명령어 입력시 서버 가동됨

·분리한 라우팅에서 컨트롤러를 다시 분리

 -라우터는 해당 경로에 들어왔을 때 사용자의 요청을 연결해주는 부분

 -실제로 요청에 해당하는 기능을 수행하는 부분이 Controller(res.render() 부분)

 -Controller는 MVC 설계 패턴 중 C에 해당

1) 라우팅을 분리해놓은 폴더 안에 컨트롤을 분리할 파일을 새로 생성

2) 새로 만든 파일에 원래 라우터에서 기능을 수행하던 함수를 잘라내어 붙여넣고, 라우터에서 함수부분에는 임의의 함수 이름을 대신 작성

// index.js
"use strict";

const express = require("express");
const router = express.Router();

// home.ctrl.js에서 넘겨준 오브젝트 받기
const ctrl = require("./home.ctrl");

router.get('/', ctrl.hello); // hello는 "/" 경로로 접속했을 때 수행할 기능의 함수 이름
router.get('/login', ctrl.login); // login는 "/login" 경로로 접속했을 때 수행할 기능의 함수 이름

module.exports = router;

// home.ctrl.js
"use strict";

const hello = (req, res) => {
  res.render("home/index");
});

const login = (req,res) => {
    res.render('home/login');
};

// index.js에서 사용할 수 있도록 오브젝트로 빼주기
// 오브젝트는 원래 key와 value로 되어있는 구조인데 아래와 같이 key 하나만 입력해주면 자체적으로 key와 같은 value를 넣어둠
module.exports = {
  hello, // hello:hello, 과 같음
  login, // login:login, 과 같음
}

·라우팅은 사용자의 요청 경로를 보고 이 요청을 처리할 수 있는 곳으로 기능을 전달

 -app.get함수로 각 경로로의 request에 따른 response를 출력하는 것이 라우터의 역할

 -라우터는 작업 폴더 > routes > home 폴더를 생성하여 그 안에 js파일을 따로 만들어서 관리

 1) 작업 폴더 > routes > home > index.js 파일에 라우팅하는 부분을 잘라내어 붙여넣기

 2) 새로 만든 index.js 파일에는 app이 변수로 지정되어 있지 않으므로 새로 변수 router를 지정해주고 함수를 받는 객체 이름도 router로 변경

// index.js
"use strict";

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.render("home/index");
});

router.get("/login", (req, res) => {
  res.render("home/login");
});

// 외부파일(메인 파일인 app.js)에서 사용할 수 있도록 내보내기
module.exports = router;

 3) app.js 파일에서는 빠진 라우터 부분 대신 라우팅 파일인 index.js를 받아올 수 있는 코드 작성

// app.js
"use strict";

// 모듈
const express = require("express");
const app = express();
const PORT = 3000;

// 라우팅
const home = require("./routes/home"); // 괄호 안의 경로에 있는 파일(index.js)을 읽어달라는 요청

// view 분리
app.set('views', './views');
app.set('view engines', 'ejs');

// 라우팅 분리
app.use("/", home); // use는 미들웨어를 등록해주는 메소드, index.js의 라우터를 받아옴

app.listen(PORT () => {
  console.log('서버 가동');
});

 4) 주소창에 'localhost:3000'과 'localhost:3000/login' 입력하여 서버 확인

·MVC는 사용자 인터페이스나 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴

 -M(Model): 데이터와 비즈니스 로직을 관리

 -V(View): 레이아웃과 화면을 처리

 -C(Controller): 명령을 모델과 뷰 부분으로 라우팅, 앱 사용자의 입력에 대한 응답으로 모델과 뷰를 업데이트

·app.js에서 '여기는 루트입니다.'화면과 로그인 화면을 작성한 부분을 따로 분리해주기

 1) app.set 설정

// 화면 뷰를 저장하고 관리해줄 파일을 ./views로 지정
app.set('views', './views');

// views 폴더 안에 생성될 html코드들을 어떤 엔진으로 해석할지 결정('ejs', 그냥 html이랑 비슷)
app.set('view engine', 'ejs');

 2) res.send 내에 적어놨던 html 코드를 ejs 파일로 각각 분리

   -작업하던 폴더 > views > home 폴더를 생성

   -home 폴더 내에 index.ejs, login.ejs 파일을 생성하여 각각 '이곳은 루트입니다.'와 로그인화면의 html 코드를 붙여넣기

 3) app.js파일에서 원래 res.send로 넣어놨던 html코드는 지우고 ejs파일을 받아줄 코드 작성

app.get('/',(req, res)=>{
    // ejs파일이 이 파일 내에 들어왔을 때 이동할 곳 지정
    // app.set에서 views 파일은 지정해놓았으므로 views 폴더 내의 경로만 지정하면 됨
    res.render('home/index');
});

app.get('/login', (req,res)=>{
    res.render('home/login');
});

 4) 서버 가동 시 ejs 모듈을 찾을 수 없다는 에러가 뜨므로 ejs 모듈 설치

   -모듈 설치는 터미널에 npm install ejs -s

 5) 결과: 각 루트 별 화면의 html코드를 분리하였고 서버 화면은 원래와 똑같이 구현

다음 글에서 만든 로그인 화면 html파일을 express로 가동시키는 서버에 띄우기

"use strict"

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

app.get('/', (req, res) => {
  // ``안에 html 코드 내용을 그대로 복붙('' 또는 ""가 아닌 ``사용해야 html 코드 내의 ''와 ""가 인식되어 오류 안남
  res.send(`
    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8">
        <title>로그인</title>
        <style>
          ul {list-style:none;}
        </style>
      </head>
      <body>
        '여기는 루트입니다.'
      </body>
    </html>
  `);
});

app.get('login', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html lang='ko'>
      <head>
        <meta charset='UTF-8'>
        <title>로그인</title>
      </head>
      <body>
        <form id="login">
          <ul>
            <li>
              <label for="id">아이디</label>
              <input type="text" id="id">
            </li>
            <li>
              <label for="pw">비밀번호</label>
              <input type="password" id="pw">
            </li>
            <input type="submit" value="로그인">
            <button onclick="location.href='sign.html'">회원가입</button>
          </ul>
        </form>
      </body>
      </head>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('서버 가동');
});

서버를 가동시키고 주소창에 localhost:3000/login을 입력하여 /login 루트를 찾아가면 html로 작성한 로그인 화면이 뜸

express 서버 프레임워크를 사용하지 않고 개발하는 방법

express와 같이 자바스크립트 파일에서 작성

const http = require('http');

// http에서는 createServer 함수에 req, res를 파라미터로 받는 콜백함수를 생성
const app = createServer((req, res) => {
  console.log(req.url); // 서버에서 접속하는 경로를 console.log에 출력
});

app.listen(3001, () => {
  console.log('http로 가동된 서버');
});

  - 터미널에 'node app.js' 입력하여 서버 가동

   - 주소창에 'localhost:3001'을 입력하면 위에 로딩되는 것이 뜨면 서버가 열린 것

  - req.url을 console.log에 출력하도록 했으므로 처음 localhost에 들어가면 가장 첫 루트인 '/'가 console에 출력됨

  - 이후 'localhost:3001/login'을 주소창에 입력하면 /login의 경로 출력

  - req.url이 서버의 각 루트 경로를 가져오는 것을 이용하여 각 경로의 화면을 설정할 수 있음

// console.log(req.url); 대신 아래의 코드 입력

// 브라우저에서 한글(utf-8)로 응답해야한다고 알려주기
res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});

if (req.url === '/'){
  res.end('이곳은 루트입니다.'); // express에서는 res.send()였지만 http에서는 res.end()로 사용
}
else if (req.url === '/login'){
  res.end('이곳은 로그인 화면입니다.');
}

  - express와 다르게 if문으로 각 경로에 대해 응답을 작성해야하므로 지저분해짐

  - 따라서 express를 쓰는 것이 훨씬 편리