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

❗미리보시오❗

여기서는 동기 방식으로 웹 페이지를 만드는 방법에 대해 다룰 것이다 ✅

---

 

 

[포스코x코딩온] 웹개발자 풀스택 과정 4주차 회고록 - Express, EJS

이전 블로그에서는 데이터를 주고 받는 과정이 없었다. (백엔드에서 데이터를 주면 프론트에서 보여주는 정도..?)

하지만 이번 시간은 프론트에서 보낸 데이터를 백엔드에서 확인하고 다시 프론트로 보내주는 과정을 해 볼 것이다. 

 

Get과 Post 방식을 사용해서 데이터를 보내고 그 차이점을 알아보자!

 

🤔 그 전에.. body-parser?

프론트와 벡 사이의 데이터를 주고 받기 위해선 원하는 형태의 모습으로 전송해야 한다.

body-parser는 요청의 본문을 지정한 형태로 파싱해주는 미들웨어이다.

app.get("/getForm", (req, res) => {
  console.log(req.query);
  res.render("result");
});

간단하게 얘기해서 body-parser없이 req.query을 출력해보면 undefined가 나온다. (아무튼 꼭 필요함)

 

예전에는 모듈로 설치를 해서 불러왔어야 했는데 최근에는 내장모듈로 포함되서 별도로 설치할 필요가 없다.

//body-parser : 데이터를 받아오는 방식(둘다 언제 쓰일지 몰라서 두개 모두 쓰는게 좋다)
app.use(express.urlencoded({ extended: true })); // form 데이터
app.use(express.json()); // JSON 데이터

✅ 미들웨어 쓰는 부분에 꼭 두개다 써주자

 

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

프론트에서 동기 방법으로 웹 페이지를 만들 때와 비동기 방법으로 웹 페이지를 만들 때 코드를 잘 구분해 줘야 한다.

<form action="./getForm" method="get">
    이름: <input type="text" name="name">
    <fieldset>
        <legend>성별</legend>
        <input type="radio" name="gender" value="남자">남자
        <input type="radio" name="gender" value="여자">여자
    </fieldset>
    ...
    <br>
    <button type="submit">회원가입</button>
</form>

동적으로 만들때는 form 태그에 action과 method를 꼭 써줘야 한다. (비동기 방식은 다음 블로그에서!)

action - 어느 주소로 이동 할 것인지
method - 어떤 방법으로 데이터를 전송 할 것인지

❗input 태그 중 사용자가 직접입력하는 type을 제외하고는 모두 value 속성을 써줘야 한다. 

❗name 속성은 쿼리 스트링의 key값으로 지정되기 때문에 type별로 적어줘야 한다.

 

button type도 꼭 submit으로 지정해주자!!

기본값이 submit이긴 하지만 명확히 해주는 게 더 좋으니깐😁

 

이렇게 프론트에서 데이터를 보내줬으면 백엔드에서는 어떻게 받으면 될까?

 

🗃️ 백엔드

app.get("/getForm", (req, res) => {
  console.log(req.query);
  res.render("practice_result", {
    title: "GET요청 폼 결과 확인하기",
    userInfo: req.query,
  });
});

프론트에서 Get 방식으로 데이터를 보냈다면 백엔드에는 req.query 형식으로 들어온다. 

프론트엔드(좌), req.query를 콘솔로 찍은 모습(우)

이 값을 userInfo 라는 키 값에 넣어서 프론트로 보내준다.  render 함수를 사용해서 페이지를 불러오고 그 페이지에 데이터를 전송해준다. 

// result 페이지
<h1>
    <%= title %>
</h1>
<div>이름은<span>
        <%=userInfo.name%>
    </span>입니다.</div>
<div>성별은<span>
        <%=userInfo.gender%>
    </span>입니다.</div>
<div>생년월일은<span>
        <%=userInfo.birth_year%>년<%=userInfo.birth_month%>월<%=userInfo.birth_day%>
    </span>입니다.</div>
<div>관심사<span>
        <%=userInfo.hobby%>
    </span>입니다.</div>

결과 화면

 

위 방식은 Get 방식으로 통신한 것이다. Post 방식도 똑같이 하면 된다. (단 3개만 바꾸면 된다.)

 

Post 방식은 프론트엔드에서 form태그의 method를 post 방식으로 바꾸고 백엔드에서 라우터의 방법을 app.post로 바꾸고 

req.body로 프론트에서 보낸 데이터를 읽으면 된다.

 

Get 방식과 Post 방식의 차이점은 폼에 입력한 정보가 url에 보이냐 안보이냐의 차이점이 있다.

 

Get방식(위)/Post방식(아래)

그렇기 때문에 '보안이 중요한 정보다'라고 생각되면 Post방식을, '별로 안 중요하다'라고 생각되면 Get방식을 사용하면

될 것 같다.

 

꼭 알아야 할 점!!

1. 정적으로 보낼 때는 form 태그에 action과 method 써주기
2. 각각의 input 태그에는 name과 value값 써주기(사용자가 직접 입력하는 input 태그 같은 건 value값 안써도 됨)
3. 백엔드에서 Get 방식으로 데이터를 받을 때는 req.query, Post 방식으로 데이터를 받을 때는 req.body로 받는다.