[패스트캠퍼스 챌린지 28일차] Express - Pug Template

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 28일차.

 

---

 

어느덧 28일차 강의를 듣고 있다.

오늘은 지난 시간에 RestAPI와 Middleware, Router 개념을 이용해 작성한 Page에 CSS를 추가하고

존재하지 않는 User를 조회할 때 Error Message를 Handling하는 것에 대해 학습하였다.

 

Express - 스태틱 파일 서빙 학습

 

그럼 먼저 CSS 적용부터!

CSS는 '스태틱 파일 서빙'이라는 개념을 이용하여 적용하게 되는데

HTML의 CSS를 작성하고 적용해본 사람이라면 쉽게 이해할 수 있을 것이다.

그럼 아래 JS파일, CSS파일과 PUG 파일을 살펴보자

[index.css]

body { background-color: green; }
.blue { color: blue; }
.orange { color: orange; }
.big { font-size: 24px; }

[user-profile.pug]
html
    head
          link(rel="stylesheet", href="/public/index.css")
    body
          h1 User Profile Page
          h2.blue Nickname 
          div.orange.big= nickname

index.css 파일은 HTML에서 사용하는 CSS와 동일하므로 설명은 생략하도록 하고,

user-profile.pug 코드를 보면 link를 통해 CSS를 import 하는 것을 알 수 있다.

또한 h2, div 태그에 .(dot)을 이용하여 클래스 명을 추가해주는 것을 알 수 있다.

HTML에서 class="..."로 작성한 내용을 CSS나 JS에서 사용하는 것처럼 .(dot)을 이용하니

웹 개발자들에게는 익숙하고 편하게 작성할 수 있을 것이다.

 

그럼 이 CSS를 적용하기 위해서 JS에서 어떤 작업을 해줘야할까?

[express-test.js]

// 1번 예시
_express.use(express.static('src/public'))

// 2번 예시
_express.use('/public', express.static('src/public'))

위의 코드처럼 express에서 제공하는 static 함수를 이용하여 'src/public' 경로에 있는 CSS를 import 해줘야한다.

1번과 2번 예시 모두 동일하게 CSS를 적용하는 기능이지만 Parameter로 특정 경로를 추가해줬는지에 대한 차이가 있다.

경로가 있는 것과 없는 것에는 어떤 차이가 있을까?

 

만약 src/public/user/test-user 파일이 있다고 하자.

API의 URL도 localhost:8080/user/test-user인 경우면?

기존에 작성한 기능은 test-user라는 ID를 가지고 있는 사용자 정보를 화면에 출력해줬을 것이다.

하지만 1번 예시처럼 코드를 작성할 경우 브라우저가 src/public/user/test-user 파일을 다운로드 할 것이다.

 

이러한 에러를 방지하기 우해 1번 예시 코드를 JS 파일 맨 아래에 작성하거나

2번 예시처럼 작성해줌으로 해결할 수 있다.

패스트캠퍼스 강사님의 강의 내용에 따르면 JS 파일 맨 아래에 작성하는 것 또한 보안 위험성이 있기 때문에

2번 예시처럼 Router 방식으로 작성하는 것을 권장한다.

 

---

 

express - Error Handling 학습

 

다음으로 Error Handling.

에러를 처리하지 않은 상태에서 존재하지 않는 사용자 ID로 API를 호출할 경

Server에서 발생하는 stacktrace 에러를 웹페이지에 출력해줄 것이다.

그럼 어느 파일의 어떤 함수때문에 에러가 발생했는지 그대로 노출이 된다.

 

이러한 문제를 해결하기 위해 개발자가 작성한 내용을 화면에 출력하려고 한다.

userRouter.param('id', (req, res, next, value) => {
    const user = USERS[value]
    if (!user) {
      const err = new Error('User Not Found.')
      err.statusCode = 404
      throw err
    }
}

// Error handling
_express.use((err, req, res, next) => {
  res.statusCode = err.statusCode || 500
  res.send(err.message)
})

위의 첫번째 함수처럼 사용자가 없는 경우 Error 객체를 생성하여 메시지를 작성하고, throw를 통해 Error를 전달하면

아래 작성한 Error Hanling 함수에서 응답으로 전달해 줄 것이다.

 

Error Hanling 함수에서 보는것과 같이 express의 user 함수에 인자가 4개인 것을 볼 수 있다.

이처럼 인자가 4개인 경우면 express에서 Error로 판단하여 처리를 한다.

(이 점에 주의하기!)

 

* 추가로 Error 또한 async를 이용하여 작성할 수 있는데 첫번째 함수(userRouter.param...)에서 async를 이용할 경우

함수 안에 작성한 내용은 try~catch로 묶어줘야 하며,

catch(error) { next(error) }를 통해 다음 실행할 함수에게 error를 전달해줘야 한다.

 

---

 

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 28일차 학습통계

 

---

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.