rosie

❓목적 - GET 데이터를 가져와서 보여주는 것에 초점을 맞춤 주로 데이터를 조회할 때 사용 - POST 서버에 데이터를 제출하여 저장, 업데이트, 처리하는 데 사용함 ❓데이터 전송위치 - GET 데이터가 URL의일부로 전송됨 ex) http://example.com/page?name=rose&age=26 - POST 데이터가 요청 본문에 포함되어 전송됨 URL에 직접적으로 보이지 않음 ❓데이터 길이 - GET URL에 데이터가 첨부되므로, 길이에 제한이 있음 대부분의 웹 브라우저나 서버에서 URL길이에 제한을 둠 - POST 데이터 길이에 별다른 제한이 없음(서버의 설정에 따라선 제한이 될 수 있음) ❓보안 - GET URL에 데이터가 첨부되므로, 민감한 정보(비밀번호 등)를 전송하는 것은 안전하지 ..

ⅰ. 요청 및 응답 - 사용자가 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에 ..