7l log

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

수업노트

[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파일 경로를 문자열로 연결해줌

index.ejs 와 login.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서버 들어가보면 정상 작동됨

 

View분리하여 최적화하여 서버 실행

 

라우팅 분리

[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.use("/", home); // use -> 미들 웨어를 등록해주는 메서드.
이 부분은 일단은 외우기 (미들웨어라는 개념)
                                                                                                             app.listen(PORT, function () {
                                                                                                             console.log("서버 가동");
                                                                                                            });

 

라우팅 분리하여 간단히 실행됨

 

MVC의 C(controller)분리하기

 MVC의 C(controller)분리하기

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

index.js 파일

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

 

 

home.ctrl.js                                                               index.js

 

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

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

{hello:hello

login:login

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

 

 

컨트롤러 분리하여 서버 잘 구동되는 지 확인

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

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

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

app.js파일

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

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

app.js코드
www.js코드

 

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값으로 초기화 함 
저작자표시 비영리 변경금지 (새창열림)

'수업노트' 카테고리의 다른 글

[Node.js] 백엔드 맛보기 | 1강-4강 Note  (0) 2022.12.28
[IT 교육과정] SW021, 소프트웨어제로투원  (0) 2022.11.14
'수업노트' Related Articles more
Comments