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 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 작업을 조금만 하면 예뻐지겠죠?
개인적으로 가볍게 제 새해 다짐을 시작하기 딱 좋았습니다.
처음부터 힘들지도 않았고, 공부하는 습관을 들이는데 좋았습니다.
이제는 원래 가지고 있던 자바스크립트 책을 위주로 공부하고, 전체적으로 개념을 공부한 후 세부적으로 다양한 지식을 알아가려고 합니다. 가끔 공부하면서 좋은 지식은 포스팅을 하겠습니다.