OHMYO
괴발개발 기둝일지
OHMYO
전체 방문자
1,859
였늘
2
μ–΄μ œ
2
  • λΆ„λ₯˜ 전체보기 (20)
    • πŸš€ Daily Life (1)
      • λ•μ§ˆ (1)
      • 회고 (0)
    • 🍎 MAC OS (1)
    • πŸ”« Algorithm (0)
      • Goormlevel (0)
    • 🌈 Programming (17)
      • Dart (7)
      • ETC (1)
      • Flutter (4)
      • Git (0)
      • Javascript (1)
      • Laravel (2)
      • PHP (2)
    • 🌎 Server (1)
    • 🧠 Database (0)
      • MySQL (0)
    • πŸ’» Computer Science (0)

λΈ”λ‘œκ·Έ 메뉴

  • ν™ˆ
  • νƒœκ·Έ
  • λ°©λͺ…둝

곡지사항

인기 κΈ€

  • [Javascript] AJAX 와 JSON 에 λŒ€ν•˜μ—¬
    2022.05.24
    [Javascript] AJAX 와 JSON 에 λŒ€ν•˜μ—¬
  • [Flutter] ν”ŒλŸ¬ν„° ν”„λ‘œμ νŠΈ ꡬ쑰 μ΄ν•΄ν•˜κΈ°
    2022.06.07
    [Flutter] ν”ŒλŸ¬ν„° ν”„λ‘œμ νŠΈ ꡬ쑰 μ΄ν•΄ν•˜κΈ°
  • [Dart] Getter, Setter, μ ‘κ·Ό μ œν•œμž
    2022.06.06
    [Dart] Getter, Setter, μ ‘κ·Ό μ œν•œμž
  • [Dart] 객체 닀루기 Map νƒ€μž…
    2022.06.06
    [Dart] 객체 닀루기 Map νƒ€μž…
  • [Flutter] 단일 λ°•μŠ€(Container) μœ„μ ― μž‘μ„±
    2022.06.07
    [Flutter] 단일 λ°•μŠ€(Container) μœ„μ ― μž‘μ„±

νƒœκ·Έ

  • constructor
  • XAMPP
  • MYSQL
  • flutter
  • μ„œλ²„κ΅¬μΆ•
  • argument
  • 인자
  • HOBBY FAIR
  • crud
  • μ•±
  • json
  • 도메인
  • λ•μ§ˆ
  • Instance
  • λ§₯
  • ajax
  • Containe
  • ν”Œλ£¨ν„°
  • Server
  • Sizedbox
  • Super
  • Class
  • dart
  • CENTER
  • override
  • Laravel
  • μ›Ήμ„œλ²„
  • php
  • 상속
  • parameter

졜근 κΈ€

  • [Flutter] 단일 λ°•μŠ€(Container) μœ„μ ― μž‘μ„±
    2022.06.07
    [Flutter] 단일 λ°•μŠ€(Container) μœ„μ ― μž‘μ„±
  • [Fltutter] MaterialApp, Text, Scβ‹―
    2022.06.07
    [Fltutter] MaterialApp, Text, Scβ‹―
  • [Flutter] ν”ŒλŸ¬ν„° ν”„λ‘œμ νŠΈ ꡬ쑰 μ΄ν•΄ν•˜κΈ°
    2022.06.07
    [Flutter] ν”ŒλŸ¬ν„° ν”„λ‘œμ νŠΈ ꡬ쑰 μ΄ν•΄ν•˜κΈ°
  • [Dart] 상속과 Super, Override
    2022.06.07
    [Dart] 상속과 Super, Override
  • [Dart] Getter, Setter, μ ‘κ·Ό μ œν•œμž
    2022.06.06
    [Dart] Getter, Setter, μ ‘κ·Ό μ œν•œμž

ν‹°μŠ€ν† λ¦¬

κ°œμΈμ •λ³΄

  • ν‹°μŠ€ν† λ¦¬ ν™ˆ
  • μŠ€ν† λ¦¬
  • 포럼
  • 둜그인
hELLO Β· Designed By μ •μƒμš°.
OHMYO

괴발개발 기둝일지

[Javascript] AJAX 와 JSON 에 λŒ€ν•˜μ—¬
🌈 Programming/Javascript

[Javascript] AJAX 와 JSON 에 λŒ€ν•˜μ—¬

2022. 5. 24. 18:35

🎩 JSON(JavaScript Object Notation)

πŸͺ„ JSON κ°œλ…

JSON은 JavaScript Object Notation의 μ•½μžλ‘œμ„œ
이름을 톡해 μžλ°”μŠ€ν¬λ¦½νŠΈ μ˜€λΈŒμ νŠΈμ™€ κ΄€λ ¨λœ νŒŒμΌμ΄λž€ κ±Έ μœ μΆ”ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

1999년도 ECMAScript 의 μ„Έλ²ˆμ§Έ 버전에 μ“°μ—¬μ§„ Object μ—μ„œ
큰 μ˜κ°μ„ λ°›μ•„ λ§Œλ“€μ–΄μ§„ 데이터 포맷으둜
μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ λ§ˆμ°¬κ°€μ§€λ‘œ key 와 velue 둜 μ΄λ£¨μ–΄μ ΈμžˆμŠ΅λ‹ˆλ‹€.

β€’ 데이터 포맷(Data Format)μ΄λž€?
μ–΄λ–€ ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‘œλ„ 읽을 수 μžˆλŠ” λ‹¨μˆœν•œ 파일 포맷으둜,
μ΄λ•Œ λ‹¨μˆœν•¨μ€ XML 같은 포맷에 λΉ„ν•΄ 컴퓨터가 μ²˜λ¦¬ν•˜κΈ° μ‰½λ‹€λŠ” 것을 μ˜λ―Έν•œλ‹€.

JSON 데이터 νƒ€μž…μ€ λΈŒλΌμš°μ € 뿐만 μ•„λ‹ˆλΌ λͺ¨λ°”μΌμ—μ„œ μ„œλ²„μ™€ 데이터λ₯Ό 주고받을 λ•Œ,
λ˜λŠ” μ„œλ²„μ™€ 톡신을 ν•˜μ§€ μ•Šμ•„λ„ Object λ₯Ό file μ‹œμŠ€ν…œμ— μ €μž₯ν•΄μ•Όν•  λ•Œ λ“±
λ‹€μ–‘ν•œ μƒν™©μ—μ„œ 많이 이용되고 μžˆμŠ΅λ‹ˆλ‹€.

πŸͺ„ JSON νŠΉμ§•

1) simplest data interchange format
-> 데이터λ₯Ό μ£Όκ³  받을 λ•Œ μ“Έ 수 μžˆλŠ” κ°€μž₯ κ°„λ‹¨ν•œ 파일 ν¬λ§·μž…λ‹ˆλ‹€.

2) lightweight text-based structure
-> ν…μŠ€νŠΈλ₯Ό 기반으둜 ν•˜μ—¬ κ°€λ³μŠ΅λ‹ˆλ‹€.

3) easy to read
-> μ‚¬λžŒμ˜ 눈으둜 읽기 νŽΈν•©λ‹ˆλ‹€.

4) key-value pairs
-> key와 value 둜 이루어져 μžˆμŠ΅λ‹ˆλ‹€.

5) used for serialization and transmission of data between the network the network connection
-> 보톡 μ„œλ²„μ™€ 데이터λ₯Ό μ£Όκ³  받을 λ•Œ 직렬화(serialize), 역직렬화(deserialize)λ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

β€’ 직렬화(serialize)
: 객체 => λ¬Έμžμ—΄λ‘œ λ³€ν™˜ν•˜λŠ” μž‘μ—…μ„ λ§ν•©λ‹ˆλ‹€.
: 톡신을할 λ•ŒλŠ” λ¬Έμžμ—΄λ‘œ μ§λ ¬ν™”ν•˜μ—¬ μ£Όκ³  λ°›λŠ” 것이 μ•ˆμ „ν•©λ‹ˆλ‹€.
: μ‚¬μš© 방법은 JSON.stringfy(JSONν˜•μ‹μ˜ 객체)μž…λ‹ˆλ‹€.

β€’ 역직렬화(deserialize)
: λ¬Έμžμ—΄ => 객체둜 λ³€ν™˜ν•˜λŠ” μž‘μ—…μ„ λ§ν•©λ‹ˆλ‹€.
: ν†΅μ‹ μœΌλ‘œ 받은 λ¬Έμžμ—΄μ€ 객체둜 μ—­μ§λ ¬ν™”ν•˜μ—¬ μ‚¬μš©ν•˜λŠ” 겻이 νŽΈλ¦¬ν•©λ‹ˆλ‹€.
: μ‚¬μš© 방법은 JSON.parse(JSONν˜•μ‹μ˜ λ¬Έμžμ—΄)μž…λ‹ˆλ‹€.

6) independent programming language and platform
-> ν”„λ‘œκ·Έλž¨ μ–Έμ–΄λ‚˜ ν”Œλž«νΌμ— 상관없이 μ‚¬μš©μ΄ κ°€λŠ₯ν•©λ‹ˆλ‹€.

πŸͺ„ JSON 예제

1) 직렬화(serialize) 예제

// JSON
// JavaScript Object Notion

// 1. Object to JSON
// stringify(obj)
let json = JSON.stringify(true);
console.log(json); // true

json = JSON.stringify(['appple', 'banana']);
console.log(json); // ["apple", "banana"]

const cat = {
    name: 'nabi',
      color: 'white',
      size: null,
      birthDate: new Date(),
      jump: () => {
        console.log(`${this.name} can jump!`);
    },
};

json = JSON.stringify(cat); // '{"name":"nabi","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}'
console.log(json); // {"name":"nabi","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}

// μ›ν•˜λŠ” ν”„λ‘œνΌν‹°(property)만 좜λ ₯
json = JSON.stringify(cat, ["name"]); // {"name":"nabi"}

// callback ν•¨μˆ˜ 이용
json = JSON.stringify(cat, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
      return key === 'name' ? 'ohmyo' :value; 
}); // '{"name":"ohmyo","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}'

2) 역직렬화(deserialize) 예제

// 2. JSON to Object
// parse()
json = JSON.stringify(cat);
const obj = JSON.parse(json);

const obj = JSON.parse(json, (key, value) => {
      console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(vlaue) : value;
});

console.log(obj); // {name: 'nabi', color: 'white', size: null, birthDate: '2022-05-24T07:37:56.433Z'}
cat.jump(); // can jump!

console.log(cat.birthDate.getDate()); // 24

🎩 AJAX(Asynchronous JavaScript and XML)

πŸͺ„ AJAX 의 κ°œλ…

Ajaxλž€ μƒˆλ‘œκ³ μΉ¨μ—†μ΄ μ„œλ²„μ—κ²Œ GET μš”μ²­μ„ ν•˜λŠ” μͺΌκ·Έλ§Œν•œ JS μ½”λ“œμž…λ‹ˆλ‹€.
μ›Ή νŽ˜μ΄μ§€μ—μ„œ λ™μ μœΌλ‘œ μ„œλ²„μ—κ²Œ 데이터λ₯Ό μ£Όκ³  받을 수 μžˆλŠ” 개발 기법이기 λ•Œλ¬Έμ—
Ajaxλ₯Ό μ‚¬μš©ν•˜λ©΄ νŽ˜μ΄μ§€λ₯Ό μƒˆλ‘œκ³ μΉ¨ ν•˜μ§€ μ•Šμ•„λ„ μΌλΆ€μ˜ 데이터λ₯Ό λ°”κΏ€ 수 μžˆμŠ΅λ‹ˆλ‹€.

β€’ μ„œλ²„λž€?
μ‚¬μš©μžκ°€ 데이터λ₯Ό μš”κ΅¬ν•˜λ©΄ 데이터λ₯Ό λ³΄λ‚΄μ£ΌλŠ” ν”„λ‘œκ·Έλž¨μž…λ‹ˆλ‹€.

μ„œλ²„μ—κ²Œ 데이터λ₯Ό λ°›κΈ° μœ„ν•΄μ„  μ•„λž˜μ˜ 방법을 μ€€μˆ˜ν•΄μ•Όν•©λ‹ˆλ‹€.

1) λ°μ΄ν„°μ˜ μ •ν™•ν•œ URL
2) URL 둜 GET μš”μ²­

데이터 λ‘œλ“œλ₯Ό μœ„ν•΄ XHR(XML Http Request) λΌλŠ” 객체(Object)λ₯Ό μ΄μš©ν•˜λŠ” 것이 νŠΉμ§•μž…λ‹ˆλ‹€.

XHR(XML Http Request) Object λŠ” λΈŒλΌμš°μ € API μ—μ„œ μ œκ³΅ν•˜λŠ” Object 쀑에 ν•˜λ‚˜λ‘œ
이 Objectλ₯Ό μ΄μš©ν•˜λ©΄ κ°„λ‹¨ν•˜κ²Œ μ„œλ²„μ—κ²Œ 데이터λ₯Ό μš”μ²­ν•˜κ³  λ°›μ•„μ˜¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

XML μ΄λž€ Html κ³Ό 같은 λ§ˆν¬μ—… 언어쀑 ν•˜λ‚˜λ‘œ νƒœκ·Έλ“€μ„ μ΄μš©ν•˜μ—¬ 데이터λ₯Ό λ‚˜νƒ€λƒ…λ‹ˆλ‹€.
XML 둜 μ„œλ²„λ₯Ό 톡신할 경우 λΆˆν•„μš”ν•œ νƒœκ·Έλ“€μ΄ 많이 λ“€μ–΄κ°€κΈ° λ•Œλ¬Έμ—
파일 μ‚¬μ΄μ¦ˆκ°€ 컀질뿐만 μ•„λ‹ˆλΌ 가독성도 μ’‹μ§€ μ•Šμ•„μ Έ μš”μ¦˜μ—λŠ” JSON을 많이 μ‚¬μš©ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€.

πŸͺ„ AJAX 의 λ™μž‘ 원리

μ‚¬μš©μžμ— μ˜ν•΄ μ΄λ²€νŠΈκ°€ λ°œμƒν•˜λ©΄ ν•Έλ“€λŸ¬μ— μ˜ν•΄ λ°”λ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό λΆˆλŸ¬μ˜΅λ‹ˆλ‹€.
κ·Έ ν›„ μžλ°”μŠ€ν¬νŠΈμ—μ„œλŠ” XHR 객체(Object)λ₯Ό μ΄μš©ν•˜μ—¬ μ„œλ²„λ‘œ μš”μ²­μ„ λ³΄λ‚΄λŠ”λ°,
κ·Έλ™μ•ˆ μ›Ή λΈŒλΌμš°μ €λŠ” 응닡을 기닀릴 ν•„μš” 없이 λ‹€λ₯Έ μž‘μ—…μ„ μˆ˜ν–‰ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
이 방식을 비동기 방식이라고 λΆ€λ¦…λ‹ˆλ‹€.

πŸͺ„ AJAX 의 μž₯점

λ¦¬λ‘œλ”© 없이 μ›ΉνŽ˜μ΄μ§€λ₯Ό μ „ν™˜ν•  수 μžˆμ–΄ λΆ€λ“œλŸ¬μš΄ μ›Ή, 앱을 λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

πŸͺ„ AJAX 의 단점

νŽ˜μ΄μ§€μ˜ λ¦¬λ‘œλ”©μ΄ μ—†κΈ° λ•Œλ¬Έμ— ν•œνŽ˜μ΄μ§€μ—μ„œ μ§€μ†μ μœΌλ‘œ μ‚¬μš©μ‹œ
λ¦¬μ†ŒμŠ€κ°€ 계속 μŒ“μ—¬ νŽ˜μ΄μ§€κ°€ 느렀질 수 μžˆμŠ΅λ‹ˆλ‹€.

🎩 Ajax μ‚¬μš©λ°©μ‹

1) μ˜›λ‚  JS 방식

var ajax = new XMLHttpRequesst();
    ajax.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
            console.log(ajax.responseText)
        }
    };
    ajax.open("GET", "URL 링크", true);
    ajax.send();

2) μš”μ¦˜ JS 방식

fetch('URL 링크')
    .then((response) => {
          if(!response.ok) {
            throw new Error('400 ν˜Ήμ€ 500 μ—λŸ¬κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€!')
        }
        return response.json()
})
.then((κ²°κ³Ό) => {
    console.log(κ²°κ³Ό)
})
.catch(() => {
    console.log('μ—λŸ¬κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€!')
})

3) μ™ΈλΆ€ 라이브러리 방식

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>

axios.get('URL 링크')
    .then((result) => {
        console.log(result.data)
    }).catsh(() => {
        console.log('μ—λŸ¬κ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€!')
})

🎩 JSON 객체λ₯Ό μ΄μš©ν•œ Ajaxμš”μ²­ 예제

μ•„λž˜μ™€ 같은 ν˜•νƒœμ˜ JSON ν˜•νƒœλ₯Ό μ€€λΉ„ν•©λ‹ˆλ‹€.

{
    "μŠ€νŒŒμ΄νŒ¨λ°€λ¦¬":[
        {
          "name":"λ‘œμ΄λ“œν¬μ €",
          "trait":"spy",
        },
        {
          "name":"μš”λ₯΄ν¬μ €",
          "trait":"assassin",
        },
          {
          "name":"아냐포저",
          "trait":"superpowers",
        }
    ]
}

κ·Έ λ‹€μŒ, μ•„λž˜ μ½”λ“œλ₯Ό ajax_text.html에 μΆ”κ°€ν•©λ‹ˆλ‹€.

첫번째 인자둜 indexλ₯Ό μ£Όκ³  λ‘λ²ˆμ§Έ 인자둜 item(μ½œλ°±ν•¨μˆ˜)을 μ€λ‹ˆλ‹€.
indexλ₯Ό κΈ°μ€€μœΌλ‘œ λ°˜λ³΅μ„ ν•˜λ©°
μ„ νƒμš”μ†Œμ— appendν•¨μˆ˜λ₯Ό μ‚¬μš©ν•˜μ—¬ 값을 μΆ”κ°€ν•©λ‹ˆλ‹€.

<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>μŠ€νŒŒμ΄νŒ¨λ°€λ¦¬</title>
</head>
<p id="test"></p><br>
<button type="button">클릭</button>
<!-- json λΆˆλŸ¬μ„œ pνƒœκ·Έμ— λ„£κΈ° -->
<body>
    <script>
        $(function() {
            $.ajax({ 
                type: 'get' , // νƒ€μž…
                url: 'ajaxtest.json' , // μ–΄λ””λ‘œ κ°ˆκ±΄μ§€
                dataType : 'json' , 
                success: function(data) { // κ°”λ‹€μ˜¨ λ‹€μŒ κ²°κ³Όκ°’
                    alert('접속 성곡'); // ν•΄λ‹Ή 값을 좜λ ₯ν•˜λ©΄ νŒŒμΌμ„ μ°Ύμ•˜λ‹€λŠ” 의미
                      alert(data); // [object Object] [object Object] [object Object]

                      // 데이터λ₯Ό ν™•μΈν•˜κ³  싢을 경우
                      // let spy_family = JSON.stringify(data); // <> parse()
                      // alert(spy_family)

                    $.each(data, function(index, item) { // 데이터 =item
                      $("#test").append(index + " "); // indexκ°€ λλ‚ λ•ŒκΉŒμ§€ 
                      $("#test").append(item.name + " ");
                      $("#test").append(item.trait + "<br>");
                    });
                },
                   } 
             });
        });
    </script>
</body>
</html>

🎩 참고자료

https://www.youtube.com/watch?v=nKD1atl6cAw

    ajax, JavaScript, json
    OHMYO
    OHMYO
    λŒ“κΈ€μ“°κΈ°

    ν‹°μŠ€ν† λ¦¬νˆ΄λ°”