Web Development/JAVASCRIPT (7) 썸네일형 리스트형 자바스크립트의 비동기 실행 흐름 정리 자바스크립트는 싱글 스레드 기반으로 동작하기 때문에, 한 번에 하나의 작업만 처리할 수 있습니다.따라서 콜 스택(Call Stack), 이벤트 루프(Event Loop), Web API, 큐(Queue)를 통해 동기/비동기 작업을 처리하게 됩니다.✅ 예제 코드console.log(1);setTimeout(() => { console.log(2)}, 100);console.log(3);1. 동기 작업 진행 console.log(1)이 콜 스택에 올라가 실행됩니다. setTimeout(...) 실행 setTimeout 함수 자체는 콜 스택에서 실행되지만, 내부 콜백 함수 () => console.log(2)는 Web API 영역으로 넘겨집니다. Web API가 100ms.. 상태관리 [5편]: Redux, Zustand, Tanstack Query — 언제, 무엇을 써야 할까? 🧠 상태 관리 도구, 왜 이렇게 많을까?프로젝트를 하다 보면 "이건 Redux로?" "Zustand가 더 쉽지 않나?" 같은 고민이 생깁니다.게다가 서버에서 데이터를 받아오면 Tanstack Query도 써야 한다고? 😵💫1. 도대체 이 도구들은 각각 뭘 하는 건가요?항목ReduxZustandTanstack Query주 역할전역 상태 관리간편한 전역 상태 공유서버 상태 관리 (fetch, cache 등)비동기 처리thunk, saga 등 외부 도구 필요fetch 직접 사용내장된 자동 처리캐싱직접 구현직접 구현기본 제공optimistic UI수동 구현수동 구현지원개발자 경험보일러플레이트 많음간단하고 직관적서버 상태 처리에 최적화주요 예시로그인, UI 상태모달, 다크모드게시물, 유저 정보 2. 예제로.. 상태관리 [4편]: Tanstack-Query, 왜 프론트엔드에서 상태를 나눠 관리해야 할까? 🤔 왜 상태 관리가 이렇게 복잡할까?프론트엔드 개발을 하다 보면 “이 상태는 어디에 저장해야 하지?” 하는 고민이 생깁니다.로그인 정보, 모달 열림 여부, API 응답값까지…이 모든 걸 하나의 상태로 묶어도 될까요? 1. API에서 받아온 정보가 곧 클라이언트 상태 아닌가?처음엔 이렇게 생각할 수 있어요. “서버에서 데이터를 받아오면 그게 바로 상태지!”하지만 실제로는 두 가지 상태로 나눠서 관리하는 게 더 명확합니다.구분서버 상태 (Server State)클라이언트 상태 (Client State)정의서버에서 가져온 데이터브라우저 내부 UI 상태소유자서버가 원본 (Source of Truth)프론트엔드 앱예시게시물 목록, 유저 정보모달 열림 여부, 현재 페이지, 입력값동기화 필요예 (서버와 일치해야 함.. 상태관리 [3편] - Zustand의 유연함이 대규모 프로젝트에서 어려운 이유 🌀 Zustand는 왜 Flux 아키텍처가 아닐까?Action이라는 개념이 필수 아님Dispatcher가 없음상태 변경 흐름을 엄격히 제어하지 않음set()으로 언제든지 상태 변경 가능⚔️ Zustand의 set() vs Redux의 dispatch()비유Redux (dispatch)Zustand (set)역할비서에게 메모 전달직접 수첩에 작성제어 흐름간접적 (Action → Reducer)직접 상태 변경디버깅액션 로그 추적 가능추적 어려움 (수동 로깅 필요)🚧 Zustand가 대형 프로젝트에서 어려운 이유1. 아키텍처와 구조 강제가 없다Redux는 구조 강제 → 협업에 유리Zustand는 자유로운 만큼 설계 일관성 부족2. 상태 변경 추적 어려움Redux: DevTool로 상태/액션 추적 가능Zus.. 상태관리 [2편] - Redux vs Zustand 비교 – 왜 생겼고 언제 쓰는가? 📊 Redux vs Zustand 비교 요약항목ReduxZustand등장 시기2015년 (Flux 기반)2020년 (간단한 상태 관리 목적)철학Flux 아키텍처 기반의 단방향 흐름Flux와 무관, 간단한 API사용 목적예측 가능하고 구조화된 상태 관리가볍고 빠른 상태 공유코드 구조Action → Reducer → Store → Stateset()으로 직접 상태 변경보일러플레이트많음거의 없음미들웨어redux-thunk, redux-saga 등 별도 구성내장 미들웨어로 간단 설정 가능DevToolRedux 공식 DevTool 지원내장 DevTool 제공 (기능 제한적)상태 구독useSelector, connect 등Hook 기반리렌더링 제어최적화 필요선택적 구독으로 간단TypeScript 지원복잡한 타입 .. 상태관리 [1편] - Flux 패턴(아키텍처) 💡 Flux란? 왜 필요할까?단방향 데이터 흐름을 통한 예측 가능한 상태 관리 구조🧭 Flux란?Flux는 React와 함께 자주 언급되는 클라이언트 사이드 아키텍처 패턴입니다.단방향 데이터 흐름을 기반으로 상태를 예측 가능하게 관리할 수 있도록 설계되었습니다.Flux는 프레임워크가 아닌 개념적인 구조입니다.❓ Flux는 왜 등장했을까?기존 MVC 패턴의 한계모델과 뷰 사이의 양방향 데이터 흐름상태가 여러 곳에 흩어져 있음컴포넌트 간 의존성 증가유지보수와 디버깅 어려움📌 예시로 쉽게 이해해보기상황: 사용자에게 새로운 알림이 도착했습니다.헤더에 알림 아이콘이 있고, 목록 페이지에서도 알림을 확인할 수 있어야 합니다.❌ 기존 방식알림을 읽으면 헤더와 목록 상태를 각각 업데이트여러 컴포넌트에서 상태가 중.. [JAVASCRIPT] each() 와 map()의 차이 map() 메서드배열의 각 요소를 주어진 함수로 처리하여 그 결과를 모아 새로운 배열을 반환합니다. 반복을 종료할 수 있는 방법이 없습니다.forEach() 메서드배열의 각 요소에 대해 주어진 함수를 실행합니다. 반복을 중간에 종료할 수 있습니다(break나 return을 사용할 수 없습니다).실제 사용 예시원본 코드 (JavaScript로 변환)document.getElementById('search_result_box').classList.remove('d-none');document.getElementById('search_result_box').classList.add('d-block');const inputText = document.getElementById('search_additional_.. 이전 1 다음
