일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- react 프로젝트 리팩토링
- 리팩토링 회고
- useEffect return
- KDT 프로그래머스 데브코스 프론트엔드
- 머쓱이
- Frontend Roadmap
- Vue3
- 인프런 자바스크립트 알고리즘 문제풀이
- 프로그래머스 데브코스 프론트엔드
- 모던 javascript Deep Dive
- 백준 js
- 프로그래머스 K_Digital Training
- 모던 자바스크립트 딥다이브
- 백준 node.js
- react customHook 예시
- useRef 지역 변수
- 프로그래머스 데브코스 프론트엔드 TIL
- 투포인터알고리즘 js
- TypeScript 문법 소개
- 우테캠 회고록
- 개발자 특강
- 프로그래머스 K_Digital Training 프론트엔드
- 모던 자바스크립트 Deep Dive
- 프로그래머스 데브코스
- frontend roadmap study
- 모던 자바스크립트 Deep Dive TIL
- 모던 자바스크립트 TIL
- Vue3 Router
- K_Digital Training
- KDT 프로그래머스
- Today
- Total
목록모던 자바스크립트 Deep Dive TIL (35)
프론트엔드 개발자의 기록 공간
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 전통적인 이전의 웹페이지는 화면이 전환되면 html 태그로 시작하여 html 태그로 끝나는 완전한 html을 서버로부터 전송받아 웹페이지 전체를 다시 렌더링하는 방식으로 동작했다. 전통적인 웹페이지 통신 방법은 단점이 존재했다. 변경할 필요가 없는 부분까지 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신 발생 변경할 필요가 없는 부분가지 처음부터 다시 렌더링한다. 이로인해 화면이 깜박이는 현상이 발생 서버와의 통신이 동기 방식으로 동작하기 때문에 서버로부터 응답이 있을 때까지 다음 처리는 블로킹 된다. Ajax의 ..
✍ 동기 처리와 비동기 처리 "실행 컨텍스트"에서 살펴본 바와 같이 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 이때 생성된 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 스택에서 팝되어 제거된다. 다음 예제의 foo 함수와 bar 함수는 호출된 순서대로 실행 컨텍스트 스택에 푸시되어 실행된다. const foo = () => {}; const bar = () => {}; foo(); bar(); 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. 이처럼 함수의 실행 순서는 실행 컨텍스트 스택으로 관리한다. 자바스..
✍ 호출 스케줄링 함수를 명시적으로 호출하면 함수가 즉시 실행된다. 함수를 명시적으로 호출하지 않고일정 시간이 경과된 이후에 호출되도록 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다. 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval, 타이머를 제거할 수 있는clearTimeout과 clearInterval을 제공한다. 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다.브라우저 환경과 Node.js 환경에서 전역 객체의 메서드로 제공한다. 즉, 타이머 함수는 호스트 객체다. 타이머 함수 setTimeout과 setInterval은 모두 일정 시간이 경과된 이후 콜백 함수가 호출된다. setTimeout 함수가 생성한 타이머..
브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생 시킨다. 예를 들어, 클릭, 입력 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다. 이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. Click me! 이처럼 이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용 할 수 있다. 이와 같이 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래..
브라우저 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조다. ✍ 노드 📌 HTML 요소와 노드 객체 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환된다. 노드 객체들로 구성된 트리 자료구조를 DOM이라 한다. DOM 트리라고 부르기도 한다. 📌 노드 객체의 상속 구조 DOM은 DOM을 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. DOM을 구성하는 노드 객체는 브라우저 환경에서 제공하는 호스트..
자바스크립트가 가장 많이 사용되는 분야는 웹 브라우저 환경에서 동작하는 웹페이지/ 애플리케이션의 클라이언트 사이드다. 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 이를 위해 브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링하는지 살펴보자 브라우저는 다음과 같은 과정을 거쳐 렌더링을 수행한다. 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응단된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로부터 응답..