Frontend 세팅 방법

status

Public

Frontend

submenu

tags

Node.js

summary

thumbnail

date

Jul 29, 2024

Static files, 즉 유저에게 갈 정적 파일들을 생성

여기서는 Webpack 사용하지 않음

JS를 유저한테 보내고 브라우저가 이해하게 하도록 함

src 폴더 안에 public/js/app.js 폴더 및 파일 생성

서버에 pug 페이지들을 렌더링하기 위해 home.pug 설정

src 폴더 안에 views/home.pug 폴더 및 파일 생성

home.pug에는 html 입력후 뜨는 snippet에서 html:5 선택

body 밑에 들여쓰기 후 frontend 자바스크립트 추가


...

	body
		script(src="/public/js/app.js")
		
...

backend(server.js) 설정


// server.js에 작성

app.set("view engine", "pug"); //pug로 view engine 설정
app.set("views", __dirname + "/views"); // express에 template이 어디 있는지 지정
app.use("/public", express.static(__dirname + "/public")); //public url을 생성해서 유저에게 파일을 공유
app.get("/", (req, res) => res.render("home")); //home.pug를 render 해주는 route handler 생성

Frontend 코드가 수정될 때 nodemon 재시작 막기


// nodemon.json에 작성

{
	"ignore": ["src/public/*"],  <-- 이 부분 추가
	"exec": "babel-node src/server.js"
}

추가#1

MVP CSS를 추가하면 기본적인 html tag들을 예쁘게 바꿔줌

<link rel="stylesheet" href="https://unpkg.com/mvp.css">

우리는 home.pug의 head 밑에 다음과 같이 작성


link(rel=”stylesheet”, href=”https://unpkg.com/mvp.css”)

추가#2

catchall url 생성

server.js에 다음과 같이 작성


app.get("/*", (req, res) => res.redirect("/"));

Frontend 세팅 방법

댓글