😃오늘 배운 내용
templage string (템플릿 리터럴)
템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다.
let a = 13;
let b = 7;
let c = "템플릿리터럴";
let str = `나는 오늘 ${a+b}개의 치킨 다리를 먹었고, ${c}을 공부했다.`;
console.log(str); //나는 오늘 20개의 치킨 다리를 먹었고, 템플릿리터럴을 공부했다.처음에 이 템플릿 리터럴에 사용되는 백틱(`)을 작은 따옴표'로 착각해서 에러가 많이 났었다. 백틱을 입력할 수 있는 키는 숫자키 1 왼쪽에 위치해있다.
프론트엔드에서는 스크립트 내에서 DOM트리 요소를 조작하는 일이 잦은데, 이를 쉽게 하기 위해 ES6에서 새로 업데이트를 해주었나보다. 실제로 과제 수행 중에 HTML 구문을 주루룩 입력하고, 그 안에 들어갈 값을 ${}를 이용해서 넣어주니 참 간편했다. 다만, 템플릿 리터럴에서는 행간 바꿈과 공백이 모두 적용되기 때문에, 생각한 것과 다른 모양의 HTML구문이 렌더링 될 수도 있으니 주의하자.
fetch api
vanilla js 에서 network request요청을 할 때 fetch라는 함수를 사용할 수 있다.
fetch를 올바르게 사용하기 위해서는 두 가지 단계를 기억해야 한다. 첫번째로는 올바른 url로 요청을 했는지, 그리고 응답된 내용을. json()을 통해서 읽어들여야 한다. fetch는 Promise형태로 응답을 리턴하기 때문에, then 을 사용하여 Response 스트림을 가져와 스트림이 완료될때까지 읽는다. 그리고 다 읽은 body의 텍스트를 Promise형태로 반환한다.
비동기 http 요청을 좀 더 쓰기 편하게 만들어준다.
XMLHTTPRequest 를 대체한다.
fetch는 HTTP error가 발생하더라도 reject 되지 않으며, 네트워크 에러나 요청이 완료되지 못한 경우에만 reject된다. 따라서 이 HTTP error같은 경우는 체크해야 하는데, response의 status code나 ok를 체크해주는 것이 좋다.
😁느낀점
이번주는 간단한 Todo 리스트를 만드는 과제를 수행하느라 정신이 없었다. 강의도 들어야하고, 과제도 해야하고, TIL도 써야하고 스터디도 진행해서 정말 바쁘기 그지없었던 것 같다. 다음주까지는 노션 클로닝 개인 프로젝트가 있는데, 과연 내가 해낼 수 있을지 걱정이 된다.
GitHub을 사용할 때는 항상 긴장하고 주의하자! 특히 원격 저장소를 clone을 받고 나서 해당 저장소에 내가 업로드를 해야 할 일이 있다면, 반드시 클론 받은 후에, 원격저장소 브랜치를 확인해서 switch해주자. 자칫하면 팀원들과 동료들에게 양해를 구해야 하는 일이 생길 수 있다.
참조
