간단하게 Node와 bootStrap으로 정적 FE 웹 사이트 만들기

사전 설정

Node.js — Download Node.js®

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

Express 설치 : Express는 Node.js를 위한 가벼운 웹 프레임워크다. 이를 설치하기 위해 다음 명령을 실행한다.

npm install express

server.js는 다음과 같이 설정했다.

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

app.get('/', (req, res) => {
  res.send('Hello World!');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Bootstrap을 사용하여 웹 페이지 만들기

1. Bootstrap 추가하기

Bootstrap은 CDN(Content Delivery Network)을 통해 쉽게 추가할 수 있다.
<head> 태그 안에 다음 링크를 추가하면 Bootstrap CSS와 JavaScript를 로드할 수 있다.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. HTML 파일 생성하기

프로젝트 디렉토리 내에 public 폴더를 생성하고, 그 안에 index.html 파일을 만들자.

다음과 같이 기본적인 HTML과 Bootstrap 컴포넌트를 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Bootstrap Page</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to My Bootstrap Page</h1>
    <p>This is a simple paragraph.</p>
    <button type="button" class="btn btn-primary">Click Me!</button>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

3. Express 설정

이제 이것을 express에서 읽어들이도록 하자.

public에 저장했던 코드를 정적 파일로 제공할 것이다.

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

// 정적 파일 제공 설정
app.use(express.static('public'));

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

간단한 부트스트랩 페이지가 만들어졌다!

물론 단순한 css의 집합일 수도 있겠지만, 아무래도 FE쪽 지식이 부족한 나에게 큰 도움이 되는 것은 확실..

https://startbootstrap.com/theme/clean-blog

Start Bootstrap

startbootstrap.com

조금 더 확장해서, 이것을 받아보자.

무료 테마를 다운로드 후, public에 넣어 보겠다.

깔끔하게 잘 적용되는 모습.

다만, public의 폴더로 압축을 해제했기에, index.html을 찾을 수 있도록 server.js에서 경로를 다시 지정해줄 것.

// 정적 파일 제공 설정
app.use(express.static('public/startbootstrap-clean-blog-gh-pages'));

Bootstrap 테마 적용 방법

1. 테마 선택

BootstrapMade 또는 Start Bootstrap와 같은 사이트에서 다양한 테마를 찾아볼 수 있다.
테마를 선택했다면, 다운로드 받아서 프로젝트의 public 폴더 내에 압축을 풀기만 하면 된다.

https://bootstrapmade.com/

Bootstrap Templates | Premium & Free Download | BootstrapMade

Top Quality Bootstrap TemplatesDiscover an exceptional collection of Bootstrap Templates & Themes crafted with finesse. Explore our range of free and premium templates, designed to elevate your web presence. QuickStart is a Bootstrap template built to powe

bootstrapmade.com

2. HTML 파일 수정

대부분의 테마는 이미 index.html 같은 메인 HTML 파일을 포함하고 있다. 이 파일을 public 디렉토리로 이동시키고 필요에 따라 내용을 수정할 것.
HTML 파일에서 CSS, JavaScript 파일 경로가 올바르게 설정되었는지 확인하자. 상대 경로가 아니라 절대 경로로 설정되어 있을 수도 있으므로, 프로젝트 구조에 맞게 경로를 조정해야 할 수 있다.

초보자의 개발일지