정리하면 url과 파일 구조는 아래와 같다.

국내도서 -> book/korean

외국도서 -> book/english

회원가입 -> member/join

마이페이지 -> member/mypage

이제 코드를 작성할 차례다.

먼저 실행할 함수가 들어있는 bookController.js, memberController.js 파일부터 작성해보겠다.

페이지에 한 메시지를 띄우는 간단한 함수이다.

// bookController.js

export const korean = (req, res) => {
  res.send("Welcome to korean book!");
};

export const english = (req, res) => {
  res.send("Welcome to english book!");
};

// memberController.js

export const join = (req, res) => {
  res.send("Join our page");
};

export const myPage = (req, res) => {
  res.send("This is mypage");
};

제일 말단에 있는 파일이기 때문에 import 없이 export만 하고 있다.

이제 main.js와 controller를 중간에서 연결해주는 Router의 코드를 작성해보겠다.

// bookRouter.js

import express from "express";
import { korean, english } from "../controllers/bookController";

const bookRouter = express.Router();

bookRouter.get("/korean", korean);
bookRouter.get("/english", english);

export default bookRouter;

// memberRouter.js

import express from "express";
import { join, myPage } from "../controllers/memberController";

const memberRouter = express.Router();

memberRouter.get("/join", join);
memberRouter.get("/mypage", myPage);

export default memberRouter;

Controller에서 export 한 함수를 import 하고

expess의 Router 메서드로 main.js와 Controller의 중간다리 역할을 수행한다.

그리고 main.js에서 Router을 넘겨받을 수 있게 마지막에 Router변수를 export 해준다.

export와 exportdefault의 차이점이 궁금하다면 아래의 페이지를 참고하면 된다.

마지막으로 main.js의 코드이다.

// main.js

import express from "express";
import bookRouter from "./routers/bookRouter";
import memberRouter from "./routers/memberRouter";

const app = express();

app.use("/book", bookRouter);
app.use("/member", memberRouter);

app.listen(4000, () => console.log("server start"));

app.use 메서드에 import 한 Router를 넣어주면 완성이다.

localhost:4000/book/korean

localhost:4000/book/english

localhost:4000/member/join

localhost:4000/member/mypage

실행시켜보면 각각의 페이지에 메시지가 잘 띄워지는 걸 확인할 수 있다.

정리해보면

만약 book/korean 페이지를 만든다면

main.js는 /book을, bookRouter는 /korean을 분담하는 방식이다.

book/korean

book/english

member/join

member/mypage

이렇게 국내 도서, 외국 도서, 회원가입, 마이페이지의 url을 만들었다.

이제 Router을 이용해서 파일별로 코드를 정리할 수가 있다.

우리는 3가지 종류로 파일을 나눌 수 있다.

1. 실행할 파일 main.js

2. Router가 들어있는 파일 (book, member가 있으므로 2개가 필요할 것이다.)

3. 실행할 함수(Controller)가 들어있는 파일 (동일하게 2개가 필요하다.)

파일의 구조는 다음과 같다.

import와 export로 서로 참조하고 있는 파일은 빨간색으로 표시했다.

express로 서버를 구축하려면 각 페이지마다 url을 생성해야 한다.

하지만 무턱대고 url을 지으면 관리하기 어려워진다.

만약 책을 파는 사이트를 운영한다고 가정해보자.

이 사이트에는 국내 도서, 외국 도서, 회원가입, 마이 페이지가 있다.

이제 각 페이지에 url 주소를 지어야 한다.

korean-book

english-book

member-join

member-mypage

위처럼 지었다가는 페이지 수가 많아지면 관리하기가 힘들어질 것이다.

url을 지을 때 / (슬래시)를 사용하면 Router의 도움을 받을 수 있다.

book/korean

book/english

member/join

member/mypage

express 라이브러리의 Middleware에 대해 정리해 보았다.

미들웨어는 Client의 요청과 서버의 응답 사이에서 실행되는 함수이다.

즉 서버가 응답하기 직전에 실행된다.

express 앱을 만드는 간단한 코드이다.

import express from "express";

const app = express();

app.listen(4000, () =>
  console.log(`Server listening on port 4000`)
);

여기서 get 메서드로 사용자의 요청에 응답하는 함수를 만들 수 있다.

const home = (req, res) => {return res.send("This is Home")}

app.get('/', home)

return을 사용하는 함수를 Controller라고 부른다.

Controller가 Client의 요청에 응답하면 페이지는 로딩을 멈춘다.

그래서 하나의 페이지에는 둘 이상의 Controller가 있을 수 없다.

반대로 Middleware는 Controller가 실행되기 전에 호출되는 함수이다.

Controller 함수 전에 호출해서 사용 가능하다.

const url = (req, res, next) => {
  console.log(req.url);
  next();
};

const home = (req, res) => {return res.send("This is Home")}

app.get('/', url, home)

home 함수가 호출되기 전에 url('/')을 출력해서 보여주는 코드이다.

마지막에 next() 함수를 사용해서 다음 함수로 넘긴다.

Middleware는 횟수에 제한이 없기 때문에 

Controller 함수 전에만 넣어주면 자유롭게 사용 가능하다.

만약에 get 함수가 여러 개 있고 같은 Middleware가 필요하다면

아래 같은 코드가 된다.

const url = (req, res, next) => {
  console.log(req.url);
  next();
};

const home = (req, res) => {return res.send("This is Home")}
const mainPage = (req, res) => {return res.send("This is main page")}

app.get('/', url, home)
app.get('/mainpage', url, mainPage)

app.use를 사용하면 Middleware를 전역 변수처럼 사용할 수 있다.

app.use를 사용한 예제이다.

const url = (req, res, next) => {
  console.log(req.url);
  next();
};

const home = (req, res) => {return res.send("This is Home")}
const mainPage = (req, res) => {return res.send("This is main page")}

app.use(url)

app.get('/', home)
app.get('/mainpage', mainPage)

app.use를 사용하면 더욱 깔끔하게 코드를 작성할 수 있다.

express.js는 Node.js를 위한 웹 프레임워크이다.

오늘은 express로 서버를 돌릴 때 필요한

request와 response 개념에 대해 정리해보았다.

우선 express 사용 방법이다.

babel을 사용하면 아래와 같이 최신 자바스크립트 문법을 사용할 수 있다.

import express from "express";

const app = express()

이렇게 하면 "express" 패키지를 express라는 이름으로 import 하겠다는 뜻이 된다.

npm이 알아서 찾아주기 때문에 express의 상세주소는 적지 않아도 된다.

그리고 app 변수에 express 패키지를 실행시킨다.

클라이언트(사용자)가 브라우저에 요청(request)을 보내면

브라우저는 그 요청을 서버에 전달한다. 

서버는 그 요청에 응답(response)을 해야 하기 때문에

항상 listen을 하고 있어야 한다.

javascript의 addEventListener와 비슷하다고 보면 된다.

app.listen(4000, () =>
  console.log("app is listening port 4000")
);

app.listen 메서드의 첫번째 매개변수에는 Port 번호가 들어가고

두 번째 매개변수에는 실행할 함수가 들어간다.

여기서 포트(Port)에 대한 이해가 필요하다.

Port는 항구라는 뜻으로 네트워크 상의 문을 뜻한다.

Port는 숫자로 구성되어 있는데,

예를 들어 0 ~ 1023의 숫자는

국제 도메인 관리기구의 통제를 받고 있기 때문에

일반 사용자가 사용할 수 없다.

숫자가 높을수록 사용자가 적어서

공부가 목적이면 높은 숫자를 사용하는 것이 좋다.

app.listen 메서드가 실행되면 서버는 browser의 요청을

항상 Listening 하고 있게 된다.

Port 번호를 4000으로 설정했으므로

사용자는 http://localhost:4000 의 주소로 서버에 접근할 수 있다.

여기서 짚고 넘어가야 할 게 있다.

사용자가 브라우저를 통해 request를 보내고 서버가 응답을 하게 되면

사용자는 제자리에서 서버의 정보를 다운받는다.

사용자가 서버로 들어가는 게 아니다.

이제 사용자가 http://localhost:4000 서버에 요청을 보내면 

응답을 할 코드를 작성해야 한다.

서버 주소에 '/'를 붙이면 그 서버의 home을 뜻한다.

즉, 가장 먼저 보여줄 메인 페이지가 되는 것이다.

코드는 다음과 같다.

const Home = (req, res) => {
  console.log(`${req.method}${req.url}`); // get/
  return res.send("<h1>hahaha<h1>");
};

app.get("/", Home);

app.get 메서드로 요청받은 페이지를 보여줄 수 있다.

첫 번째 매개변수는 요청받은 주소를 의미한다.

만약 '/' 대신 'login' 이라고 적으면

사용자가 http://localhost:4000/login 의 주소로 요청을 보낼 때

응답할 수 있게 된다.

두 번째 매개변수로는 콜백 함수가 들어간다.

이 함수에는 express 라이브러리가 제공하는 매개변수를 사용할 수 있다.

바로 request와 response 그리고 next이다.

(next에 대한 정리는 다음에 하도록 하겠다.)

request에는 요청받은 정보가 들어있고

response에는 응답할 정보가 들어있다.

return을 하지 않으면 브라우저는 응답을 할 때까지 계속 로딩을 하게 되므로

반드시 return을 해야 한다.

(아니면 next() 함수로 다음 함수로 넘길 수도 있다.)

Node.js는 Ryan Dahl 가 최초 개발한 2009년부터

꾸준한 상승세를 이어오고 있는 프로그래밍 언어다.

기존의 Javascript는 브라우저 내에서만 작동했다면

Node.js는 Javascript의 언어로 브라우저 밖에서 사용할 수 있다.

Node.js를 사용하면 서버 확장이 용이하고

I/O (Input/Output) 처리가 빠르고

무엇보다 프론트 필수 언어인 Javascript로 

백엔드까지 작성할 수 있다는 어마어마한 장점이 있다.

Node.js를 설치하면 npm도 같이 설치된다.

npm은 Node.js의 패키지를 관리해주는 프로그램이다.

npm과의 상호작용으로 Node.js는 더욱 강력해진다.

Node.js를 사용하려면 package.json 파일을 이해해야 한다.

사용자가 Node.js 파일을 github와 연동하거나

Node.js 관련 모듈을 설치할 때마다 package.json 파일에 내용이 추가된다.

기본적으로 json 파일은 텍스트 파일일 뿐이라 이상하게 수정한다고 해도 당장 Node.js 파일에 문제가 생기진 않는다. 하지만 사용자가 package.json 파일을 활용해서 터미널에 명령을 내릴 수가 있다.

package.json에 대해 정리해보았다.

scripts

"scripts": {
    "start": "index.js"
  }

scripts는 Node.js 파일의 실행 방법을 정의할 수 있다.

(실행할 이름) : (파일명(경로)) 형식으로 작성하면 된다.

원래 index.js 파일을 실행시키려면 터미널에 아래와 같이 입력해야 했다. 

(참고로 나는 Linux 가상 환경을 사용한다.)

npm run index.js

하지만 scripts에서 index.js 파일을 "start"라는 이름으로 정의했으므로

이렇게 입력할 수 있다. 

npm run start

여기서 끝이 아니다. 

보통 Node.js를 babel(최신 자바스크립트를 사용할 수 있게 해주는 컴파일러)

과 같이 사용하는데 scripts에서 사용방법도 정의할 수 있다.

"scripts": {
    "start": "babel-node index.js"
  }

babel을 설치한 뒤 파일명 앞에 babel-node 라고 입력하면 

아까처럼 실행시켰을 때 babel을 간편하게 사용할 수 있다.

nodemon이라는 도구도 사용할 수 있다.

원래는 실행시킬 때마다 npm run start 라고 입력해야 했지만

nodemon을 사용하면 자바스크립트처럼 

파일을 저장하기만 해도 알아서 실행시켜준다.

nodemon을 설치한 뒤 아래와 같이 입력하면 된다.

"scripts": {
    "start": "nodemon --exec babel-node index.js"
  }

처음 한 번만 실행시켜주면 그 뒤는 저장만 해도 실행시킬 수가 있다.

dependencies / devDependencies

express 같은 라이브러리를 설치하면 dependencies에 입력되고

babel, nodemon 같은 라이브러리를 설치하면 devDependencies에

입력되는 것을 볼 수 있다.

dependencies는 런타임에도 계속 사용하는 패키지를 적어두는 곳이다.

express 같은 라이브러리가 이에 해당된다.

devDependencies는 dev가 의미하듯 개발자에게 필요한 패키지를 적어두는 곳이다.

babel 같은 컴파일러가 이에 해당된다.

dependencies, devDependencies 가 유용한 이유는 

만약 Node.js 폴더를 누군가에게 보내야 할 때 

설치한 라이브러리까지 다 보내버리면 용량 때문에 오래 걸릴 것이다.

하지만 package.json 파일에 라이브러리 정보가 기록되어 있으면

라이브러리를 제외하고 보낼 수가 있다.

폴더를 받은 사람은 터미널에 npm install 이라고만 입력하면

npm이 json 파일을 읽어서 필요한 라이브러리를 알아서 다운받아준다.