2-10_Quiz_Ajax 연습하기(2) (feat. 이미지, 텍스트 바꿔치기, ajax, attr, text, api 연결)

250x250

Recent Posts

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

관리 메뉴

Hello creators 🙌

2-10_Quiz_Ajax 연습하기(2) (feat. 이미지, 텍스트 바꿔치기, ajax, attr, text, api 연결) 본문

[WEB & AI] (feat. 취준)/프론트&백엔드

2-10_Quiz_Ajax 연습하기(2) (feat. 이미지, 텍스트 바꿔치기, ajax, attr, text, api 연결)

부시매나_HA 2023. 1. 28. 15:52

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>

결과물
버튼 클릭 -> q1 함수 실행 -> 서버 api 에 가서, (이미 올려져 있는) 데이터를 response 에 받음 -> 받아온 걸 console 에 보여줌!
이 step by step 이 한꺼번에 실행이 됨. ⭐⭐⭐
이미 해당 api 에 데이터가 정렬되어 있다는 게 전제되어 있음. ⭐⭐⭐

3. 메시지 & URL 바꿔치기

1) 참조 사항

2) 메시지랑 url 이 console 에 잘 찍혀나왔는지 확인 ⭐⭐⭐

$.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] (feat. 취준) > 프론트&백엔드' 카테고리의 다른 글

3-1_스파르타피디아에 OpenAPI 붙여보기 (feat. 영화 평점 카드, ajax append(), api 연결) (0)	2023.01.29
2-11_2주차 끝 & 숙제 설명 (feat. 다키스트아워 팬명록, 온도 api 설정, ajax text 활용) (2)	2023.01.28
2-9_Quiz_Ajax 연습하기(1) (feat. 따릉이 api, ajax, append(), api 연결) (0)	2023.01.28
가독성 좋은 코드 작성을 위한 style guide (feat. CS50 수업, style guide) (0)	2023.01.25
[웹개발종합반] 1-5 CSS (feat. 부모-자식 관계, parent child, hierarchy) (0)	2023.01.24

'[WEB & AI] (feat. 취준)/프론트&백엔드' Related Articles

Comments

Hello creators 🙌

2-10_Quiz_Ajax 연습하기(2) (feat. 이미지, 텍스트 바꿔치기, ajax, attr, text, api 연결) 본문

2-10_Quiz_Ajax 연습하기(2) (feat. 이미지, 텍스트 바꿔치기, ajax, attr, text, api 연결)

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

1. 배우고자 하는 것

Ⅱ. 기본 코드 및 api 확인

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

2. 르탄이 API 주소

Ⅲ. 해보기

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

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

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

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

3. 메시지 & URL 바꿔치기

1) 참조 사항

2) 메시지랑 url 이 console 에 잘 찍혀나왔는지 확인 ⭐⭐⭐

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

💭 What i learned

'[WEB & AI] (feat. 취준) > 프론트&백엔드' 카테고리의 다른 글

티스토리툴바

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

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