[기초설정]
1) NODE JS 설치 필요
2) npm init (초기 설정)
3) npm install express (설치)
4) npm install cors (설치)
5) node index.js (실행)
[자바스크립트] index.js
const express = require('express')
//cors 설정을 위해 선언
var cors = require('cors')
const app = express()
const port = 3000
//cors 설정을 위해 사용
app.use(cors())
//root 페이지
app.get('/', (req, res) => {
res.send('Hello World!')
})
//API 실습
app.get('/sound/:name', (req, res) => {
const { name } = req.params
if(name == "dog"){
res.json({'sound':'멍멍'})
}else if(name == "cat"){
res.json({'sound':'야옹'})
}else if(name == "pig"){
res.json({'sound':'꿀꿀'})
}else{
res.json({'sound':'알수없음'})
}
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
[HTML]index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>첫 웹서버 실습</title>
</head>
<body>
<h1 id="sound"></h1>
<input id='name' type="text">
<button onclick="getSound()">API 받아오기</button>
<script>
function getSound() {
const name = document.getElementById('name').value
fetch(`http://localhost:3000/sound/${name}`)
.then((response) => response.json())
.then((data) => {
console.log(data)
document.getElementById('sound').innerHTML = data.sound
});
}
</script>
</body>
</html>
[결과]
'Framework > NODEJS' 카테고리의 다른 글
| [NODEJS] NODE.JS란 무엇인가? 핵심 개념 이해하기 (0) | 2023.07.13 |
|---|