Pug에서는 데이터를 불러와서 바로 html에 출력할 수 있다.

그러나 만약 데이터를 처리하는 부분이 길어진다면 코드가 복잡해질 것이다.

이럴 때 mixin을 사용해서 코드를 파일로 분리할 수가 있다.

단순히 코드 블록을 include 하는 것과의 차이점은 

mixin은 데이터를 다룬다는 것이다.

마치 함수를 만드는 것과 같다.

다음은 사람의 프로필을 출력하는 페이지이다.

// main.js

import express from "express";
const app = express();

const profiles = [ 	// 프로필 생성
  { name: "민석", age: "21", height: 175, job: "백수" },
  { name: "상윤", age: "21", height: 173, job: "프로게이머" },
  { name: "동희", age: "22", height: 180, job: "군인" },
];

const profile = (req, res) => { 
  return res.render("profile", { profiles }); // profile.pug에 profiles 넘겨줌
};

app.get("/profile", profile);
app.set("view engine", "pug");

app.listen(4000, () => {});

변수 profiles에 프로필을 object 형태로 저장하고

profile.pug 파일에 넘겨주었다.

이제 profile.pug에서 반복문으로 프로필을 출력한다.

// profile.pug

doctype html
html(lang="en")
    head
        title profile
    body 
        each profile in profiles 
            div 
                h3 #{profile.name}
                ul 
                    li 나이: #{profile.age}
                    li 키: #{profile.height}
                    li 직업: #{profile.job}

Pug에서는 each in 을 사용해서 배열이나 객체에 접근할 수 있다.

출력 결과

↓

여기서 mixin을 사용하면 파일로 나눌 수가 있다.

// controllProfile.pug

mixin controllProfile(profile)
    div 
        h3 #{profile.name}
        ul 
            li 나이: #{profile.age}
            li 키: #{profile.height}
            li 직업: #{profile.job}

mixin 함수명(매개변수) 형식으로 사용한다.

함수 선언과 비슷하다.

그리고 작성한 mixin 파일을 불러오면 된다.

// profile.pug

include controllProfile

doctype html
html(lang="en")
    head
        title profile
    body 
        each profile in profiles 
            +controllProfile(profile)

위에서 mixin 파일을 include 하고 

아래에서 +함수명(매개변수) 형식으로 함수를 호출하면 끝이다.

결과 화면

↓

웹사이트가 커질수록 데이터베이스도 점점 커지게 된다.

그럴 때 mixin 기능을 잘 활용하면 깔끔하게 코드를 작성할 수 있을 것이다.

만약 똑같은 부분을 모든 파일에 복붙 한다면 굉장히 귀찮을뿐더러

수정할 곳이 생긴다면 모든 파일에 들어가서 하나하나 바꿔야 된다는 불상사가 생길 것이다.

다행히도 Pug는 html 파일을 따로 나눠서 include, extends 하는 기능을 제공한다.

이 기능을 사용하면 수정할 곳이 생겨도 파일 하나만 수정하면 모든 파일에 변경이 적용된다.

include

만약 모든 페이지마다 footer를 달아야 한다면 include를 사용할 수 있다.

먼저 footer.pug 파일을 만든다.

// footer.pug

footer COPYRIGHT(C) 2021 ALL RIGHTS RESERVED.

이제 다른 Pug 파일에서 footer.pug의 경로를 include 하면 된다.

// hello.pug

doctype html
html(lang="en")
    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
    body 
        h1 hello
    
    include footer1.pug

실행해보면 위의 결과가 나오는 것을 확인할 수 있다.

만약 footer의 내용을 수정하려면 footer.pug만 바꿔주면 된다.

extends

html 파일에는 doctype부터 html, head, body까지 겹치는 부분이 정말 많다.

extends를 사용하면 그런 불편함을 줄일 수 있다.

기본적인 틀을 가진 한 파일만 만들면 다른 파일에선 extends 기능으로 불러올 수 있다.

// base.pug

doctype html
html(lang="en")
    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
    body 
        header
        	block header	// block을 지정
        main
        	block content
    
    include footer1.pug

기본적인 틀 외에 각 페이지마다 다른 곳은 위처럼 block을 이름과 함께 지정할 수 있다.

이제 다른 파일에서 base.pug를 extends 하면 된다.

// hello.pug

extends numList.pug 

block header 
    h1 페이지에 오신 걸 환영합니다

block content 
    h2 Hello

base.pug에서 지정한 block의 이름을 적고 그 아래에 내용을 적으면 된다.

이렇게 include와 extends를 활용하면

똑같이 사용하는 내용을 한 파일에서 다룰 수 있다는 엄청난 장점이 있다.

Pug를 사용한다면 이 기능은 필수인 것 같다

1. 돈 많이 버는 회사는 많다. 중요한 건 성장성이다. 성장할 만한 회사를 찾아라.

2. 이 회사가 앞으로 5년, 10년 뒤에 어떻게 하면 2배 3배가 돼있을지 상상해라.

재무제표 보는 법

매출액

기업이 일정기간 판매한 총량을 뜻한다

영업이익 

매출액에서  매출원가, 판매비, 관리비를 뺀 값이다.

여기에는 세금, 마케팅 비용 등이 포함된다.

당기순이익

그 외에 기업의 활동과는 무관하게 발생하는 손익을 모두 합친 값이다.

만약 홍수 때문에 공장이 물에 잠겨서 손실이 발생하면 이에 해당된다.

당기순이익은 말 그대로 진짜 순이익이다.

부채비율

기업의 총 자산 중에 빌린 돈의 비율이다.

업종마다 차이가 있지만 200%가 넘어가면 위험하다고 보면 된다.

오늘 처음 주식을 시작했다.

주식으로 크게 성공할 생각은 없고 (물론 그러면 좋겠지만)

그냥 어느 정도는 알아두면 좋겠다고 생각해서 공부해보려고 한다.

하루하루 배운 것들을 정리해두면 좋을 것 같아서 글을 적고 있다.

일단 주식 계좌를 만들었다.

회사마다 이벤트가 다 달라서 어디서 만들지 고민에 빠져있다가

나무 증권(NH)에 초보자에게 좋은 기능이 있다는 지인의 제보에

결국 나무 증권을 선택했다.

주식 계좌 종류

몰랐는데 주식 계좌가 종류별로 나눠져 있었다.

알아본 바론 이렇다.

CMA

은행에서의 수시입출금용 통장이라고 하며

주식거래는 불가능하다고 한다.

장점으로는 돈을 넣어놨을 때

은행보다 살짝 높은 금리의 이자를 받을 수 있다고 한다.

ISA

배당소득 과세에 대한 혜택이 있다고 한다.

장기거래용이라고 하는데 자세한 건 모르겠다.

종합 매매계좌

가장 일반적인 계좌라고 한다.

매매 차익을 얻고 싶다면 이걸 개설하면 된다.

나는 위의 3종류를 개설했다.

아마 종합 매매계좌를 가장 많이 사용할 것 같다.

일단 만원만 충전해서 모의투자를 해볼 생각이다.

만원으로 백만 원까지만 불려보겠다.

Node.js의 res.send를 사용하면 간단하게 페이지에 문자를 띄울 수 있다.

하지만 페이지가 복잡해지고 자바스크립트 문법까지 들어간다면 한계에 부딪힐 것이다.

Pug 라이브러리를 사용하면 간편하게 html을 작성할 수 있고

기본적인 자바스크립트 문법도 같은 파일에 작성할 수 있다.

먼저 Pug를 설치하는 방법이다.

터미널의 아래의 코드를 입력한다.

npm install pug

Pug와 Express를 연동하려면 Express의 기본값 세팅을 바꿔줘야 한다.

app.set 메서드로 view engine을 Pug로 변경한다.

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

위의 공식문서를 보면 view와 관련된 파일은 views 폴더 안에 넣어야 한다고 나와있다.

views라는 폴더를 만들고 그 안에 main.pug와 같은 형식의 파일을 만든다.

만약에 views 폴더가 제일 위에 있지 않고 다른 폴더에 감싸 져 있다면 

한 가지 더 설정을 해주어야 한다.

( project/views O

  project/src/views X )

만약 위와 같이 scr폴더 안에 views 폴더를 넣고 싶다면 app.set으로 설정을 변경한다.

app.set("views", process.cwd() + "/src/views");

"views"의 기본값은 process.cwd() + /'views'이다.

Pug의 편리한 점은 html 코드에서 태그를 닫지 않아도 된다는 점이다.

1에서 5까지의 list를 화면에 출력하는 예제이다.

// numList.pug

doctype html
html(lang="ko")
    head
        title Document
    body 
        ul
            li 1
            li 2
            li 3
            li 4
            li 5

Pug는 Python처럼 탭으로 각 태그를 구분한다. 

이제 위의 numList.pug 파일을 main.js 파일에 연결한다.

// main.js

import express from "express";
const app = express();

const num = (req, res) => {
  return res.render("numList");
};

app.get("/num", num);
app.set("view engine", "pug");


app.listen(4000, () => {});

res.render 메서드에 pug 파일의 이름을 넣으면 pug의 내용이 화면에 출력된다.

1~5를 변수로 만드는 것도 가능하다.

// main.js

import express from "express";

const app = express();

const num = (req, res) => {
  const count = 1;
  return res.render("numList", { count: count });
};

app.get("/num", num);
app.set("view engine", "pug");


app.listen(4000, () => {});

count 변수를 선언하고 object 형태로 numList.pug 파일에 넘겨준다.

// numList.pug

doctype html
html(lang="ko")
    head
        title Document
    body 
        ul
            li #{count++}
            li #{count++}
            li #{count++}
            li #{count++}
            li #{count++}

위에서 넘겨받은 count 변수를 #{ } 안에서 사용할 수 있다.

실행해보면 같은 결과가 나타나는 것을 확인할 수 있다.

정리하면 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

모듈을 사용하다 보면 코드가 많아져서 가독성이 떨어질 수가 있다.

그럴 때 코드를 폴더와 파일로 나누면 가독성과 유지보수가 편리해진다.

대신 import와 export로 파일과 파일을 연결시켜야 한다.

오늘은 import와 export에 대해 알아보겠다.

어떤 파일을 import 하려면 대상 파일에 export 선언이 되어있어야 한다.

우리가 흔히 사용하는 express 라이브러리에도 export 선언이 되어있다.

export 하는 방법은 두 가지가 있다.

바로 export와 export default이다.

export를 사용한 예제이다.

// export.js

export const hi = () => {
  console.log("hi");
};

export const hello = () => {
  console.log("hello");
};

export.js 파일에 hi와 hello를 출력하는 함수 두 개를 만들었다.

이렇게 함수가 두 개 이상일 때에는 함수에 export를 붙여서 사용해야 한다.

두 개의 함수를 import 하는 방법이다.

import { hi, hello } from "./export";

hi();
hello();

import 자리에 함수명을 적고 from 자리에 export 파일의 상대 경로를 적어준다.

두 파일이 같은 자리에 있기 때문에 ./ 를 사용했다.

확장자명은 생략해도 된다.

실행해보면 hi와 hello가 출력되는 것을 확인할 수 있다.

export default를 사용한 예제이다.

// export.js

const hi = () => {
  console.log("hi");
};

export default hi;

export default는 export 할 함수가 하나밖에 없을 때 사용한다.

하나의 파일에 export default를  한번 사용할 수 있으므로

가독성이 높아진다는 장점이 있다.

export default로 내보낸 함수를 import 하는 방법이다.

import hi from "./export";

hi();

default를 붙여서 모듈을 내보내면 import 할 때 중괄호를 생략할 수 있다.

그리고 내보낸 함수가 하나밖에 없어서

import 자리에 굳이 그 함수의 이름을 적지 않아도 된다.

hi 대신 bye라고 적어도 상관없다.

import bye from "./export";

bye();

실행해보면 hi가 출력되는 것을 확인할 수 있다.

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를 사용하면 더욱 깔끔하게 코드를 작성할 수 있다.