rosie

- 무한 스크롤 기능을 구현할 때 많은 데이터를 다루는 경우 고려해야할 중요한 점! ❗️효율적인 데이터 로딩 - 사용자가 스크롤을 할 때마다 모든 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로, 별도의 패키지 다..

❓redux란? - React를 쓰면서 state를 꿀어올리기에 부담을 느끼거나, 불필요한 props drilling 등이 이슈가 되면서 전역적인 state 관리법이 필요해잠에 따라 전역상태를 관리 하기 위해 만들어진 라이브러리 ❓Redux를 사용하는 이유는? - Redux는 상태 변경을 중앙에서 관리하므로 상태 변경을 예측하기 쉬워짐. 상태 변경이 action과 reducer를 통해 수행되므로 디버깅 및 테스팅도 용이해짐 - Redux는 서버 렌더링과 잘 통합되는데 이는 초기 페이지 로드 시간을 줄이고 SEO를 개선하는데 유용함 Redux는 React에서 전역 상태를 관리하기 위한 JavaScript 라이브러리입니다. 상태 변경의 예측 가능성, 쉬운 디버깅과 테스팅, 그리고 서버 렌더링과의 좋은 통합성..

❓상태관리 하는이유 상태 관리는 애플리케이션의 복잡성을 다루는 중요한 방법중에 하나 상태는 시간에 따라 변화하는 데이터를 의미하기 때문에 사용자 인터페이스, 네트워크 응답, 사용자 입력 등으로 부터 데이터가 변경되고 이러한 변경사항을 추적하고 예측 가능하게 관리하는 것은 애플리 케이스의 안정성과 유지 보수성을 보장하는데 필수적임 ❓리액트에서 상태관리 하는 방법 로컬 컴포넌트 상태 = useState나 useReducer Hook을 사용하여 간단하게 상태관리를 할 수 있음 ContextAPI = 리액트 내장 Context API를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 상태를 쉽게 전달할 수 있고 중간에 있는 컴포넌트들이 상태를 통과하는것을 방지하며, 상대적으로 간단하게 전역 상태 관리하기엔 유용할 수..

자바스크립트 호이스팅 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 호이스팅(Hoisiting) 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언(코드 실행하기 전 변수 선언/함수 선언이 해당 스코프 최상단으로 끌어 올려짐) =>자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑고, 함수 안에 존재하는 변수/함수 선언에 대한 정보를 기억하고 있다가 실행됨. 유효범위는 함수 블록 안에서 유효 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것 => 실제로 코드가 끌어올려지는 건 아니고, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이고 실제 메모리에 변화는 없음 코드 실행 전..