들어가며 자바스크립트에 대한 지식이 1mm 내린 비처럼 있을랑 말랑 했던 시절.. this에 대한 설명글들을 봐도 도무지 이해하기가 어려웠다. 이게 뭔가에 따라서 달라지는건 알겠는데 그래서... 어떻게 된다는 ? ?.. 짧게 얘기하자면 this는 누가 호출했느냐에 따라 달라진다. 어렵게만 느껴졌던 this에 대해 정리해 보자. 그래서 this란?? 일단 this의 사전적 의미는 '이것'이긴 한데.. 뭘 가리키느냐. 바로 자신이 속한 객체나 생성할 인스턴스를 가리키는 변수다. C++이나 JAVA와 같은 클래스 기반의 언어에서의 this는 클래스가 생성한 인스턴스다. 이미 this를 선언하면서 생성된 인스턴스를 가리킨다고 결정된 것이다. 그런데 자바스크립트의 this는 좀 특이하다. 자바스크립트에서의 th..

선택 요소 외의 형제요소 클래스 모두 지우기 미니 프로젝트를 하다가 형제요소가 많은 상태에서 특정 요소를 선택했을 때만 is-active 클래스를 추가하고, 나머지 요소들은 is-active 클래스를 어떻게 지울 것인가...를 고민하다가 스택 오버플로우에서 보고 참고하게 되었다. 예전에 제이쿼리로는 한줄로 쉽게 했던 것 같은데 바닐라 JS로만 하려니까 아직 영 쉽지 않은 것!!... 아래 사진과 같이 현재 play-button 이라는 동일한 클래스를 가진 버튼이 3개 있고, 클릭한 요소에만 is-active를 추가, 나머지는 있었더라도 없애주는 것을 원했다. 해결 function handlePlayerImage(e) { e.preventDefault(); const buttonGroup = this.pa..

console. 자바스크립트를 이용해서 코드를 작성할 때, 콘솔을 통해서 값을 확인하는 일이 많다. 아마 콘솔에서 제일 많이 사용하는 메서드는 console.log 일 것이다! 그 외 현재 자주 사용하는 메서드가 있다면 가끔 객체 내부 구조를 파악하기 위해 사용하는 console.dir 와 로그를 다 지워버리는 console.clear() 정도?.. 내가 얕게 알고 있었던 console 객체의 몇몇 메서드들 이외에도 다양한 메서드들이 있다는 것을 이번 챌린지를 통해 알게되어 한번 정리해보려 한다. console.log 가장 많이 사용하는, 로그를 찍는 메서드다. 여러 개를 출력할 수도 있고, C언어의 printf처럼 입력한 문자를 치환하여 사용할 수도 있다! 하지만 우리에겐 더 익숙한 템플릿 스트링 ${..

classList DOM을 조작하여 클래스를 추가하거나 삭제할 때, class 명을 바꿀 때 등 다양한 상황에 사용할 수 있는 classList 프로퍼티. 챌린지를 진행하다 classList 프로퍼티 중 극히 일부의 메서드만 사용하고 있었다는 것을 깨달았다. 상황에 따라 코드를 더 깔끔하게 짤 수 있는 메서드도 있고 해서, 전체적으로 어떤 메서드가 있는지 한번 훑어보려 한다. add, remove 평소 사용했던 일부의 메서드.. 가장 간편해서 그런지 기억에 오래 남아있는 것인가 싶기도 하다. 🤔 아래와 같이 간단한 예시를 들 수 있다. 메소드 이름대로, 클래스를 추가하고 제거하는 메서드다. 여러 개를 나열할 수도 있다. let li = document.createElement('li'); li.class..

자바스크립트 만으로 아날로그 시계 만들어보기를 진행했다. 먼저 아날로그 시계를 만든 뒤 따로 디지털 시계도 추가해줬다. 알게 된 점 CSS의 속성 중 transform-origin 으로 transform의 기준점을 잡을 수 있다. 침을 조절하는 각도를 지정하는 방식은 여러가지. 첫 번째 이슈 처음에 12시 방향으로 모든 침을 고정시키기 위해 rotate를 90도로 설정해주었더니, 12시 방향에 도착할 때 마다 transform이 요란하게 움직였다가 다시 돌아오는 것을 볼 수 있었다. (너무 빨라서 캡쳐 불가능..) 이건 아마 444도 까지 늘어났다가 급격하게 90도로 변경되며 생기는 문제같았다. 그래서 아래 같은 방식으로 모든 침이 12시 방향에 도달했을 때 transition 속도를 잠시 조정해주는 것..

이벤트 객체 우리가 자바스크립트에서 동적인 기능을 위해 이벤트를 등록하고자 할 때는 여러 방법이 있지만, 흔히들 addEventListener()과 같은 메서드를 사용하곤 한다. 브라우저는 이벤트가 발생하면 결과적으로 아래와 같은 이벤트 객체 event object를 만든다. 브라우저는 이벤트를 어떻게 감지해서 객체를 만들어 낼 수 있는 것일까? 이런 궁금증을 해결해주는 이벤트를 감지 하는 특성이 있다. 바로 이벤트 버블링과 이벤트 캡쳐링, 두 가지 방식이다. 이벤트 버블링 Event Bubbling 이벤트 버블링은 비누방울이 아래에서 올라오는 것과 비슷하게 생각하면 좀 더 수월한 이해가 가능하다. 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소들로 전달되는 특성을 말한다. Article부터 Butt..

들어가며 콜백지옥이라는 것을 들어본 적이 있는지? ES6이 도입되기 이전에 비동기 작업을 하기 위해서는 콜백함수로 처리했다고 한다. 비동기 작업으로 처리해야하는 일이 많아질수록 함수가 점점 더 깊어지게 되는데, 이를 흔히들 콜백지옥, 콜백 헬 callback hell 이라고들 부른다. 위의 짤만 보아도 얼마나 가독성이 좋지 않은지...😇 연결을 파악하기가 쉽지 않다는 것을 알 수 있다. 이런 콜백 지옥을 피할 수 있는 방법이 몇가지 있는데, 이 글에서는 프로미스 Promise에 대해 써보고자 한다. 프로미스 프로미스는 ES6에서 도입된 객체로, 비동기 처리 상태와 처리 결과를 반환하는 객체이다. 비동기 처리를 했을 때 작업이 성공이든, 실패이든 결과를 반환해준다. 아래와 같은 형태로 new 연산자를 통해..

Fetch API를 이용해서 데이터를 받아오는 연습! JSONPlaceholder 예시로 jsonplaceholder 에서 데이터를 받아오려 한다. 서버가 없을 때 가상의 데이터를 가져오기에 유용한 사이트다. https://jsonplaceholder.typicode.com/ 사용할 수 있는 데이터 소스들은 아래와 같다. 이 중에서 users를 이용해보려 한다. 사용 가능한 HTTP 메서드들은 다음과 같다. REST API를 연습해볼 때도 유용하게 사용할 수 있을 것 같다. Fetch API로 데이터 받아오기 Fetch API Fetch API는 XMLHttpRequest 객체에서 좀 더 보완된 API로, 모던 브라우저라면 대부분 내장되어있다. 비동기 통신에 많이 사용되던 ajax를 대체하여 페이지의 새..

들어가며 자바스크립트의 변수 선언 방법에는 var와 let, const가 있다는 사실은 자바스크립트를 조금 공부하기 시작하면 금방 알게되는 사실이다. 그리고 var 키워드를 지양해야한다는 것을 대략적으로 습득하게 된다. 조금 더 검색을 해봤다면 const 키워드는 재할당이 불가능하니 되도록 const 키워드를 지향하고, 재할당이 필요한 경우에만 let 키워드를 사용하는 것이 좋다는 사실까지 알 수 있다. 여기까지 좋다. 그렇다면 어떤 이유 때문일까? 내 머릿속을 정리하기 위해서 몇가지 개념과 함께 이를 알아보고자 한다. 그래서 var 키워드는 뭐가 문제일까? 변수 중복 선언이 가능 먼저 let과 const 키워드로 변수를 중복 선언할 경우에는 이미 선언되었다는 에러가 뜨지만, var 키워드로 선언한 변수..