프론트엔드 공부하기 2

김민태의 프론트엔드 아카데미 1강, CH03

CH03_02 12줄의 코드로 시작하기

브라우저에서 제공되는 개발자 기능 중 검사 메뉴에서 콘솔을 통해 DOM을 액세스해서 HTML을 바꾸는 것부터 시작한다.

document.getElementById('root').innerHTML = '<ul><li>하나</li><li>둘</li><li>셋</li></ul>';

바로 XMLHttpRequest를 이용하여 HTTP 요청을 보내고 응답을 받아오고, 그 응답을 파싱해서 HTML로 뿌려주는 과정을 보여준다. hnpwa.com에서 제공하는 뉴스 피드의 제목 열 개를 화면에 목록으로 보여주는 매우 간단한 웹 앱을 만드는 과정이다.

const ajax = new XMLHttpRequest();
const NEWS_URL = "https://api.hnpwa.com/v0/news/1.json";
ajax.open("GET", NEWS_URL, false);
ajax.send();
const newsFeed = JSON.parse(ajax.response);
const ul = document.createElement("ul");
for (let i = 0; i < 10; i++) {
  const li = document.createElement("li");
  li.innerHTML = newsFeed[i].title;
  ul.appendChild(li);
}
document.getElementById("root").appendChild(ul);

웹 개발을 위한 자바스크립트 프레임워크를 활용하다 보면 부실하게 될 수 있는 기본기를 되짚어볼 수 있다. (document.getElementById(), document.createElement(), innerHTML 등등)

이런 걸 보여주는 과정에서 개발자 도구의 여러 기능을 어떤 식으로 활용하는지에 대해서도 살짝 엿볼 수 있다.

CH03_03 두 개의 화면을 가진 웹앱

이전 강의에서 만든 코드를 수정하면서 화면 웹앱을 발전시킨다.

document.createElement()를 써서 앞에서 만들었던 기사 제목 목록에 앵커 태그를 추가하고 a.href, a.innerHTML 등을 편집하여 URL을 지정하고 텍스트를 수정하는 작업을 계속해서 진행한다.

그리고 나서 이벤트를 등록하는 방법을 배운다. hashchange 이벤트에 대한 이벤트 리스너를 만들어서 이벤트 처리 관련된 내용에 대해 배우고, 기사 제목을 클릭했을 때 아래쪽에 새로운 HTML을 추가해 주는 과정을 시험해 본다.

코드 반복을 개선할 필요가 있음을 설명하고, 코드 중복을 해소하는 방법을 소개한다.

CH03_04 문자열을 활용한 HTML 만들기

지금까지 쓴 DOM 항목을 변경하는 방식으로는 대규모 프로젝트 진행이 어렵다. (DOM API를 쓸 때는 코드에서 실제 UI가 어떻게 생겨날지 파악이 잘 안 된다.)

대신 문자열을 이용하여 HTML을 만들어가는 과정을 보여준다.