개발일지

버블링 ( bubbling ) 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 한 요소에 이벤트가 발생하면 그 부모 요소의 이벤트도 같이 발생되는 이벤트 전파입니다. EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 여기서 핸들러는 에 할당되어 있지만 이나 같은 중첩 태그를 클릭해도 동작합니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 이런 흐름을 '이벤트 버블링' 이라고 부릅니다. "거의" 모든 이벤트는 버블링 됩니다. ! focus 이벤트..

리액트( React )의 Class Component 에도 라이프사이클이 존재합니다. 라이프사이클 메서드는 총 9가지입니다. Will 접두사가 붙으면 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙으면 어떤 작업을 작동한 후에 실행되는 메서드 그리고 라이프사이클은 총 3가지 종류로 나누어집니다. 1. 마운트 ( Mount ) : 페이지에 컴포넌트가 나타남 2. 업데이트 ( Update ) : 컴포넌트 정보를 업데이트 ( 리렌더링 ) 3. 언마운트 ( Unmount ) : 페이지에서 컴포넌트가 사라짐 마운트 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트라고 합니다. 이 때 호출되는 메서드들은 다음과 같습니다. constructor 메서드 : 컴포넌트를 새로 만들 때마다 호출되는 클..

무한스크롤로 인한 DOM의 개수가 매우 많아지게 되면 브라우저의 레이아웃과 페인트로 인해 렌더링이 지연되므로 웹 성능 저하의 원인이 됩니다. 그러므로 1. 성능 최적화를 위해 한 페이지에 20개정도씩만 로드하도록 구현하고 2. 이미 로드된 데이터는 캐싱해두어 사용자가 스크롤을 올릴 때 다시 로드하지 않아도 되도록 할 것입니다. 그리고 3. 가상 스크롤과 같은 기법을 사용해 현재 화면에 보이는 아이템만 실제 DOM에 렌더링하고 나머지는 제거하는 방식을 적용하면 좋을 것 같습니다. * 레이아웃 : 각 요소의 크기와 위치를 계산 * 페인트 : 화면에 요소를 그리는 과정

== 과 === 모두 JavaSciprt의 비교 연산자로, 동등 연산자와 일치 연산자라고 부릅니다. 동등 연산자( == )는 좌항과 우항의 피연산자를 비교하여 타입이 다르더라도 암묵적 형 변환 후 같은 값이라면 true를 리턴합니다. 일치 연산자( === )는 암묵적 형 변환을 허용하지 않으며 각 피연산자의 값이 동일해야 하고 타입까지 같아야 true를 반환합니다. reference. Divide and Conquer.한우콩.3/7 취준 기록 - 4일차.https://hwb0218.tistory.com/77

동기와 비동기 동기는 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것입니다. 비동기는 반대로 어떠한 요청을 보내면 응답에 관계없이 바로 다음 동작이 실행되는 방식입니다. 그렇다면 비동기 작업은 왜 필요할까? 만약에 어떤 페이지가 로딩되는 데 시간이 오래 걸리게 된다면 사용자가 이탈하게 되므로 비동기적으로 동작할 수 있게 하는 게 좋습니다. JS는 동기식 언어이다. JS는 한 번에 하나의 작업을 수행합니다. 이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 릅니다. JS는 콜스택( Call Stack )과 메모리힙( Memory Heap )이라는 메모리 구조를 통해 데이터 및 코드 실행을 관합니다. JS 엔진의 주요 구성 요소 1) Memory..

this는 자신이 속한 객체 또는 미래에 생성할 인스턴스를 가리키는 자기 참조 변수입니다. JavaScript의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받습니다. 그리고 JS의 this는 함수 호출 방식에 따라 this에 바인딩되는 객체가 달라집니다. => 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정됩니다. 함수 호출 방식은 아래와 같이 다양합니다. 1. 일반 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 const foo = function () { console.dir(this); }; // 1. 함수 호출 foo(); // window // window.fo..