13.자바스크립트[동물 앨범 만들기]

1-1 동물 앨범 만들기

동물 사진들은 API 호출을 통해 불러올 수 있음

 

API 사용법

API 주소만 호출하게 될 경우 값을 반환하고 API 주소의 뒤쪽에 동물 이름을 넣어 호출하게 되면

이 name에 해당하는 동물들의 사진들만 반환하는 api 

 

1. API 주소를 const 키워드를 통해 작성해 줌 
2. API를 호출하는 기능을 하는 getData라는 함수를 작성해 줌 / const getData =()=>{}
3. getData 함수의 내부에서는 res라는 변수의 fetch 메서드를 사용해서 API를 호출해 주고 API를 비동기적으로 처리해 주기 위해 함수의 앞에는 async를 작성하고 feach메서드 앞에는 await를 작성해야 함 
   const getData = async() =>{  let res = await feach(API_URL);
4.  API는 tryCatch 문을 사용해 에러 처리를 해야 함  /  try 내부에서는 만약 res라는 결괏값이 존재할 경우 data라는 변수에 API호출의 결괏값을 JSON으로 파싱 해야 함 /   if(res){ let data = await res.json()}
5. 그다음 API 호출결과를 console.log탭에서 확인 -> console.log(data);
6. 에러를 처리하는 catch 문의 내부에는 에러를 출력하는 코드를 console.log(err)
7. 코드 가장 하단에 getData();를 호출해서 출력값을 확인, 개발자 도구 열어 콘솔탭에 데이터확인함
8. 그 다음 API 호출 결과 값을 이 클래스 이름이 콘텐츠 인 div 요소의 내부에 나타내줘야 함
9. data 변수에  photos라는 배열을 forEach 배열 메서드를 사용해서 배열에 담긴 요소들을 하나씩 꺼내주어야 함
   data.photos.forEach((elm)=>{})
10. forEach 함수의 내부에는 엘리먼트 요소들을 하나씩 출력해보아야 함 console.log(elm)
11. API 호출 결과인 데이터에 photos라는 배열을 forEach 메서드를 통해 요소들을 하나씩 출력하면 photos 배열에 담긴 요소들이 하나씩 출력됨
12. element요소의 url이라는 값을 image 태그에 src로 넣어 이미지를 index.html의 content div에 나타내야 함
13. class이름이 content인 div 요소에 html 코드를 넣기 위해서 DOM API를 사용해야 함
    코드를 추가해 줄 대상 요소인 컨텐트 요소를 가져와야 함 const $content = document.querySelector('div.content'); 가져올 수 있음
14. forEach 메서드의 내부에 `<img src=${elm.url}></img>` 작성해 줌
15. 여러 개의 이미지 태그들을 한 번에 묶어서 이 콘텐츠 엘리먼트에 넣어주어야 하기 때문에 let templat =[]; 빈 배열을 전역변수로 만들어주고 생성한 템플릿 변수의 복합 대입 연산자를 사용해서 여러 개의 이미지 태그들을 템플릿이라는 변수에 모두 담아줌 template +=  `<img src=${elm.url}></img>` 
16. 템플릿 변수에 담긴 배열을 콘텐츠 엘리먼트의 innerHTML을 사용해서 추가해 줌 $content.innerHTML = tamplate;작성 후 실행

 

---

1-2 동물 앨범 만들기

각 버튼에 맞는 이미지로 세팅해 보기

 

1. 코드에서 API를 호출해 이름값이 penguin 인 데이터만 전달받기 위해서는 API 주소 뒤에 원하는 동물의 이름을 전달해주어야 함
2. getData 함수에 penguin이라는 값을 전달하고 
3. getData 함수에서는 매개변수로 name이라는 값을 전달받아 API URL 뒤쪽에 추가로 작성해주어야 함`${API_URL}$(name)`
4. 버튼을 눌렀을 때 각각 다른 화면이 나올 수 있도록 해주기
5. index.html로 가서 a태그를 이용해 페이지 이동시켜 줌
6. clicked라는 클래스 이름은 버튼의 배경색을 흰색으로 표시해 주기 위한 클래스임 버튼을 눌렀을 때 각각 화면의 이미지가 맞게 실행될 수 있도록 해주기