게시판 - 프로젝트 생성 및 navbar

소스코드

이 게시물에는 코드작성이 포함되어 있습니다. 소스코드를 받으신 후 진행해 주세요. MEAN Stack/개발 환경 구축에서 설명된 프로그램들(git, npm, atom editor)이 있어야 아래의 명령어들을 실행할 수 있습니다.

git clone https://github.com/a-mean-blogger/board.git
cd board
git reset --hard 1cd61b1
npm install
atom .

- Github에서 소스코드 보기: https://github.com/a-mean-blogger/board/tree/1cd61b1613c048945429b51badd28846c4ad28e8


/*
 * 이 강의는 2016년 처음 작성되었으나 2020년에 모든 코드와 강의가 update되었습니다.
 * 2016년 게시물은 Archive되었습니다. -> 2016년 버전 보기
 */

지금까지 hello world 강의, 주소록 만들기 강의를 통해서 CRUD사이트를 만들고 DB에 데이터를 저장하는 법에 대해 알아보았습니다. 게시판 만들기 강의에서는 게시물-작성자 와 같은 관계를 만드는 법과, 로그인, 회원가입같은 좀 더 실용적인 기능들에 대해서 배워봅시다.

이번 포스팅에서는 새 프로젝트를 생성하고 아래와 같이 navbar 및 기본 static 페이지들을 만들어 봅시다. 주소록 만들기 강의 때와 거의 같으므로 복습이라고 생각하고 봐주세요. 새로운 부분은 웹폰트를 사용하는 것 뿐인데요, 온라인상의 폰트를 가져와서 내 웹사이트에서 사용하는 것입니다.

기본 페이지는 welcome, about 두개입니다. 게시판에 관련된 기능들은 다음 강의부터 본격적으로 만듭니다.

프로젝트 생성

프로젝트 생성에 앞서, 해당 프로젝트에서 사용할 DB를 생성하고 환경변수에 등록해 줍시다. 주소록 강의와 마찬가지로 "MONGO_DB"라는 환경변수에 DB Connection String을 담았습니다.

프로젝트 폴더를 만드는데, 이번에는 npm init 명령어에 --yes 옵션을 넣어서 사용해 봅시다.

$ npm init --yes

npm init에서 모든 항목을 skip하고 기본값으로만 구성된 package.json을 만드는 옵션입니다.

atom 에디터를 실행합시다.

$ atom .

폴더구조


Package 설치

ejs, express, mongoose, body-parser method-override package들을 설치해 줍시다.

$ npm install --save ejs express mongoose body-parser method-override

코드 - js

// index.js

var express = require('express');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var app = express();

// DB setting
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useCreateIndex', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect(process.env.MONGO_DB);
var db = mongoose.connection;
db.once('open', function(){
  console.log('DB connected');
});
db.on('error', function(err){
  console.log('DB ERROR : ', err);
});

// Other settings
app.set('view engine', 'ejs');
app.use(express.static(__dirname+'/public'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:true}));
app.use(methodOverride('_method'));

// Routes
app.use('/', require('./routes/home'));

// Port setting
var port = 3000;
app.listen(port, function(){
  console.log('server on! http://localhost:'+port);
});
// routes/home.js

var express = require('express');
var router = express.Router();

// Home
router.get('/', function(req, res){
  res.render('home/welcome');
});
router.get('/about', function(req, res){
  res.render('home/about');
});

module.exports = router;

코드를 한번 쭉 보시면서, 전부 이해가 되는지 한번 확인해 보세요. 주소록 만들기 강의에서 모두 설명된 코드들만 사용되었습니다. 만약 이해가 안되는 부분이 있다면 주소록 만들기 코드를 다시 한번 복습해 주세요.

코드 - ejs

<!-- views/partials/head.ejs -->

<meta name="viewport" content="width=device-width,initial-scale=1">

<!-- jquery & bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- web font --> <!-- 1 -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- my css -->
<link rel="stylesheet" href="/css/master.css">

<title>My Website</title>

1. 웹폰트 부분입니다. 여기서 잠시, 구글 웹폰트 적용방법을 알아봅시다. 구글에서 제공하는 웹폰트는 https://fonts.google.com 에서 검색할 수 있습니다.

검색창에서 폰트이름으로 검색을 할 수도 있고, 아니면 리스트에서 마음에 드는 폰트를 찾아서 사용할 수도 있습니다. 저는 위 스크린샷 우측 하단에 보이는 open sans 라는 폰트를 사용하였습니다.

폰트에 대한 상세한 설명이 나옵니다. 해당 폰트를 사용하고 싶으면 우측 상단에 'SELECT THIS FONT' 를 눌러줍니다.

그러면 우측 하단에 '1 Family Selected'라고 검은 박스가 생깁니다. 여기서 family는 font family를 뜻합니다. 하나의 폰트라도 그안에 폰트 두께라든가, 기울기라든가 등등의 font들을 포함하고 있으므로 font family라고 부릅니다. '1 Family Selected' 박스를 누릅니다.

Embed Font 항목은 font를 어떻게 내 프로젝트에 가져오는지를 설명하고 있습니다. 회색 박스 안의 내용을 html head에 넣으라는 설명입니다. head.ejs의 1번 내용이 바로 여기서 가져온 코드입니다. Specify in CSS 항목은 css파일에서 어떻게 해당 폰트를 사용할지를 알려줍니다.

<!-- views/partials/nav.ejs -->

<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
  <div class="container">
    <div class="navbar-brand">My Website</div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item"><a href="/" class="nav-link">Home</a></li>
        <li class="nav-item"><a href="/about" class="nav-link">About</a></li>
      </ul>
    </div>
  </div>
</nav>

네비게이션 메뉴는 주소록 만들기 예제와 구조가 같습니다.

<!-- views/home/welcome.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <div class="jumbotron">
        <h1>My Website</h1>
        <P>제 웹사이트를 방문해 주셔서 감사합니다!</p>
      </div>

    </div>
  </body>
</html>

jumbotron이라는 class를 사용하였는데, 이는 bootstrap에서 제공하는 컴포넌트입니다. https://getbootstrap.com/docs/4.4/components/jumbotron 에서 자세한 설명을 볼 수 있습니다. 이처럼 bootstrap 사이트에서 맘에 드는 component가 있으면 그냥 가져다가 쓰시면 됩니다.

<!-- views/home/about.ejs -->

<!DOCTYPE html>
<html>
  <head>
    <%- include('../partials/head') %>
  </head>
  <body>
    <%- include('../partials/nav') %>

    <div class="container mb-3">

      <h2 class="mb-3">About</h2>

      <P>이 사이트는 <a href="http://a-mean-blog.com/ko/blog/Node-JS-첫걸음/게시판-만들기">http://a-mean-blog.com/ko/blog/Node-JS-첫걸음/게시판-만들기</a>에서 작성되었습니다!</p>

    </div>
  </body>
</html>

코드 - css

/* public/css/master.css */

body {
  font-family: 'Open Sans', sans-serif;
}

'Open Sans' 폰트를 body에대가 적용해 주었습니다. 이렇게 body에 css를 설정하면 전체 사이트에 적용됩니다.

실행결과

nodemon으로 웹사이트를 실행합니다.

$ nodemon

http://localhost:3000 에 접속하면 jumbotron으로 만들어진 welcome 화면이 보입니다. 주소록 예제와 비교해서 폰트가 달라진 것이 보이나요? 폰트하나만 바꿔도 사이트의 전반적인 느낌이 달라집니다.

about page입니다.

모바일용 화면도 확인해 봅시다

작은 화면에서는 햄버거 버튼이 생기고, 이 버튼을 누르면 메뉴가 열립니다.

마치며..

이번 강의에서는 본격적으로 게시판 개발에 들어가기 기본사이트 구조를 만들었습니다. Node.JS + Express로 웹사이트를 만들면 항상 위와같은 세팅을 우선적으로 하고 진짜 개발을 하게 되므로 여러분들이 사이트를 만들때도 이 코드를 가져가서 사용하셔도 됩니다.

댓글

C
Ch Park 2020.03.15
감사합니다
I
Ian H 2020.03.16
@Ch Park,
감사합니다^^
댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP