* ES6 모듈(파일 간 코드 공유)을 사용하여 init.js에서 application(app Express Object) 호출하기 - index.js -> app.js - handleListning, listen() 삭제 (불필요한 부분) - init.js 생성 - app.js : export default app; // app.js를 누군가 파일로 import 하면 app object를 주겠다. app.use, app.get 등 설정한 것 포함 - init.js : import app from "./app" - 3분40초처럼 서버 실행 코드 작성 - package.json : "start": "nodemon --exec babel-node init.js --delay 2"
* express router - route들의 복잡함을 쪼개어 단순화 - router = 많은 route들이 담긴 파일 - router.js 생성 - import express from "express" - export const userRouter = express.Router(); // 파일로(X) 변수로(O) export
라우터를 학습하기 위해서 다음 과정을 거치는 것!
자, 우선 es6에는 모듈이 존재해서 코드 공유가 가능해 다른 파일에 작성한 코드를 불러와서(import) 쓸 수 있다는거야 무조건 쓸 수 있는건 아니고 불러올 파일이 export된 상태여야해
index.js -> app.js
이전에 작성한 index.js를 app.js로 수정하고 이 app.js파일을 모듈로 사용해보기 위해 다음처럼 수정해봐
import express from "express";
import morgan from "morgan"; // 로깅하기_모슨일을했는지 기록 어떤접속이고 어디에접속하는지알수있음
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
const app = express();
const handleHome = (req,res) => res.send("god Home!"); // 마지막 함수이기에 next키가 없다.
const handleProfile = (req,res) => res.send("What'up man");
app.use(cookieParser()); // 쿠키에 유저 정보를 저장한다. 왜냐? session을 다루기위해서
app.use(bodyParser.json()); // form을 다룰수있어야한다.
app.use(bodyParser.urlencoded({extended:true})); // form을 다룰수있어야한다.
app.use(helmet()); // 노드 보안 미들웨어
app.use(morgan("dev")); // 모든 것을 로깅(기록)하는 미들웨어
app.get("/",handleHome); // 미들웨어를 끊어보자
app.get("/profile",handleProfile);
export default app; // 누군가 내 파일을 불러 올 때 app 객체를 해준다는 의미. app 객체란 앞에서 설정한 app.use, app.get과 같은 큰 덩어리.
init.js
init.js파일 생성, app.js에서 삭제한 코드를 쓴다. app.js파일을 모듈로 불러온다. app.js파일은 init.js파일에 종속된다. 즉, 최고 대빵
import app from './app'; // app.js모듈을 불러옴
const PORT = 4000;
const handleListening = () =>
console.log(`Listening on : http://localhost:${PORT}`);
app.listen(PORT, handleListening);
package.json
그런데 이렇게 만들고 npm start를 입력하면 오류가 나타날거야. 왜냐? index.js를 파일을 찾지 못해서. 그렇기 때문에 package.json파일의 코드를 다음처럼 바꿔준다. "start": "nodemon --exec babel-node index.js --dalay 2"에서 "start": "nodemon --exec babel-node init.js --dalay 2"로 바꿔
Error Failed to save 'package.json': The content of the file is newer. Please compare your version with the file contents.('패키지'를 저장하지 못함': 파일의 내용이 더 새롭다. 버전과 파일 내용을 비교하십시오.)
Use the actions in the editor tool bar to either undo your changes or overwrite the content of the file with your changes. (편집기 도구 모음의 작업을 사용하여 변경 내용을 실행 취소하거나 변경 내용으로 파일 내용을 덮어쓰십시오.)
그런데 위와 같이 바꾼 뒤 save를 해도 또 다시 동일한 오류 발생 Failed to save 'package.json': The content of the file is newer. Please compare your version with the file contents.('패키지'를 저장하지 못함': 파일의 내용이 더 새롭다. 버전과 파일 내용을 비교하십시오.) 또한 "start": "nodemon --exec babel-node index.js"로 하든지 "start": "nodemon --exec babel-node init.js"로 하든지 npm start 입력시 [nodemon] app crashed - waiting for file changes before starting... 오류발생
Solution 모듈 설치 과정에서 나타난 "The content of the file is newer."오류때문에 발생한 것. package.json을 삭제하고 다시 npm init을 해주면 package.json이 생성되는데 dependencies를 보고 설치안된 모듈이 있으면 설치진행. 이때부터는 "The content of the file is newer." 및 "app crashed" 오류 발생하지 않는다.
router 만들기
route들의 복잡함을 쪼개주는데 사용 예를들어 /user/edit, /user/login, /user/password 등
이제 만들어보자 우선 router.js파일을 만들고 이를 export해준 뒤, app.js파일에서 router.js파일을 import해준다. 그런데 이전에서 default로 export해준 것과는 달리 특정 라우터만 export해줬다.
router.js파일은 다음과 같다.
// route랑 분리해서 함수를 만드는 방법
import express from "express";
export const userRouter = express.Router(); // 1.
userRouter.get("/", (req,res) => res.send("user index")); // localhost:4000/user 접속시 사용됨
userRouter.get("/edit", (req,res) => res.send("user edit")); // localhost:4000/user/edit
userRouter.get("/password", (req,res) => res.send("user password")); // localhost:4000/user/password
// 이 라우터들을 어떻게 사용할까?. 라우터는 여러 라우트들이 담긴 파일.
// 기존에는 app.js파일의 app.get("/",handleHome)처럼 handleHome과 같이 하나의 route를 쓰는 대신 라우터를 사용한다.
// 이를 위해 1. 처럼 현재 이 파일 router.js를 export해서 app.js파일에서 import하도록 만들자.
// 그러나 이 파일은 default로 export하지 않았다. 왜냐면, userRouter만 export하려고. 고로 이 파일을 import하려면 import { userRouter } from "./router";라고 입력해야한다.
app.js파일은 다음과 같다.
import express from "express";
import morgan from "morgan"; // 로깅하기_모슨일을했는지 기록 어떤접속이고 어디에접속하는지알수있음
import helmet from "helmet";
import cookieParser from "cookie-parser";
import bodyParser from "body-parser";
import { userRouter } from "./router"; // default로 export한게 아니므로, 특정 라우터만 export했기에 이렇게 호출
const app = express();
const handleHome = (req,res) => res.send("god Home!"); // 마지막 함수이기에 next키가 없다.
const handleProfile = (req,res) => res.send("What'up man");
app.use(cookieParser()); // 쿠키에 유저 정보를 저장한다. 왜냐? session을 다루기위해서
app.use(bodyParser.json()); // form을 다룰수있어야한다.
app.use(bodyParser.urlencoded()); // form을 다룰수있어야한다.
app.use(morgan("combined"));
app.use(helmet());
app.get("/",handleHome);
app.get("/profile",handleProfile);
app.use("/user", userRouter); //// app.use에서 use의 의미는 누군가 /user 경로에 접속하면 이 router전체를 사용하겠다는 의미이다. 그럼 어디에 사용될까? 바로 userRouter.get("/",..)에서. 왜냐하면 누군가 /user에 접속하면 router가 사용되기 때문
export default app;
