Frontend

[React] 리액트 라이프 사이클

리액트 라이프 사이클 ​ 컴포넌트의 생명 주기 컴포넌트가 렌더링 되기전 ~ 페이지에서 사라질 때 ​ 라이프 사이클을 다루는 것이란? - 컴포넌트가 마운트, 업데이트, 언마운트 되는 일련의 프로세스를 프로그래머가 통제하는 것 - 생성자를 통해 필요한 메모리를 할당, 객체의 역할이 끝나면 소멸자를 통해 메모리를 반환 ​ 라이프 사이클의 유형 1. 생성될 때(마운트) 2. 업데이트될 때(업데이트) 3. 제거할 때(언마운트) ​ ​ - 리액트에서는 예전 방식인 클래스 방식을 사용하는 것을 지양하고 함수 방식을 사용하는 것을 권장 ​ ​ ​ 함수형 라이프사이클에 따른 useEffect 실행 useEffect(() => { console.log('componentDidMount!'); }, []) useEffect..

자바스크립트의 동작 원리

자바스크립트 동작 방식 ​ 자바스크립트는 단일 스레드 방식으로 한 번에 하나의 작업만 처리 가능 ​ 자바스크립트 엔진 V8 구조 ​ Memory Heap 메모리 할당이 일어나는 곳 ​ Call Stack 코드 실행에 따라 스택이 쌓이는 곳(후입 선출 LIFO) ​ 자바스크립트 동작환경(Runtime) ​ Web APIs DOM, AJAX, Timer 등 브라우저에서 제공하는 API ​ Callback Queue 콜백 함수들이 대기하는 곳(선입 선출 FIFO) ​ 호출 스택(Call Stack) 웹 브라우저의 자바스크립트 인터프리터 역할 현재 함수의 동작 및 다음 함수 호출 부분 등을 제어 ​ Event Loop Call Stack이 비워질 때마다 Collback Queue에 대기중인 콜백함수가 있을 경우..

[JavaScript] 디바운싱과 쓰로틀링

디바운싱 - 연속적으로 호출되는 함수들 중에서 처음 or 마지막에 호출되는 함수만 실행하는 방식(함수는 한 번만 실행) - 주로 이벤트 핸들러에 적용 // #1 타이머 예제 let timer; document.querySelector('#input').addEventListener('input', function(e) { if(timer) { clearTimeout(timer); } timer = setTimeout(function() { // 실행할 코드 내용 }, 200); }); // #2 텍스트 입력 예제 function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = argum..

제이쿼리 이벤트 바인딩 및 강제 실행하기

on() 특정 요소에 이벤트를 바인딩하기 위해 사용 $('.firstBtn').on('click', function () { alert('첫번째 버튼'); $('.result').text('첫번째 버튼 클릭'); }) off() 특정 요소에 바인딩 된 이벤트를 제거하기 위해 사용 $('.firstBtn').off('click'); trigger() 호출한 이벤트 요소에 해당하는 바인딩된 함수를 찾아 강제 실행 // firstBtn 클래스에 바인딩 된 이벤트 요소 중에서 click 이벤트를 찾아 강제 실행 $('.firstBtn').trigger('click');

window 객체의 opener 사용하기

window.opener - window.open() 함수로 연 팝업창(자식창)을 의미 - opener를 통해 부모창을 제어 가능 - window.open([페이지 URL], [타겟], [옵션]) 옵션 width : 팝업창 가로길이 height : 팝업창 세로길이 toolbar=no : 단축도구창(툴바) 표시 안함 menubar=no : 메뉴창(메뉴바) 표시 안함 location=no : 주소창 표시 안함 scrollbars=no : 스크롤바 표시 안함 status=no : 아래 상태바 창 표시 안함 resizable=no : 창 변형 하지 않음 fullscreen=no : 전체 화면 하지 않음 channelmode=yes : F11 키 기능이랑 동일 left=0 : 왼쪽에 창을 고정 top=0 : 위쪽..

자바스크립트 null, undefined, NaN의 차이

null - 다른 참조 변수에 대한 주소 값이 없는 것 - 객체의 속성 값이 존재하지 않거나, 함수의 매개변수를 초기화할 때 사용 - undefined에 비해 메모리 용량 많이 차지 ​ undefined - 값이 할당되지 않은 상태 - null에 비해 메모리 용량 적게 차지 ​ NaN - Number 타입 - Not a Number의 약자로 숫자가 아닌 값을 의미 - 숫자가 아닌 문자열 값을 숫자로 변환하여 계산할 때 일종의 오류 값으로 사용 ​ null, undefined, NaN의 공통점 자바스크립트 조건식에서 false 값으로 평가

크롬 브라우저에서 자바스크립트 디버깅 하는 법

F12 버튼을 눌러 크롬 개발자 도구에 진입합니다. 소스 탭 메뉴를 누른 후에 디버깅하고 싶은 자바스크립트 파일을 찾습니다. 해당 파일을 클릭 후에 함수 왼쪽을 클릭하여 브레이크 포인트를 지정합니다. 지정한 자바스크립트 함수가 실행될 수 있도록 이벤트를 발생시킵니다. 브레이크 포인트가 걸렸으면 디버깅 모드를 이용할 수 있습니다. ​ 디버깅 모드 다음 함수 호출(Step Over) - 한 줄씩 순차 실행 다음 함수 호출(Step Into) - 해당 시점에 함수 안에 들어가 내부 함수를 탐색합니다. 현재 함수에서 벗어나기 - 현재 함수에서 상위 함수로 빠져나옵니다.

Virtual DOM

DOM(Document Object Model) 객체로 문서 구조를 표현하는 방법(XML, HTML 등으로 작성) Virtual DOM 리액트의 성능을 향상시키기 위해 고안된 개념 메모리 상에 존재하는 가상의 DOM 브라우저 상에 실제 DOM을 직접 조작하는 것보다 더욱 빠르게 렌더링 가능 Virtual DOM은 실제 DOM과 비슷한 구조를 가지고 있으며, 리액트의 컴포넌트가 렌더링될 때마다 Virtual DOM을 업데이트합니다. 이때, Virtual DOM을 업데이트하는 것은 실제 DOM을 조작하는 것보다 훨씬 빠르며, Virtual DOM을 업데이트할 때마다 리액트는 변경된 부분만 실제 DOM에 반영합니다. Virtual DOM의 장점 효율적인 렌더링: Virtual DOM은 변경된 부분만 실제 DO..