😎 공부하는 징징알파카는 처음이지?

Typescript로 express 버전의 html 보내기 본문

👩‍💻 백엔드(Back-End)/Typescript

Typescript로 express 버전의 html 보내기

징징알파카 2023. 5. 31. 18:07
728x90
반응형

<본 블로그는 memi Dev 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> 메미의 개발학교 21 express로 html 보내기

 

🧸 express로 html 보내기

🚩 index.ts

import express from "express"
import birds from "./routes/birds"
import dogs from "./routes/dogs"
import fs from "node:fs/promises"
const app = express()

app.use("/birds", birds)
app.use("/dogs", dogs)
app.use("/", async (req, res) => {
  const b = await fs.readFile("./public/index.html")
  res.send(b.toString())
})
app.listen(4000)

 

🚩 public/index.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>html 불러오기</h1>
</body>
</html>

 

🧸 static 으로 정적인 html 불러오기

🚩 index.ts

import express from "express"
import birds from "./routes/birds"
import dogs from "./routes/dogs"
import fs from "node:fs/promises"
const app = express()

app.use("/", express.static("public"))
app.use("/birds", birds)
app.use("/dogs", dogs)
app.use("/", async (req, res) => {
  const b = await fs.readFile("./html/index.html")
  res.send(b.toString())
})
app.listen(4000)

 

🚩 public/about/about.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 불러오기</h1>
</body>
</html>

 

🚩 public/images/image.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>image 불러오기</h1>
</body>
</html>

728x90
반응형
저작자표시

'👩‍💻 백엔드(Back-End) > Typescript' 카테고리의 다른 글

Typescript 로 홈페이지 만들어보기  (2) 2023.05.31
Typescript 로 express 적용하기  (0) 2023.05.31
Typescript 로 socket 사용하기 (server, client)  (0) 2023.05.29
TypeScript 처음 사용해보기 (설치하기, 기본적인 필수 명령)  (0) 2023.05.20
'👩‍💻 백엔드(Back-End)/Typescript' Related Articles more
Comments