2-10_Quiz_Ajax 연습하기(2)

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>

기본적으로 이렇게 나옴

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)
}
})

이 과정을 추상화 시켜보면?
- 원하는 데이터를 변수에 담았을 때 -> 찍어서 확인해보라?

결과물

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

Ⅰ. 이번 회차 학습 목표 (goal)

1. 배우고자 하는 것

Ⅱ. 기본 코드 및 api 확인

1. ajax code 퀴즈 풀기 이전 제공 코드

2. 르탄이 API 주소

Ⅲ. 해보기

1. 이전 단계랑 다른 점 : '이번 과정에서 사용하는 ajax는?'

1) ajax 중 필요한 함수 찾기 (찾았다고 가정)

2) attr, text 사용해서, url 이랑 text ==바꿔치기==

2. ajax 활용해서, 서버에서 받아온 response 를 console 에 찍어보기

3) console 에서 잘 나오는걸 -> attr, text ajax 함수 활용해서 바꿔치기 하기

💭 What i learned

'[WEB & AI] > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

티스토리툴바

2) `attr`, `text` 사용해서, url 이랑 text ==바꿔치기==

3) console 에서 잘 나오는걸 -> `attr`, `text` ajax 함수 활용해서 바꿔치기 하기