도리쓰에러쓰

비동기 처리는 결과가 언제 반환되는지 알 수 없어서 동기식으로 처리하는 기법들을 사용해야 하는데 대표적으로 setTimeout, callback, promise가 있다. 그 외에도 사용법이 간단해진 비동기 처리 방법이 있는데 바로 async와 await이다. 우선 몰라도 좋으니 아래 코드를 참고하여 얼마나 간단해졌는지 확인만 해보자. // Promise const p1 = () => { return new Promise((resolve, reject) => { resolve('성공'); }); }; //async async function p2 () { return '성공'; }; p2.then((value) => console.log(value)); 1. async와 await async와 await는..

자바스크립트의 Promise를 알아보기 전에 동기와 비동기의 차이에 대해 알아보자. 1. 동기(Synchronous)와 비동기(Asynchronous) 1️⃣ 동기(Synchronous) - 1번부터 4번까지의 명령이 있을 때 순차적으로 명령이 진행 - 앞의 명령이 끝날 때까지 뒤의 명령은 먼저 실행되지 않는다. 2️⃣ 비동기(Asynchronous) - 명령의 순서와 상관없이 동시에 명령 실행 2. Promise 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용한다. 하지만 콜백 중첩, 즉 콜벡 헬로 인해 코드의 가독성이 떨어지고, 비동기 처리 중 발생한 에러의 처리가 곤란한 등의 문제가 발생할 수 있다. async(1, () => { async(2, () => { async(3, () => { as..

1. 실행 컨텍스트(Execution Context)란? 자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보(전역변수, 매개변수, 유효범위, this 등)들을 알고 있어야 한다. 어떤 실행 컨텍스트가 활성화될 때, 자바스크립트 엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트에 저장한다. 다시 말해, 코드가 실행되기 위해 필요한 정보들을 가진 범위를 추상화하기 위해 객체 형태로 나타낸 것이다. 자바스크립트에서 실행 컨텍스트(Execution Context)를 만들 수 있는 방법은 총 4가지이다. 1️⃣ 전역 코드: 전역 영역에 존재하는 코드 2️⃣ Eval 코드: eval() 함수로 실행되는 코드 3️⃣ 함수 코드: 함수 내에 존재하는 코드 4️⃣ (..

1. 얕은 복사(Shallow Copy) 얕은 복사(Shallow Copy)는 참조값의 복사를 나타낸다. const obj = { a: 1 }; const copyObj = obj; copyObj.a = 2; console.log(obj.a); // 2 console.log(obj === copyObj); // true obj라는 객체를 copyObj라는 객체에 복사하여 copyObj.a값을 변경하였더니 기존의 obj.a값도 같이 변경되었다. 마찬가지로 두 객체를 비교해봐도 true가 나온다. 이렇게 자바스크립트의 참조 타입은 얕은 복사(Shallow Copy)가 된다고 볼 수 있으며, 이는 데이터가 그대로 생성되는 것이 아닌 해당 데이터의 참조 값을 전달하여 한 데이터를 공유하는 것이다. 2. 깊은 복..

자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는데 this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들은 크게 4가지로 나눌 수 있는데 지금부터 알아보겠다. 1. 일반 함수 실행 방식 (Regular Function Call) 일반 함수 실행 방식(Regular Function Call)이란 아래 코드처럼 함수를 선언한 후, 실행할 때 흔히 사용하는 방식을 말한다. 일반 함수 실행 방식(Regular Function Call)으로 함수를 실행했을 때 this의 값은 Global Object 즉, 브라우저 상에서는 window 객체를 가리킨다. const example = () => { console.log(this); }..

1. 크로스 브라우징이란? 웹 페이지 제작 시 모든 브라우저에서 깨지지 않고 의도한 대로 나오게 하는 작업을 말한다. 크로스 브라우징을 고려하지 않으면 HTML, CSS, JS 등 코드가 원하는대로 작동이 안될 수 있다. 이러한 이유로 브라우저마다 렌더링 엔진이 다르기 때문에 전부 정상적으로 작동하도록 설정해줘야 한다. 💡 렌더링 엔진: 페이지를 렌더할 때 실질적으로 페이지를 작업해주는 브라우저의 엔진 (웹킷, 프레스토 등등) 2. 크로스 브라우징 사전 대응 방법 우선 가장 높은 점유율을 가지고 있는 브라우저를 알고 있는게 중요하다. 🔽 아래 사이트를 참고하여 사람들이 주로 사용하는 브라우저가 어떤게 있는지 알아본 후 그 브라우저를 타겟으로 잡아 대응해야한다. Statcounter Global Stats..

1. 얕은 비교 기본 타입 데이터의 경우 값이 동일한지만 비교하고, 객체의 경우 참조만 비교한다. 그래서 객체를 state로 사용하게 될 경우 값이 같더라도 참조값이 다르기 때문에 재렌더링이 발생한다. const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 2. 깊은 비교 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.stringify() 사용 2️⃣ Object depth가 깊은 경우 : lodash 라이브러리의 isEqual() 사용 const obj1 = { a: 1, b: 2..

1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링 (Event Bubbling)이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상이다. 아래 버블링 예제 코드를 보자. ... 내용1 내용2 내용3 ... // js 코드 const divs = document.querySelectorAll('div'); const clickEvent = (e) => {console.log(e.currentTarget.value)}; divs.forEach((div) => {div.addEventListener('click', clickEvent)}); 위 예제는 div를 클릭하면 해당 div의 value가 콘솔로 출력된다..