본문 바로가기

HTML&CSS&Javascript 📚/JS40

[JS & React] 얕은 비교(Shallow Equal)란 ? / 리액트에서 컴포넌트가 리렌더링되는 경우 1) 얕은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(obj1 === obj2); // false 원시 타입 데이터의 경우 '값'이 동일한지만 비교하고, 배열과 객체과 같은 참조 타입 데이터의 경우 '참조값'만 비교한다. 2) 깊은 비교 const obj1 = { a: 1, b: 2 }; const obj2 = { a: 1, b: 2 }; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true 얕은 비교와 달리 깊은 비교는 객체의 경우에도 값으로 비교한다. 깊은 비교 방법은 아래와 같다. 1️⃣ Object depth가 깊지 않은 경우 : JSON.st.. 2023. 7. 18.
[JS] 구조 분해 할당이란 ? 구조 분해 할당 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 10 console.log(b); // 20 console.log(rest); // [30, 40, 50] ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); console.log(a); // 10 console.log(b); // 20 console.log(rest); // .. 2023. 7. 16.
[JS] filter(), map() 함수 정리 1. Array.prototype.filter() const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // Expected output: Array ["exuberant", "destruction", "present"] filter() 메서드는 주어진 함수의 테스트(조건문)를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. filter는 해석 그대로 필터링, 즉 배열의 요소들을 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는.. 2023. 5. 17.
[JS Deep Dive] 43. Ajax 43.1) Ajax란 ? Ajax(Asynchronous Javascript And XML)란 JS를 사용하여 브라우저가 서버에게 '비동기 방식'으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 이전의 웹페이지는 완전한 HTML을 서버로부터 전송받아 웹페이지 전체를 처음부터 다시 렌더링하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아서 웹페이지 전체를 처음부터 다시 렌더링했다. 이러한 전통적인 방식은 다음과 같은 단점이 있다... 2023. 5. 2.
[JS Deep Dive] 42. 비동기 프로그래밍 42.1 동기 처리와 비동기 처리 23장 실행 컨테스트에서 살펴본 바와 같이 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 push되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 pop되어 제거된다. 함수가 실행되려면 '함수 코드 평가 과정'에서 생성된 함수 실행 컨텍스트가 콜 스택에 push되어야 한다. 다시 말해, 콜 스택에 함수 실행 컨텍스트가 push되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 콜 스택에 push되기 때문이다. 이처럼 함수의 실행 순서는 콜 스택.. 2023. 4. 29.
[JS Deep Dive] 41. 타이머 41.1) 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 만약에 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 후에 호출되도록 함수 호출을 "예약"하기 위해서는 Timer 함수를 사용해야 한다. 👉🏻 이를 호출 스케줄링(Scheduling a Call)이라고 한다 ! JS는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는 타이머 함수 clearTimeout, clearInterval을 제공한다. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출되도록 타이머를 생성한다. 즉, 타이머 함수 setTimeout과 setInterval이 생성한 타이머가 만료되면 콜백 함수가 .. 2023. 4. 25.

티스토리툴바