개인 학습21 자료구조 원리 파헤치기 ArrayListArrayList는 Array(배열) 과는 다르게 동적으로 데이터를 저장할 수 있는 자료구조입니다. 특징으로는 다음과 같습니다.연속적인 데이터(중간에 빈공간 x)의 리스트이다.배열을 이용하기 때문에 인덱스를 이용해 요소에 빠르게 접근할 수 있다. 크기가 고정되어 있는 배열과 달리 공간을 늘리거나 줄입니다.배열 공간이 꽉찰 때마다 배열을 복사하는 방식으로 늘리는데, 이때마다 지연이 된다. 데이터를 리스트 중간에 삽입/삭제하는 경우에 중간에 빈 공간이 생기지 않도록 요소들의 위치를 앞뒤로 이동시키기때문에 삽입/삭제 동작은 느리다. 핵심은 '배열을 이용하여 구현한다' 와 크기가 꽉찰 때 리사이즈가 발생되어 기존 용량 2배로 확장된다는 점입니다. (이 때 기존 데이터도 복사함) 코드를 통해 알아.. 2025. 4. 14. React의 Suspense 동작 원리 Suspense란? React.Suspense는 비동기 상태에 따라fallback UI 또는 children 컴포넌트를 동적으로 렌더링할 수 있도록 도와주는 기능입니다. 하위 컴포넌트에서 Promise를 throw하는 것이 핵심입니다. 즉, 자식 컴포넌트가 데이터를 아직 받지 못한 상태라면렌더링 도중 Promise를 던지고, React는 이를 감지해 fallback을 보여줍니다. function wrapPromise(promise) { let status = "pending"; let response; const suspender = promise.then( (res) => { status = "success"; response = res; }, (err) .. 2025. 4. 9. 전역 상태 관리 파헤치기 상태 관리는 왜 필요한가?상태어떠한 의미를 지닌 값애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 상태 종류UIURLForm서버에서 가져온 값 MVC 패턴 양방향 데이터 바인딩의 모습애플리케이션이 비대해지고 상태도 많아짐에 따라 복잡해짐3번째 View에서 어떤 Model을 사용했는지 추적하기 어려움 Flux 패턴단방향 흐름으로 만든 것이 Flux 패턴action → 액션 타입과 데이터를 정의해 디스패처로 보낸다.dispatcher → 액션을 스토어에 보낸다. 콜백 함수 형태다. 애플리케이션 내에서 단 하나만 존재한다.store → 실제 값과 상태를 변경할 수 있는 메서드를 가지고 있다.view → 컴포넌트 부분, 액션을 호출해서 상태를 업데이트 한다. useState와 useReduce.. 2025. 4. 6. 서버 사이드 렌더링 SPA라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초 내려받은 HTML에서 모든 작업을 처리한다. (오직 하나의 HTML을 가진다.)최초에 로딩해야 할 자바스크립트 리소스가 커지는 단점이 있다.한번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 빠르게 쾌적한 페이지 전환이 가능하다. 웹서비스의 새로운 패러다임많은 양의 자바스크립트가 리소스로 넘어오며 코드 규모가 점점 방대해진다.모바일 환경에서는 웹 사이트의 로딩 속도가 느리다.더 나은 웹 서비스 환경에 대해 고민해야 한다. 서버 사이드 렌더링 (SSR)렌더링에 필요한 작업을 모두 서버에서 수행한다.클라이언트 렌더링은 사용자 기기 성능의 영향을 받지만 서버 사이드 렌더링은 비교적 안정적인 렌더링이 가능.. 2025. 4. 4. Debounce과 Throttle Debounce와 Throttle은 함수가 너무 자주 호출하는 것을 방지한다. Debounce이벤트가 연속적으로 발생할 때, 제일 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 함수를 호출한다. export function useDebounce(value, delay) { const [debouncedValue, setDebouncedInput] = useState(value); useEffect(() => { const timerID = setTimeout(() => { setDebouncedInput(value); }, delay) return () => { clearTimeout(timerID); } }, [value, delay]) return d.. 2025. 4. 4. 리액트 코드 분석하기 안녕하세요! 모던 리액트 Deep Dive 책을 읽고, 정리한 내용입니다. React Hooks를 단순히 사용하는 것보다 그 원리를 이해하고 활용하면 좋을 것 같습니다. 그럼 React Hooks 코드를 직접 까보면서 이해해봅시다. useStateconst MyReact = function () { const global = {}; let index = 0; function useState(initialState) { if (!global.states) { global.states = []; } const currentState = global.states[index] || initialState; global.state[index] = currentState; .. 2025. 4. 2. 이전 1 2 3 4 다음
