[포스코x코딩온] 웹개발자 풀스택 과정 5주차 회고록 - 동적 Form 전송(Axios - 비동기 HTTP 통신)

오늘 할 실습은❓

오늘 해볼 실습은 아직 데이터베이스가 없기 때문에 임의의 아이디와 비밀번호를 부여해서 사용자가 입력한 아이디와 비밀번호가 같으면 로그인 성공 메시지를 띄우고 틀리면 로그인 실패 메시지를 띄우는 것이다.

 

이전 블로그에선 동기방식의 HTTP 통신을 통해 정적으로 데이터를 주고받아봤다.

그렇기 때문에 페이지 이동이 있었지만 지금 할 것은 비동기식 방법의 HTTP 통신을 할 것이다. 

페이지 이동 없이 데이터를 주고받는 실습을 해 볼 것이다.

 

비동기 HTTP 통신 방법에는 총 3가지가 있다.

1. Ajax

2. Axios

3. Fetch 

나는 개인적으로 JQuery를 싫어하기 때문에 Ajax는 안 쓸 것이고 Fetch는 이전 졸업작품에서 질리도록 써봤기 때문에 안 쓸 것이다. 가장 사람들이 많이 쓰고 마틴 리더님도 추천해 주신 Axios를 사용해서 비동기 통신 할 예정이다.

그리고 웹 페이지를 만들 때는 동기 방식으로 만들 것인지 비동기 방식으로 만들 것인지 미리 정하고 만들어야 한다. 

이 둘의 차이점은 아래 블로그를 참고해서 구분하면 된다.

 

🌐 웹의 비동기(Async) / 동기(Sync) 통신 정리

 

---

 

⚒️ Axios 설치하기

다른 라이브러리와 같이 npm을 설치해서 사용할 수 있고 CDN을 사용할 수 있다.

시작하기 | Axios Docs

1. npm 사용하기

$ npm install axios

 

2.CDN 사용하기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

🏫 Axios 문법 배우기

// dataconst data = {
    id: form.id.value,
    pw: form.pw.value,
};

// GET 방식
axios({
    method: "GET",		// 통신하고자 하는 방법
    url: "/axios",		// 통신하고자 하는 주소
    params: data		// JSON 형태의 보내고자 하는 데이터
})

// POST 방식
axios({
    method: "POST",
    url: "/axios",
    data: data
})

 

GET 방식과 POST 방식은 비슷하게 생겼다. 하지만 꼭 알아야 할 차이점이 존재한다.

Get 방식일 때는 데이터를 보낼 때 키 값이 params 이고

Post,Patch,Delete 방식일 때는 키값이 data이다. ( Patch,Delete는 모두 Post에서 파생된 것이기 때문이다.)

그럼 프론트에서 각각 보내는 방식이 다른데, 백엔드에서는 어떻게 받을까??🧐

 

 

프론트에서 Get 방식의 params로 data를 보내면 백엔드에서는 req.query 형식으로 받는다.

그리고 Post 방식의 data로 data를 보내면 백엔드에서는 req.body 형식으로 받는다.

 

🖥️ EJS 파일 만들기 ( 프론트 )

// HTML
<form name="info">
    id <input type="text" name="id">
    <br>
    pw <input type="password" name="pw">
    <br>
    <button type="button" onclick="login()">로그인</button>
    <div class="box"></div>
</form>

동기식 방법과 비교해서 설명해 볼 것이다. 

1. form 태그에 action과 method를 쓸 필요가 없다.
2. button 타입을 button으로 바꿔줘야 한다.

axios에 url과 method를 쓰기 때문에 form 태그에 쓸 필요가 없다. 

button 타입은 기본값이 submit으로 되있기 새로고침이 된다. 그러니 꼭 타입을 button으로 바꿔줘야 한다.

 

 

비동기 통신을 하기 위해서 가장 중요한 파일은 자바스크립트 파일이다. 

 

1️⃣ 보내려는 데이터 추출

// JS
const form = document.forms["info"];
const data = {
    id: form.id.value,
    pw: form.pw.value,
};

Form태그 안에 있는 값들을 객체 형식으로 변수에 저장한다.

 

2️⃣ 비동기 방식으로 통신하기

axios({
    method: "POST",
    url: "/login",
    data: data,     // 백엔드로 데이터 보내주기
})

백엔드로 데이터를 보내주기 위해 Axios 함수를 쓴다. 보내려는 방식과(method), 주소(url), 정보(data)를 선언해 준다.

 

3️⃣ 백엔드와 통신 성공시 콜백함수 선언

.then((res) => {    // 백엔드에서 받은 데이터
    if (res.data.success) {		// 회원정보가 일치할 때
        console.log("res", res)
        conbox.textContent = "로그인 성공입니다.";
        conbox.style.color = "blue";
    } else {				// 회원정보가 일치하지 않을 때		
        console.log("res", res)
        conbox.textContent = "로그인 실패입니다.";
        conbox.style.color = "red";
    }
})

프론트에서 보낸 데이터가 백엔드에 잘 도착했고 다시 프론트로 정보를 성공적으로 전달 해줬을 때의 콜백 함수이다.

이번 실습은 회원정보가 일치했을 때와 불일치했을 때를 조건문으로 나눠서 진행하였다.

 

 

🗃️ 백엔드

이전 블로그에서 설명한 미들웨어 뷰엔진은 동일하게 설정하고 시작한다.

1️⃣ 임의의 정보 선언

const validId = "abc";
const validPw = "1234";

현재 내 아이디와 비밀번호를 미리 지정해 둔다.

 

2️⃣ 구조분해 할당 & 잘 넘어 왔는지 확인

const { id, pw } = req.body;
console.log("back", req.body);

프론트로부터 받은 데이터를 구조분해 할당을 통해 넘어온 값을 각각 id와 pw에 넣어준다.

그리고 잘 전달 받았는지 콜솔에 찍어본다.

 

프론트에서 입력 후 로그인 했을 때 콘솔찍은 모습

백엔드까지 정보가 잘 넘어왔다.

이젠 이 정보가 내가 미리 정한 정보와 일치한지 아닌지 비교하고 그 결과 값을 프론트에 넘겨주면 된다.

 

3️⃣ 회원정보 일치 확인 & 프론트로 결과값 전달

 if (id === validId && pw === validPw) {
    res.send({ success: true }); // 프론트로 데이터 보내기
  } else {
    res.send({ success: false });
  }

조건문을 통해 프론트로 성공여부 객체를 하나 보내준다.

성공일 때는 value값이 true인 객체, 실패일 때는 false인 객체

 

이후 프론트-3번째 코드를 보고 결과를 화면에 띄어주면 끝이다.

 

결과 화면

 

알게된 점!!

1. 동적 Form일 때는 action과 method를 쓸 필요가 없다. (axios에서 써주기 때문)
2. button 타입을 button으로 꼭 설정해 두기 (이거 안하면 의미 없어짐)
3. req와 res의 개념이 좀 헷갈렸었는데 프론트에서 백으로 데이터를 전송하면 req, 반대로 백에서 프론트로 데이터를 전송하면 res로 이해하면 될 것 같다.
4. form 태그안에 있는 input 태그들을 한번에 접근하고 싶으면 아래의 코드를 사용하면 된다는 것을 알았다. (신기..)

const form = document.forms["info"];