본문 바로가기
Node.js

[Node.js] 4. HTML 파일을 받아 출력하기

by 일단연 2023. 5. 17.

* 본 시리즈는 [위데이터랩]의 Node.js 강의를 매주 수요일 1시간씩 듣고 복습한 기록입니다.

 

 지난 수업 복습 

Express.js 공식 홈페이지의 코드로 만들기

  • Express.js 공식 홈페이지의 Hello world 예제
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
  • 1) test.js 파일 만들기
  • 2) Express.js 공식 페이지의 코드 > test.js에 입력
 

Express - Node.js 웹 애플리케이션 프레임워크

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save

expressjs.com

  • 3) 라우팅하기
    • 라우팅
    • res.send( )에는 문자열, html 코드, JSON, 링크 등 다양한 것이 들어갈 수 있음 
const express = require('express')
//app: express의 인스턴스
const app = express()
const port = 3000

//app.get: http 메소드
// '/': 라우팅
//일반 문자열 전송
app.get('/', (req, res) => {
  res.send('Hello World!')
})

//HTML 코드 전송
app.get('/apple', (req, res) => {
    res.send('<h1>사과는 맛있다</h1>')
})

//JSON 전송
app.get('/cat', (req, res) => {
    res.send({'고양이' : '귀엽다'})
})

//링크 전송
app.get('/naver', (req, res) => {
    res.send("<a href = 'https://naver.com'>네이버 링크</a>")
})

//라우팅할 때 작성한 name이 {name} 변수로 들어감
app.get('/animal/:name', (req, res) => {
    const {name} = req.params

    if(name == 'lion'){
        res.json({'사자' : '어흥!'})
    }else if(name == 'duck'){
        res.json({'오리' : '꽥꽥'})
    }else if(name == 'dog'){
        res.json({'강아지' : '멍멍'})
    }else{
        res.json({'알 수 없는 동물입니다.' : '다시 확인해주세요.'})
    }
})

//해당 포트에 접속하면 콘솔창에 메시지 출력
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

 오늘 수업 

HTML 파일을 받아 출력받기

  • 1) about.html 만들기
    • html을 입력하면 뜨는 html:5 자동완성을 선택 > 자동으로 html 기본 구조가 만들어짐
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>여기는 about page입니다.</h1>
    <p>4주차입니다.</p>
</body>
</html>
  • 2) test.js 파일로 돌아와서 라우팅
    • sendFile(경로): 경로에 위치한 파일을 응답하는 메소드
    • __dirname
      • JS에서 기본적으로 정의된 디렉토리명 절대변수
      • 현재의 파일(file)이 위치한 폴더(directory)의 절대경로(absolute path)를 알려줌 
app.get('/about', (req, res) => {
    res.sendFile('/about.html', {root: __dirname})
})

 

 

nodemon: 파일이 변경되면 자동으로 노드 애플리케이션을 재실행

  • 디렉터리의 파일 변경이 감지되면 자동으로 노드 응용 프로그램을 다시 시작하여 Node.js 기반 응용 프로그램을 개발하는 데에 도움이 되는 npm 모듈
  • 수정할 때마다 서버를 껐다 켰다 하는 불편함을 제거해줌
  • npm 사이트에서의 nodemon 페이지: https://www.npmjs.com/package/nodemon
 

nodemon

Simple monitor script for use during development of a Node.js app.. Latest version: 2.0.22, last published: 2 months ago. Start using nodemon in your project by running `npm i nodemon`. There are 4559 other projects in the npm registry using nodemon.

www.npmjs.com

  • nodemon 설치하기
//nodemon 설치하는 코드
npm i nodemon
  • package.json 파일 수정
    • package.json의 scripts 안에 "dev": "nodemon 기준으로 잡을 파일명” 입력
    • 해당 실습에서는 test.js 파일을 이용할 거니까 "dev": "nodemon test.js” 입력
//package.json 파일 수정

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    **"dev": "nodemon test.js"**
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "express": "^4.18.2",
    "figlet": "^1.6.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.22"
  }
}
  • nodemon을 설치한 후엔 서버를 실행시킬 때 터미널에 npm run dev 명령어를 한 번만 입력하면 됨
    • 한 번 입력해두면 서버를 종료(Ctrl+C)시킬 때까지 파일이 변경될 때마다 알아서 서버를 재실행
npm run dev

 

다른 폴더에 html 파일을 만들고 test.js에 연결하기

  • 주의할 점
    • 해당 html 파일은 test.js와는 다른 폴더에 있기 때문에 경로를 잘 설정해줘야 함
    • /cat.html 이라고만 쓰면 test.js는 해당 파일이 같은 폴더에 있다고 생각하고 계속 animal 폴더가 아닌 NODE 디렉토리에서 찾을 것
    • 정확한 경로: /animal/cat.html
  • cat.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://tgzzmmgvheix1905536.cdn.ntruss.com/2020/02/2e1706a165214ccc8653d15e35f742de" width="500" height="300">

    <h1>고양이</h1>
      
    <p>고양이(Felis catus)는 포유류 식육목 고양이과의 동물이다.
        현생 고양이를 포함한 모든 고양이과 동물들이 공통 조상으로부터 약 2000만 년 전 분화한 이후, 들고양이는 10만~7만여 년 전부터 출현했으며, 가축화는 약 5만여 년전 이집트나 메소포타미아 등 중동 지역의 아프리카들고양이(Felis lybica)가 식량 확보 등의 이유로 도시 등 인간의 대규모 정착지에 나와 살던 것을 인간이 키우기 시작한 것이 오늘날 고양이의 유래다. 인간과 고양이의 공존은 인간에게는 쥐를 잡아주고 고양이에게는 안정적인 식량 확보가 가능하다는 상호간의 이점이 있었으며, 이로 인해 고양이는 오랜 시간이 지나며 자연스럽게 자기가축화되었다. 이후 고양이는 아프로유라시아 전역에 퍼졌으며, 신항로 개척 시대 이후 아메리카와 오세아니아 대륙에도 퍼지게 되었다.        
        고양이의 신체적 특성과 습성은 다른 고양이과 동물들과 동일하여 빠른 반사신경, 탁월한 유연성, 날카로운 이빨, 넣고 꺼낼 수 있는 발톱 등이 있다. 고양이는 매우 긴 수면 시간을 가지고 있어 하루 종일 자는 시간이 굉장히 많으나 기본적으로 야생에서는 포식자 동물이라는 특성 상 박명박모성(薄明薄暮性)으로, 해뜰녘과 해질녘에 주로 행동한다. 또한 여타 고양잇과 동물들과 같이 고양이는 육식동물로, 야생에 사는 들고양이는 쥐, 다람쥐, 작은 새 등을 사냥해 잡아먹는다. 한국에서는 사는 곳에 따라 들고양이, 길고양이, 집고양이 등으로 구분되어 불린다. 고양이는 19세기 후반 이후 인간에 의해 품종개량 되어 현재는 다양한 묘종이 있으며, 이러한 품종 등록을 관장하는 국제고양이협회(TICA)는 현재 71개 묘종을 인정한다.</p>
    <button type="submit">cat</button>
</body>
</html>
  • test.js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.get('/about', (req, res) => {
    res.sendFile('/about.html', {root: __dirname})
})

app.get('/animal/:name', (req, res) => {
    const {name} = req.params

    if(name == 'lion'){
        res.json({'사자': '어흥'})
    }else if(name == 'dog'){
        res.json({'강아지': '멍멍'})
    }else if(name == 'cat'){
        res.sendFile('/animal/cat.html', {root: __dirname})
    }else if(name == 'puppy'){
        res.sendFile('/animal/puppy.html', {root: __dirname})
    }else{
        res.json({'알 수 없는 동물입니다.' : '페이지 이름을 다시 확인해주세요.'})
    }
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

 

Node.js API

 

Index | Node.js v18.16.0 Documentation

 

nodejs.org

  • Node.js API를 참고해 더 좋은 코드를 만들 수 있음
저작자표시 비영리 (새창열림)

'Node.js' 카테고리의 다른 글

[Node.js] 3. npm과 Express.js 활용하기  (2) 2023.05.10
[Node.js] 2. http 모듈로 API 만들기  (0) 2023.05.03
[Node.js] 1. Node.js 소개 및 설치  (0) 2023.04.26

관련글

티스토리툴바