시작하며,
내가 하는 것과 남이 해 놓은 것을 바라볼 때 관점 차이. 그 간격만큼 난 괴롭다.
Nomade Coder의 ‘바닐라 JS로 크롬 앱 만들기’ 후기
2월의 목표는 단 하나였다. Nomade Coder의 ‘바닐라 JS로 크롬 앱 만들기’ 강좌를 완료하는 것. 영어로 진행되는 강의라 처음에는 조금 어색했지만, 들을수록 마음에 들었다. 그렇게 까불던 니콜라스가 강의에서 무게 잡고 이야기하는 것이 신기하기도 했고. 강의를 통해 Web Programming에서 Javasript로 무얼 할 수 있는지 조금이나마 감을 잡게 된 것 같다.
🔸 init()로 시작점을 알리자
자바 스크립트 파일을 HTML 파일에 연결하고 나면, init() 함수 정의하고 init()를 호출한다.
Init 함수를 정의하는 것은 Java 프로그래밍의 main 함수를 정의하는 것과 같다. 그리고 init() 함수를 명시적으로 호출한다. 왜냐면, 자비 스크립트 내부에는 init() 함수가 존재하지 않기 때문이다. Java 프로그래밍에서 암묵적으로 main() 함수를 호출하는 것을 명시적으로 하는 것이다.
function init() {
// to-do
}
init(); // script가 로딩될 때 init() 함수를 호출한다.🔸 HTML 내용을 변경하자
시간은 계속해서 변한다. Javascript로 시계를 만든다고 할 때, 변경된 시간을 화면에 출력해야 한다. 그때, innterText를 사용한다.
document querySelctor로 시간이 표시되는 Element를 가져온 다음 innerText로 새로운 시간으로 변경한다.
const clockTitle = clockContainer.querySelector("h1"); // querySelector로 해당 Element를 가져온다.
clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; //값을 변경한다.🔸 동적으로 HTML을 추가하자
To-Do List는 계속해서 추가되고 삭제된다. 할 일 목록 추가는 두 가지 함수를 사용한다.
첫 번째로, createElement(tagName) 함수를 사용하여 <il> HTML 요소를 만든다.
그다음, 생성한 태그를 appendChild(aChild) 함수를 사용하여 <il>의 부모인 <ul>에 붙인다.
const toDoList = document.querySelector("ul"); // querySelector로 ul Element를 가져온다.
const li = document.createElement("li"); // li Element를 생성한다.
toDoList.appendChild(li); // ul Element에 li Element를 추가한다.🔸 API를 호출해보자
날씨 데이터는 내 이름처럼, 내 할 일처럼 내가 입력할 수 있는 데이터가 아니다. 현재 날씨를 관리하는 사이트로부터 얻어와야 한다.
Fetch API를 이용하여 OpenWeather 사이트에서 내가 있는 지역의 현재 날씨 데이터를 확인할 수 있다.
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`)
.then(function(response) {
return response.json(); } )
.then( function(json) {
// do something
});마치며,
강의를 듣고 나면 완성도 높은 크롬앱이 완성되는 줄 알았다. 니콜라스가 처음에 CSS를 가르쳐 주지 않는 것을 그렇게 강조하더니, 기능은 되지만 모양은 예쁘지 않은 앱이 완성되었다. 결국 CSS쪽은 내가 해야 한다는 것인데, 막상 하려하니 모르겠다. 언제쯤 HTML, CSS, Javascript에 익숙해질까? 특히 CSS가 익숙하지 않다. 조급함이 나를 괴롭힌다.
