Node.js 시작하기 (3) - 웹페이지에 디자인 넣으려면

funfungun·2024년 9월 6일

지난 시간에는 단순한 문장이 아닌 웹페이지를 보내주려면 어떻게 해야하는지 알아보았습니다. 이번 시간에는 웹페이지에 디자인을 넣으려면 어떻게 해야하는지 알아봅시다.

이쯤되면 드는 생각이, 서버 코드를 수정할 때마다 cmd + C 를 눌러서 서버를 재실행 해주는 게 귀찮다는 겁니다. 이때 쓰는 것이 nodemon 입니다. 아래의 커맨드를 입력해서 설치해줍시다.
```
npm install -g nodemon
```

이후, 서버의 실행은 이전과 다르게 다음의 커맨드처럼 사용하면 됩니다.
```
nodemon server.js
```

이제 css 파일을 만들어볼건데, css나 js 같은 파일을 html 에 첨부하고 싶으면 우선 css 파일이 있는 폴더를 server.js 에 등록부터 해야합니다. public 이라는 폴더를 만들고 main.css 를 만들어줍시다.

📂 public
┣ 📄 main.css

server.js 에서 위에서 만들었던 public 이라는 폴더를 등록해줍시다.

//server.js

const express = require("express");
const app = express();

app.use(express.static(__dirname + "/public"));

app.listen(8080, () => {
  console.log("http://localhost:8080 에서 서버 실행중");
});

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

app.get("/news", (req, res) => {
  res.send("Hello News!");
});

html 파일에서도 css 파일을 등록해주고, body 태그 안에 디자인 관련된 태그들을 넣어주겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <h1>Home Page</h1>
    <div class="nav">
      <a class="logo">AppleForum</a>
      <a>Page1</a>
      <a>Page2</a>
    </div> 
  </body>
</html>

main.css 에 들어갈 내용은 디자인 설명 시간이 아니니, 아래의 코드를 복사해줍시다.

body {
  margin: 0;
}
.nav {
  display: flex;
  padding: 15px;
  align-items: center;
  background : white;
}
.nav a {
  margin-right: 10px;
}
.logo {
  font-weight: bold;
}

웹페이지 레이아웃 디자인을 쉽게 하려면 Bootstrap을 쓰면 되는데, 아래의 링크에서 사용할 수 있습니다. Read the docs -> Quick start 항목을 확인합니다.
https://getbootstrap.com/

사용법은 Quick start 의 2번 항목에 있는 head 태그의 link 태그와 body 태그의 script 태그를 복사해서 내 html 파일에 첨부하는 것입니다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

내 html 파일에 복사해 온 링크들을 첨부했다면, 이제 Bootstrap 에서 소개하는 Components 에 있는 것들 중 아무거나 가져와봅시다.
```
<button type="button" class="btn btn-primary">Primary</button>
```

전체적인 index.html 은 다음과 같이 됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="main.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <h1>Home Page</h1>
    <div class="nav">
      <a class="logo">AppleForum</a>
      <a>Page1</a>
      <a>Page2</a>
    </div>
    <button type="button" class="btn btn-primary">Primary</button>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

이제 다시 http://localhost:8080 에 접속해보면, Bootstrap 에서 가져온 Components 가 정상적으로 첨부된 것을 확인할 수 있습니다.

지금까지 웹페이지에 디자인을 넣는 방법을 알아보았습니다. 다음 시간에는 MongoDB 를 호스팅받고 셋팅해보겠습니다.

funfungun

Commercial Art

이전 포스트

Node.js 시작하기 (2) - 웹페이지 보내주려면 (라우팅)

다음 포스트

Node.js 시작하기 (3) - 웹페이지에 디자인 넣으려면

Node.js 시작하기 (2) - 웹페이지 보내주려면 (라우팅)

Node.js 시작하기 (4) - MongoDB 호스팅 받고 셋팅하기

0개의 댓글