바닐라 JS로 크롬 앱 만들기 #3 (2)

#3.5  More Events

 

event들은 그저 click이라거나 마우스가 ente, leaver하는 정도만 처리하는 것이 아니다!

이번 강의에서 다룰 내용은 window의 interface 또는 object이다.

 

event를 사용하는 또 다른 방법은 title.addEventListener()를 하고, click을 넘기는 것이다.

이전 강의에서 만들었던 왼쪽 코드를 오른쪽 코드로 수정할 수 있다!

 

addEventListener을 더 선호하는 이유!

나중에 .removeEventListener를 통해서 event listener를 제거할 수 있기 때문이다.

 

body는 특별해서 콘솔창에서 body를 호출할 수 있다.

하지만 document.div는 가져올 수 없다. 가져오려고 코드를 작성해도 존재하지 않는다고 출력된다.

document의 body, head, title 이런 것들은 중요하기 때문에 왼쪽 코드와 같이 존재하고,

나머지 element들은 querySelector이나 getElementById 등으로 찾아와야한다.

 

Clipboard events는 유저가 copy 행위를 했을 때 발생한다!

해당 이벤트를 코드에 추가하고 브라우저를 새로고침해서 ctrl + c를 했더니 동작했다!

 

이번에도 copy event를 listen해서 event를 처리했다.

 

그 이후에도 다양한 이벤트 코드를 더 추가했는데 나는 실습만 하고 따로 블로그에 올리지는 않을 것이다!

 

#3.6  CSS in Javascript

 

이번 영상에서는 이전 강의에서 썼던 event listener들을 모두 지울것이다!

이번 강의에서는 handleTitleClick function에 초점을 맞출 것이기 때문이다.

유저가 title을 클릭했을 때 title을 파란색으로 칠하고, 한번 더 클릭하면 토마토색으로 바뀌는 것을 할 것이다.

 

1번에서는 h1의 color을 획득할 수 있고, 2번에서는 h1의 color을 설정할 수 있다.

 

처음엔 검은색이라서 공백으로 출력되고 한번 출력하고는 blue라는 값이 출력된다.

 

click me!를 더 누르면 누를 때마다 blue라는 값이 출력된다.

 

=== 는 값이 일치함을 확인하기 위한 기호이다.

위 코드는 만약 h1(click me!)의 색이 blue라면 tomato 색으로 바꾸고 blue가 아니라면 blue 색으로 설정하는 코드이다.

 

위 코드에서 h1.style.color을 많이 호출하기보다는 color 현재 상태를 저장하는 것이 코드를 더 깔끔하게 만들 수 있다.

 

const currentColor을 정희해주고 거기에 h1.style.color을 저장해준다.

 

네모 안에 있는 코드를 두번씩 하는 것을 대신해서 let으로 변수 하나를 더 생성해준다.

* const와 let의 차이점은 let은 값이 변경될 수 있다는 것이다.

 

만약 currentColor이 blue라면 newColor는 tomato로 변경할 것이다.

여기 보이는 newColor를 변경해도 h1의 color에는 아무 영향을 미치지 않는다.

 

 

#3.7 CSS in Javascript part Two

 

CSS에서 h1의 색깔을 기본값으로 파란색으로 지정해주었다.

 

h1에 active class를 전달해주기 위한 코드를 작성해준다. 이때, 네모 속에 있는 active 끼리의 스펠링이 같아야한다.

결과적으로는 JS는 HTML을 변경하고, CSS는 HTML을 바라보고 있다.

 

브라우저를 새로고침해보면 처음엔 하늘색으로 보이고 클릭하면 토마토색으로 바뀌는 것을 볼 수 있다.

위 코드를 사용하면 #3.6 강의에서 작성한 코드보다 더욱 더 간결한 코드로 같은 결과를 낼 수 있다.

 

또한 콘솔창에서 요소에 들어가면 Click me!를 클릭했을 때

색이 변하면서 h1 class가 hello에서 active로 바뀌는 것을 확인할 수 있다.

 

몇가지 코드를 추가해서 클릭했을 때  className이 출력되도록 할 수 있다.

 

위 코드를 추가해서 

 

다음과 같이 콘솔창에 들어갔을 때 클릭을 하면 className을 추가하도록 코드를 수정해주었다!!

 

현재 코드에서 조금 더 개선할 수 있는데 현재 string을 두번 사용하고 있어 오류가 발생할 수 있는 부분을 고쳐줄 수 있다.

여기서 오류가 발생할 수 있는 부분은 css에 있는 active와 js에 있는 active가 똑같아야하는데

그 부분에서 오타가 발생하거나 두 string이 일치하지 않을 수도 있고, css와 js가 일치하지 않을 수도 있다.

 

다음 코드를 추가해서 오류가 발생하지 않도록 해줄 수 있다.

 

 

#3.8 CSS in Javascript part Three

 

만약 className이 존재한다면 toggle은 className을 제거할 것이다.

그리고 만약 className이 존재하지 않는다면 toggle은 className을 추가할 것이다.

 

이 경우에는 clicked을 한번만 사용하면 되기 때문에 const clickedClass = "clicked"; 코드는 지워준다.

다시한번 정리하자면 toggle은 h1의 classList에  clicked class가 이미 있는지 확인해서

만약 있다면, toggle이  clicked를 제거해준다.

만약 h1의 classList에 clicked가 존재하지 않는다면, toggle은 clicked를 classList에 추가해준다.