함수 안에서 this를 사용하면 window 객체를 참조하게 된다. 이때 call, apply, bind를 사용하면 참조하는 객체를 바꿀 수 있다.   1. call 메서드call 메서드는 함수를 호출하는 함수이며, 첫 번째 인수로 값을 전달해 주면, 호출되는 함수의 this는 window 객체가 아닌 전달받은 값을 가리키게 된다. const fullName = function(){ console.log(this.firstName + " " + this.lastName);}fullName();이 상태로 출력하면 undefined가 출력된다. 왜냐하면 함수 내에서 this는 window객체를 가리키는데, 이때 window객체 내에 firstName라는 메서드가 없기 때문이다. 이런 상황에서 call 메서..

this 1. 메서드에 this 사용 시const audio = { title: 'a', play(){ console.log('play this', this); }}audio.play() 메서드에서 this를 사용하면 해당 객체를 가리킨다.    2. 함수에서 this 사용 시function playAudio(){ console.log(this);}playAudio();함수에서 this를 사용하면 window 객체를 가리킨다.     3. 생성자 함수에서 this 사용 시function Audio(title){ this.title = title; console.log(this);}const audio = new Audio('a');생성자 함수에서 this를 사용하면 빈 객체를 가리킨다. ..

id를 반환받지 않아도 지목할 수 있다. id값으로 coffee라는 값을 가진 요소를 반환받아서, 새롭게 만든 p태그를 붙이는 과정이다. 그런데 여기서 id를 그대로 붙여도 오류가 나지 않았다. 신기하게 querySelector를 주석처리하고, id값을 그대로 사용해도 출력이 되는 것을 확인할 수 있다. 왜 그런 것인가? https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-properties Do DOM tree elements with IDs become global properties? Working on an idea for a simple HTMLElement wrapper I stumbled..

이벤트 버블링 이벤트 버블링이란 위의 그림처럼 가장 깊게 중첩된 요소(3)에 이벤트가 발생했을 때, 이벤트가 위로 전달되는 것을 의미한다. 3번 요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면, 3번->2번->1번 핸들러 순으로 실행된다. FORM DIV P 가장 안쪽의 태그를 클릭하면 우선 p태그에 할당된 onclick 핸들러가 작동된다. 그리고 div->form 순서대로 작동한다. document 객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 동작한다. 즉 위의 코드를 클릭하면 3개의 alert가 뜬다. event.target과 this의 차이점 event.target은 실제 이벤트가 시작된 ‘타깃’ 요소, 즉 버블링이 진행되어도 변하지 않는다. this는 ‘현재’ 요..

카카오테크캠퍼스를 통해 CSS를 다시 처음부터 공부하고 있습니다. 덕분에 평소에 잘 모르고 사용하던 transition과 transform의 개념에 대해 더 잘 알게 되었습니다. 하지만 유독 3차원 변환 함수 자체가 많이 낯설었습니다. 2차원 변환 함수 중 하나인 translate는 여러 번 사용해 봤어도, 3차원 변환은 사용해 본 적이 없었기 때문입니다. 그래서 익숙해질 겸, 연습 겸 조금씩 두드려보다가 문득 생각나는 것이 있어서 만들어봤습니다. ★transform 개념 빠른 정리☆ 더보기 transform transform: 변환함수1 변환함수2 변환함수3 .... ; 요소의 변환 효과를 줄 수 있는 CSS 속성입니다. transform 변환 함수들 1. 2D 변환 함수 translate(x, y) ..

문제점 우리 서비스는 유리병을 공유하고 편지를 주고받는 서비스이다. 하지만 링크가 너무 그대로 노출되는 문제가 있었다. 특정 사람에게만 응원받고 싶을 수도 있는데, 이렇게 되면 제3자가 링크의 숫자만 변경해서 유리병에 접근할 수도 있다. 즉 링크를 숨길 필요가 생겼다 그러기 위해 암호화 복호화를 이용했다. 원래는 사용자 정보를 서버에 보내기 전 보호하기 위해 사용한다고 한다. 하지만 그냥 링크를 쉽게 접근하지 못하게 하기 목적이기에, 단순하게 사용하기로 했다. crypto-js를 통한 암호화,복호화 훅 생성 encrypt는 텍스트와 고유키를 넣으면 텍스트를 암호화 시켜주고, decrypt는 암호화된 텍스트와 고유키를 넣어주면 암호화된 텍스트를 복호화 시켜주는 커스텀 훅이다. 복호화에 실패할 때는 0을 리..