[Node.js] 백엔드 맛보기

수업노트

[Node.js] 백엔드 맛보기 | 5강-10강 Note

HAPAGO 2022. 12. 29. 16:16

5강 로그인 화면 만들기 (하드코딩)

6강 로그인 뷰(view) 최적화 | MVC의 V(view) 분리하기
7강 라우팅 분리
8강 MVC의 C(controller)분리하기
9강 app.listen()모듈화
10강 packsge.json, package-lock.json, node_modules, npm start

로그인화면 만들기 (하드코딩부터 해보기)

app.js파일에만 코드작성

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

// 루트경로 만들어줘서 서버확인
app. get ("/", (req, res) => {
    res.send(`
    <!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>Document</title>
    </head>
    <body>
        여기는 루트입니다.
    </body>
    </html>
        `);
});

app. get ("/login", (req, res) => {
    res.send(`
<!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>Document</title>
</head>
<body>
    <input type="text" placeholder="아이디"><br>
    <input type="text" placeholder="비밀번호"><br>
    <button>로그인</button>
</body>
</html>
    `);
});
 
app.listen(3000, function () {
    console.log("서버 가동");
});

자바스크립트에서 ` (tab위에 키, 벡틱이라고 읽음)을 사용하면 편리하게 여러줄을 한꺼번에 문자열로 인식시킬 수 있다.

↑ 좋지않은 코드로부터 리팩토링해보기 위하여 위와 같은 유지보수가 어려운 코드를 실행해봄

로그인 뷰(view) 최적화 시키기 | MVC의 V분리하기

[Node.js] 백엔드 맛보기 | 로그인 뷰(view) 최적화 | MVC의 V(view) 분리하기 - YouTube

views 라는 폴더 밑에 home이라는 폴더 만들기.
index.ejs 파일과 login.ejs파일을 만들어서 홈화면과 로그인화면 분리
안에는 각각 하드코딩때 썼던 html부분을 복사하여 넣기.

위와 같이 view를 나눠 놓고

app.js파일로 돌아와서
화면 VIEW단을 처리해줄 수 있는 뷰 엔진을 셋팅하기 : 앱 세팅
render메소드로 각각의 ejs파일 경로를 문자열로 연결해줌

const express= require("express");

const app = express();

// 앱 세팅

app.set("views", "./views");

// view를 views라는 폴더로 지정해놓음

app.set("view engine", "ejs")

// "ejs"라는 엔진으로 해석(html과 비슷)

// views폴더의 ejs파일과 연결시켜줌

// render 메소드 뒤에 문자열로 경로를 넣어줌

app. get ("/", (req, res) => {

res.render("home/index");

});

app. get ("/login", (req, res) => {

res.render("home/login");

});

app.listen(3000, function () { console.log("서버 가동");

app.js파일 });

터미널에서 npm install ejs -s 로 ejs모듈 설치하고 node app.js > 로컬호스트 3000서버 들어가보면 정상 작동됨

라우팅 분리

[Node.js] 백엔드 맛보기 | 라우팅 분리 - YouTube

드래그 한 (라우팅)부분을 보기 쉽도록 다른 파일로 분리하여 간단히 연결하는 방법

routing할 부분은 routes 라는 폴더의 이름으로 넣어주는 것이 일반적이며 관례임

자바스크립트 파일 맨 상단에다가 "user strict";라고 명시 해주면 좋음

routes 폴더-home폴더 안에 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;

"use strict";

// 모듈

const express= require("express");

const app = express();

const PORT = 3000;

// 라우팅

const home = require("./routes/home");

// 앱 세팅

app.set("views", "./views");

// view를 views라는 폴더로 지정해놓음

app.set("view engine", "ejs");

// "ejs"라는 엔진으로 해석(html과 비슷)

app.use("/", home); // use -> 미들 웨어를 등록해주는 메서드.

이 부분은 일단은 외우기 (미들웨어라는 개념)

app.listen(PORT, function () {

console.log("서버 가동");

});

MVC의 C(controller)분리하기

MVC의 C(controller)분리하기

index.js 파일에 드래그한 저 부분을 컨트롤러로 빼줄 예정

routes/home 폴더 밑에 home.ctrl.js라는 파일 만듬

참고로 object에서 키를 하나만 입력해주게 되면,

키와 같은 벨류를 자동으로 저장해준다.{key:key}

{hello:hello

login:login

}; 이런식으로 알아서 된다는 것,

app.listen()모듈화 ㅣ 최적화

[Node.js] 백엔드 맛보기 | app.listen() 모듈화 | 최적화에는 끝이 없다!? - YouTube

app.listen ()모듈화하기 위하여 app.js 파일에 있는 드래그 한 아래 부분을 모듈화 해줄 예정

잘라낸 후 bin 폴더 만든 후 , 서버를 띄워줄 www.js파일을 만든다

드래그 한 부분을 잘라내서, www.js파일에 붙여주고 app을 내보내줌

const app = require("../app");

는 app함수를 ("../app"); 현재 경로의 상위 경로(..으로 접근)에 있는 app.js로 가서 가져오겠다는 뜻

포트도 불러와주기.

모듈화한 app.listen~~파일이 www.js파일에 있으니까 서버를 bin/www.js 에서 실행시켜야 함

따라서 서버를 실행시키기 위한 명령어를 터미널에 node ./bin/www.js입력하여 서버 실행하기

package.json , package-lock.json , node modules , npm start

[Node.js] 백엔드 맛보기 | package.json | package-lock.json | node_modules | npm start - YouTube

package.json파일 설치
- 서버껐다 켠 후, npm init -y : 패키지 소프트웨어의 설정들을 default값으로 초기화 함

저작자표시 비영리 변경금지 (새창열림)