템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환된다.
let a = 13;
let b = 7;
let c = "템플릿리터럴";
let str = `나는 오늘 ${a+b}개의 치킨 다리를 먹었고, ${c}을 공부했다.`;
console.log(str); //나는 오늘 20개의 치킨 다리를 먹었고, 템플릿리터럴을 공부했다.
처음에 이 템플릿 리터럴에 사용되는 백틱(`)을 작은 따옴표'로 착각해서 에러가 많이 났었다. 백틱을 입력할 수 있는 키는 숫자키 1 왼쪽에 위치해있다.
프론트엔드에서는 스크립트 내에서 DOM트리 요소를 조작하는 일이 잦은데, 이를 쉽게 하기 위해 ES6에서 새로 업데이트를 해주었나보다. 실제로 과제 수행 중에 HTML 구문을 주루룩 입력하고, 그 안에 들어갈 값을 ${}를 이용해서 넣어주니 참 간편했다. 다만, 템플릿 리터럴에서는 행간 바꿈과 공백이 모두 적용되기 때문에, 생각한 것과 다른 모양의 HTML구문이 렌더링 될 수도 있으니 주의하자.
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해주자. 자칫하면 팀원들과 동료들에게 양해를 구해야 하는 일이 생길 수 있다.