코드리팩토링
시도1
통신이기 때문에, url이 들어올 때 까지 기다릴 수 있도록 loadJson에 async await 처리를 해주었다.
async function loadJson(url) {
let res = await fetch(url); // url이 들어올 때 까지 기다린다.
if (res.status == 200) { // 성공
return res.json();
} else {
throw new HttpError(res);
}
}
입력하는 함수 부분에도 입력을 기다리게 만들 수 있도록 처리를 해주는데 .then catch문으로 제어를 하고 있어서 try catch문으로 변경해주고 기존 코드에서 종료되면 다시 입력받을 수 있도록 되어있었기 때문에 while문으로 무한루프를 돌려주었다.
async function narutoIsNotOtaku() {
let title; // 입력이 들어올 때 까지 기다려야 한다.
while(true){ // 무한루프를 통해 들어올때 까지 동작
title = prompt("애니메이션 제목을 입력하세요.", "naruto");
try {
res = await loadJson(`https://animechan.vercel.app/api/random/anime?title=${title}`);
break;
} catch(err) {
if (err instanceof HttpError && err.response.status == 404) {
alert("일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece 정도나 입력해주세요!");
// return narutoIsNotOtaku(); while문으로 구현함
} else {
throw err;
}
}
}
}
narutoIsNotOtaku();
-> while문으로 구현한 부분인 return narutoIsNotOtaku를 지워주지 않았고 alert부분을 작성하지 않아서 동작이 안되었다.
시도2
alert의 위치를 무한루프 안에 넣어두었더니 동작이 안되어서 무한루프 밖에 두었더니 잘 작동되었다.
async function narutoIsNotOtaku() {
let title; // 입력이 들어올 때 까지 기다려야 한다.
while(true){ // 무한루프를 통해 들어올때 까지 동작
title = prompt("애니메이션 제목을 입력하세요.", "naruto");
try {
res = await loadJson(`https://animechan.vercel.app/api/random/anime?title=${title}`);
break;
} catch(err) {
if (err instanceof HttpError && err.response.status == 404) {
alert("일치하는 애니메이션이 없습니다. 일반인이시면 naruto, onepiece 정도나 입력해주세요!");
// return narutoIsNotOtaku(); while문으로 구현함
} else {
throw err;
}
}
}
alert(`${res.character}: ${res.quote}.`);
return res;
}
서버에서는 HTML문서(document)를 준다.
→ js가 이해하지 못함
DOM을 렌더링 하면 트리구조로 요소들이 나타난다.
getElementById(”id”)
id 선택자
querySelector(”#id”)
→ 더 많이 사용한다. 매개변수가 selectors
#은 id 선택할 때, . 은 class 선택, 아무것도 없다면 태그 선택
children[]
자식요소를 찾을 수 있음
ex) ul 의 li의 몇번째를 찾을 때
getElementsByTagName()
요소들 여러개 찾을 때
js에서는 나중에 도입했기 때문에 그런 것 처럼 만들게 되었다.
클래스 : 설계도
인스턴스 : 실제 책상
Maximum call stack size exceeded
오류가 발생하였다. → set과 get을 하는 과정에서 무한루프가 발생하기에 콜스택이 너무 많아진다. class 새클래스 extends 부모클래스
{}
오버라이딩: 재정의, 다시 정의 하는 것
오버로딩: 같은 이름이지만, 매개변수나 개수 등 타입이 다르다.
어느 부분에 코드가 들어가야 할지는 잘 알겠는데 구현이 어렵다. 알고리즘도 수학/구현 문제가 약한편이라서 더 많은 연습이 필요하다.
오늘은 팀원과 친해지기 위해 TMI를 다루는 시간을 가졌고, 규칙을 세세하게 다시 정해보았다.
js강의를 5주차 후반까지 들어보면서 DOM, 동기 비동기 부분은 많이 다루는 내용이라 공부한 적이 있어서 괜찮았는데 실제로, await async로 리팩토링이나 코드를 구현하는 능력이 부족하다.