동적폼 전송 - 241122

오태원·2024년 11월 24일

동기 방식 통신: 한번에 하나만 처리함 -> 페이지를 아예 이동해 서버가 데이터를 처리한다.
비동기 방식 통신: 서버에 데이터를 보내고 응답을 기다리는 동안 다른 처리가 가능하다.

Ajax

Ajax: Asynchrous JavaScript And XML
- XML: eXtensible Markup Language
  - HTML 과 비슷한 마크업 언어
  - HTML과 달리 정해져 있는 것이 아니라 사용자가 정의해 사용 가능
자바스크립트를 이용해 클라이언트와 서버간에 데이터를 주고받는 비동기 HTTP통신이다.
장점
- JQuery를 통해 쉽게 구현 가능
- Error, Success, Complete의 상태를 통해 실행 흐름을 조절할 수 있다.
단점
- JQuery를 사용해야만 간편하고 호환성이 보장된다. ( xml ) 사용은 복잡
- Promise 기반이 아니다.
사용법
ajax라는 method를 사용하고, url, type, data 라는 key에다가 적절한 값을 넣어서 전송을 하면 된다. 그리고 전송이 성공 했을 때 응답이 Success라는 곳의 함수에 매개변수로 들어온다.
- data에는 send로 보내진 데이터들이 오게 된다.
- url에는 보내고싶은 url을 적으면 된다.
- type은 get, post, delete등의 method가 온다.

Ajax 사용

ajax를 사용하기 위해 기본코드랑 파일들을 세팅해준다.
폴더는 views로, 파일은 app.js와 index.ejs로 써준다.

GET 요청 사용

POST 요청 사용

Acxios

node.js와 브라우저를 위한 promise API를 활용
비동기 HTTP통신이 가능, return Promise 객체로 온다.
장점
- Promose 기반으로 만들어졌다.
- 브라우저 호환성이 뛰어나다
단점
- 모듈 설치 or 호출을 해줘야만 사용이 가능하다.
- npm install axios or 클라이언트 CDN 활용
사용법
- ajax와 유사하지만 GETMethod일 때에는 params라는 key, POST Method일 때에는 data라는 key에 데이터를 넣어서 전송한다는 차이점이 있다.
- Promise return을 하기 때문에 then을 사용하고, async await도 사용 가능하다.

Axios - GET 요청 || then, catch 사용

Axios - GET 요청 || async, await 사용

await를 사용하려면 함수에 async가 붙어야 한다.
함수앞에 async를 붙여주고 then ~ catch문과 마찬가지로 전송해줄 데이터를 만들어준다.
then ~ catch같은 경우에는 catch에서 error를 잡아주는데 async ~ await에는 그런 구간이 없다.
그래서 try ~ catch문 안에 await문을 써서 error를 처리해준다.
여기서는 실제data : name, gender담아주기위해 key를 따로 지정해 주지 않고, url에다가 같이 적어 포함시켜주었다.
- ?기호뒤에는 query의 내용이 들어오게 되는데, 여기에 실제 data의 정보를 적어주어서 따로 params key를 사용하지 않고 정보를 담은 것이다.
그리고 resultBox에 적을 객체의 이름이 response.data.name으로 너무 길기 때문에 따로 const에 지정해주어 짧게 사용했다.
결과화면

Axios - POST 요청 || async, await 사용

위에서 했던 GET 요청과 똑같이 해주면 되는데,

주의 해야 할 점은 data를 담을 때 key의 이름을 params가 아닌 data로 해서 담아야 한다.
이때 data는 실제 data가 아닌 axios에서 정해놓은 key의 이름일 뿐이다.
여기서는 실제data name, gender를 text로 내보내기 위해 변수를 지정해주는 과정에서
name과 gender를 직접 사용하지 않고, 다른 방식으로 이름과 성별로 변환하여 지정해주었다.
결과화면

FETCH

Promise기반으로 javascript 내장 라이브러리이다.

장점
- javascript 내장 라이브러리이므로 별도의 import는 필요 X
- Promise 기반
단점
- 최신 문법
- 상대적으로 Axios에 비해 기능 부족
response에는 Promise기반으로하는 다양한 메소드(함수)존재. // text(), JSON()
이 메소드를 사용한다면 다양한 형태의 응답 처리 가능.
FETCH는 데이터가 들어오면 jason형태로 바꾸거나 text형태로 바꿔줘야한다.
- text data -> text전환 // respose.text( ) : 응답을 읽고 텍스트를 반환
- 객체 data -> JSON전환 // response.json( ) : 응답을 JSON형태로 파싱

JSON

JSON : Java Script Object Notation

데이터를 문자열의 형태로 나타내기 위해서 사용 // 데이터를 표시하지 않는 방법 중 하나
네트워크를 통해 다른 시스템들이 소통할 때 사용하는 경량의 DATA교환 형식
자바스크립트에서 파생되었으나 현재는 다른 프로그래밍 언어에서도 지원하는 데이터 포맷
가독성이 뛰어나 컴퓨터와 사람 모두 해석하기 편함
JavaScript의 Object를 기반으로 하는 객체가 아닌 텍스트 형식
JavaScript 객체와 유사하지만 key 이름을 큰 따옴표 " "로 감싸는 차이점이 있음.
문자열, 숫자 ( 정수, 실수 ), 불리언 ( true, false ), 중첩된 객체와 배열 저장도 가능함
JavaScript Object와 JSON 문자열을 서로 변환할 수 있도록 메소드 제공
- JSON.parsel( ) : JSON문자열을 JavaSctipt 객체로 변환
- JSON.stringify( ) : JavaScript 객체를 JSON 문자열로 변환

Fetch - GET 요청 || then, catch 사용

서버에서 주는 데이터(응답값)는 어느 메소드를 쓰던 동일하지만, 어떻게 응답값이 들어오는지는 조금씩 다르다.
원래 서버 같은 경우에는 서버에서 주는 값이 response 객체로 주는 것이 맞지만,
ajax나 axios는 함수 내부적으로 처리를 해서 response안에 실제 data를 담아두던지,response에 직접 담든지 해서 사용하기 쉽게 만들어준다.
Fetch는 ajax와 axios와는 다르게 객체 형태로 받아오기 때문에 data에 알맞게 직접 변환을 시켜 줘야 한다.

fetch GET요청을 하기위해 코드를 작성해준다.
fetch는 default method가 GET요청이므로 따로 적어서 설정을 해줄 필요가 없다.
fetch를 GET요청
text가 아닌 query로 data를 보내줬기에 ejs파일에는 response.text( )가 아닌 response.json( )을 사용해야한다.
결과화면

Fetch - POST 요청 || async ~ await 사용

fetch Post 코드를 작성해준다.
- await를 사용하기 위해서는 function 앞에 async를 적어야 한다.
오류를 잡을 구간이 없기 때문에 try ~ catch를 사용해준다.
- method defaul값인 GET요청이 아니고 POST요청이기때문에 따로 적어준다.
- fetch는 내장되어있는 라이브러리이기 때문에 따로 적어줘야 하는 정보들이 많다.
  - header와 body가 있다.
  - header : 이 data가 어떤 형식으로 보내주고있는지를 명시해준다.
  - body : body에는 data를 적어주어야 하는데, 문자열 json형식으로 보내야 하기 때문에 stringfy( )를 이용해 주었다.
response.jason(), response.text()는 오래걸리는 작업으로 바로 쓰면 안되고, await를 두 번 사용해줘야 한다.
결과화면