-
항해99 사전스터디 [2회차]항해99(온보딩커리큘럼) 2023. 2. 16. 00:02
오늘 스터디는 은양님의 내용정리와 강사같은 목소리와억양이 다했다 진짜 너무 잘하셔서 깜짝 놀랐다.
다음 스터디에 발표는 난데..ㅎㅎ..이게 무슨 부담감..
거기에 영은님은 추가로 API를 알아오시고 무료로 제공되는 오픈 API도 준비해오셨다 진짜 두분다
준비성 무슨일이야......
난 오늘 문제를 준비했는데 처음에 문제를 머할까 하다가 오빠가 알려줬던 오픈 API를 활용해서 해보기로했다.
오픈 API를 처음 링크눌러서 들어갔을때 이게 무슨말이고..대체 어떻게 하라고..?싶다가 결국 도움을 받아 시바견 사진을 랜덤으로 주는 API를 발견했다.
문제 : 해당 오픈API 사이트를 참고해서, 무작위 시바견사진을 리스트화해서 만들어보기
그냥 뼈대부터 만드세요! 하면 오래걸릴것아 뼈대도 준비해봤다
뼈대는 아래와 같다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .size { height: 300px; width: 300px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function getSibaImg() { fetch("https://shibe.online/api/shibes?count=10&urls=true&httpsUrls=true") .then((res) => res.json()) .then((data) => { <!-- 여기에코드를 작성하세요. --> }); } </script> </head> <body> <button onclick="getSibaImg()">불러오기!</button> <div id="get-siba-img"> <div> <img src="https://cdn.pixabay.com/photo/2017/09/25/13/12/puppy-2785074__480.jpg" class="size" /> </div> <div> <img src="https://cdn.imweb.me/upload/S2021012018de7ecacedbf/b0aab5c12a4a0.jpg" class="size" /> </div> <div> <img src="https://cdn.pixabay.com/photo/2020/07/20/06/42/english-bulldog-5422018__340.jpg" class="size" /> </div> </div> </body> </html>뼈대를 준비하면서 뭔가 나한테 더 도움이 된 것 같다.
이전에 강의만 봤을때 강의에서도 뼈대를 주니까 대충 아 저기에 들어가겠구나~ 만 싶었는데 내가 직접 만들어보니 그게 더 와닿았다.
>>>정답보기<<<
더보기<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .size { height: 300px; width: 300px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> function getSibaImg() { fetch( "https://shibe.online/api/shibes?count=10&urls=true&httpsUrls=true" ) .then((res) => res.json()) .then((data) => { let imgs = data; $('#get-siba-img').empty() imgs.forEach((img) => { let temp_html = `<div> <img src="${img}" class="size" /> </div>`; $('#get-siba-img').append(temp_html) }) }); } </script> </head> <body> <button onclick="getSibaImg()">불러오기!</button> <div id="get-siba-img"> <div> <img src="https://cdn.pixabay.com/photo/2017/09/25/13/12/puppy-2785074__480.jpg" class="size" /> </div> <div> <img src="https://cdn.imweb.me/upload/S2021012018de7ecacedbf/b0aab5c12a4a0.jpg" class="size" /> </div> <div> <img src="https://cdn.pixabay.com/photo/2020/07/20/06/42/english-bulldog-5422018__340.jpg" class="size" /> </div> </div> </body> </html>
기존 뼈대
결과 값 시바견으로 가득차게된다
거기에다가 랜덤 시바견 사진이기 때문에 불러오기를 누를때마다 시바견 이미지가 바뀐다.
귀엽잖아......
오늘 스터디는 나혼자 노마드코더 찬양론자 되고 끝났다
그래도 스터디원분들이 내가 준비한 문제로 도움이 되었다고해서 넘나 뿌듯..?
'항해99(온보딩커리큘럼)' 카테고리의 다른 글
온보딩 커리큘럼 [배열, 반복문(2)] (0) 2023.03.09 온보딩 커리큘럼 [배열, 반복문 + 확인문제] (1) 2023.03.09 온보딩 커리큘럼 [조건문(if, switch)] (0) 2023.03.07 온보딩 커리큘럼 [js기본 문법] (0) 2023.03.07 항해99 사전스터디 [1회차] (0) 2023.02.13