프로젝트에서 Vue 쓸까? React 쓸까? 개발자의 취향 + 팀환경 + 프로젝트 성격에 따라 고를 수 있을듯하다. 빠르게 MVP 만들고 싶은 스타트업 / 프로토타입Vuev-model, 템플릿 문법, ref() 만으로도 빠른 UI 구현 가능학습 부담이 적고 디자이너/퍼블리셔도 진입 장벽이 낮다작은 팀에서 생산성 우선이라면 효율적이다 대규모 팀, 복잡한 상태 관리, 모듈화, 협업 중요React단뱡향 데이터 흐름은 유지보수, 디버깅, 테스트에 최적화 되어있다.상태와 로직 분리가 깔끔하고 커스텀 훅 기반으로 확장성이 좋다.Typescript + React + TanStack Query + Zustand/Redux 조합 = 실무에서 안정성, 구조화 조합에 좋다. UI/UX 실험 위주, 애니메이션이 많은 앱 (..
데이터 바인딩(Data Binding)과 MVVM (Vue, React)UI(View)와 데이터(Model)를 자동으로 연결해주는 기술즉, 데이터가 바뀌면 UI도 자동으로 바뀌고 UI가 바뀌면 데이터도 자동으로 바뀌는 연결 구조 종류타입설명예시단방향 바인딩(One-way)데이터 -> UI만 반영React 기본 방식 (Props)양방향 바인딩 (Two-way)데이터 UI 상호 반영Vuew의 v-model, Angular의 {(ngModel)} MVVM (Model-View-ViewModel) 패턴데이터 바인딩을 체계적으로 적용하기 위한 아키텍쳐 패턴구성요소역할Model실제 데이터 또는 상태 (API 응답, 사용자 정보 등)View화면(UI) - 사용자에게 보여지는 부분ViewModelView와 Mo..
자바스크립트 쓰로틀링(Throttling), 디바운싱(Debouncing) 성능 최적화
자바스크립트 쓰로틀링(Throttling), 디바운싱(Debouncing) 성능 최적화자바스크립트 쓰로틀링(Throttling)과 디바운싱(Debouncing)은 성능 최적화를 위한 핵심 기법이다.고빈도 이벤트(스크롤, 리사이즈, 입력 등)에서 과도한 호출을 방지하고 성능을 높이는데 유용하다. 쓰로틀링 (Throttling)일정 시간 간격으로 함수를 강제로 실행하게 제한한다. 즉, N초에 한번만 실행되게 만든다는게 핵심이다.사용자의 행동이 빈번하지만 일정 간격으로만 반응하면 충분한 경우에 사용된다. (주기적으로 처리)스크롤 위치 저장윈도우 리사이즈 예시사용자가 아무리 스크롤을 해도, 200ms에 한번만 로그 출력window.addEventListener('scroll', throttle(() => ..
브라우저, Node.js의 이벤트 루프와 차이
브라우저 VS Node.js의 이벤트 루프 차이 브라우저 이벤트 루프(Event Loop)란브라우저의 이벤트 루프에 대해서는 지난글에 다뤘으니, 링크만 걸어두겠다.[챗지피티와 공부를 해보자] 이벤트 루프와 비동기 처리 + 가비지 컬렉션과의 연관 Q. 브라우저 이벤트 루프 관련해서만 요약해줘A. 해당 블로그 글에서는 자바스크립트의 이벤트 루프와 비동기 처리, 그리고 가비지 컬렉션 간의 관계를 다루고 있다. 주요 내용을 요약하면 다음과 같다.이벤트 루프(Event Loop)자바스크립트는 싱글 스레드 기반으로 한 번에 하나의 작업만 실행할 수 있다.하지만 비동기 작업(예: HTTP 요청, setTimeout)을 처리하기 위해 이벤트 루프 메커니즘을 사용한다.이벤트 루프는 콜 스택(Call Stack)..
가상돔(Virtual DOM)과 React Fiber 구조
관련글React의 가상 DOM, Vue의 가상 DOM과 비교 (동작방식) 가상돔 (Virtual DOM)과 React Fiber 구조 가상돔 (Virtual DOM) 이란? 가상돔은 실제돔의 변경을 최소화하여 성능을 최적화하는 개념이다. React(Vue, Preact 등....)에서 UI를 효율적으로 업데이트하기 위해 사용된다. DOM (Document Object Model, 문서 객체 모델)은 웹 브라우저가 HTML 문서를 해석하여 트리 구조(객체 모델)로 표현한 것이다. 즉, HTML을 브라우저가 이해할 수 있도록 만든 객체 형태의 구조.DOM을 통해 자바스크립트에서 HTML 요소를 조작할수있다.기존 DOM을 직접 조작하면 성능 비용이 크고 DOM의 업데이트가 많아질수록 느려진다는 기존 DOM의..
웹 렌더링 기법 종류 간단히 알아보자 (CSR, SSR, SSG, ISR 등..) 웹 렌더링 기법의 종류CSR (Client-Side Rendering) SSR (Server-Side Rendering)ISR (Incremental Static Regeneration)SSG (Static Site Generation)DPR (Deferred Page Rendering)SPR (Streaming Page Rendering)ESR (Edge-Side Rendering) RSC (React Server Components) 개념은 이해하고 넘어가면 좋다. 하지만 꼭 다 정확한 정보까지 학습할 필요는 없다. 그 자체의 개념들도 있고, 같이 사용가능한 기법들도 있다. 간단히 알아보자. CSR (Client..