[필수용어 실무 6편] JSP + REST API 연동 실전 25선 - 비전공자 개발자 제로의 성장 블로그

Table of Contents

왜 JSP에서 REST API를 배워야 할까?

현대 웹 개발에서는 단순히 JSP 페이지에서 데이터를 보여주는 것만으로는 실무에서 충분하지 않습니다. 오늘날 대부분의 웹 서비스는 클라이언트와 서버가 역할을 명확히 나누고, REST API를 통해 데이터를 주고받는 구조로 설계됩니다.

쉽게 비유하면, JSP 페이지는 “식당의 테이블”이고, REST API는 “주방”입니다.

테이블에서는 손님이 메뉴를 고르고 주문만 하면 되고, 주방에서는 주문받은 메뉴를 조리해서 테이블로 전달합니다.
만약 JSP에서 REST API를 모른다면, 테이블과 주방이 연결되지 않은 셈이죠.

이번 글에서는 REST API의 핵심 원리와 JSP 연동 실무 레시피 25선을 초보자도 쉽게 이해하도록, 그림, 비유, 코드 예제와 함께 정리합니다.
또한 정보처리기사 필기·실기 기출에서 나올 수 있는 포인트도 함께 안내하여, 학습과 실무 두 가지를 동시에 잡을 수 있습니다.

REST API란 무엇인가?

REST(Representational State Transfer)는 웹에서 데이터를 주고 받는 규칙과 구조를 정의한 아키텍처 스타일입니다.
간단히 말하면, 클라이언트와 서버가 약속한 URL 구조, HTTP 메서드(GET/POST/PUT/DELETE), 상태코드(200, 404, 500) 등을 지키면서 통신하는 방법입니다.

GET : 서버에서 데이터를 가져올 때 사용
POST : 서버에 데이터를 새로 만들 때 사용
PUT : 기존 데이터를 수정할 때 사용
DELETE : 데이터를 삭제할 때 사용

예를 들어, 사용자 목록을 가져오고 싶다면 /api/users라는 엔드포인트에 GET 요청을 보내면 JSON 형식으로 사용자 데이터가 반환됩니다.

정보처리기사 기출에서는 종종 HTTP 메서드와 용도 구분이나 JSON/REST 기본 개념이 문제로 등장합니다. 실무에서는 이를 확장해 CRUD 기능, 페이징, 검색 등 다양한 기능을 구현하게 됩니다.

한눈에 보기

구분	내용	실무 포인트
요청	GET, POST, PUT, DELETE	REST 기본 규칙
응답	JSON 처리, 상태코드 확인	fetch / XMLHttpRequest
인증	세션, 토큰, JWT	로그인/권한 관리
보안	CSRF, CORS	안전한 통신
최적화	캐싱, 디바운스, 병렬 호출	성능 향상

JSP + REST API 연동 실무 25선

1. REST 엔드포인트 설계

설명 : 서버에서 URL 구조를 명확히 설계하면 유지보수와 확장이 쉬워집니다.

@WebServlet("/api/users")
public class UserServlet extends HttpServlet { ... }

실무 팁 : /api/posts, /api/comments 등 리소스를 기준으로 URL 설계
정보처리기사 포인트 : REST URL 설계와 HTTP 메서드 구분 문제 출제 가능

2. JSON 반환 기본

설명: REST API에서는 JSON 형식을 표준으로 사용합니다.
비유: JSON은 “서빙 접시 위에 음식 담은 상태”처럼 클라이언트가 바로 사용할 수 있는 데이터 포맷입니다.

response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print("{\"id\":1, \"name\":\"홍길동\"}");
out.flush();

실무 팁 : XML보다 JSON이 간단하고, JavaScript와 즉시 연동 가능

3. Gson 라이브러리 활용

설명: Java 객체를 JSON으로 자동 변환 가능

User u = new User(1,"홍길동");
String json = new Gson().toJson(u);
response.getWriter().write(json);

비유 : 객체를 “그릇째로 전달”하듯 JSON으로 한번에 변환
실무 팁 : 복잡한 객체 구조도 Gson/Jackson으로 쉽게 직렬화

4. fetch() GET 요청

fetch('/app/api/users')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

설명 : fetch는 최신 브라우저 표준 API로, AJAX와 비슷하게 비동기 요청 가능
비유 : fetch는 “주방에 주문을 던지고, 완성된 요리를 기다리는 행동”과 같음
정보처리기사 포인트 : 비동기 요청 처리 및 JSON 파싱 이해

5. fetch() POST 요청

fetch('/app/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({name: '이영희'})
});

설명 : POST 요청으로 서버에 데이터를 생성 가능
팁 : Content-Type을 application/json으로 지정해야 서버가 JSON 파싱 가능
비유 : 손님이 메뉴를 작성해서 주방으로 전달하는 과정

6. Form 전송 비동기 처리

설명 : 파일 업로드나 일반 입력값 전송 시 FormData 활용

form.addEventListener('submit', e => {
  e.preventDefault();
  const data = new FormData(form);
  fetch('/app/api/upload', { method:'POST', body: data });
});

실무 팁: 페이지 리로드 없이 데이터 전송 가능

7. 파일 업로드 — FormData + Part

const fileData = new FormData();
fileData.append('file', fileInput.files[0]);
fetch('/app/api/upload', { method: 'POST', body: fileData });

설명: 이미지, PDF, CSV 업로드 시 multipart/form-data 활용
비유: “봉투에 파일 넣어서 주방으로 전달”

8. XHR vs fetch

설명: XHR은 구형 브라우저 대응용, fetch + Promise는 최신 표준
실무 팁: 새 프로젝트에서는 fetch 권장

9. jQuery.ajax

$.ajax({ url:'/app/api', method:'GET', dataType:'json', success: data => {...} });

설명: 기존 프로젝트에서 아직 많이 사용됨
비유: “기존 주방 방식 그대로 주문 처리”

10. 응답 캐싱 제어

fetch(url, { cache: 'no-store' });

설명: 실시간 데이터 갱신이 필요할 때 캐시 방지

11. 인증 방식 — 토큰 (JWT, OAuth)

설명 : REST API는 서버가 상태를 저장하지 않는 Stateless 구조를 지향합니다. 따라서 로그인 정보를 세션에 저장하지 않고 토큰 기반 인증을 사용합니다. 로그인 후 서버가 JWT 토큰을 발급하면, 클라이언트는 요청 시마다 헤더에 이 토큰을 포함해 서버에 전달합니다.
비유 : “주문 영수증”처럼, 손님이 테이블 카드를 가지고 있는 대신 영수증을 항상 보여주며 주문 내역을 확인하는 것과 비슷합니다.

fetch('/api/profile', {
  method: 'GET',
  headers: { 'Authorization': 'Bearer YOUR_JWT_TOKEN' }
})
.then(res => res.json())
.then(data => console.log(data));

실무 팁: 토큰 만료시간과 갱신 로직 구현 필수
시험 포인트: JWT 구조, 인증 방식 구분 문제

12. CORS 처리

설명: 클라이언트와 서버가 서로 다른 도메인일 때 브라우저는 보안상 요청을 차단합니다. 이를 방지하려면 서버에서 Access-Control-Allow-Origin 헤더를 설정해야 합니다.
비유: “다른 건물에서 배달 음식을 들여오려면 문지기 허락이 필요”

@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class UserController { ... }

팁: 개발/운영 환경별 CORS 허용 도메인 관리 중요
시험 포인트: CORS 정의와 역할

13. 에러 처리

설명: 서버에서 오류가 발생했을 때 상태 코드와 메시지를 클라이언트에 전달해야 합니다.
비유: “주문 중 실수 발생 알림”

fetch('/api/users/999')
  .then(res => {
    if(!res.ok) throw new Error('사용자 없음');
    return res.json();
  })
  .catch(err => console.log(err.message));

실무 팁: try-catch 및 statusCode 활용

14. 로딩 표시

설명: 비동기 요청 중 사용자에게 진행 상황을 보여줘야 UX가 좋습니다.
비유: “주문 대기 중 번호표 확인”

const loading = document.querySelector('#loading');
loading.style.display = 'block';
fetch('/api/users')
  .finally(() => loading.style.display = 'none');

15. JSON 배열 처리

설명: 여러 데이터를 리스트 형태로 받아 반복 처리
코드 예제:

fetch('/api/users')
  .then(res => res.json())
  .then(users => users.forEach(u => console.log(u.name)));

팁: map, forEach로 쉽게 처리 가능

16. AJAX 폼 전송

설명: 페이지 리로드 없이 폼 데이터를 서버로 전송

const formData = new FormData(document.querySelector('#myForm'));
fetch('/api/users', { method:'POST', body: formData });

비유: “봉투에 주문서 넣고 바로 주방 전달”

17. 파일 업로드

설명: FormData + multipart/form-data 활용

const fileInput = document.querySelector('#file');
const data = new FormData();
data.append('file', fileInput.files[0]);
fetch('/api/upload', { method:'POST', body: data });

팁: 서버에서 확장자/용량 체크 필수

18. 파일 다운로드

설명: Blob을 이용해 브라우저에서 파일 저장

fetch('/api/file')
  .then(res => res.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url; a.download = 'example.txt'; a.click();
  });

19. 실시간 알림 (WebSocket)

설명: AJAX로는 실시간 데이터 전달이 어렵습니다. WebSocket을 이용하면 서버에서 즉시 클라이언트로 데이터 전송 가능

const ws = new WebSocket('ws://localhost:8080/alerts');
ws.onmessage = e => console.log('알림:', e.data);

시험 포인트: AJAX vs WebSocket 차이

20. JWT 인증 심화

설명: 토큰 만료, 갱신 로직 구현
팁: Refresh Token 활용, 보안 강화

21. fetch 옵션 고급

설명: cache, credentials, redirect 등 옵션 활용

fetch('/api/users', { credentials: 'include', cache:'no-store' });

22. XMLHttpRequest 사용

설명: 구형 브라우저 대응용, fetch 이전 방식

const xhr = new XMLHttpRequest();
xhr.open('GET','/api/users');
xhr.onload = () => console.log(xhr.responseText);
xhr.send();

23. jQuery.ajax

설명: jQuery 활용, 간단하게 AJAX 호출

$.ajax({ url:'/api/users', method:'GET', dataType:'json',
 success: data => console.log(data) });

24. API 테스트

설명: Postman, Insomnia 활용
팁: 요청/응답 확인, 예외 케이스 테스트

25. 보안 체크

설명: CSRF, XSS, HTTPS 적용
실무 팁: 안전한 통신 필수
시험 포인트: 웹 보안 문제 출제 가능

정보처리기사 연동 포인트

REST API와 HTTP 메서드 구분 → 필기 문제 출제 가능
JSON 처리와 AJAX 통신 → 실기 비동기 처리 예제
인증, 보안, 에러 처리 → 실무 능력과 시험 응용력 강화

외부 참고자료

MDN Fetch API – https://developer.mozilla.org/ko/docs/Web/API/Fetch_API
REST API 설계 원칙 – https://restfulapi.net/
OWASP CSRF 방어 – https://owasp.org/www-community/attacks/csrf

마무리

이번 25선으로 JSP에서 REST API를 연동해 CRUD, 인증, 페이징, 파일 처리까지 실무 적용 가능합니다.
초급자라도 각 레시피를 하나씩 프로젝트에 적용하면 실무 감각과 시험 준비 두 가지를 동시에 잡을 수 있습니다.

[필수용어 실무] 이전 편을 보지 못했다면? 필수용어 실무 시리즈 바로가기

[필수용어 실무 1편] 비전공자가 실무에서 바로 활용 가능한 데이터 연동 & 서버 흐름 25선
[필수용어 실무 2편] 실무에서 마주치는 예외 처리 & 트러블슈팅 핵심 25선
[필수용어 실무 3편] JSP & MVC 패턴 실무 흐름 완전정복 25선
[필수용어 실무 4편] JSP 데이터 처리 & EL/JSTL 실무활용 25선
[필수용어 실무 5편] JSP + AJAX 비동기 데이터 통신 완전정복 25선

왜 JSP에서 REST API를 배워야 할까?

REST API란 무엇인가?

한눈에 보기

JSP + REST API 연동 실무 25선

1. REST 엔드포인트 설계

2. JSON 반환 기본

3. Gson 라이브러리 활용

4. fetch() GET 요청

5. fetch() POST 요청

6. Form 전송 비동기 처리

7. 파일 업로드 — FormData + Part

8. XHR vs fetch

9. jQuery.ajax

10. 응답 캐싱 제어

11. 인증 방식 — 토큰 (JWT, OAuth)

12. CORS 처리

13. 에러 처리

14. 로딩 표시

15. JSON 배열 처리

16. AJAX 폼 전송

17. 파일 업로드

18. 파일 다운로드

19. 실시간 알림 (WebSocket)

20. JWT 인증 심화

21. fetch 옵션 고급

22. XMLHttpRequest 사용

23. jQuery.ajax

24. API 테스트

25. 보안 체크

정보처리기사 연동 포인트

외부 참고자료

마무리

[필수용어 실무] 이전 편을 보지 못했다면? 필수용어 실무 시리즈 바로가기

댓글 달기 댓글 취소