😎 κ³΅λΆ€ν•˜λŠ” μ§•μ§•μ•ŒνŒŒμΉ΄λŠ” μ²˜μŒμ΄μ§€?

Typescript 둜 ν™ˆνŽ˜μ΄μ§€ λ§Œλ“€μ–΄λ³΄κΈ° λ³Έλ¬Έ

πŸ‘©‍πŸ’» λ°±μ—”λ“œ(Back-End)/Typescript

Typescript 둜 ν™ˆνŽ˜μ΄μ§€ λ§Œλ“€μ–΄λ³΄κΈ°

μ§•μ§•μ•ŒνŒŒμΉ΄ 2023. 5. 31. 18:41
728x90
λ°˜μ‘ν˜•

<λ³Έ λΈ”λ‘œκ·ΈλŠ” memi Dev μ˜ 유튜브λ₯Ό μ°Έκ³ ν•΄μ„œ κ³΅λΆ€ν•˜λ©° μž‘μ„±ν•˜μ˜€μŠ΅λ‹ˆλ‹€ :-)>

=> 메마의 α„€α…’ᄇᅑᆯᄒᅑᆨ교 22 ν™ˆνŽ˜μ΄μ§€ α„†α…‘ᆫ들ᄋα…₯보가

 

🧸 Typescript λ‘œ ν™ˆνŽ˜μ΄μ§€ λ§Œλ“€μ–΄λ³΄κΈ°

🚩 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.listen(4000)

 

🚩 public/spa.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>SPA</title>
</head>
<body>
    <div>
        <a onclick = "change('home')">home</a>
        <a onclick = "change('dog')">dog</a>
        <a onclick = "change('bird')">bird</a>
    </div>
        
    <div>
        <img id = "img" src="https://loremflickr.com/320/240/home" />
    </div>
    <p id = "content">home</p>

    <script>
        function change (name) {
            console.log(name)
            document.getElementById("content").innerHTML = name
            document.getElementById("img").src = "https://loremflickr.com/320/240/" + name
        }
    </script>
</body>
</html>

 

728x90
λ°˜μ‘ν˜•
μ €μž‘μžν‘œμ‹œ

'πŸ‘©β€πŸ’» λ°±μ—”λ“œ(Back-End) > Typescript' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

Typescript둜 express λ²„μ „μ˜ html 보ᄂᅒ가  (0) 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