[Javascript] Vanilla JS로 크롬 앱 만들기 - Review(1)

노마드 코더 [Javascript] 기초 - Vanilla JS

---

코딩쟁이들이라면 들어봤을 법한 유튜버 '노마드 코더'의 Javascript 무료 강의로 아래 사이트에 들어가면 볼 수 있다.

https://nomadcoders.co/javascript-for-beginners

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

 

크롬 앱으로 날씨/시간/Todo List 등을 볼 수 있는 MomentumApp을 순수 자바스크립트인 Vanilla JS로 만들어보는 강의다.

React를 바로 공부하다보니 JS를 이해하지 못하고 들어가서인지 쉽게 가져다 쓸 수있는 함수를 어렵게 쓰는 기분이 들어서 한번 쭉 들어보는게 좋겠다 싶었다.

3일차 60% 정도 듣고 쓰는 이 리뷰는 추후 29기인가 내가 챌린지도 등록해놨기 때문에 8월말쯤 시작하는 챌린지도 잘 마무리하길 바라며 작성한다.ㅎㅎ

---

1. Element 가져오기

// id가 login-form인 요소 가져오기
document.querySelector('#login-form');
document.getElementById("login-form");

// Tag가 form인 요소 가져오기
document.getElementsByTagName("form");

// login-form 의 child 중 input인 애들 중에 첫번째 요소 가져오기
document.querySelector("#login-form input");

 

querySelector를 이용할 때 id로 가져올 경우엔 #을 앞에 붙이고 그 하위 요소를 가져올땐 띄어쓰기로 하며 다수의 요소를 불러올 땐 querySelectorAll()을 사용한다.

---

2. Console 사용하기

// console에 값 출력하기
console.log(value);

// console에 객체 출력해서 펼쳐보기
console.dir(object);

 

console.log는 알고 있었지만 dir은 처음 알았는데 js 구조에 대해서 깊이있게 파악할 때 보기 좋을것 같다. 객체가 가지고있는 property나 event들도 볼 수 있어서 유용하다.

 

console.dir() 사용

---

3. EventHandler 연결하기

//submit 이벤트에 onLoginSubmit 함수를 추가한다.
loginForm.addEventListener("submit", onLoginSubmit);

//onsubmit 이벤트에 onLoginSubmit 함수를 연결한다.
loginForm.onsubmit = onLoginSubmit;

 

두 가지 방법으로 Event를 연결할 수 있는데 onsubmit 같이 어떤 이벤트가 있는지를 알려면 console.dir로 객체를 들여다 보는 것도 좋다.

---

4. classList.push/remove로 className에 따른 css 적용하기

//className의 뒤에 hidden 추가하기
loginForm.classList.add("hidden");
결과 : class = "" -> class ="hidden"

//className에서 hidden 삭제하기
loginForm.classList.remove("hidden");
결과 : class ="hidden" -> class = "" 아예 없음

 

위와 같이 class 이름을 변경해주면 css에서 클래스명 hidden으로 설정된 스타일이 해당 요소에 자동으로 적용된다.

.hidden {    display: none;}

---

5. 자주 쓰이는 string변수는 상단에 대문자로 선언해놓기

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

 

Capital Letter. 대문자로 선언하는게 좋다고 했다.

---

6. preventDefault()

function onLoginSubmit(e) {
    e.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

 

preventDefault를 submit 이벤트함수에 넣어 놓음으로써 새로고침이 일어나지 않도록 방지한다. 이벤트가 더이상 진행되지않도록 돕는 함수가 preventDefault()라는 점. 잊지말자.

---

아직 로그인까지 밖에 안해봤는데 전에 react에서 하루종일 삽질했던. Form에서 submit 시 왜 새로고침이 일어나는지도 알았으며, javascript에 대해 기초를 다지고 있어서 좋다.

앞으로 40% 남았는데 나머지 듣고 다시 리뷰를 작성하도록 해야지~~~ 강의 들은지 3일차니까 곧 다 들을 것 같다.

다음 글에선 내가 만든 결과물을 올려야겠다.