이번 내용은 정신을 부여잡고 공부하는데도 1분 들었다가 30초 돌아오고의 반복이다...
그만큼 jquery와 ajax를 사용하고, api를 쓴다고 하는걸 이해하는 게 어려운 것 같다.
안되면 또 들어야지..
07. AJAX와 API를 이용한 코드 작성
<script> 이 안에 주소를 넣는데, url 변수에 담기 </script>
<script>
let url ="https://jsonplaceholder.typicode.com/posts";
</script>
1) Ajax 요청 하기
ajax를 요청해서 우리가 하고 싶은 것 = data를 가지고 오는 것이다.
그래서 get 요청을 만들었고, 이 뒤에 url 즉 주소를 쓰면, 그 주소의 결과를 가지고 온다.
이러한 결과를 사용할 때에는
.then 이라는 함수를 연결해서 사용한다.
then = 다 가져왔으면 여기로 오라는 의미이다.
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
let url ="https://jsonplaceholder.typicode.com/posts";
$.get(url).then(function (data){
console.log(data);
});
가져 온 것을 통해 data를 출력,
결과에 array 100개가 들어있다. (= 100개가 들어있는 배열 타입)
2) 그런데 우리는 data를 화면에 보여주고 싶다. 어떻게 할까?
: body로 가서 작성하기
head의 console.log를 지우고 for문을 작성
TIP🤖 get 함수 사용 시 유의
$.get 함수 사용시 점(.)을 꼭 사용해야 한다.
TIP🤖 괄호 유의
then 부분 작성시 괄호가 많으므로 유의해서 작성한다.
08. 또한, 키 값을 사용한 접근도 가능하다.
1) div 만들기
id="titles"
2) for문 작성
이때 data에는 길이가 있어서(array라고 하는 타입에는 length라는 변수가 있음),
이 안에 총 몇 개가 들어있는지 알 수 있다.
3) 이 안에 console.log(data[i]); 를 입력하면, 직접 100개를 하나하나 찍어서 보여주게 된다.
그런데 여기서 data에 [] 대괄호로 접근했는데,
우리가 가져온 data 에서 0부터 순번(인덱스)를 0부터 출력~ 1,2,3해서 99까지 (0-99 = length 100) 의 값이 다 출력된 것이다.
4) text 추가
우리가 출력을 원하는 값 = i번째 있는 값 중에 타이틀이다.
가져온 data가 중괄호{}로 표현되어 있었는데, 이때는 .키 값을 이용해서 접근이 가능하다.
5) 한 줄만 나온 이유
문자열을 계속 바꾸는데, 계속 text 안에다가 넣기 때문에 누적해서 더하는 게 아니라 마지막 값만이 남아있는 것이다.
(0~99까지 반복해서 넣다가 결국 마지막 99번째 제목만 남아있게 된 것)
누적하기 위해서는? 변수가 필요하다.
6) 누적되게 만들기
let content = ""; ---> 빈 문자열을 만들기
for (let i=0; i<data.length; i++){
content = $("#titles").text() + data[i].title; --> content 넣기
$("#titles").text(content); ---> text 안에 값 수정
}
$("#titles")
= titles id 속성값에 있는 문자열(.text())을 먼저 가지고 온 다음, 값을 반복해서 + 누적하여 출력하게 만든다.
다 나와서 가독성이 별로이다. 한줄 한줄 나오려면?
br태그를 추가하여 개행
but, 개행이 안되었다. 이는 text 함수가 아닌 다른 함수를 사용해야 하기 때문이다.
7) text 함수 대신, html 함수 사용하기
깔끔하게 개행이 된 것을 볼 수 있다. 근데 왜 text를 사용하면 안되지?
요약
외부 무료 "API"를 사용해서 (jsonplaceholder) data를 가지고 왔다. <let url>
이때 jQuery의 ajax 중의 "get 함수"를 이용해서 data를 가져와서 <$.get(url)> data를 가지고 온 다음,
"then 함수"를 이용해서 가지고 온 data에 "접근"할 수 있었다.
for 반복문을 이용해서 추가했고 <for (let~)>
"태그"를 이용해서 콘텐츠를 꾸몄는데,
이때 태그를 내가 만들어서 웹 페이지에 반영하고 싶을 때는 text 함수가 아니라 "html 함수"를 이용해서 적용한다.
09. 실습
: 게시판 클릭 이벤트에 ajax 제어 연결하기
부트스트랩에 있던 modal 을 이용해서 조금 바꿀 것인데,
원래는 clickPost를 호출할 때, id값을 전달하면 alert가 아니라
>> modal을 띄울 것이다. (코드 추가, 거기에 API 연동하는 코드도 추가)
1) 부트스트랩에 가서, modal 코드 복사 (버튼 말고 모달 부분만 복붙)
그런데 우리는 여기서 method 방법을 사용할 것이다.
2) 맨 아래 </body> 태그 바로 위에 붙여넣기
3) 가져온 코드를 들여쓰기 (탭)
우리가 이제 게시글을 클릭하면,
API를 통해서 data를 가지고 오고 / 타이틀의 제목을 보여주고 / body의 내용을 보여줄 것이다.
4) 지금 코드에 <title>에만 id가 있어서, <body>에도 id값을 추가한다.
5) 버튼이 두 개 이므로 아래 버튼 삭제
가져온 modal을 살펴보면, 안에 title, body가 있고, 그 아래에 footer에 button이 2개 있는 것을 볼 수 있다.
이제 연결을 해야한다.
연결 = 게시판 클릭했을 때 내용을 채우고, 화면에 띄워주는 것
각각 게시글에 대한 api를 호출해서 (주소 뒤에 id넣기)
내용을 가지고 온 다음, modal에 채워줄 것이다. 이때 변수명에다 담는다.
6) clickPost 내부 수정 : alert 지우고 주소 가져오기
- 각각 게시글에 대한 api를 호출해서 (주소 뒤에 id넣기) 내용을 가지고 온 다음, modal에 채워줄 것.
이때 변수명에다가 담는다. (let url = "주소")
이 과정을 통해 데이터가 가져와 질 것이다.
and 주소 뒤의 숫자를 postid로 수정.
내가 클릭한 글의 id에 따라 게시글의 data를 가지고 올 것이다.
7) HOW
가지고 온 data를 태그를 찾아 넣어줘야 한다.
1) title을 넣어줘야 한다.
2) modal 부분의 modal title도 지워주자 (data를 여기에 채울 것이므로)
3) id 속성값 복사 (exampleModalLabel)
4) text 함수를 이용해서 작성
(태그 안에 텍스트를 변경, 가져올 때에는 text 함수 사용)
$("exampleModalLabel").text(data.title);
이렇게 하면, 이 API
let url ="https://jsonplaceholder.typicode.com/posts/" + postid;
를 이용해서 data를 가지고 온다.
가지고 온 data 안에서
$.get(url).then(function (data){
title 부분을 어디에 채운다?
$("#exampleModalLabel").text(data.title);
= 복사해온 제목 부분에 채워 넣는다.
8) 내용을 채워보자
내용 id = modalContent
$("#modalContent").text(data.body);
이렇게 다음 줄에 넣는다.
그런데 우리가 한 부분은 아직 modal에 내용 넣기라서, modal이 뜨진 않는다.
9) 부트스트랩 method 사용하기
modal show를 이용할 건데,
$('#myModal').modal('show')
#mymodal 이란 우리가 복사한 태그(그 modal을 가리키는 id 속성값)를 사용해서 가리킨 다음
이를 .modal
= 모달 함수를 이용해서 보여달라고 하는 것이다.
코드에는
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
id가 exampleModal 이므로 이를 복사, 붙여넣기해서 가져온 뒤
$("#exampleModal").modal("show");
하고 홈페이지에 가보면, modal이 각각 데이터별로 나오는 것을 확인 가능하다.
한 줄 정리
: ajax와 jquery를 이용해서 태그를 다루는 것과 + API를 사용한 것이 핵심!
오늘의 소감 ✍️
아침 일정 + 오후 일정 사이에 잠깐 강의 듣고 약속 끝나고 와서 또 들었다.
오늘 안 들으면 내일 일정까지 있어서 더 시간이 안될 것 같았다. (숙제는 해야지..)
이해가 안되는 부분이 너무 많아서 정말 다시 들어야 겠다고 생각했다.
다시 찾아봐야겠다하는 부분들도 많아서 오늘은 뭔가 듣긴 들었는데 이해는 50%가 채 안된 느낌이라 더 공부해야겠다.
내일도 화이팅해서 달려가 봅시다!
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL😶🌫️] FastCampus' 카테고리의 다른 글
| [Let's TIL✍️] 코딩 18 : 3 Week _ 파이썬 기초 (0) | 2022.08.22 |
|---|---|
| [Let's TIL✍️] 코딩 18 : 2 Week _ 오류해결 & 스터디 (0) | 2022.08.22 |
| [Let's TIL✍️] 코딩 18 : 2 Week _ jQuery와 API (0) | 2022.08.21 |
| [Let's TIL✍️] 코딩 18 : 2 Week _ JQuery 기초 (0) | 2022.08.20 |
| [Let's TIL✍️] 코딩 18 : 1 Week _ 스터디 & 자율학습 (0) | 2022.08.19 |
