Nomad coders - 바닐라 JS로 크롬 앱 만들기 후기

첫 자바스크립트 공부 시작은 노마드 코더의 "바닐라 JS로 크롬 앱 만들기" 강의를 본 것이었습니다.

그래도 일하면서 자바스크립트는 많이 사용했으니 이 정도는 다 알겠지? 하면서 저의 전투력을 측정하는 느낌으로 강의를 들었습니다.

하지만 은근 저도 어이없게 모르는 것도 있고, 원래 몰랐던 것들도 있었습니다.

 

 

강의에 대해

이 강의는 momentum이라는 크롬 앱의 기능을 일부 구현해보는 강의로 클론까지는 아니고 기능 구현하기 강의입니다.

제목에서 알 수 있듯이 vanilla js를 배우고 코딩해보는 실습을 가집니다.

 

 

배우면서 몰랐던 것

요소 탐색

DOM 탐색은 가장 기초 중에 기초인데, 저는 jQuery에 의존했습니다. 하지만 document.getElementById, document.getElementsByClassName, document.querySelector, document.querySelectorAll 등을 사용하는 방법은 알고 있었습니다.

 

하지만 요소를 찾고 그 요소의 하위 요소를 또 찾을 때 어떻게 해야 하는지 몰랐습니다.

보통 jQuery로 $(".parent-element").find(".children-element"); 이런식으로 자식 요소를 찾았는데, Element.querySelector()가 되는지 처음 알았습니다.

 

console.dir

세상에! console.dir라는 것이 있었어요?

 

window event

window 객체에는 offline, online 이벤트가 있습니다.

• online : 인터넷에 연결된 상태일 때 작동하는 이벤트
• offline : 인터넷 연결이 끊겼을 때 작동하는 이벤트

 

classList toggle

https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle

원래 toggle 함수가 있다는 것은 알고 있었지만 자주 망각해서 필요시 사용하자는 의미로 적었습니다.

 

e.preventDefault();

e.preventDefault()와 e.stopPropagation() 의 차이를 몰랐는데 이번에 그 차이를 알게 되었습니다.

• e.preventDefault()
  • <a>태그나 <form><submit>등 태그는 기본 동작을 가지고 있는 태그이다. 이 기본 동작을 막으려면 e.preventDefault()를 사용합니다.
• e.stopPropagation()
  • 특정 요소에게 click이벤트가 있는데 그 상위 요소에게도 click이라는 이벤트가 있다면, 그 상위 요소의 click 이벤트가 전파되지 않도록 막을 때 e.stopPropagation()을 사용합니다.

 

local storage

나는 왜 local storate를 왜 몰랐는가?

나는 왜 local storate를 한 번도 사용해보지 않았고, 왜 접해보지 않았고, 왜 몰랐는가?

솔직히 local storage라는 것이 있는지도 몰랐습니다. 그냥 쿠키가 전부인 줄 알았습니다..

• local storage : 브라우저에 정보를 저장할 수 있다.
• window 객체 함수
• localStorage.setItem() : 특정 키와 함께 정보를 저장
• localStorage.getItem() : 특정 키로 정보를 불러옴.

 

String.padStart, String.padEnd

• 글자 자릿수 맞추기
  • String.padStart(자릿수, 채울 글자)
  • String.padEnd(자릿수, 채울 글자)

 

원하는 랜덤 숫자 뽑기

그냥 한번씩 쓸 것 같아서 적었습니다.

const randomNumber = Math.floor(Math.random() * {범위 숫자});

 

Random ID 만들기

Date.now()를 사용하면 초 단위로 얻을 수 있는 랜덤 아이디가 생성됩니다. 고유 ID를 만들 때 딱 좋음.

 

array.filter

• 특정 요소를 빼고 새로운 array를 만들고 싶을 때, filter를 사용합니다.
• array.filter(x => x !==3); ⇒ 3을 제외한 array를 새로 생성.
• array.filter(x => x > 10); ⇒ 10보다 큰 숫자만 포함해서 array를 새로 생성.

 

사용자 위치 알아내기

와 브라우저에 이런 기능이 있었다고? 난 왜 몰랐지?

• navigator.geolocation.getCurrentPosition() 메서드를 사용.

function onGeoOk(position) {
    const lat = position.coords.latitude;
    const lng = position.coords.longitude;
    console.log("you live in ", lat, lng);
}

function onGeoError() {
    alert("Can't find you. No weatger for you.")
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);

 

 

결과

결과가 참 귀엽죠?

Momentum 클론인데, 기능만 클론이라 이런 식의 기능이 되어버렸습니다..

나중에 개인적으로 CSS 작업을 조금만 하면 예뻐지겠죠?

 

개인적으로 가볍게 제 새해 다짐을 시작하기 딱 좋았습니다.

처음부터 힘들지도 않았고, 공부하는 습관을 들이는데 좋았습니다.

이제는 원래 가지고 있던 자바스크립트 책을 위주로 공부하고, 전체적으로 개념을 공부한 후 세부적으로 다양한 지식을 알아가려고 합니다. 가끔 공부하면서 좋은 지식은 포스팅을 하겠습니다.