[TIL] 230526

4주차 숙제

코드리팩토링
시도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;
}

DOM

• 클라이언트 사용자, 브라우저
  

서버에서는 HTML문서(document)를 준다.

→ js가 이해하지 못함

DOM을 렌더링 하면 트리구조로 요소들이 나타난다.

• DOM(Document Object Model) 트리 js가 해석하기 위한 결과물 브라우저 내에 기본적으로 내장되어 있는 API 브라우저 외에서는 접근 제어가 불가능하다.
  
• API 다른 시스템을 사용하기 위해 중간에 있는 것
  
• DOM의 node 트리 구조에서 나뉘어 지는 구간 → 속성+메서드
  
• 선택자 특정한 것을 선택하기 위한 것 (ex id,class 등)

  • getElementById(”id”)

    id 선택자
    

  • querySelector(”#id”)

    → 더 많이 사용한다. 매개변수가 selectors

    #은 id 선택할 때, . 은 class 선택, 아무것도 없다면 태그 선택

  • children[]

    자식요소를 찾을 수 있음

    ex) ul 의 li의 몇번째를 찾을 때
    

  • getElementsByTagName()

    요소들 여러개 찾을 때
    

• setAttribute(속성, 변경할내용)

Class

js에서는 나중에 도입했기 때문에 그런 것 처럼 만들게 되었다.

클래스 : 설계도

인스턴스 : 실제 책상

• 클래스에서의 this 해당 인스턴스를 의미
  
• getter와 setter 직접적으로 접근하면 위험하기 때문에 getter와 setter를 사용한다. 검증이 가능하다 → 음수가 들어오면 안되게 하는 처리를 하는 등 04.js 예제를 수행해본다. 첫번째 set에서 Maximum call stack size exceeded 오류가 발생하였다. → set과 get을 하는 과정에서 무한루프가 발생하기에 콜스택이 너무 많아진다.
  • this를 사용하는 곳에 this. 로 ()언더바를 추가해주기로 약속되어 있다. _ 는 private을 의미한다.
    

상속

class 새클래스 extends 부모클래스{}

오버라이딩: 재정의, 다시 정의 하는 것

오버로딩: 같은 이름이지만, 매개변수나 개수 등 타입이 다르다.

• super() 부모 클래스의 생성자를 가져와서 부모에 알려준다. 부모의 매개변수를 토대로 넣어줘야 한다.
  

어려웠던 점/부족한점

어느 부분에 코드가 들어가야 할지는 잘 알겠는데 구현이 어렵다. 알고리즘도 수학/구현 문제가 약한편이라서 더 많은 연습이 필요하다.

오늘은 팀원과 친해지기 위해 TMI를 다루는 시간을 가졌고, 규칙을 세세하게 다시 정해보았다.
js강의를 5주차 후반까지 들어보면서 DOM, 동기 비동기 부분은 많이 다루는 내용이라 공부한 적이 있어서 괜찮았는데 실제로, await async로 리팩토링이나 코드를 구현하는 능력이 부족하다.