코드노트

원시 값, 참조 값의 차이 - 원시값은 변경 불가능한 값, 참조값은 변경이 가능한 값 * 객체 타입 = 참조 값 / 즉 객체는 변경이 가능한 값이다. - 원시값을 변수에 할당하면 변수에는 실제 값이 저장 된다. : * 값에 의한 전달 - 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. : * 참조에 의한 전달 원시 값 - 한번 생성된 원시 값은 읽기 전용 값으로 변경할 수 없다. *즉 원시 값이 변경 불가능 하다 라는 말은 원시 값 자체를 변경할 수 없다는 것! 변수 값은 변경이 가능하다. => 교체할 수 있다. * 여기서 상수도 그럼 변경이 가능한가? 아니다 상수는 애초에 한번만 할당이 가능하다. const a = "곽튜브"; a = "빠니보틀"; console.log(a); // TypeErro..

일반적으로 논리 연산자를 생각하면 그냥 간단하게 and, or 연산자라고만 생각했다. 뒤로 갈수록 이 논리연산자를 사용하는 경우가 많아지는거 같다. 코드의 가독성? 코드의 간결함? 을 위해서라도 사용할 수 밖에 없다. 특히나 함수를 사용하면서 빠질 수 없는 연산자인건 틀림없는 사실이다. 다시한번 상기시키면서 정리를 해보려고한다! 논리 연산자를 사용해서 단축평가를 할 수 있다. 논리합 ||, 논리곱 && 이건 true, false만의 값이 아니다. 다른 값들과도 사용이 되고 다른 경우들과도 조건들을 비교한다. console.log("곽튜브" || "빠니보틀"); // 곽튜브 console.log("곽튜브" && "빠니보틀"); // 빠니보틀 논리합 || 연산자는 두개다 true의 값일 경우 첫번째 피연산자..

See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. codepen 화면에서 커서를 움직여보면 좌표가 찍히는걸 확인할 수 있다. window.addEventListener("mousemove", 마우스좌표); function 마우스좌표(event){ x.innerHTML = event.clientX; y.innerHTML = event.clientY; } 간단한 코드로 마우스 좌표를 추출할 수 있다. See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. 좌표가 마우스 커서를 따라다니게 구현하는 방법도 어렵지 않다.

forEach() for문을 대체할 수 있는 고차함수이다. 자신의 내부에서 반복문을 실행한다. 자바스크립트 메서드 중에서 가장 많이 사용하는 함수이지 않을까 싶다. 사실 사용방법이 다르지 다른 메서드로 같은 값들을 만들어낼수는 있다. 처음에 이해하기 어렵지만 한번만 이해하기 시작하면 일반적인 반복문을 사용할 때 자주 사용하게 된다. 고차함수에 있어서 어렵게 설명되어있는것들이 많다. forEach의 콜백함수에 this는 undefined를 가리키고, 클래스 내부의 모든 코드에서 암묵적으로 strict mode가 적용되는 등등... 이거까지 이해하려고하면 고차함수의 흥미를 잃을수있다.. 쉽게 설명하며 다시한번 이해하려 한다. - 주어진 함수를 배열 요소에 각각에 대해서 실행한다. map과 비슷하다고 생각할 ..

네스팅 - sass는 html의 동일한 시각저ㄱ계층 구조를 따르는 방식이다. - 구조에 맞게 css네이밍이 정해진다. 변수 - 스타일 시트 전체에서 재사용하려는 정보를 저장하는 방법이다. - 자바스크립트에서 사용하는 변수처럼 속성값들을 넣고 사용할 수 있다. - 하나하나 지정하지 않고 변수로 정해두고 사용할 수 있다. - $기호를 통해서 변수로 만든다. @extent : css 확장/상속 - 기존 속성 집합을 그대로 가져온다. / css에서는 공통적으로 속성이 적용 - 수정할부분만 수정해서 사용. % : 임시클래스 - 확장이 아닌 클래스에 적용하는 %extend. - 변수처럼 속성들을 임시클래스에 적용후 @extend : %className 을 통해서 가져온다. @mixin - 함수처럼 매개변수,(인자)..

자바스크립트에서는 InsertBefore 밖에 되지 않는다. 따로 노드를 조정해서 구현하는 방법도 있지만 간단하게 해결하는 방법을 찾았다..! 마지막에 위치를 넣는 쪽에 .nextSibling를 넣어주면 바로 해결되었다. 부모요소.insertBefore(추가할 요소, 넣을 위치.nextSibling) 이 간단한걸.. 드디어 해결

자바스크립트는 싱글 스레드 기반 언어이다. 그렇기 때문에 한번에 한개만 작업이 진행된다. 반복적인 동작을 통해서 여러작업이 동시에 이루어지는것처럼 보인다. 바로 이벤트 루프로 구현되기 때문이다. Event Loop - tick (반복적인 동작) Javascript Engine - Heap과 Call Stack으로 구성되어 있다. * Heap - 메모리 할당이 일어나는 공간 - 변수, 함수 선언시 메모리 할당이 일어남 * Call Stack - 코드 실행시 쌓임 - Last in First Out / 스택 WebAPIs - 브라우저에서 제공하는 API - DOM, Ajax, 타이머 함수 등 - Callback 함수를 Callback Queue에 넣음 Callback Queue - 비동기적으로 실행된 콜백 ..

이벤트 제어 방법 - debounce - throttle * 과도한 이벤트 발생 시 성능 저하 디바운스 debounce - 연속하여 발생한 이벤트를 그룹화 -> 연속하여 발생한 이벤트 중 마지막 또는 처음 이벤트만 호출 ex) 만약 빠른시간에 input영역에 타이핑을 한다고 했을 때 입력한 값을0.1마다 기록한다. - 0.1초에 5번의 타이핑을 하게 되면 5번이 아닌 1번으로 기록된다. 스로틀 throttle - 연속하여 발생한 이벤트를 그룹화 -> 연속하여 발생한 이벤트 중 정해진 시간 동안 무조건 한번 이벤트 발생 위 코드로 보면 5초동안 연속된 이벤트가 발생되어도 한번만 console이 나오는걸 볼 수 있다.

이벤트 전파는 이벤트가 발생했을 때 다른 영역에 전파하는것을 말한다. 이벤트 전파에는 캡처링과 버블링이 있다. 이벤트는 하위요소에서 상위요소로 탐색한다. const capts = document.querySelectorAll("div"); capts.forEach(function(div){ div.addEventListener("click", fnCapture, { capture: true }); }); 이벤트 캡처링 - 이벤트 발생 시 가장 상위 영역에서부터 탐색이 된다. - addEventListener에 capture를 true값을 주면 된다. - default값은 false See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. 위 코드를 실행하게 ..

이벤트 전파 - 상위태그, 하위태그에 이벤트를 실행시켰을 때 전파가 되어 같이 실행되는것을 말한다. 클릭 See the Pen Untitled by beomjunkwon (@bjkwon) on CodePen. codepen에서 클릭을 해보면 한번 클릭으로 세가지 알림창이 뜨는걸 볼 수 있다. 전파를 중단시키려면? 이벤트 전파를 막는 함수를 사용하면 된다. stopPropagation - 크롭, 사파리, 파이어폭스 cancelBubble - IE8 속성 true function fnDivArea(event){ event.stopPropagation(); alert('div 영역!!! '); } function fnSpanArea(e){ event.stopPropagation(); alert('span 영역..