간단하게 Node와 bootStrap으로 정적 FE 웹 사이트 만들기
사전 설정
https://nodejs.org/en/download/current
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 폴더 내에 압축을 풀기만 하면 된다.
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 파일 경로가 올바르게 설정되었는지 확인하자. 상대 경로가 아니라 절대 경로로 설정되어 있을 수도 있으므로, 프로젝트 구조에 맞게 경로를 조정해야 할 수 있다.