Frontend

    $(document).ready() 와 window.onload 의 차이점

    두 구문을 사용하는 이유는 다음과 같다. 자바스크립트는 인터프리터 언어이므로 DOM이 그려지기 전에자바스크립트로 특정 HTML태그(DOM)를 참조할 경우 스크립트 오류가 뜰 수 있다. 이를 해결 하기 위해 두 개의 구문이 등장하게 되었다. 둘의 차이점을 알아보자. (참고로 window.onload 는 페이지당 한번만 사용 가능하기 때문에,window.addEventListener를 사용하면 이러한 문제점을 해결할 수 있다.) $(document).ready()1. 호출 시점- DOM 트리가 로드될 때 호출2. 특징- DOM만 로드되면 바로 실행(이미지 및 외부 리소스와 무관)- 중복 사용해도 순서대로 모두 실행 window.onload1. 호출 시점- 페이지의 모든 요소들이 로드된 이후에 호출2. 특징-..

    [React] 리액트 라우터

    라우팅사용자가 웹사이트를 접근할 때, URL에 따라 서로 다른 컴포넌트를 화면에 표시해줄 수 있다. 이것을 라우팅이라고 한다.예를 들어서 사용자가 접속한 URL이 www.naver.com?mode=dark 라고 가정해보자.​경로(path): www.naver.com쿼리(query): mode=dark​경로와 쿼리 부분을 바탕으로 해당 컴포넌트를 렌더링하는 것, 이 과정을 라우팅이라고 한다.​리액트에서는 react-router 라이브러리를 이용하여 라우팅을 구현할 수 있다.​​1. 리액트 라우터 라이브러리 설치npm install react-router-dom  2. 페이지 컴포넌트 정의// Home 컴포넌트import React from 'react';const Home = () => { return ..

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

    [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 값으로 평가