2-10_Quiz_Ajax ์—ฐ์Šตํ•˜๊ธฐ(2)

2023. 10. 6. 07:03ยท[WEB & AI]/์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ_์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜
728x90
๋ฐ˜์‘ํ˜•

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal)


1. ๋ฐฐ์šฐ๊ณ ์ž ํ•˜๋Š” ๊ฒƒ

  • ๋ฅดํƒ„์ด ๋‚˜์™€ ํด๋ฆญํ•˜๋ฉด -> ์ด๋ฏธ์ง€ & ํ…์ŠคํŠธ ๋ณ€๊ฒฝ๋˜๋Š” ๊ฒƒ

  • ํ•ต์‹ฌ์€ ๋ฉ”์‹œ์ง€๋ž‘ URL ์„ ๋ฐ”๊ฟ”์น˜๊ธฐ ํ•ด์„œ ๋‹ค๋ฅธ ์ด๋ฏธ์ง€๊ฐ€ ๋‚˜์˜ค๊ฒŒ ํ•˜๋Š” ๊ฒƒ! โญโญโญโญโญ



โ…ก. ๊ธฐ๋ณธ ์ฝ”๋“œ ๋ฐ api ํ™•์ธ


1. ajax code ํ€ด์ฆˆ ํ’€๊ธฐ ์ด์ „ ์ œ๊ณต ์ฝ”๋“œ

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JQuery ์—ฐ์Šตํ•˜๊ณ  ๊ฐ€๊ธฐ!</title>
    <!-- JQuery๋ฅผ import ํ•ฉ๋‹ˆ๋‹ค -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        div.question-box>div {
            margin-top: 30px;
        }
    </style>

    <script>
        function q1() {
            // ์—ฌ๊ธฐ์— ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”
        }
    </script>

</head>

<body>
    <h1>JQuery+Ajax์˜ ์กฐํ•ฉ์„ ์—ฐ์Šตํ•˜์ž!</h1>

    <hr />

    <div class="question-box">
        <h2>3. ๋ฅดํƒ„์ด API๋ฅผ ์ด์šฉํ•˜๊ธฐ!</h2>
        <p>์•„๋ž˜๋ฅผ ๋ฅดํƒ„์ด ์‚ฌ์ง„์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ์„ธ์š”</p>
        <p>์—…๋ฐ์ดํŠธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ์ง€์› ๋‹ค ์ƒˆ๋กœ ์”Œ์—ฌ์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค.</p>
        <button onclick="q1()">๋ฅดํƒ„์ด ๋‚˜์™€</button>
        <div>
            <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png" />
            <h1 id="text-rtan">๋‚˜๋Š” ใ…‡ใ…‡ใ…‡ํ•˜๋Š” ๋ฅดํƒ„์ด!</h1>
        </div>
    </div>
</body>

</html>
  • ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋ ‡๊ฒŒ ๋‚˜์˜ด
    450


2. ๋ฅดํƒ„์ด API ์ฃผ์†Œ

http://spartacodingclub.shop/sparta_api/rtan
  • ์ด๋ ‡๊ฒŒ ๋‚˜์˜ด




โ…ข. ํ•ด๋ณด๊ธฐ


1. ์ด์ „ ๋‹จ๊ณ„๋ž‘ ๋‹ค๋ฅธ ์  : '์ด๋ฒˆ ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•˜๋Š” ajax๋Š”?'

  • ์ด์ „์—๋Š” ์ถ”๊ฐ€ํ•˜๊ณ ์ž ํ•˜๋Š” html ์„ ํ™•์ธํ–ˆ์Œ.
  • ์ƒ๊ฐํ•ด๋ณด๋ฉด, ๊ทธ ์ด์œ ๋Š” ์‚ฌ์šฉํ•˜๋Š” ajax ๊ฐ€ append ์˜€๊ธฐ ๋•Œ๋ฌธ. ์ฆ‰, append ๋Š” ์ž„์‹œ html ์„ ์ง„์งœ html ๋กœ ๋งŒ๋“ค์–ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์—, ์ถ”๊ฐ€ํ•˜๊ณ ์ž ํ•˜๋Š” html ์„ ํ™•์ธํ•˜๋Š”๊ฒŒ ์˜๋ฏธ๊ฐ€ ์žˆ์—ˆ์Œ.
  • ๊ทธ๋Ÿฌ๋ฉด, ์ด๋ฒˆ ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•˜๋Š” ajax ๋Š”? โญโญโญโญโญ

1) ajax ์ค‘ ํ•„์š”ํ•œ ํ•จ์ˆ˜ ์ฐพ๊ธฐ (์ฐพ์•˜๋‹ค๊ณ  ๊ฐ€์ •)

  • ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๊ธฐ์ˆ ์ด ๋ญ”๋ฐ?

    • ํด๋ฆญํ•˜๋ฉด -> ์ด๋ฏธ์ง€๊ฐ€ ๋ฐ”๋€Œ๊ณ ,

    • ํด๋ฆญํ•˜๋ฉด -> ํ…์ŠคํŠธ๊ฐ€ ๋ฐ”๋€Œ๋Š”๊ฑธ ํ•˜๊ณ  ์‹ถ์Œ.

    • ์ฆ‰, ์—ฌ๊ธฐ url ์ด๋ž‘, ํ…์ŠคํŠธ๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹ถ์Œ.

  • ๐Ÿ˜ฅ ์•„์ง ์ด๊ฒŒ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”๊ฑด์ง€ ๋ชฐ๋ผ์„œ, ๋ญ๋ผ๊ณ  ๊ฒ€์ƒ‰ํ•ด์•ผ ํ• ์ง€๋„ ๋ชจ๋ฅด๊ฒ ์Œ. ์ด ๊ธฐ๋Šฅ์„ ์ข€ ์•Œ๋ฉด, ajax ํ•ด๋‹น ๊ธฐ์ˆ  ์ด๋ ‡๊ฒŒ ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Œ.
  • ajax ์—์„œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋“ค์„ ์•Œ๊ณ , ๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š”๊ฒŒ ์ค‘์š”ํ•˜๊ฒ ๋„ค โญโญโญ
  • ์šฐ์„ ์€ ์ฒ˜์Œ ๋ฐฐ์šฐ๋‹ˆ๊นŒ, ํ•„์š”ํ•œ ajax ๊ธฐ์ˆ ์„ ๋‚ด๊ฐ€ ์ฐพ์•˜๋‹ค! ๊ณ  ๊ฐ€์ •ํ•˜๊ณ ! ์ง„ํ–‰

2) attr, text ์‚ฌ์šฉํ•ด์„œ, url ์ด๋ž‘ text ==๋ฐ”๊ฟ”์น˜๊ธฐ==

  • ์ด๊ฑธ ์‚ฌ์šฉํ•  ์˜ˆ์ •



2. ajax ํ™œ์šฉํ•ด์„œ, ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ response ๋ฅผ console ์— ์ฐ์–ด๋ณด๊ธฐ

#ajax_์„œ๋ฒ„response_console์ฐ๊ธฐ_์˜ˆ์ œ์ฝ”๋“œ


  • ajax ์„œ๋ฒ„response_console์ฐ๊ธฐ ์˜ˆ์ œ์ฝ”๋“œ โญโญโญ
    <script>
      function q1() {
          // ์—ฌ๊ธฐ์— ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”
          $.ajax({
              type: "GET",
              // api ์ฃผ์†Œ โœ… 
              url: "http://spartacodingclub.shop/sparta_api/seoulbike",
              data: {},
              success: function (response) {
                  console.log(response['getStationList']['row'])
              }
          })
      }
    </script>
    

<br>

- ๊ฒฐ๊ณผ๋ฌผ 

    ๋ฒ„ํŠผ ํด๋ฆญ -> q1 ํ•จ์ˆ˜ ์‹คํ–‰ -> ์„œ๋ฒ„ api ์— ๊ฐ€์„œ, (์ด๋ฏธ ์˜ฌ๋ ค์ ธ ์žˆ๋Š”) ๋ฐ์ดํ„ฐ๋ฅผ response ์— ๋ฐ›์Œ -> ๋ฐ›์•„์˜จ ๊ฑธ console ์— ๋ณด์—ฌ์คŒ! 

- ์ด step by step ์ด ํ•œ๊บผ๋ฒˆ์— ์‹คํ–‰์ด ๋จ. โญโญโญ 
- ์ด๋ฏธ ํ•ด๋‹น api ์— ๋ฐ์ดํ„ฐ๊ฐ€ ์ •๋ ฌ๋˜์–ด ์žˆ๋‹ค๋Š” ๊ฒŒ ์ „์ œ๋˜์–ด ์žˆ์Œ. โญโญโญ 
![](https://i.imgur.com/jsjtGls.png)

<br>
<br>

#### 3. ๋ฉ”์‹œ์ง€ & URL ๋ฐ”๊ฟ”์น˜๊ธฐ

#### 1) ์ฐธ์กฐ ์‚ฌํ•ญ

![](https://i.imgur.com/FVeJd5h.png)

<br>
<br>

#### 2) ๋ฉ”์‹œ์ง€๋ž‘ url ์ด console ์— ์ž˜ ์ฐํ˜€๋‚˜์™”๋Š”์ง€ ํ™•์ธ โญโญโญ 

``` js
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rtan",
data: {},
success: function (response) {
    let url = response['url']
    let msg = response['msg']

    console.log(msg, url)
}
})
  • ์ด ๊ณผ์ •์„ ์ถ”์ƒํ™” ์‹œ์ผœ๋ณด๋ฉด?
    • ์›ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ณ€์ˆ˜์— ๋‹ด์•˜์„ ๋•Œ -> ์ฐ์–ด์„œ ํ™•์ธํ•ด๋ณด๋ผ?

  • ๊ฒฐ๊ณผ๋ฌผ
    500


3) console ์—์„œ ์ž˜ ๋‚˜์˜ค๋Š”๊ฑธ -> attr, text ajax ํ•จ์ˆ˜ ํ™œ์šฉํ•ด์„œ ๋ฐ”๊ฟ”์น˜๊ธฐ ํ•˜๊ธฐ

#ajax_attr_textํ™œ์šฉ_๋ฐ”๊ฟ”์น˜๊ธฐ_์˜ˆ์ œ์ฝ”๋“œ


  • ์˜ˆ์ œ ์ฝ”๋“œ ๐Ÿ”—

    function q1() {
      // ์—ฌ๊ธฐ์— ์ฝ”๋“œ๋ฅผ ์ž…๋ ฅํ•˜์„ธ์š”
      $.ajax({
      type: "GET",
      url: "http://spartacodingclub.shop/sparta_api/rtan",
      data: {},
      success: function (response) {
          let url = response['url']
          let msg = response['msg']
    
          $('#img-rtan').attr('src', url)
          $('#text-rtan').text(msg)
      }
    })
    }

  • ๊ฒฐ๊ณผ๋ฌผ


๐Ÿ’ญ What i learned


  • '๊ทธ๋Ÿฌ๋ฉด, ์ด๋ฒˆ ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•˜๋Š” ajax ๋Š”? โญโญโญโญโญ' ์ด๋Ÿฐ ๊ด€์ ์—์„œ ์ฒซ ๋ฒˆ์งธ ๋‹จ๊ณ„๋ฅผ ํ•ด๋ณด๋ฉด ๋œ๋‹ค.
    • '๋ฐ”๊ฟ”์น˜๊ธฐ' ๋ฅผ ํ•˜๋ ค๋ฉด
  • ์ฝ”๋“œ ๊ด€๋ฆฌ๋ฅผ ์˜ˆ์ œ์ฝ”๋“œ -> ์ฐธ์กฐ์ฝ”๋“œ ์ด๋ ‡๊ฒŒ ๊ด€๋ฆฌ๋ฅผ ํ•ด์•ผ ํ•˜๋‚˜?
    • ์ฐธ์กฐํ•  ๋•Œ๋Š”,
      1) ์–ด๋””๋ฅผ ๋ฐ”๊ฟ”์•ผ ํ•˜๋Š”์ง€ ๋“ฑ์„ ๊น”๋”ํ•˜๊ฒŒ ๊ธฐ์žฌํ•˜๋ฉด ์ข‹์„๊ฑฐ ๊ฐ™์€๋ฐ?
      2) ํƒœ๊ทธ ๋‹ฌ ๋•Œ ๊ทœ์น™์ด ์žˆ์œผ๋ฉด ์ข‹์„ ๋“ฏ. ex) ๊ธฐ์ˆ  hierarchy _์ง๊ด€์ ์ธ์„ค๋ช…_์˜ˆ์ œํƒœ๊ทธor์ฐธ์กฐํƒœ๊ทธor์ด๋ฆ„ํ†ต์ผ?
728x90
๋ฐ˜์‘ํ˜•
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'[WEB & AI] > ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ_์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

3-1_3์ฃผ์ฐจ ์„ค์น˜ (feat. ํŒŒ์ด์ฌ, git bash)  (0) 2023.10.08
2-11_2์ฃผ์ฐจ ๋ & ์ˆ™์ œ ์„ค๋ช…  (0) 2023.10.06
2-9_Quiz_Ajax ์—ฐ์Šตํ•˜๊ธฐ(1)  (2) 2023.10.06
2-8_Ajax ํ•จ๊ป˜ ์—ฐ์Šตํ•˜๊ธฐ  (0) 2023.10.06
2-7_Ajax ์‹œ์ž‘ํ•˜๊ธฐ  (0) 2023.10.06
'[WEB & AI]/์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ_์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • 3-1_3์ฃผ์ฐจ ์„ค์น˜ (feat. ํŒŒ์ด์ฌ, git bash)
  • 2-11_2์ฃผ์ฐจ ๋ & ์ˆ™์ œ ์„ค๋ช…
  • 2-9_Quiz_Ajax ์—ฐ์Šตํ•˜๊ธฐ(1)
  • 2-8_Ajax ํ•จ๊ป˜ ์—ฐ์Šตํ•˜๊ธฐ
๋ถ€์‹œ๋งค๋‚˜_HA
๋ถ€์‹œ๋งค๋‚˜_HA
๐ŸŒ„ ๋งˆ์Œ์ฑ™๊น€ | ๐Ÿฆพ ์—ฐ์Šต | ๐Ÿฑ‍๐Ÿ Creator | ๐Ÿ“š[stackList] Nodejs, React, Three.js, Javascript, Blockchain, Blender, Unreal, Unity, Python, AI prompting
    ๋ฐ˜์‘ํ˜•
    250x250
  • ๋ถ€์‹œ๋งค๋‚˜_HA
    Hello creators ๐Ÿ™Œ
    ๋ถ€์‹œ๋งค๋‚˜_HA
  • ์ „์ฒด
    ์˜ค๋Š˜
    ์–ด์ œ
    • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (221)
      • [ํ”„๋ก ํŠธ์—”๋“œ(FE) ๊ฐœ๋ฐœ] (feat. ์ฃผ๋‹ˆ์–ด) (8)
        • TIL (4)
        • React Hook Form (2)
        • Git (Github, Gitlab) (1)
      • [WEB & AI] (75)
        • Next YTMusic ํด๋ก  ์ฝ”๋”ฉ (with ne.. (0)
        • ํ”„๋ก ํŠธ&๋ฐฑ์—”๋“œ (15)
        • ์ฝ”๋”ฉ์• ํ”Œ (1)
        • JavaScript (0)
        • ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ_์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜ (44)
        • ๋ธ”๋ก์ฒด์ธ ๊ฐœ๋ฐœ์ž ๊ณผ์ •_KGA (7)
        • ์•Œ๊ณ ๋ฆฌ์ฆ˜&์ž๋ฃŒ๊ตฌ์กฐ (1)
        • [AI] (0)
        • AI_Art (0)
        • Python (6)
        • [ํšŒ๊ณ ] (1)
      • [3D & 2D ๊ทธ๋ž˜ํ”ฝ์Šค] (133)
        • 2D ์ด๋ฏธ์ง€ (0)
        • ์†๋งต (4)
        • ๋””์ง€ํ„ธ ํŽ˜์ธํŒ… (8)
        • ๋…ธ๋ง๋งต (17)
        • ์–ธ๋ฆฌ์–ผ_์ž…๋ฌธ (43)
        • ์–ธ๋ฆฌ์–ผ_์ค‘๊ธ‰ (12)
        • ์–ธ๋ฆฌ์–ผ_PBL (1)
        • ์”จํฌ๋””, C4D (2)
        • ์„ญ์Šคํ„ด์Šค (18)
        • ๋งฅ์Šค, 3ds Max (19)
        • World Machine (1)
        • ์ง€๋ธŒ๋Ÿฌ์‰ฌ, Zbrush (6)
        • 3D Coat (2)
        • Unity (0)
      • [๊ธฐํƒ€] (3)
        • [E-Book ์ œ์ž‘] (0)
        • ์ธ๋””์ž์ธ(Indesign) (1)
        • [์ค€๋น„๊ณผ์ •] (1)
      • [์ผ์ƒ] (0)
  • ๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

    • ํ™ˆ
    • ํƒœ๊ทธ
    • ๋ฐฉ๋ช…๋ก
  • ๋งํฌ

  • ๊ณต์ง€์‚ฌํ•ญ

  • ์ธ๊ธฐ ๊ธ€

  • ํƒœ๊ทธ

    ๋ฉ”ํƒ€๋ฒ„์Šค ๋ฐฐ๊ฒฝ ๊ฐ•์ขŒ
    ๋ฉ”ํƒ€๋ฒ„์Šค ํฌ๋ฆฌ์—์ดํ„ฐ ์ž…๋ฌธ
    3d ๋ฐฐ๊ฒฝ ๋””์ž์ธ ๊ฐ•์ขŒ
    ๊ฐœ๋ฐœ ์ผ์ง€
    ์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜
    ์–ธ๋ฆฌ์–ผ 4
    ๊ฐœ๋ฐœ ๊ฐ•์˜ ์ถ”์ฒœ
    ์ˆ˜์—… ๋ฆฌ๋ทฐ
    ์›น ๊ฐœ๋ฐœ ๊ธฐ์ดˆ
    css
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ
    ๋ฉ”ํƒ€๋ฒ„์Šค ํฌ๋ฆฌ์—์ดํ„ฐ ๊ฐ•์ขŒ
    ์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜ ํ›„๊ธฐ
    ๋ฐฐ๊ฒฝ ๋ชจ๋ธ๋ง ๊ฐ•์˜
    3D ๋ชจ๋ธ๋ง ์ž…๋ฌธ
    3ds Max ๊ฐ•์ขŒ
    3d ๋งฅ์Šค ์ž…๋ฌธ ๊ฐ•์˜
    JavaScript
    ๋ฉ”ํƒ€๋ฒ„์Šค ๋ฐฐ๊ฒฝ ์ž…๋ฌธ
    ์–ธ๋ฆฌ์–ผ ๊ฐ•์ขŒ
    ๊ฐœ๋ฐœ ํšŒ๊ณ 
    3d ๋ฐฐ๊ฒฝ ๋””์ž์ธ ์ž…๋ฌธ
    3D ๋ชจ๋ธ๋ง ๊ฐ•์˜
    ๊ฐœ๋ฐœ์ž ๊ธฐ์ดˆ ๊ฐ•์˜ ์ถ”์ฒœ
    ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
    ๊ฐœ๋ฐœ์ž ๊ฐ•์˜ ์ถ”์ฒœ
    ๊ฐœ๋ฐœ์ž ์ปค๋ฆฌํ˜๋Ÿผ
    ์›น ๊ฐœ๋ฐœ ๊ฐ•์˜
    ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ
    3ds Max ์ž…๋ฌธ
  • ์ตœ๊ทผ ๋Œ“๊ธ€

  • ์ตœ๊ทผ ๊ธ€

  • hELLOยท Designed By์ •์ƒ์šฐ.v4.10.3
๋ถ€์‹œ๋งค๋‚˜_HA
2-10_Quiz_Ajax ์—ฐ์Šตํ•˜๊ธฐ(2)
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”