프론트엔드(HTML 버튼)에 axios 연동하기
section03폴더 내에 새로운 폴더 03-05-rest-api-with-frontend를 만들어 준 뒤에, 해당 폴더 내에 frontend, backend 폴더를 만들어준다.
이전에 작업한 03-04-rest-api-with-express-swagger 폴더의 내용을 모두 backend 폴더에 복사한다. (node_modules 제외)
yarn install을 통해 모듈을 다시 설치한다.
API의 동작을 테스트 해야하기 때문에 간단한 페이지를 위해 frontend 폴더로 이동하셔서 signup.html 파일을 만들어준다.
! + Enter를 통해 HTML의 기본 템플릿을 생성해서 만들면 된다.
// signup.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입 연습하기</title>
</head>
<body>
</body>
</html>이제 버튼을 하나 만들어 클릭 시 실제 API 요청이 가도록 작성해보자
우선 버튼과 함수가 연동되는지 간단한 버튼 태그를 만들어 시험해보면 된다.
<body> 태그 내부를 아래의 내용과 같이 작성하자.
// signup.html
<body>
휴대폰번호: <input type="text" id="myphone"/>
<button>인증하기</button><br />
<div id="result">인증상태</div>
<button>회원가입하기</button>
</body>signup.html 파일을 실행해보면 입력한 버튼과 휴대폰 번호를 입력할 수 있는 영역이 만들어져 있다.
이제 알림창을 띄워주는 함수를 작성하고 버튼과 연동해보자.
onclick=""을 통해 버튼에 함수를 할당하면
// signup.html
<body>
휴대폰번호: <input type="text" id="myphone" />
<button onclick="zzz()">인증하기</button><br />
<div id="result">인증상태</div>
<button>회원가입하기</button>
</body><script> 태그 내에서 onclick에 할당한 함수를 작성해보자.
입력한 휴대폰 번호를 가져온 후, 해당 휴대폰 번호로 인증번호 API로 요청하는 것이다.
입력한 휴대폰 번호를 가져오기 위해 위에서 지정한 <input> 태그(입력창) 안의 id 값을 활용한다.
// signup.html
<head>
<title>회원가입 연습하기</title>
<script>
function zzz() {
// 1. 입력한 휴대폰번호 가져오기
const myphone = document.getElementById('myphone').value;
console.log('나의 핸드폰번호: ', myphone);
// 2. 해당 휴대폰번호로 인증번호API 요청하기
</script>
</head>Axios 연동하기
다음으로는 실제로 우리가 작성한 API와 소통할 수 있도록 만드는 것이다.
이전에는 postman을 통해 API를 테스트를 진행했으나
현재 환경에서는 ****휴대폰 번호를 백엔드 서버로 요청하기 위해 Axios라는 라이브러리를 이용하게 된다.
HTML 파일에서는 axios를 이용하려면 <script> 태그를 사용해서 다운 받는 방법이 있다.
이러한 방식을 CDN(Contents Delevery Network) 이라고 한다.
axios cdn을 검색하여 공식문서에서 아래와 같은 cdn 코드를 가져와 <script> 태그 안에 추가해 준다.
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
이제 axios를 사용할 준비가 되었다. axios를 이용하여 해당 API로 요청을 보내는 로직을 추가해준다.
// signup.html
<head>
<title>회원가입 연습하기</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function check() {
// 1. 입력한 휴대폰번호 가져오기
const myphone = document.getElementById('myphone').value;
console.log('나의 핸드폰번호: ', myphone);
// 2. 해당 휴대폰번호로 인증번호API 요청하기
axios
.post('http://localhost:3000/tokens/phone', {
qqq: myphone,
})
.then((res) => {
console.log(res);
document.getElementById("result").innerText = res.data
});
}
</script>
</head>axios.post를 사용하여 API 요청을 보내준다.axios.then을 사용하여 요청을 보낸 후, 실행되는 코드를 작성해 주면되는데 요청에 대한 응답을 받아준다.- 인증하기 버튼을 누르게 되면, 인증상태 부분이 인증완료로 바뀔수 있도록 innerText를 res.data(=인증완료)로 설정해 준다.
backend 폴더로 이동하여 서버를 실행시킨 후, 요청을 보내보자.
사실, 제대로된 응답이 온것인지 확인할 수가 없다. 개발자 도구의 콘솔을 확인해보아야 한다.
많은 에러들이 보이며, 요청 또한 제대로 전달되지 않았다.
버튼을 여러번 눌러보면 계속해서 CORS라는 단어가 눈에 띄게 등장합니다. CORS에 대해 간단하게 알아보자
CORS 문제
이전에 postman에서 성공하였던 요청과 똑같은 요청을 직접 만든 버튼을 사용해 브라우저상에서 진행해 보았다.
그런데 왜 직접 만든 버튼을 통한 요청만 에러가 발생했는지 궁금하다.
CORS
CORS란, Cross-Origin-Resource-Sharing의 약자다.
이는 서로 다른 출처(origin)를 가진 주소로 요청이 들어왔을 때 발생할 수 있는 에러로 볼 수 있다.
여기서 말하는 출처(origin)이란, port번호까지 포함한 url을 의미한다.
예를 들어 이러한 url(http://localhost:3000/tokens/phone)에서 http://localhost:3000을 origin이라 부른다.
port번호가 다른 경우에도 CORS 에러는 발생하는데 이는 같은 localhost임에도 다른 출처로 인식되기 때문이다.
이러한 문제를 해결하기 위해서
Backend 서버에서는 응답 헤더의 Access-Control-Allow-Origin 항목에 API에 대해 허용하고자 하는 Origin을 담는 방식으로 CORS 에러를 방지할 수 있다.
CORS 문제 해결하기
CORS 에러를 해결하기 위해 직접 응답 헤더에 Origin을 적어주는 방식도 가능하지만, 조금 더 간편한 cors 미들웨어 라이브러리를 설치해서 해결해보자.
03-05-rest-api-with-frontend→backend로 터미널을 이동하여yarn add cors를 입력해 설치해준다.
그리고 backend 폴더의 index.js에서 cors를 import하고 적용시켜 준다.
// index.js
// ...생략
import cors from 'cors';
const app = express();
app.use(express.json());
app.use(cors()); // 추가된 부분
// ...생략- import 한
cors를 적용시켜주기 위해app.use를 사용해 준다.app.use(cors())같이 입력해주면 모든 origin에서 들어오는 요청을 허용하게 된다.- 추후, 보안과 관련해 특정 origin만을 허용해야 한다면,
app.use(cors({origin: }))과 같이 작성하여 특정 origin만을 허용하도록 설정할 수 있다.
이후, 백엔드 서버를 yarn start:dev 명령어로 다시 실행시켜준다.
그 후, 만들어둔 버튼을 클릭해보면 CORS 에러가 나타나지 않는 것을 확인할 수 있다.
