- Bootstrap 을 하나 다운로드한다.
- Google 에 아래와 같이 "free bootstrap templates" 라고 검색하면 다양한 site 들이 나온다.
- Site 에 들어가서 자신의 porject 에 적당한 template 를 선택하여 download 받는다.
- 예를 들어 "alien-1.0.0.zip" 를 다운로드 받았다면, 앞출을 푼다.
- 그안에 보면 다음과 같은 디렉토리 들이 있다.
- "css" , "images" 그리고 "js" 디렉토리를 복사해여, 내 express 디렉토리 내부의 "public" 폴더에 붙여놓기 한다.
- html 파일들을 복하여, 내 express 디렉토리 내부의 "views" 폴더에 붙여놓기 한다.
- .html 을 .ejs 로 변경한다.
- web.js 에서 다음과 같이 /views 와 /public 폴더를 설정해 둔다.
const express = require('express')
const mysql = require('mysql')
const dbconfig = require('./config/database.js')
const connection = mysql.createConnection(dbconfig) //mysql object
const app = express() //express object
const path = require('path')
const ejs = require('ejs') //ejs object
const bodyParser = require('body-parser')
//set port #
app.set('port',process.env.PORT || 8001)
//set ejs engien
app.set('view engine','ejs')
//for cafe24 web hosting
app.set('views', __dirname + '/views');
//use the public direcotyr as shared amoung all threads , and for cafe24
app.use(express.static(path.join(__dirname + '/public')))
해당 프로젝트를 cafe24 에 push 하고, 내 webpage로 가면, bootstrap template 가 적용된 것을 볼 수 있다.
### 참조 ###
'web_fullstack' 카테고리의 다른 글
3 Future Programming Languages (0) | 2023.09.19 |
---|---|
node.js 로 linux shell script 실행하기 (0) | 2022.09.15 |
normalize.css (0) | 2022.08.21 |
Web front-end 개발 관련 reference (0) | 2022.08.20 |
서버와 클라이언트 (0) | 2022.08.20 |