개발 공부/백엔드

백엔드 공부 중 (1. ASP, 2. JSON)

baby-t 2025. 9. 14. 11:43

백엔드 공부 중 asp나 json같은 어려운 단어들을 이해하기 위해 작성했습니다.

 

JSP, PHP, ASP는 지금의 Spring + Thymeleaf 방식이 나오기 전에 웹 페이지를 동적으로 만들기 위해 널리 사용되던 서버 사이드 스크립트 기술들입니다.

이 세 가지 기술의 핵심 공통점은 하나의 파일 안에 HTML 코드와 프로그래밍 코드를 섞어 쓴다는 것입니다.

** analogy ** 세 기술 모두 연극 대본(HTML) 안에 **배우를 위한 특별 지시사항(프로그래밍 코드)**을 적어두는 것과 같습니다. 배우(서버)는 대본을 읽다가 특별 지시사항을 만나면, 대본에 없는 동적인 연기(e.g., 현재 시간 말하기, 관객 이름 부르기)를 수행한 후 다시 대본을 이어서 읽습니다.

### 📜 JSP (Java Server Pages)

  • 기반 언어: Java
  • 설명: HTML 파일 안에 Java 코드를 직접 삽입하는 방식입니다. Java 언어의 강력함과 다양한 라이브러리를 그대로 사용할 수 있다는 장점이 있습니다. Spring이 나오기 전, Java 진영의 표준 웹 기술이었습니다.
  • 코드 예시 (.jsp 파일):<% ... %> 부분에 Java 코드를 작성하면, 서버(톰캣 등)가 이 코드를 실행해서 그 결과를 HTML에 끼워 넣어 사용자에게 보여줍니다.
  • HTML
     
    <html>
<body>
    <h1>안녕하세요!</h1>
    <p>현재 시간은 <%= new java.util.Date() %> 입니다.</p>
</body>
</html>

### 📜 PHP (PHP: Hypertext Preprocessor)

  • 기반 언어: PHP (PHP라는 독자적인 언어 사용)
  • 설명: 배우기 쉽고 개발 속도가 빨라 전 세계적으로 가장 널리 사용된 웹 기술 중 하나입니다. 우리가 잘 아는 '워드프레스(WordPress)'가 바로 PHP로 만들어졌습니다.
  • 코드 예시 (.php 파일):<?php ... ?> 부분에 PHP 코드를 작성하여 동적인 부분을 처리합니다.
  • HTML
     
    <html>
<body>
    <h1>안녕하세요!</h1>
    <p>현재 시간은 <?php echo date('Y-m-d H:i:s'); ?> 입니다.</p>
</body>
</html>

### 📜 ASP (Active Server Pages)

  • 기반 언어: VBScript (마이크로소프트가 만든 스크립트 언어)
  • 설명: 마이크로소프트(MS)사에서 만든 기술로, 윈도우 서버(IIS) 환경에서 동작합니다. 지금은 기능이 크게 발전한 ASP.NET으로 계승되었습니다.
  • 코드 예시 (.asp 파일):JSP와 비슷하게 <% ... %> 안에 VBScript 코드를 사용합니다.
  • HTML
     
    <html>
<body>
    <h1>안녕하세요!</h1>
    <p>현재 시간은 <% =Now() %> 입니다.</p>
</body>
</html>

### 🤔 그래서 지금은 왜 이 방식들을 잘 사용하지 않을까요?

위 세 가지 방식은 한 파일 안에 **화면을 그리는 코드(HTML)**와 **데이터를 처리하는 로직(Java, PHP 등)**이 뒤섞여 있습니다.

이런 방식은 코드가 길어지고 복잡해지면 마치 스파게티 면처럼 얽혀서 유지보수가 매우 어려워지는 단점(일명 '스파게티 코드')이 있었습니다. 디자이너와 개발자가 하나의 파일을 계속 같이 수정해야 하는 불편함도 컸죠.

그래서 등장한 것이 바로 지금 배우고 계신 Spring MVC + Thymeleaf 방식입니다.

  • Controller (Java 코드): 데이터 처리와 비즈니스 로직만 완벽하게 담당합니다.
  • View (Thymeleaf HTML 파일): Controller에게 받은 데이터를 화면에 보여주는 역할만 완벽하게 담당합니다.

이렇게 각자의 역할을 명확하게 분리함으로써, 코드를 훨씬 깔끔하고 체계적으로 관리할 수 있게 되어 현대 웹 개발의 표준 방식으로 자리 잡게 된 것입니다.

 

 

XML, AJAX, JSON은 현대 웹 개발에서 데이터를 주고받고 동적인 화면을 만드는 데 사용되는 핵심 기술들입니다.

세 가지를 한 문장으로 요약하면 이렇습니다. AJAX라는 통신 기술을 사용해서, 웹 브라우저가 페이지 전체를 새로고침하지 않고도 서버와 XML 또는 JSON 형태의 데이터를 주고받는 것입니다.

### 📜 XML (eXtended Markup Language)

XML은 데이터를 저장하고 전달하기 위해 만들어진, 엄격한 규칙을 가진 마크업 언어입니다. HTML처럼 <태그>를 사용하지만, HTML이 화면에 '어떻게 보일지'에 초점을 맞춘다면, XML은 데이터의 **'의미와 구조'**에 초점을 맞춥니다.

** analogy ** XML은 모든 항목에 라벨을 붙여 정리하는 **'각 잡힌 서류 캐비닛'**과 같습니다. 규칙이 명확하고 사람이 읽기 쉽지만, 태그를 열고 닫아야 해서 부피가 크고 번거롭습니다.

#### XML 예시

XML
 
<person>
    <name>홍길동</name>
    <age>30</age>
</person>
  • 특징: 과거에는 많이 사용되었으나, 문법이 장황하고 무거워 지금은 대부분 아래에서 설명할 JSON으로 대체되었습니다.

### 🤖 JSON (JavaScript Object Notation)

JSON은 JavaScript 객체 문법을 기반으로 만들어진, 매우 가볍고 단순한 데이터 교환 형식입니다. 오늘날 웹 API 통신의 사실상 표준(De facto standard)입니다.

** analogy ** JSON은 핵심 내용만 빠르게 적는 **'간결한 메모'**와 같습니다. 군더더기 없이 키(Key)와 값(Value)으로만 이루어져 있어 컴퓨터가 처리하기 매우 빠르고 사람이 보기에도 편합니다.

#### JSON 예시

위 XML과 동일한 데이터를 JSON으로 표현하면 훨씬 간결해집니다.

JSON
 
{
    "name": "홍길동",
    "age": 30
}
  • 특징: XML보다 훨씬 가볍고, 특히 JavaScript 환경에서 데이터를 다루기 매우 편리하여 압도적으로 많이 사용됩니다.

### ⚡ AJAX (Asynchronous JavaScript and XML)

AJAX는 프로그래밍 언어나 형식이 아니라, **웹 페이지 전체를 새로고침하지 않고도 서버와 데이터를 주고받는 '통신 기술' 또는 '기법'**을 의미합니다.

** analogy ** 기존 방식(새로고침): 영화를 보다가 다음 장면으로 넘어갈 때, 화면 전체가 까맣게 변했다가(로딩) 새로운 장면이 나타나는 것. AJAX 방식: 영화 속 주인공이 연기를 하는 도중에, 주머니에서 문자 메시지를 꺼내 확인하고 그에 맞춰 표정을 바꾸는 것. 장면의 흐름은 끊기지 않고 필요한 부분만 자연스럽게 바뀝니다.

우리가 유튜브에서 스크롤을 내릴 때, 지도를 드래그할 때, 댓글을 '더보기' 할 때처럼 페이지가 깜빡이지 않고 새로운 데이터가 부드럽게 표시되는 모든 곳에 AJAX 기술이 사용되고 있습니다.

⚠️ 잠깐! 이름의 함정 AJAX의 'X'는 XML을 의미하지만, 기술이 처음 등장했을 때 주로 XML을 사용했기 때문에 그런 이름이 붙었습니다. 현재는 99% 이상의 AJAX 통신에서 XML 대신 가볍고 편리한 JSON을 사용합니다.

### ✨ 세 기술의 협력 과정 (댓글 더보기 예시)

  1. 사용자가 웹 페이지에서 '댓글 더보기' 버튼을 클릭합니다.
  2. 브라우저의 JavaScript는 AJAX 기술을 사용해 "다음 댓글 10개를 주세요"라는 요청을 서버에 백그라운드로 보냅니다.
  3. 서버는 요청을 받고, 데이터베이스에서 다음 댓글 10개를 찾아 JSON 형식으로 만듭니다.
  4. 서버는 완성된 JSON 데이터를 브라우저에 응답으로 보내줍니다.
  5. JavaScript는 받은 JSON 데이터를 해석하여 기존 댓글 목록 아래에 새로운 댓글들을 HTML 요소로 만들어 동적으로 추가합니다.

이 모든 과정 동안 사용자는 페이지가 깜빡이는 것을 전혀 느끼지 못합니다.

'개발 공부 > 백엔드' 카테고리의 다른 글

스프링 부트 - 스프링 빈과 의존관계  (0) 2025.09.17
스프링 부트 회원 관리 예제 만들기: 설계부터 테스트, DI까지  (2) 2025.09.16
스프링 웹 개발 기초: 3가지 방식으로 웹 요청 처리하기  (0) 2025.09.14
스프링 부트: 정적 콘텐츠와 동적 콘텐츠 처리 방식  (0) 2025.09.13
스프링 부트 입문: 첫 프로젝트 시작하기 (김영한님 강의 정리)  (1) 2025.09.13

'개발 공부/백엔드'의 다른글

  • 현재글백엔드 공부 중 (1. ASP, 2. JSON)

관련글

티스토리툴바