Frontend

[JavaScript] 일반 함수 vs 화살표 함수

일반 함수와 화살표 함수의 차이점​1. this 객체 바인딩​일반 함수실행 주체에 따른 this가 동적으로 바인딩1) 함수 실행 시 전역(window)객체로 바인딩2. 메소드 실행 시 메소드를 소유하고 있는 객체를 바인딩3. 생성자 실행 시에는 새롭게 만들어진 객체를 바인딩​-> 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정​화살표 함수ES6부터 새로 추가된 익명 함수즉시 실행이 필요할 경우에 사용항상 상위 스코프의 this를 바인딩 (정적 바인딩)또한, call, apply, bind 메소드를 사용하여 this를 변경할 수 없음​​2. 생성자 함수로 사용 가능 여부일반 함수는 생성자 함수로 사용 가능화살표 함수는 생성자 함수로 사용 불가 ​-> prototype 프로퍼티 존..

$(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] 리액트 라이프 사이클

리액트 라이프 사이클 ​ 컴포넌트의 생명 주기 컴포넌트가 렌더링 되기전 ~ 페이지에서 사라질 때 ​ 라이프 사이클을 다루는 것이란? - 컴포넌트가 마운트, 업데이트, 언마운트 되는 일련의 프로세스를 프로그래머가 통제하는 것 - 생성자를 통해 필요한 메모리를 할당, 객체의 역할이 끝나면 소멸자를 통해 메모리를 반환 ​ 라이프 사이클의 유형 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 : 위쪽..