1. 간단예제 및 테스트
index.js에 다음의 코드 입력
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.get('/dog', function (req, res) {
res.send('강아지')
})
app.get('/cat', function (req, res) {
res.send('고양이')
})
app.listen(3000)간단히 설명하자면 express 라는 npm 모듈은 다운받아서
/(라우터) 기준 dog 파라미터를 보내면 강아지 출력
/ 기준 cat 파라미터를 보내면 고양이 출력
→ 이 모든것은 localhost:3000 포트에서 진행된다는 뜻.
Terminal에 node index.js 쳐서 실행
(서버를 내리는 것은 ctrl + c로 할 수 있다.)
<결과>
2. 추가 응용
1) html 형식의 전송도 가능함을 알아야 한다.
이렇게 입력했을 때, 결과값이 h1태그 형식으로 크고 굵게 출력된다
2) 링크전송도 가능하다!
다음과 같이 링크 전송이 가능하다.
3. api형식으로 (json방식) 응용
다음과 같이 send대신 json방식으로 sound를 파라미터에 맞게 보낼 수 있다.
응용1) param 방식
:기준으로 id를 입력하면 그 id값이 response되어 userid에 제이슨 형식으로 출력된다.
※참고로 :은 생략해도 된다. → 변수로 작용해서 넣는다는 뜻
응용2) js까지 활용
예시 (pig) 결과
예시 (askhjflashklfa) 결과
4. CORS 이슈와 프론트엔드 연결 실습
CORS란?
CORS는 "Cross-Origin Resource Sharing"의 약자로, 웹 애플리케이션에서 다른 도메인의 자원을 요청할 때 보안상의 이유로 제한되는 것을 완화하는 방법을 제공하는 웹 표준입니다. 즉, 서로 다른 도메인간의 데이터 교환을 가능하게 해주는 것인데, 이를 허용하지 않으면 보안상의 이유로 웹 브라우저에서 해당 자원의 요청을 거부하게 됩니다.
사용방법
1. 다운로드 npm에서 cors 치고 받기
2. 해당 코드 입력
3. CORS확인용 index.html파일 작성
<!DOCTYPE html>
<html lang="ko">
<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>CORS확인페이지</title>
</head>
<body>
<h1 id="sound"></h1>
<!--name값 입력 input-->
<input id="name" type="text">
<button onclick="getSound()">API 요청</button>
<script>
//input받은 값을 getSound에 보냄
function getSound() {
// 받은 input값 다시 변수 name에 담음
const name = document.getElementById('name').value
//만든 api의 name파라미터로 쏴주겠다.
fetch(`http://localhost:3000/${name}`)
//json방식으로 받음
.then((response) => response.json())
//받아온 데이터를 어떻게 가공할 것이냐
.then((data) => {
//console에 sound로 출력한다.
console.log(data.sound);
//sound를 받아와서 위 h1에 적어둔 id=sound 위치에 innerhtml에 넣어준다
document.getElementById('sound').innerHTML = data.sound
});
}
</script>
</body>
</html>4. 작성한 코드 explore 실행
5. dog입력시 어떤 결과 나오는지 콘솔에서 확인
결과값 콘솔에도 잘 찍히고 html에도 잘 나오는것 확인 가능
6. app.use(cors()) 꺼보고 실행 똑같이 해보기
index.js에서 app.use(cors()) 제거
그 다음 재 실행후 똑같이 api요청하면
다음과 같이 CORS policy에 걸려서 접근이 불가함을 알 수 있다.
※ 반드시 캐시를 지우고 실행해주세요! 캐시기록때문에 접근이 가능할 수도 있습니다.
'Develop > Api 뽀개기' 카테고리의 다른 글
| html method (rest) (0) | 2023.06.11 |
|---|---|
| NPM (node pakage manager) (0) | 2023.06.11 |
| Node.js 1분요약 / 설치 (0) | 2023.06.11 |
| RestAPI 만들기_4(CRUD 로직구현) (0) | 2023.06.11 |
| RestAPI만들기_3(CRUD) (2) | 2023.06.10 |
