[2026.06.09] - TIL 47일차 Ajax, Fetch, JSON 데이터 처리 정리

 

목차
1 비동기 통신 개요
2 JSON
3 jQuery Ajax
4 Fetch API
5 Servlet에서 JSON 응답하기
6 공공자전거 JSON 데이터 처리
7 BIKE_TB 테이블과 BikeDto
8 BikeServlet
9 BikeDao
10 bike01 방식과 bike02, bike03 방식
11 오늘 실습의 핵심 정리

 

1 비동기 통신 개요

1) 비동기 통신

 

    (1) 비동기 통신의 의미

    비동기 통신은 웹 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받는 방식이다.

    사용자는 현재 화면을 유지한 상태에서 필요한 데이터만 서버에 요청하고 응답받을 수 있다.

 

    (2) 사용하는 이유

    일반적인 form submit은 요청 후 페이지가 이동하거나 새로고침된다.

    하지만 비동기 통신을 사용하면 화면 일부만 바꿀 수 있어 더 자연스러운 웹 화면을 만들 수 있다.

 

    (3) 오늘 실습의 흐름

    오늘은 jQuery의 ajax, getJSON, JavaScript의 fetch를 사용해 서버와 데이터를 주고받았다.

    서버에서는 Servlet이 요청을 받고 JSON 형태로 응답하거나, 전달받은 JSON 데이터를 DB에 저장했다.

2 JSON

1) JSON의 개념

 

    (1) JSON

    JSON은 JavaScript Object Notation의 줄임말이다.

    데이터를 주고받기 쉽게 문자열 형태로 표현한 데이터 형식이다.

 

    (2) 사용하는 이유

    클라이언트와 서버는 서로 다른 언어를 사용할 수 있다.

    JavaScript와 Java Servlet 사이에서 데이터를 주고받을 때 JSON을 사용하면 구조화된 데이터를 쉽게 전달할 수 있다.

 

    (3) 기본 구조

    JSON은 key와 value 형태로 데이터를 표현한다.

    예를 들어 이름, 총점, 평균 같은 값을 하나의 객체 형태로 묶어 전달할 수 있다.

 

2) JSON과 Java 객체

 

    (1) JavaScript 객체와 JSON

    JavaScript에서는 JSON 데이터를 객체처럼 다룰 수 있다.

    서버로 보낼 때는 JSON.stringify를 사용해 객체를 문자열로 변환할 수 있다.

 

    (2) Java에서 JSON 처리

    Java Servlet에서는 json-simple이나 Gson 같은 라이브러리를 사용해 JSON 데이터를 만들거나 분석할 수 있다.

    json-simple은 Java 객체를 JSON 문자열로 만들 때 사용했고, Gson은 JSON 문자열을 Java에서 읽고 객체처럼 처리할 때 사용했다.

3 jQuery Ajax

1) $.ajax

 

    (1) $.ajax의 역할

    $.ajax는 jQuery에서 비동기 통신을 처리하는 함수이다.

    서버에 요청을 보내고, 응답이 오면 success 함수에서 결과를 처리한다.

 

    (2) 사용하는 이유

    버튼을 클릭했을 때 서버에 데이터를 보내고, 결과만 화면에 출력할 수 있다.

    페이지 전체를 이동하지 않고 결과 영역만 변경할 수 있다.

 

    (3) success

    success는 서버 통신이 성공했을 때 실행되는 함수이다.

    서버에서 JSON 데이터를 보내면 JavaScript 객체처럼 받아 화면에 출력할 수 있다.

 

    (4) error

    error는 서버 통신이 실패했을 때 실행되는 함수이다.

    404, 500 같은 오류가 발생했을 때 원인을 확인하기 위해 사용한다.

 

2) getParam 함수

 

    (1) 파라미터 문자열 생성

    getParam 함수는 입력창의 값을 읽어 URL 뒤에 붙일 파라미터 문자열을 만든다.

    이름, 국어, 영어, 수학 점수를 서버로 전달하기 위해 사용했다.

 

    (2) encodeURIComponent

    encodeURIComponent는 URL에 들어가면 문제가 될 수 있는 문자를 안전하게 변환하는 함수이다.

    이름처럼 한글이나 특수문자가 들어갈 수 있는 값은 인코딩해서 보내는 것이 좋다.

 

3) $.getJSON

 

    (1) $.getJSON의 역할

    $.getJSON은 JSON 파일을 읽어오는 jQuery 함수이다.

    bike.json 파일처럼 이미 JSON 형태로 만들어진 데이터를 가져올 때 사용한다.

 

    (2) 사용하는 이유

    JSON 파일을 직접 읽어 화면에 테이블 형태로 출력할 수 있다.

    공공데이터처럼 구조화된 데이터를 웹 페이지에서 다룰 때 유용하다.

4 Fetch API

1) fetch

 

    (1) fetch의 개념

    fetch는 JavaScript에서 서버에 HTTP 요청을 보내는 기본 기능이다.

    jQuery 없이도 비동기 통신을 구현할 수 있다.

 

    (2) 사용하는 이유

    최신 JavaScript에서는 fetch를 많이 사용한다.

    외부 라이브러리 없이 서버 요청, JSON 응답 처리, POST 전송 등을 구현할 수 있다.

 

    (3) await

    await는 서버 응답이 올 때까지 기다리는 역할을 한다.

    비동기 작업을 순서대로 작성할 수 있게 해준다.

 

2) response.json

 

    (1) JSON 응답 변환

    response.json은 서버에서 받은 JSON 문자열을 JavaScript 객체로 변환한다.

    변환 후에는 data.name, data.sum, data.avg처럼 객체 속성으로 접근할 수 있다.

 

3) response.text

 

    (1) 문자열 응답 처리

    response.text는 서버에서 받은 응답을 문자열로 읽는다.

    DB 저장 결과처럼 숫자나 간단한 문자열을 받을 때 사용할 수 있다.

5 Servlet에서 JSON 응답하기

1) TestController

 

    (1) 성적 처리 Servlet

    TestController는 name, kor, eng, math 값을 요청 파라미터로 받는다.

    받은 점수를 이용해 총점과 평균을 계산한다.

 

    (2) JSON 문자열 직접 생성

    계산 결과를 JSON 문자열 형태로 직접 만들어 응답했다.

    name, sum, avg 값을 JSON 형식으로 만들어 클라이언트에 전달했다.

 

    (3) contentType

    response.setContentType("application/json; charset=UTF-8")을 설정했다.

    이 설정은 서버 응답이 JSON 데이터라는 것을 클라이언트에게 알려준다.

 

2) TestController2

 

    (1) json-simple 사용

    TestController2는 json-simple의 JSONObject를 사용해 JSON 데이터를 만들었다.

    문자열을 직접 조립하는 방식보다 객체에 값을 담는 방식이라 더 안정적이다.

 

    (2) JSONObject

    JSONObject는 JSON 객체를 Java에서 다룰 수 있게 해주는 클래스이다.

    put 메소드를 사용해 name, sum, avg 값을 저장하고 toJSONString으로 JSON 문자열을 만든다.

 

3) Test Servlet

 

    (1) 나이 판별 Servlet

    Test Servlet은 age 값을 받아 성인 여부를 판단한다.

    age가 20 이상이면 성인, 아니면 성인이 아니라고 결과를 만든다.

 

    (2) JSON 응답

    result 값을 JSONObject에 담아 JSON 문자열로 응답했다.

    클라이언트에서는 이 값을 받아 화면의 result 영역에 출력했다.

6 공공자전거 JSON 데이터 처리

1) bike.json

 

    (1) 데이터 구조

    bike.json은 서울시 공공자전거 대여소 정보를 담은 JSON 파일이다.

    DESCRIPTION에는 각 컬럼의 설명이 들어 있고, DATA에는 실제 대여소 데이터 목록이 들어 있다.

 

    (2) DESCRIPTION

    DESCRIPTION은 화면 테이블의 제목으로 사용할 수 있는 정보이다.

    대여소 주소, 대여소 번호, 대여소명, 거치대 수, 경도, 위도 같은 컬럼명을 가진다.

 

    (3) DATA

    DATA는 실제 자전거 대여소 목록이다.

    각 데이터에는 구분, 대여소 번호, 대여소명, 주소, 거치대 수, 경도, 위도 값이 들어 있다.

 

2) JSON 데이터를 사용하는 이유

 

    (1) 외부 데이터 활용

    실제 서비스에서는 데이터를 직접 입력하기보다 외부 API나 JSON 파일에서 가져오는 경우가 많다.

    이번 실습은 외부 데이터 형식을 읽고 DB에 저장하는 흐름을 연습한 것이다.

 

    (2) 화면 출력과 DB 저장

    JSON 데이터는 화면에 테이블로 출력할 수도 있고, 서버로 보내 DB에 저장할 수도 있다.

    오늘 실습에서는 두 가지 흐름을 모두 다뤘다.

7 BIKE_TB 테이블과 BikeDto

1) BIKE_TB 테이블

 

    (1) 자전거 대여소 저장 테이블

    BIKE_TB는 bike.json에서 읽어온 자전거 대여소 정보를 DB에 저장하기 위한 테이블이다.

    구분, 대여소 번호, 대여소명, 주소, 거치대 수, 경도, 위도를 저장한다.

 

    (2) CONTENT_ID

    CONTENT_ID는 대여소 번호이다.

    PRIMARY KEY로 설정되어 대여소 하나를 구분하는 기준이 된다.

 

    (3) LONGITUDE와 LATITUDE

    LONGITUDE는 경도, LATITUDE는 위도이다.

    위치 기반 서비스를 만들 때 지도에 표시할 수 있는 중요한 좌표 정보이다.

 

2) BikeDto

 

    (1) 자전거 데이터 객체

    BikeDto는 BIKE_TB 테이블의 한 행 데이터를 Java 객체로 담는 클래스이다.

    JSON에서 읽은 대여소 정보를 Java 객체로 변환해 DAO로 전달할 때 사용한다.

 

    (2) DTO를 사용하는 이유

    JSON 데이터에서 꺼낸 값을 바로 SQL에 넣는 것보다 DTO에 담아 전달하면 구조가 명확해진다.

    addr_gu, content_id, content_nm, new_addr, cradle_count, longitude, latitude 값을 하나의 객체로 관리할 수 있다.

8 BikeServlet

1) BikeServlet의 역할

 

    (1) 자전거 데이터 처리 Controller

    BikeServlet은 자전거 JSON 데이터를 DB에 저장하는 요청을 처리하는 Servlet이다.

    command 값에 따라 first_db 방식과 second_db 방식을 나누어 처리한다.

 

2) first_db 방식

 

    (1) form 데이터 처리

    first_db는 bike01.jsp에서 form submit으로 전달된 데이터를 처리한다.

    JavaScript에서 각 대여소 정보를 hidden input에 문자열로 넣고, 서버에서는 request.getParameterValues로 받는다.

 

    (2) 문자열 split

    각 데이터는 구분자 / 로 연결되어 전달된다.

    Servlet에서는 split("/")을 사용해 문자열을 나누고, 각각의 값을 BikeDto에 저장한다.

 

    (3) DB 저장

    만들어진 BikeDto 리스트를 BikeDao의 insert 메소드로 전달한다.

    DB 저장이 성공하면 bike01.jsp로 다시 이동한다.

 

3) second_db 방식

 

    (1) 비동기 JSON 전송

    second_db는 JavaScript에서 JSON 전체를 문자열로 변환해 서버에 보내는 방식이다.

    페이지 이동 없이 Ajax나 fetch로 서버에 데이터를 전달한다.

 

    (2) JSON.stringify

    JSON.stringify는 JavaScript 객체를 JSON 문자열로 바꾼다.

    이 문자열을 obj라는 이름의 파라미터로 BikeServlet에 전달했다.

 

    (3) Gson 사용

    Servlet에서는 Gson의 JsonParser를 사용해 JSON 문자열을 JsonElement로 변환했다.

    이후 DATA 배열을 반복하면서 각 대여소 정보를 꺼내 BikeDto에 담았다.

 

    (4) 응답 처리

    DB 저장 결과를 숫자로 응답했다.

    클라이언트에서는 응답값이 0보다 크면 저장 성공으로 판단하고 화면에 데이터를 출력했다.

9 BikeDao

1) BikeDao의 역할

 

    (1) DB 저장 담당

    BikeDao는 BIKE_TB 테이블에 자전거 대여소 데이터를 저장하거나 기존 데이터를 삭제하는 역할을 한다.

    BikeServlet에서 만든 BikeDto 리스트를 받아 DB에 INSERT한다.

 

2) insert

 

    (1) 여러 데이터 저장

    insert 메소드는 List<BikeDto>를 받아 여러 대여소 데이터를 한 번에 저장한다.

    데이터가 많기 때문에 반복문을 이용해 PreparedStatement에 값을 세팅한다.

 

    (2) addBatch

    addBatch는 여러 INSERT 작업을 모아두는 기능이다.

    데이터를 하나씩 바로 실행하지 않고 모아두었다가 한 번에 처리할 수 있다.

 

    (3) executeBatch

    executeBatch는 addBatch로 모아둔 SQL 작업들을 한 번에 실행한다.

    많은 데이터를 저장할 때 일반 executeUpdate를 반복하는 것보다 효율적이다.

 

    (4) 성공 개수 확인

    executeBatch는 각 SQL 실행 결과를 배열로 반환한다.

    결과값이 1이면 해당 INSERT가 성공한 것으로 보고 성공 개수를 증가시켰다.

 

    (5) 트랜잭션 처리

    성공한 개수가 전체 리스트 크기와 같으면 commit한다.

    일부라도 실패하면 rollback하여 전체 저장을 취소한다.

 

3) delete

 

    (1) 기존 데이터 삭제

    delete 메소드는 BIKE_TB의 기존 데이터를 삭제한다.

    새로운 JSON 데이터를 저장하기 전에 기존 데이터를 비우기 위해 사용했다.

 

    (2) 사용하는 이유

    같은 CONTENT_ID가 PRIMARY KEY이기 때문에 기존 데이터가 남아 있으면 중복 오류가 발생할 수 있다.

    먼저 삭제 후 다시 저장하면 최신 데이터를 기준으로 테이블을 다시 구성할 수 있다.

10 bike01 방식과 bike02, bike03 방식

1) bike01.js 방식

 

    (1) JSON 파일 읽기

    bike01.js는 $.getJSON을 사용해 bike.json 파일을 읽는다.

    DESCRIPTION은 thead에 출력하고, DATA는 tbody에 출력한다.

 

    (2) hidden input 사용

    각 대여소 데이터는 화면에 출력하면서 동시에 hidden input에도 저장된다.

    form submit 시 hidden input 값들이 서버로 전달된다.

 

    (3) 특징

    이 방식은 JSON 데이터를 화면에 먼저 만들고, form 전송으로 DB에 저장한다.

    구현은 직관적이지만 데이터가 많을 경우 hidden input이 많이 생성되어 비효율적일 수 있다.

 

2) bike02.js 방식

 

    (1) Ajax 방식

    bike02.js는 $.ajax를 사용해 JSON 데이터를 서버로 비동기 전송한다.

    서버 응답을 받은 뒤 성공 여부에 따라 테이블을 화면에 출력한다.

 

    (2) 페이지 이동 없음

    Ajax 방식은 페이지를 새로고침하지 않고 서버에 데이터를 저장할 수 있다.

    저장 결과에 따라 현재 화면에서 바로 성공 또는 실패 처리를 할 수 있다.

 

3) bike03.js 방식

 

    (1) fetch 방식

    bike03.js는 fetch와 async, await를 사용해 JSON 파일을 읽고 서버로 전송한다.

    jQuery 없이 순수 JavaScript로 비동기 통신을 구현한 방식이다.

 

    (2) JSON 파일 읽기

    fetch("json/bike.json")으로 JSON 파일을 요청한다.

    response.json을 사용해 응답 데이터를 JavaScript 객체로 변환한다.

 

    (3) 서버 전송

    fetch("bike?command=second_db", 옵션)을 사용해 POST 방식으로 서버에 데이터를 보낸다.

    body에는 obj=JSON문자열 형태로 데이터를 담았다.

 

    (4) 화면 출력

    서버에서 DB 저장 결과를 받은 뒤, 성공하면 JSON 데이터를 테이블에 출력한다.

    이 방식은 비동기 처리 흐름을 JavaScript 기본 문법으로 구현했다는 점이 중요하다.

11 오늘 실습의 핵심 정리

1) 비동기 통신 이해

 

    (1) Ajax

    Ajax는 화면 전체를 새로고침하지 않고 서버와 데이터를 주고받는 방식이다.

    오늘 실습에서는 jQuery의 $.ajax와 $.getJSON을 사용했다.

 

    (2) fetch

    fetch는 JavaScript에서 제공하는 기본 비동기 통신 기능이다.

    jQuery 없이도 서버에 요청을 보내고 응답을 처리할 수 있다.

 

    (3) 차이

    $.ajax는 jQuery를 사용하는 방식이고, fetch는 순수 JavaScript 방식이다.

    둘 다 서버와 비동기 통신을 할 수 있지만, 작성 문법과 사용 방식이 다르다.

 

2) JSON 데이터 처리

 

    (1) 클라이언트에서 JSON 사용

    JavaScript에서는 JSON 데이터를 객체처럼 읽고 화면에 출력할 수 있다.

    JSON.stringify를 사용해 객체를 문자열로 변환하여 서버로 보낼 수도 있다.

 

    (2) 서버에서 JSON 사용

    Servlet에서는 json-simple을 사용해 JSON 응답을 만들 수 있다.

    Gson을 사용하면 클라이언트가 보낸 JSON 문자열을 Java에서 분석할 수 있다.

 

    (3) JSON의 역할

    JSON은 클라이언트와 서버 사이에서 데이터를 주고받기 위한 공통 형식이다.

    JavaScript와 Java Servlet처럼 서로 다른 환경 사이에서 데이터를 연결해준다.

 

3) Servlet 응답 방식

 

    (1) HTML 응답과 JSON 응답

    이전에는 Servlet이 JSP로 forward하거나 HTML을 직접 응답하는 경우가 많았다.

    오늘은 Servlet이 JSON 데이터를 응답하고, 클라이언트 JavaScript가 그 결과를 화면에 출력했다.

 

    (2) application/json

    JSON을 응답할 때는 response.setContentType("application/json; charset=UTF-8")을 사용한다.

    이를 통해 클라이언트가 응답 데이터를 JSON으로 해석할 수 있다.

 

4) 대량 데이터 저장

 

    (1) bike.json

    bike.json에는 여러 자전거 대여소 데이터가 들어 있다.

    이 데이터를 JavaScript에서 읽고 Servlet으로 전달한 뒤 DB에 저장했다.

 

    (2) Batch 처리

    BikeDao에서는 addBatch와 executeBatch를 사용해 여러 INSERT를 한 번에 처리했다.

    대량 데이터를 저장할 때 유용한 방식이다.

 

    (3) commit과 rollback

    모든 데이터가 정상적으로 저장되면 commit한다.

    일부 데이터라도 실패하면 rollback하여 전체 저장을 취소한다.

 

5) 오늘 배운 점

 

    (1) 클라이언트와 서버의 역할

    JavaScript는 JSON 파일을 읽고 서버에 데이터를 전송한다.

    Servlet은 데이터를 받아 Java 객체로 변환하고 DAO를 통해 DB에 저장한다.

 

    (2) 화면 갱신 방식

    비동기 통신을 사용하면 페이지 이동 없이 서버 결과를 받아 화면 일부만 변경할 수 있다.

    이것이 기존 form submit 방식과 가장 큰 차이이다.

 

    (3) JSON 기반 데이터 흐름

    오늘 실습을 통해 JSON 파일, JavaScript 객체, Servlet, DTO, DAO, DB가 어떻게 연결되는지 이해했다.

    실제 웹 서비스에서 외부 데이터를 받아 저장하고 화면에 보여주는 기본 흐름을 배웠다.

 

    (4) Ajax와 fetch 비교

    jQuery Ajax는 문법이 익숙하고 간단하게 사용할 수 있다.

    fetch는 최신 JavaScript 기본 기능으로, 외부 라이브러리 없이 비동기 통신을 구현할 수 있다.

 

    (5) 실무에 가까운 흐름

    공공데이터처럼 많은 JSON 데이터를 읽고 DB에 저장하는 과정은 실제 서비스에서도 자주 사용된다.

    이번 실습은 단순 화면 출력이 아니라 외부 데이터 수집, 서버 전송, DB 저장까지 연결했다는 점에서 의미가 있다.