[Node.jsつけみそ]Chapter 02:MVCをつかむ仕組み
39478 ワード
完全ハードコーディング
index.htmlでhtml形式でルートページを作成し、ログインするドキュメント
<!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>`
そしてこれはappjsのsend関数にコメント(文字列として)を入れる
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("서버 가동");
});
このようにすると、文字列の修正が難しく、エラーも検索しにくい.
複雑です.
html(ビュー)を分離!
MVCモデルの使用
ビューの切断
views/homeで、Vメンバーをejsファイルに挿入
app.jsconst express = require("express");
const app = express();
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})
app.listen(3000, function () {
console.log("서버 가동");
});
画面に表示される部分はviewsで、どこに設定できますか.
この文字列(html)をどのように解釈するかを考慮すべきで、この時htmlの最も似たようなエンジンejsエンジンを使用します
次に、リクエストに対応するrender関数を用いてパスを処理する.
index.ejs
<!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>
分離ejsファイル
でも間違い! npm install ejs -s
ejsエンジンをダウンロードする必要があります.これによりejsエンジンはグループ化されます.
うまくいく
viewsが切断されている場合は、ルーティングを切断することもできます。
ルート。
トランスファ
この部分app.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})
これを分けてみなさい
まず、プロジェクトファイルにルータ/ホームを作成します.
索引jsの作成
index.js
"ues strict"
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login", (req, res) => {
res.render("home/login")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
ルーターフォルダのメインフォルダにルーティングコードを移動
サーバは常にuse strictを厳格に遵守
とりあえずこのまま分離するとappjsでこのルータが見つかりません(切断されています)
だから彼にどこにいるかを伝えるために、私たちは彼を外に送って処理します.
app.js"use strict"
//모듈
const express = require("express");
const app = express();
const PORT = 3000;
//라우팅
const home = require("./routes/home") // home이 무엇인지 경로를 지정한다.
//맵 세팅
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.use("/", home); // use -> 미들 웨어를 등록해주는 메서드, 이렇게 되면 /로 url이 왔을때 hoem = 즉 index.js로 이동할수있게 된다.
app.listen(PROT, function () {
console.log("서버 가동");
});
そして戻ってきて、RoutiのパスをHomeという変数に保存します.
このホームはappです.useを使用してミドルウェアとして登録する(ルータはミドルウェアとして登録する)ことで、うまく分離できます.하지만 라우터에서 보여주는 reder 역할까지 한다 이러한 컨트롤러 부분을 분리하자
MVCの中のCを分離します
ルータから制御チャネルに対応する部分を分離しましょう。
viewは今ルータで分けています.
ルータは、ユーザが要求を受信したときに要求を接続する部分にすぎない.
また、この要求の機能は以下のとおりである.
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl")
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login",(req, res) => {
res.render("home/logi n")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
この部分はコントローラです
router/home/home.ctrl.コントローラをjsで区切る
home.ctrl.jsconst hello = (req, res) => {
res.render("home/index") // views는 지정했기땨문
}
const login = (req, res) => {
res.render("home/login")
}
module.exports = {
hello, // 모듈은 키와 - 값인데, 키만 넣어도 자체적으로 같은 네임의 값을 넣어줌
login,
};
制御部を関数にする.
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl") //모듈을 받아온다
router.get("/", ctrl.hello); //해당 함수를 사용한다.
router.get("/login", ctrl.login); // 해당 함수를 사용한다
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
このように分離すると.
クライアントからサーバへのリクエスト→ルータ(router/homeパス)→ルータからctrlへのリクエスト→ctrlリクエストに応じてページを表示
今からサーバーを実行します!app.ヒアリングモジュール化
これも関数を使った操作なので、モジュール化して、
binフォルダを作成し、www.jsを使用してファイルを作成します.
www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, () => {
console.log("서버 가동");
});
app.listenに関連するコードを書きます.
ポートを実行するファイルからNodeを選択します.jsを実行するにはnode ./bin/www.js
<!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>`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("서버 가동");
});ビューの切断
views/homeで、Vメンバーをejsファイルに挿入
app.js
const express = require("express");
const app = express();
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})
app.listen(3000, function () {
console.log("서버 가동");
});この文字列(html)をどのように解釈するかを考慮すべきで、この時htmlの最も似たようなエンジンejsエンジンを使用します
次に、リクエストに対応するrender関数を用いてパスを処理する.
index.ejs
<!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>でも間違い! npm install ejs -s
ejsエンジンをダウンロードする必要があります.これによりejsエンジンはグループ化されます.
うまくいく
viewsが切断されている場合は、ルーティングを切断することもできます。
ルート。
トランスファ
この部分app.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})
これを分けてみなさい
まず、プロジェクトファイルにルータ/ホームを作成します.
索引jsの作成
index.js
"ues strict"
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login", (req, res) => {
res.render("home/login")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
ルーターフォルダのメインフォルダにルーティングコードを移動
サーバは常にuse strictを厳格に遵守
とりあえずこのまま分離するとappjsでこのルータが見つかりません(切断されています)
だから彼にどこにいるかを伝えるために、私たちは彼を外に送って処理します.
app.js"use strict"
//모듈
const express = require("express");
const app = express();
const PORT = 3000;
//라우팅
const home = require("./routes/home") // home이 무엇인지 경로를 지정한다.
//맵 세팅
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.use("/", home); // use -> 미들 웨어를 등록해주는 메서드, 이렇게 되면 /로 url이 왔을때 hoem = 즉 index.js로 이동할수있게 된다.
app.listen(PROT, function () {
console.log("서버 가동");
});
そして戻ってきて、RoutiのパスをHomeという変数に保存します.
このホームはappです.useを使用してミドルウェアとして登録する(ルータはミドルウェアとして登録する)ことで、うまく分離できます.하지만 라우터에서 보여주는 reder 역할까지 한다 이러한 컨트롤러 부분을 분리하자
MVCの中のCを分離します
ルータから制御チャネルに対応する部分を分離しましょう。
viewは今ルータで分けています.
ルータは、ユーザが要求を受信したときに要求を接続する部分にすぎない.
また、この要求の機能は以下のとおりである.
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl")
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login",(req, res) => {
res.render("home/logi n")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
この部分はコントローラです
router/home/home.ctrl.コントローラをjsで区切る
home.ctrl.jsconst hello = (req, res) => {
res.render("home/index") // views는 지정했기땨문
}
const login = (req, res) => {
res.render("home/login")
}
module.exports = {
hello, // 모듈은 키와 - 값인데, 키만 넣어도 자체적으로 같은 네임의 값을 넣어줌
login,
};
制御部を関数にする.
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl") //모듈을 받아온다
router.get("/", ctrl.hello); //해당 함수를 사용한다.
router.get("/login", ctrl.login); // 해당 함수를 사용한다
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
このように分離すると.
クライアントからサーバへのリクエスト→ルータ(router/homeパス)→ルータからctrlへのリクエスト→ctrlリクエストに応じてページを表示
今からサーバーを実行します!app.ヒアリングモジュール化
これも関数を使った操作なので、モジュール化して、
binフォルダを作成し、www.jsを使用してファイルを作成します.
www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, () => {
console.log("서버 가동");
});
app.listenに関連するコードを書きます.
ポートを実行するファイルからNodeを選択します.jsを実行するにはnode ./bin/www.js
npm install ejs -sapp.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
app.get("/login", (req, res) => {
res.render("home/login")
})"ues strict"
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login", (req, res) => {
res.render("home/login")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄"use strict"
//모듈
const express = require("express");
const app = express();
const PORT = 3000;
//라우팅
const home = require("./routes/home") // home이 무엇인지 경로를 지정한다.
//맵 세팅
app.set("views", "./views") // 화면에 보여지는 부분을 처리함 (화면 뷰를 관리할 파일이 저장될 곳을 지정)
app.set("view engine", "ejs") // html코드를 어떤 엔진으로 해석할껀지? , ejs는 html과 거의 똑같은 엔진이다.
app.use("/", home); // use -> 미들 웨어를 등록해주는 메서드, 이렇게 되면 /로 url이 왔을때 hoem = 즉 index.js로 이동할수있게 된다.
app.listen(PROT, function () {
console.log("서버 가동");
});하지만 라우터에서 보여주는 reder 역할까지 한다 이러한 컨트롤러 부분을 분리하자ルータから制御チャネルに対応する部分を分離しましょう。
viewは今ルータで分けています.
ルータは、ユーザが要求を受信したときに要求を接続する部分にすぎない.
また、この要求の機能は以下のとおりである.
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl")
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login",(req, res) => {
res.render("home/logi n")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
この部分はコントローラです
router/home/home.ctrl.コントローラをjsで区切る
home.ctrl.jsconst hello = (req, res) => {
res.render("home/index") // views는 지정했기땨문
}
const login = (req, res) => {
res.render("home/login")
}
module.exports = {
hello, // 모듈은 키와 - 값인데, 키만 넣어도 자체적으로 같은 네임의 값을 넣어줌
login,
};
制御部を関数にする.
router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl") //모듈을 받아온다
router.get("/", ctrl.hello); //해당 함수를 사용한다.
router.get("/login", ctrl.login); // 해당 함수를 사용한다
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄
このように分離すると.
クライアントからサーバへのリクエスト→ルータ(router/homeパス)→ルータからctrlへのリクエスト→ctrlリクエストに応じてページを表示
今からサーバーを実行します!app.ヒアリングモジュール化
これも関数を使った操作なので、モジュール化して、
binフォルダを作成し、www.jsを使用してファイルを作成します.
www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, () => {
console.log("서버 가동");
});
app.listenに関連するコードを書きます.
ポートを実行するファイルからNodeを選択します.jsを実行するにはnode ./bin/www.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl")
router.get("/", (req, res) => {
res.render("home/index") // views는 지정했기땨문
});
router.get("/login",(req, res) => {
res.render("home/logi n")
});
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄home.ctrl.js
const hello = (req, res) => {
res.render("home/index") // views는 지정했기땨문
}
const login = (req, res) => {
res.render("home/login")
}
module.exports = {
hello, // 모듈은 키와 - 값인데, 키만 넣어도 자체적으로 같은 네임의 값을 넣어줌
login,
};router/index.js
"ues strict"
const express = require("express");
const router = express.Router();
const ctrl = require("./home.ctrl") //모듈을 받아온다
router.get("/", ctrl.hello); //해당 함수를 사용한다.
router.get("/login", ctrl.login); // 해당 함수를 사용한다
//그냥 하면 메인 파일에서 index.js어디에 있는지 모른다
module.exports = router; // 외부로 보냄クライアントからサーバへのリクエスト→ルータ(router/homeパス)→ルータからctrlへのリクエスト→ctrlリクエストに応じてページを表示
今からサーバーを実行します!app.ヒアリングモジュール化
これも関数を使った操作なので、モジュール化して、
binフォルダを作成し、www.jsを使用してファイルを作成します.
www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, () => {
console.log("서버 가동");
});
app.listenに関連するコードを書きます.
ポートを実行するファイルからNodeを選択します.jsを実行するにはnode ./bin/www.js
"use strict";
const app = require("../app");
const PORT = 3000;
app.listen(PORT, () => {
console.log("서버 가동");
});node ./bin/www.jspackage.jsonで簡単に実現
package.json?
作成したソフトウェアの設定を初期化npm init -y
作成したソフトウェアの設定を初期化
npm init -y{
"name": "node", // 내 프로그램 이름
"version": "1.0.0", // 현재 내 프로그램 버전
"description": "", // 설명 -> 검색 가능
"main": "app.js", // 주요 파일
"bin": { //바이너리 = 실행파일이 들어감
"node": "www.js" // 실행파일이 들어감
},
"dependencies": { // 의존성, 내가 의존하는 파일들 (소프트웨어 사용시 영향)
"ejs": "^3.1.6",
"express": "^4.17.1"
},
"devDependencies": {}, // 개발 할때만 영향되는것 (웹팩, 린트등등)
"scripts": { // 명령어를 바꿀수 있음
"start" : "node ./bin/www.js" // 이렇게 설정하면 npn start만 해도 이렇게 인식함
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords" : [] // 검색시 사용될 키워드
"author": "", // 개발자
"license": "ISC" // 라인센스
"homepage" : "" // 자기 홈페이지 쓸수있음
"repository" : "" // 레포이름
"type" : "git"
"url"
}node_modules?
インストールされている依存モジュール、および依存モジュールを格納します.
それがなければ、ソフトウェアは実行できません.
npm installは1回でダウンロードできます⇒ package.jsonはバージョンランプを教えてくれるかもしれませんがpackage-lock.jsonの明確なバージョンと関連するモジュールのバージョンが教えてくれます.
Reference
この問題について([Node.jsつけみそ]Chapter 02:MVCをつかむ仕組み), 我々は、より多くの情報をここで見つけました https://velog.io/@dndb3599/Node.js-찍먹하기-Chapter-02-MVC-구조-잡기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol