Fast & Furious

📌 Vue 개발자의 React/Next.js 입문 시리즈1편 - React가 뭔가?2편 - Vue 문법을 React로 바꿔보자3편 - Next.js 구조와 라우팅4편 - 상태관리와 API 통신5편 - UI 라이브러리 선택하기 ✅ (현재 글)들어가며4편에서 Zustand와 TanStack Query로 상태관리와 API 통신을 정리했다.마지막 편은 UI 라이브러리다. Vue에서 Vuetify, Element Plus 같은 걸 썼다면, React 생태계에서는 어떤 선택지가 있는지 정리한다. React UI 라이브러리 지형도Vue는 Vuetify, Quasar, Element Plus 같이 컴포넌트를 통째로 제공하는 라이브러리가 많았다. React는 접근 방식이 조금 다르다. 크게 세 가지 계열로 나뉜다. 계..

📌 Vue 개발자의 React/Next.js 입문 시리즈1편 - React가 뭔가?2편 - Vue 문법을 React로 바꿔보자3편 - Next.js 구조와 라우팅4편 - 상태관리와 API 통신 ✅ (현재 글)5편 - UI 라이브러리 선택하기들어가며3편에서 Next.js의 폴더 기반 라우팅과 App Router 구조를 정리했다.이번 편은 상태관리와 API 통신이다. Vue에서 Pinia를 썼다면 React 생태계에서는 어떤 걸 쓰는지, 그리고 데이터 fetch는 어떻게 처리하는지 정리한다. 전역 상태관리 — Pinia → ZustandVue에서는 Pinia가 공식 상태관리 라이브러리다. React는 공식 라이브러리가 없고 직접 선택해야 한다. 현재 가장 많이 쓰이는 건 Zustand다.// Piniaex..

📌 Vue 개발자의 React/Next.js 입문 시리즈1편 - React가 뭔가?2편 - Vue 문법을 React로 바꿔보자3편 - Next.js 구조와 라우팅 ✅ (현재 글)4편 - 상태관리와 API 통신5편 - UI 라이브러리 선택하기들어가며2편에서 Vue 문법을 React로 어떻게 바꾸는지 정리했다.이번 편은 Next.js의 핵심인 폴더 기반 라우팅과 App Router 구조를 정리한다. Vue Router로 라우팅을 따로 설정해왔다면, Next.js 방식이 처음엔 신기하게 느껴질 것이다. 라우팅을 파일로 한다Vue에서는 router/index.ts에 라우팅을 직접 등록한다.// Vue Routerconst routes = [ { path: '/', component: Home }, { pa..

📌 Vue 개발자의 React/Next.js 입문 시리즈1편 - React가 뭔가?2편 - Vue 문법을 React로 바꿔보자 ✅ (현재 글)3편 - Next.js 구조와 라우팅4편 - 상태관리와 API 통신5편 - UI 라이브러리 선택하기들어가며1편에서 React가 뭔지, Next.js랑 어떤 관계인지 정리했다.이번 편은 실제로 손이 자꾸 헷갈리는 부분들 — v-if, v-for, v-model, computed, watch 를 React에서는 어떻게 쓰는지 직접 코드로 비교해본다. 파일 구조부터 다르다Vue는 .vue 파일 하나에 template / script / style이 다 들어간다.React는 .tsx 파일에서 JavaScript(JSX) 안에 HTML을 직접 쓴다. {{ title }}..

📌 Vue 개발자의 React/Next.js 입문 시리즈1편 - React가 뭔가? ✅ (현재 글)2편 - Vue 문법을 React로 바꿔보자3편 - Next.js 구조와 라우팅4편 - 상태관리와 API 통신5편 - UI 라이브러리 선택하기 들어가며Vue로만 개발해왔던 내가 최근 React와 Next.js를 시작하게 됐다.처음엔 "그냥 문법만 다른 거 아니야?" 싶었는데, 막상 시작해보니 개념부터 다시 잡아야 할 부분들이 꽤 있었다.같은 처지의 Vue 개발자들을 위해 내가 이해한 방식으로 정리해본다. React가 뭔가?Vue는 프레임워크, React는 UI 라이브러리다. VueReact종류프레임워크UI 라이브러리라우터Vue Router 공식 제공직접 선택상태관리Pinia 공식 제공직접 선택템플릿 HTM..

💡개요현대 프론트엔드 상태관리는 크게 두 가지로 나뉩니다.- 클라이언트 상태 → Zustand (또는 Redux Toolkit)- 서버 상태 → TanStack Query이 둘의 역할을 명확히 이해하면 불필요한 코드가 대폭 줄어듭니다. 1. Zustand vs Redux Toolkit핵심 비교 항목 Zustand Redux Toolkit 번들 사이즈~1.2KB~19KB보일러플레이트최소 (파일 하나)구조화됨 (slice, action, selector)학습 곡선~30분24시간DevTools기본 수준탁월 (time-travel 디버깅)TypeScript네이티브 지원네이티브 지원비동기/서버 상태TanStack Query 조합 권장RTK Query 내장언제 무엇을 쓸까?Zustand 선택:신규 프로젝트 ..

💡 개요실행 컨텍스트(Execution Context)는 자바스크립트 코드가 평가되고 실행되는 환경(또는 범위)을 의미합니다.브라우저나 Node.js에서 코드를 실행할 때, 변수와 함수 선언, this, scope, 그리고 실행 흐름이 어떻게 결정되는지를 관리하는 핵심 개념입니다.실행 컨텍스트 종류자바스크립트에는 크게 두 가지 실행 컨텍스트가 있습니다.전역 실행 컨텍스트(Global Execution Context)함수 실행 컨텍스트(Function Execution Context)각 컨텍스트는 코드 실행 시점과 환경에 따라 생성됩니다. 전역 실행 컨텍스트(Global Execution Context)자바스크립트 코드가 처음 로드될 때, 가장 먼저 생성되는 컨텍스트입니다.전역 객체(window 또는 ..