[포스코 x 코딩온] 웹개발 과정 5주차 - 3 | 동적인 FORM 전송

강민혁·2023년 4월 3일

[포스코X코딩온]js 공부 백엔드 풀스택 프론트엔드

nodejs

목록 보기

4/6

이번시간에는 동적인 FORM전송에 대해 알아보았습니다.

동적 FORM 전송😊😊

동적인 form 전송은 서버로 전송할 데이터가 정적인(form의 HTML 코드 상에서 이미 존재하는) 것이 아니라, 동적으로 JavaScript를 사용하여 생성되는 경우를 말합니다.

예를 들어, 사용자가 버튼을 클릭하면 JavaScript 함수가 실행되고, 그 함수가 동적으로 폼(form)을 생성한 후, 해당 폼을 서버로 전송하는 경우가 있습니다. 이렇게 동적으로 생성된 폼 데이터를 서버로 전송해야 하는 경우에는, 일반적인 form 전송 방식으로는 해결할 수 없습니다. 대신, JavaScript를 사용하여 동적으로 생성된 폼 데이터를 서버로 전송해야 합니다.

비동기 http 통신

비동기 http 통신에 사용되는 것 중 3가지를 소개하겠습니다.

ajax

fetch

axios

ajax

Ajax(Asynchronous JavaScript and XML)는 JavaScript를 사용하여 비동기적으로 서버와 브라우저간에 데이터를 주고받는 기술입니다.

기존의 웹페이지는 사용자의 요청에 따라 새로운 페이지를 서버로부터 받아와서 브라우저에 렌더링하는 방식이었습니다. 이 방식은 페이지가 다시 로드되어야 하므로 사용자 경험을 저해하는 단점이 있습니다.

반면에 Ajax는 페이지를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있으므로, 사용자가 페이지를 이용하는 동안 다른 작업을 할 수 있게 해주며, 빠른 데이터 전송이 가능합니다.

Ajax는 단순하게 구현하려면 jQuery의 사용이 필수라는 점이 큰 단점인 것 같습니다. 만약 사용하지 않는다면 XMLHttpRequest 객체를 이용하여 사용 할 수 있으나, 복잡합니다. (jQuery안쓰면 굳이.. axios나 fetch쓸 것 같아요)

// jQuery를 사용하여 Ajax 요청 보내기
$.ajax({
    url: '/example/api/data', // 요청 보낼 URL
    method: 'GET', // 요청 방식
    dataType: 'json', // 응답 데이터 타입
    data: { // 요청 데이터
        param1: 'value1',
        param2: 'value2'
    },
    success: function(response) { // 요청 성공 시 실행될 콜백 함수
        console.log('Ajax 요청 성공:', response);
    },
    error: function(xhr, status, error) { // 요청 실패 시 실행될 콜백 함수
        console.error('Ajax 요청 실패:', status, error);
    }
});

fetch

Fetch는 웹 브라우저에서 제공하는 API로, 서버로부터 데이터를 가져오는 데 사용됩니다. 이전에는 Ajax(XMLHttpRequest)를 사용하여 데이터를 가져왔지만, Fetch는 더욱 간단하고 강력한 기능을 제공합니다.

Fetch는 Promise 기반으로 동작하며, 간단한 인터페이스로 HTTP 요청을 처리합니다. Fetch API를 사용하여 GET, POST, PUT, DELETE 등의 HTTP 메소드를 사용할 수 있습니다. 또한, CORS(Cross-Origin Resource Sharing)를 지원하여 다른 도메인에서 리소스를 가져올 수 있습니다.

Promise 기반으로 동작하기 때문에 비동기 처리가 용이하다는 장점이 있습니다.

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

axios

axios는 현재 가장 많이 사용되는 강력한 라이브러리 입니다.

axios는 Promise를 기반으로 하는 브라우저와 Node.js에서 동작하는 HTTP 클라이언트 라이브러리입니다.
axios는 HTTP 요청을 보내고 받기 위한 간단한 API를 제공합니다.

axios는 브라우저에서 XMLHttpRequest를 사용하고 Node.js에서는 HTTP 모듈을 사용하여 HTTP 요청을 처리합니다. axios는 Promise를 기반으로 하기 때문에, 비동기 HTTP 요청을 처리할 때 프로미스 체인을 사용하여 쉽게 처리할 수 있습니다.

axios는 다양한 기능을 제공합니다. 그 중에는 HTTP 요청 취소, 요청과 응답 데이터의 변환, 인터셉터, CSRF 보호, 자동 JSON 직렬화 등이 있습니다. 또한, axios는 Promise API를 기반으로 하기 때문에, async/await와 함께 사용하여 비동기 HTTP 요청을 보다 쉽게 처리할 수 있습니다.

매우 간편한 사용법과 다양한 기능을 가진 장점이 있습니다.
하지만 라이브러리의 크기가 큰 편이기에 프로젝트에 사용시에 크기가 고려되어야 합니다.

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

++ JSON이란?

JSON(JavaScript Object Notation)은 경량의 데이터 교환 형식으로, 웹 환경에서 데이터를 전송하고 처리하는 데 매우 유용합니다. JSON은 JavaScript에서 객체를 표현하는 문법을 차용하여 만들어졌지만, 언어에 종속적이지 않아서 다양한 프로그래밍 언어에서 사용할 수 있습니다.

JSON은 키-값 쌍으로 이루어진 객체(Object)와 값의 리스트인 배열(Array)을 사용하여 데이터를 구성합니다. 객체는 중괄호({})로 감싸져 있으며, 키(key)와 값(value)은 콜론(:)으로 구분됩니다. 배열은 대괄호([])로 감싸져 있으며, 값은 쉼표(,)로 구분됩니다. JSON에서 키는 반드시 문자열(string)이어야 하며, 값은 문자열, 숫자(number), 불리언(boolean), null, 객체, 배열 등 모든 데이터 타입을 포함할 수 있습니다.

JSON 예시

{
  "name": "John",
  "age": 30,
  "isMarried": true,
  "hobbies": ["reading", "music"],
  "address": {
    "city": "New York",
    "state": "NY"
  }
}