서론
글을 시작하기 전에, 제목을 보고 이곳에 들어온 사람들이 많을 것이다.
솔직하게 말하자면, 과장된 것 같다.
개발자가 아직 아닌 개발자를 희망하는 사람이니, 그 점 참고하고 읽어주길 바란다.
피드백과 훈수는 언제나 환영이다.❤
그럼, 이제 왜 제목을 저렇게 지었는가? (스토리 읽기 싫으면 밑에 것은 건너뛸 것을 추천)
어떻게 알았는가?
이제 react 같은 library를 보면, component를 나눠서 개발 하는 것을 볼 수 있다.
그리고 그걸 어디서든지 끌고 와서 사용 할 수 있게 한다는 것, 난 이게 너무 편리했다.
하지만, 인생을 살다가 보니 언제든지 react만 사용할 수 있는 것은 아니였다.
CRA가 아닌 custom webpack으로 bundling을 해야하는 날도 있듯이
기본 html, js를 사용해야 하는 일이 생긴
것이다.
내 손가락과 신체 리듬은 react에 맞춰져 있다. 그래서 react스럽게 html,js로 코딩하는 법을 찾다가 짜란! 잭팟. custom components와 shadow dom을 알게 되었다.
그래서 이게 뭔데?
음...간단하게 말하자면 js로 html에서 사용하는 element들을 만들어서,
html에서 쓸 수 있게 해준다..가 된다. 물론 element는 기존의 html들로 만든다.
shadow dom은 우리가 webpack을 사용하는 이유와 비슷하다.
webpack을 쓰는 이유는 bundling의 기능을 한다. 다른 파일에 있는 같은 변수가 함수명
을 사용하면 파일을 끌어 올 때, 에러가 발생할 수 있으므로, 파일명을 바꿔주는데, css에서도 class명이나 id명이 변할 수 있다. 따라서, shadow dom이라는 dom과는 다른 부분에 새로운 dom을 생성해 준다고 생각하면
편하다.
출처: //miro.medium.com/max/1424/1*vb3-5n48rHq55qQzAN67qA.png
어떻게 사용해?
사용법은 간단하다.
이런 형태의 html 파일을 생성했다고 하자.
저기 head에 script file을 불러 오게 된다.
이런 코드를 짜고 난 후에 html을 실행시켜 보면,
맨 처음에 hi!라고 뜨던 글씨가 1초 후에 my
name is indio라고 바뀌는 것을 알 수 있다.
하지만 우리가 원하는 것은 이게 아닐꺼라고 생각한다.
이쁜 UI를 만드려면 shadow dom을 써야한다.
저런 형식으로 style과 html을 생성하여 만들 수 있다.
후기
개인적으로 좋은 기능을 알았다고 생각하며, 바닐라 js로도 이런 코딩을 할 수 있구나에
대해 엄청난 성취감을 얻었다.
출처
공부 출처 : //kyu.io/%EC%9B%B9-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B81-keep-calm-and-usetheplatform/
첫 자바스크립트 공부 시작은 노마드 코더의 "바닐라 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
//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() 메서드를 사용.
결과
Momentum 클론인데, 기능만 클론이라 이런 식의 기능이 되어버렸습니다..
나중에 개인적으로 CSS 작업을 조금만 하면 예뻐지겠죠?
개인적으로 가볍게 제 새해 다짐을 시작하기 딱 좋았습니다.
처음부터 힘들지도 않았고, 공부하는 습관을 들이는데 좋았습니다.
이제는 원래 가지고 있던 자바스크립트 책을 위주로 공부하고, 전체적으로 개념을 공부한 후 세부적으로 다양한 지식을 알아가려고 합니다. 가끔 공부하면서 좋은 지식은 포스팅을 하겠습니다.