2021.2.23(tue)_express 싸우자🤬

 

하루종일 express랑 싸웠다😠👊🏼👊🏼👊🏼

1. html을 ejs로 변경

html은 정적인 언어로 주어진 기능만 사용할 수 있고, 사용자가 기능을 직접 추가할 수 없다.(js로는 가능) 템플릿 엔진은 자바스크립트를 사용해서 html을 렌더링할 수 있게 한다. 기존 html 문법과 다를 수도 있고, js 문법이 들어있기도 하다. 대표적인 템플릿 엔진으로는 퍼그(제이드), 넌적스, ejs가 있다.

 

1) 데이터가 들어있는 json 파일에서 데이터를 불러와 동적으로 페이지를 구성하기 위해서 ejs로 파일을 바꾸었다. 먼저 ejs를 npm에서 설치했다.

npm i ejs

 

2) 파일 확장자명을 ejs로 변경해줬다. index.html → index.ejs

3) app.js 파일 수정

app.set('view engine', 'ejs');

app.get('/', (req, res) => {
	// res.sendFile에서 수정
    res.render("index", {});
});

 

2. css파일 적용 안 되는 문제

어제 있었던 문제가 또 다시 생김. css파일이 안 불러와짐

 

현재 폴더 구조이다. public, views가 형제이고, public안에 data, style 폴더가 들어있다.

 

 먼저 static에 대해서 설명하자면, static 미들웨어는 정적인 파일들을 제공하는 라우터 역할을 한다. 기본적으로 제공되기에 따로 설치할 필요 없이 express 객체 안에서 꺼내 사용하면 된다. 다음과 같이 사용하면 된다. 요청 경로를 생략하면 미들웨어는 모든 요청에서 실행되고, 주소를 넣는다면 해당하는 요청에서만 실행된다.

app.use('요청 경로', express.static('실제 경로'));

app.use('/', express.static(path.join(__dirname, 'public')));

 

1) app.js에서 static으로 정적인 파일들이 들어있는 폴더를 지정해줬다. 

app.use(express.static(path.join(__dirname, 'public')));

// app.use(express.static('public')); 이렇게 해줘도 되지만,
// 서버의 폴더 경로와 요청 경로가 다르므로 외부인이 서버의 구조를 쉽게 파악할 수 없다.
// 보안에 도움이 된다고 한다!

2) index.ejs 기준으로 경로를 작성하거나, 프로젝트 폴더 기준으로 경로를 작성하면 안 된다. index.ejs에서 public을 기준으로 경로 작성해주니까 css 적용이 됐다!

<link rel="stylesheet" href="../public/style/reset.css">  //index.ejs 파일 기준 경로 X
<link rel="stylesheet" href="public/style/reset.css">  //프로젝트 폴더 기준 경로 X
<link rel="stylesheet" href="style/reset.css"> // static 폴더 기준 경로 O

 

3. ejs로 json 데이터 불러오기

1) app.js 기준으로 상대경로로 json 파일 require해오기. homeContents가 변수명(식별자)이다.

// app.js
app.locals.homeContents = require('./public/data/homeContents.json');

여기서 경로를 잘못 설정해줘서 nodemon에서 계속 에러가 났다.  경로를 잘 써주자..

[nodemon] app crashed - wating for file changes before starting...

 

2) ejs 파일에서 json파일을 homeContents라는 큰 객체로 받아 원하는 데이터 불러오기

<!-- index.ejs -->
<%= homeContents.contents[0].eventContent.title %>

 이건 간단한 거였는데 ejs에서 데이터 불러오는 부분에서 속성 하나(eventContent)를 안 적고 안 뜬다며 혼자 삽질을 계속 했다. 기본적인 것 먼저 확인하자ㅠㅠ

 

 

✱ 마무리

 아직 html도 작성을 못 끝내고 아주 느리지만.. 그래도 어제보단 좋은 방법으로 공부했다는 생각이 든다. 어제는 정말 찝찝했다면 그래도 오늘은 좀 알아가면서 이해하면서 하고 있다는 생각이 든다! 이제 다시 고고..🏃🏻‍♀️🏃🏽‍♂️🏃🏼

 

 

---

참고📚

책 - 조현영 - Node.js 교과서

블로그 - Node-Express 미들웨어 static