rosie

ⅰ. 요청 및 응답 - 사용자가 URL을 입력하면 브라우저는 해당 웹 서버에 HTTP 요청을 보냄 - 서버는 요청을 처리하고, HTML, CSS, JavaScript, 이미지 등의 리소스를 포함한 응답을 브라우저에 전송함 ⅱ. HTML 파싱 - 브라우저는 받은 HTML문서를 파싱하여 DOM(Document Object Model)트리를 구축함 - 이 DOM 트리는 웹 페이지의 구조화된 표현 ⅲ. CSS 파싱 - CSS는 파싱되어 CSSOM (CSS Object Model)트리를 생성함 - CSSOM은 웹 페이지의 스타일 정보를 포함하고 있음 ⅳ. 렌더 트리 생성 - DOM과 CSSOM 트리는 결합되어 렌더 트리를 형성함 - 이 트리는 페이지의 시각적 표현을 나타내며, 화면에 표시될 요소와 그 요소의 스..

❓동기와 비동기의 차이 1. 동기(Synchronous) - 동기식 실행은 한 작업이 완료될 때까지 다음 작업이 기다려야 하는 실행 방식을 말함 - 코드의 실행 순서와 결과가 예측하기 쉽다는 장점이 있지만, 한 작업이 많은 시간을 요구하면 그 동안 전체 시스템이 대기 상태에 있어야함 2. 비동기(Asynchronous) - 비동기식 실행은 현재 작업의 완료 여부와 상관없이 다음 작업을 시작하는 실행 방식을 말함 - 여러 작업을 동시에 처리할 수 있어 효율적이지만 코드의 실행 순서와 결과가 복잡해질 수 있으며 동기화 문제가 발생할 수 있음 ❓비동기 프로그래밍의 필요성 - 효율성: 특히 I/O 바운드 작업(ex. 네트워크 통신, 디스크 작업)에서 대기 시간이 많을 때, 이 대기 시간 동안 다른 작업을 수행함..

❓JavaScript의 호이스팅이란? - 호이스팅(Hoisting)은 JavaScript에서의 중요한 메카니즘으로 코드 실행 전 함수와 변수이 선언을 메모리에 저장하는 과정 - JavaScript에서 변수와 함수의 선언을 그들이 코드 상에 작성된 위치와 상관 없이 스코프의 최상단으로 끌어올리는 특성을 지칭함 ❔호이스팅이 발생하는 이유 - 호이스팅은 JavaScript의 실행 컨텍스트(Execution Context) 생성 과정 중 하나로 인해 발생 - JavaScript는 코드 실행 전에 컴파일 단계에서 변수와 함수 선언을 먼저 메모리에 저장함 -> 변수나 함수를 선언하기 전에도 사용할 수 있게 됨 1. 함수 - 함수 전체가 메모리에 저장됨 -> 함수 선언 전에 호출이 가능해지는 이유 2. 변수 - va..

- 무한 스크롤 기능을 구현할 때 많은 데이터를 다루는 경우 고려해야할 중요한 점! ❗️효율적인 데이터 로딩 - 사용자가 스크롤을 할 때마다 모든 10,000개의 데이터를 한 번에 로딩하는 것은 비효율적입니다. 대신, 한 번에 적은 양의 데이터만 로딩하고, 사용자가 끝에 도달할 때마다 추가 데이터를 로딩하는 방식을 채택해야함 - 서버와 클라이언트 사이의 통신에서 페이징 기법을 사용하여 한 번에 로딩되는 데이터의 양을 제한 할 수 있습니다. ❗️DOM 최적화 - 10,000개의 항목을 모두 DOM에 추가하면 브라우저의 성능 저하가 발생할 수 있음 - 가상 스크롤 기법을 사용하여 화면에 보이는 부분만 실제로 DOM에 렌더링하고, 나머지는 메모리에 보관하는 방식으로 최적화할 수 있음 ❗️스크롤 위치 유지 - ..

❓Promise - Promise는 JavaScript에서 비동기 작업의 완료 또는 실패를 대표하는 객체 - then(), catch(), finally()와 같은 메서드를 통해 비동기 작업의 결과를 처리를 할 수 있음 - Promise 생성자를 사용하여 직접 Promise를 만들 수 있음 const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve("Data fetched!"); }, 2000); }); myPromise.then(result => { console.log(result); }).catch(error => { console.log(error); }); ❓Async/Await - Async / Await는 P..

❓var란? - var는 가장 오래된 변수 선언 방식이며 범위는 전역 범위 혹은 함수 범위로 지정됨 - 변수는 선언된 함수 내부에서 어디에서든 접근할 수 잇음 - var 변수는 호이스팅(hoisting)의 영향을 받음 -> var 변수가 선언되기 전에 사용되더라도 JavaScript 엔진이 변수 선언을 스크립트의 상단으로 끌어올린다는 것을 의미함 ❓let이란? - let은 ES6(ECMAScript 2015)에 도입된 새로운 변수 키워드 - let으로 선언된 변수는 블록범위(block-scope)를 가짐/ -> 변수가 선언된 블록, 즉 중괄호 {} 내에서만 접근할 수 있음을 의미함 - let 변수는 호이스팅의 영향을 받지만, 초기화 전에는 접근할 수 없어서 일종의 임시 사각 지대(Temporal Dead..

❓useEffect의 실행 순서 - 리액트의 내장 hook중에 하나인 useEffect에 전달된 콜백은 컴포넌트가 mount, update, unmmount될 때 실행될 수 있음 - useEffect의 샐행은 컴포넌트의 렌더링과 동시에 일어나는게 아니라 그 후에 일어나게 됨 1. mount 될 때 useEffect 실행 시점 import { useEffect } from "react"; const App = () => { console.log("1"); useEffect(() => { console.log("mount") }, []); console.log("2"); return App } - 1 -> 2 -> mount 순으로 실행이 됨 - 컴포넌트가 실행이 될때 동시에 useEffect가 실행이 되는..

❓useRef useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체로 반환합니다. 반환된 객체는 컴포넌트 전 생애 주기를 통해서 유지될 것입니다. - React 공식 -useRef는 React의 Hook중 하나로, 일반적으론 두가지 주요한 목적으로 사용됨 1. DOM에직접 접근하기 - useRef는 DOM 요소에 대한 참조를 저장하는데 사용될 수 있습니다. 이를 통해 직접적으로 DOM요소를 조작할 수 있음 2. 변경사항을 유지하려는 경우 - useRef는 값의 보관소 역할을 할 수 있음 - 이를 통해 값을 변경하면 리렌더링 없이 이 값을 기억할 수 있음 useRef는 React Hooks 중 하나로, 주로 두 가지 상황에서 사용합니다. 첫째, ..

❓DOM이란 - Document Object Model의 약자로, 웹 페이지의 객체 지향 표현 - 이는 HTML, XML 문서의 구조를 트리 형태로 표현하며, 프로그래밍 언어가 DOM 구조에 접근하거나 이를 수정할 수 있게 함 ❓리얼 DOM이란 - 실제 DOM을 나타내며, 직접적으로 변경하면 브라우저는 레이아웃을 재계산하고 페이지를 다시 그려야 하는 비용이 크게 발생함 - DOM 트리의 한 부분이 변경되면, 전체 DOM이 업데이트되고 렌더링 되어야함 ❓버츄얼DOM이란 - 가상 DOM 또는 버츄얼 DOM은 리얼 DOM의 가벼운 사본으로 React 등의 라이브러리에서 사용됨 - 버추얼 DOM은 원래 DOM트리를 멤모리에 유지하고, 상태가 변경될 때 실제 DOM에 직접적으로 반영하지 않고 먼저 가상 DOM에 ..

❓ContextAPI - React에서 지원하는 context를 사용하기 위한 API - 별도의 패키지 다운로드가 필요없이 사용 가능 - 하나의 상태만 저장이 가능하고 상태값이 변경되면 Provider로 감싼 모든 자식 컴포넌트가 리렌더링 되는 단점이 있음 ❓Recoil - Context API 기반으로 페이스북에서 만든 함수형 컴포넌트에서만 사용 가능한 전역 상태관리 라이브러리 - react 내장 hooks를 사용하는 방식과 크게 다르지 않고 - 비동기 처리가 내장되어 있음 -> redux는 saga같은 미들웨어를 추가로 설치해야되서 번들이 무거워짐 - 보일러 플레이트가 적음 - 함수형 컴포넌트에서만 사용이 가능하다는 단점이 있음 ContextAPI는 React에서 지원하는 API로, 별도의 패키지 다..