Node.js 101 - 첫 번째 템플릿 만들기

저는 자바스크립트를 먼저 배우는 것을 강력히 추천합니다. 다음은 Dev.to에서 작성한 일련의 게시물입니다.

이제 Node.js 학습 여정을 계속할 준비가 되었습니다. :)

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요. 매일 배운 내용을 여기 Dev.to에 게시할 예정입니다.

더 이상 고민하지 않고 여기에 마지막 날의 메모 요약이 있습니다.

첫 번째 템플릿

템플릿을 사용하면 애플리케이션에서 정적 html 파일을 사용할 수 있습니다. 런타임에 템플릿 엔진은 템플릿 파일의 변수를 실제 값으로 바꾸고 템플릿을 클라이언트에 전송되는 HTML 파일로 변환합니다. 이 접근 방식을 사용하면 HTML 페이지를 더 쉽게 디자인할 수 있습니다.

어제 언급한 것처럼 Node.js에서는 Espress.js와 같은 프레임워크를 사용하여 템플릿을 비롯한 많은 것을 자동화할 수 있습니다. 그러나 백그라운드에서 작동하는 방식을 이해하는 것이 중요합니다. 그래서 여기에 당신을 도울 작은 예가 있습니다.

작은 정적 html 페이지를 만들어 보겠습니다.

<h1>Hello Mike<h2>
<p>Your age are 42<p>

이 정적 페이지는 항상 동일한 정보를 표시합니다. 다른 사람의 정보를 표시하려면 다른 페이지를 만들어야 합니다. 20개의 html 파일을 생성할 20명의 목록이 있는 경우. 물론 우리는 절대 그렇게 하지 않을 것입니다.

여기서 해결책은 키워드를 실제 데이터로 대체할 템플릿 엔진을 만드는 것입니다.

<h1>Hello {%name%}<h2>
<p>Your age are {%age%}<p>

이 템플릿에서는 런타임 시 페이지에 삽입될 2개의 자리 표시자를 만듭니다.

코드는 다음과 같습니다.

const friends = [
    {id: 1, name: 'Mike Taylor', age: 42},
    {id: 2, name: 'John Lamkin', age: 44},
]

let page = `<h1>Hello {%name%}<h2>
<p>Your age are {%age%}<p>`

page = page.replace('{%name%}', friends[0].name)
page = page.replace('{%age%}', friends[0].age)

console.log(page) 
// <h1>Hello Mike Taylor<h2>
// <p>Your age are 42<p>

이제 이 채우기 템플릿을 클라이언트에 보낼 수 있습니다.

// the http module have method to help create the server
const http = require('http')
const server = http.createServer((req, res) => {
    res.writeHead(200, {
         'Content-type': 'text/html'
     })
    res.end(page)
})

// start server listening for request
server.listen(5000, 'localhost', () => {
    console.log('Server is listening at localhost on port 5000')
})

이것은 템플릿에 대한 매우 거친 충돌 과정입니다. 앞에서 언급했듯이 실제로는 코딩하지 않을 것입니다. 학습 목적일 뿐입니다.

지금까지 무엇을 배웠습니까?

지난 커플 수업에서 배운 모든 것을 요약하면 이제 웹 서버 작동 방식에 차이가 생기기 시작합니다.

요청에서 시작입니다

해당 요청은 경로와 일치합니다

.

경로 URL이 정보(경로, ID 등)를 추출하기 위해 구문 분석됩니다

.

API에 대한 요청인 경우 서버가 JSON 응답을 생성합니다

.

요청이 html 페이지에 대한 것인 경우. 서버가 템플릿을 동적으로 채웁니다

.

마지막으로 응답 코드와 응답 내용이 클라이언트로 전송됩니다

.

그리고 이러한 모든 작업을 대폭 간소화한 Espress.js라는 프레임워크가 있다는 사실을 잊지 마십시오. 실제로 그렇게 할 수 있는 많은 프레임워크가 있지만 Express가 가장 인기가 있습니다.

결론

오늘은 여기까지입니다. 내일은 시리즈의 마지막 수업이며 타사 패키지를 설치하고 사용하는 방법을 살펴보겠습니다.

트위터에서 나를 팔로우하세요: