웹개발

3주차 웹개발2

fw3d 2025. 3. 28. 16:28

키워드 JSON,  FETCH

JSON (JavaScript Object Notation)은 서버와 클라이언트 간 데이터를 교환하기 위한 경량 데이터 형식으로, 사람과 기계가 쉽게 읽고 작성할 수 있는 구조를 제공합니다. JSON은 주로 웹 애플리케이션에서 서버와 클라이언트 간의 데이터 전송에 사용됩니다.

1. JSON의 핵심 개념

  • 데이터 표현 형식: JSON은 데이터를 키-값 쌍(Key-Value Pair)으로 표현합니다.
  • 텍스트 기반: JSON은 텍스트 형식이므로, 네트워크를 통해 데이터를 효율적으로 전송할 수 있습니다.
  • 구조화된 데이터: JSON은 단순한 데이터뿐만 아니라 배열(Array)이나 중첩된 객체(Object) 형태로도 복잡한 데이터 구조를 나타낼 수 있습니다.

2. 서버-클라이언트와 JSON

서버와 클라이언트 간의 데이터 통신에서 JSON이 사용되는 흐름:

  1. 클라이언트의 요청:
    • 클라이언트는 서버에 데이터를 요청하거나 데이터를 전송합니다.
    • 예: 클라이언트가 특정 사용자 정보를 요청한다고 가정.
  2. 서버의 응답:
    • 서버는 요청을 처리한 후, 결과를 JSON 형식으로 응답합니다.
    • 이 데이터를 클라이언트는 받아서 화면에 표시하거나 추가 처리를 수행합니다.
  3. 데이터 직렬화 및 역직렬화:
    • 직렬화(Serialization): 객체 데이터를 JSON 형식의 문자열로 변환 (서버 → 클라이언트).
    • 역직렬화(Deserialization): JSON 문자열을 객체로 변환 (클라이언트 → 내부 코드 처리).

 

   4. 사용사례

  • 프론트엔드와 백엔드 간 데이터 교환:
    • React, Angular 같은 프론트엔드 프레임워크는 백엔드와 JSON을 통해 데이터를 주고받습니다.
  • 웹소켓 통신:
    • 실시간 데이터 전송에서도 JSON이 활용됩니다.

 

자바스크립트코드 

템플릿 리터럴

let temple_html = `` 

이를 통해 문자열을 선언하거나, 동적으로 데이터를 포함하는 문자열을 생성할 수 있다.

기존의 문자열과 다르게 문자열, 변수삽입, 표현식 평가등을 쉽게 처리할수있다.

 

3-6

외부의 서버데이터를 이용하는방법 fetch

클라이언트와 서버개념 

 

 

서버 > 클라이언트   테이터를받는 표준 : JSON형식 

 

api 란 

용산지점우리은행서버 예금창구가 api  api는 통상적으로 허락된곳에만 접근허용한다. 

 

웹페이지의 일반적인 데이터 요청방식 get

주소창 분석

~con, ~net 서버이름 

첫번째 /부터?전까지가 창구의 이름 

창구이름 뒤가 쿼리 파라미터 

 

<script>
        function hey() {
              fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
            console.log(data)
      })
    </script>

fetch 설정

url 결과가 data 에 저장된다. 

fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.

아래는 fetch의 기본세팅  2번째줄까지는 고정

    .then(response => response.json()) // 응답을 JSON 형태로 변환
    .then(data => console.log(data))   // 데이터를 출력
    .catch(error => console.error('Error:', error)); // 에러 처리



  • Fetch API는 비동기 네트워크 요청을 처리하기 위한 최신 표준 API입니다. ES6(ECMAScript 2015)에 도입되어, JavaScript의 기본 기능으로 포함됩니다.
  • Promise 기반으로 설계되어, 비동기 요청을 관리하는 방식이 더 직관적이고 간결합니다.
  • HTTP 요청/응답을 처리하는 데 효과적이며 JSON 데이터를 쉽게 받아올 수 있습니다.

 

AJAX란?

  • AJAX (Asynchronous JavaScript and XML)는 웹 애플리케이션이 페이지를 새로 고치지 않고도 서버와 데이터를 교환할 수 있도록 만든 기술입니다.
  • XMLHttpRequest 객체를 기반으로 하며, JSON 또는 XML 데이터를 받아오거나 서버로 보냅니다.
  • 기존의 브라우저에서 널리 사용되던 방식으로, 여러 라이브러리(예: jQuery AJAX 함수)에서도 AJAX 기능을 제공합니다.

 

AJAX와 Fetch의 비교

구분AJAXFetch
기반 기술 XMLHttpRequest 객체 사용 fetch() 메서드 사용
표준화 여부 웹 표준이 아님 (구식 방식으로 간주됨) 웹 표준으로 ES6에서 제공
Promise 지원 직접적으로 지원하지 않음 (콜백 사용) Promise 기반으로 설계 (then, catch) 사용
코드 가독성 콜백을 중첩하여 관리 (복잡해질 가능성 있음) 간결하고 직관적인 코드로 작성 가능
에러 처리 onerror 이벤트 또는 콜백 사용 catch()로 에러 처리
브라우저 지원 오래된 브라우저까지 지원 최신 브라우저에서 완벽 지원

 

 

let temp_html = ``;
             if(gu_mise > 40){
                tem_html = `<li class=""bad> : ${gu_mise</li>`;
            } else {
                temp_html = ` <li>${gu_name} : $ ${gu_mise}</li>`;
            }
              $(1#names-q`).append(temp_html);

fetch에 조건문을 넣은 

tem_html 전형적인 패턴