태그: Frontend
34편
-
Qwik 프레임워크: Resumability와 Hydration의 차이, Qwik City 라우팅·서버 액션
Qwik이 Hydration 대신 Resumability로 서버에서 직렬화한 상태를 이어받는 원리를 설명하고, useSignal·useStore 반응성, Qwik City 라우팅과 로더, server$·routeAction$ 서버 액션, React에서 옮길 때의 주의점을 예제로 다룹니다.
-
SolidJS: Signal 기반 세밀한 반응성과 React와의 근본적 차이
SolidJS의 createSignal·createEffect·createMemo가 Virtual DOM 없이 바뀐 DOM만 갱신하는 원리와, 컴포넌트가 한 번만 실행되는 데서 오는 React와의 차이를 설명합니다. Show·For, Store·Context, Solid Router도 다룹니다.
-
Astro Islands 아키텍처: client 디렉티브로 필요한 컴포넌트만 Hydration하기
Astro에서 client:load·client:idle·client:visible 같은 디렉티브로 필요한 컴포넌트만 Hydration하는 방법, React·Vue·Svelte를 한 페이지에 섞어 쓰는 설정, Next.js·Qwik과의 구조적 차이를 예제로 살펴봅니다.
-
htmx 실전: HTML 속성만으로 동적 웹 만들기와 React·Vue와의 선택 기준
hx-get·hx-post·hx-swap·hx-trigger·hx-target 속성으로 AJAX 요청과 DOM 교체를 구현하고, 실시간 검색·무한 스크롤·폼 검증 예제와 hx-boost·SSE·WebSocket 연동, React·Vue 대신 htmx를 고를 기준을 다룹니다.
-
Svelte 입문: 컴파일러 기반 반응성, 컴포넌트, 스토어, 트랜지션, SvelteKit
Svelte는 빌드 타임에 컴파일되어 가상 DOM 없이 동작하는 프레임워크입니다. React·Vue와의 비교, 기본 문법, 컴포넌트, 스토어, 라이프사이클, 애니메이션과 트랜지션, SvelteKit, TypeScript 지원을 다룹니다.
-
Tailwind CSS 실전: 유틸리티 우선 방식 적응, 반응형·상태 변형, 다크 모드, @apply 재사용
Tailwind CSS 사용법 정리. Bootstrap과의 차이, 유틸리티 우선 방식에 적응하는 과정, 설치와 기본 사용, 반응형 디자인, 상태 변형, 다크 모드, 커스터마이징, @apply로 클래스 재사용을 예제로 다룹니다.
-
React 실무 정리: Hooks 심화, Fiber 아키텍처, Suspense·에러 처리, Context, 성능 최적화
Vite로 React 18 프로젝트를 시작해 useState·useEffect 실무 패턴과 useMemo·useCallback 사용 기준을 정리하고, Fiber의 렌더·커밋 단계와 동시성 렌더링을 설명합니다. Error Boundary, Suspense, Context 최적화, 가상화도 다룹니다.
-
Zustand 상태 관리: 셀렉터로 리렌더 줄이기, 미들웨어, Slice 패턴, vanilla 스토어, Next.js SSR
셀렉터와 shallow 비교로 필요한 컴포넌트만 리렌더되게 Zustand 스토어를 구성하는 법을 다룹니다. persist·devtools·immer 미들웨어, Slice 패턴 타입, vanilla 스토어, Next.js App Router에서의 스토어 공유도 설명합니다.
-
Three.js로 3D 웹 만들기: Scene·Camera·Mesh, 조명, 카메라 컨트롤, 텍스처, React Three Fiber
Three.js로 3D 웹을 만드는 방법. 기본 Scene·Camera·Renderer 설정, Geometry와 Material, 조명, 카메라 컨트롤, 텍스처, 애니메이션, React Three Fiber를 예제로 정리합니다.
-
Vuelidate로 Vue 폼 검증하기: 내장·커스텀 검증기, 비동기 검증, 에러 메시지, 중첩 객체
Vuelidate로 Vue 3 폼 검증 규칙을 선언하고 내장 검증기, 직접 만드는 검증기, 서버 중복 확인 같은 비동기 검증, 커스텀·다국어 에러 메시지, 중첩 객체 검증을 적용하는 방법을 회원가입 폼 예제로 따라갑니다.
-
VueUse로 자주 쓰는 Composable 가져다 쓰기: 상태·브라우저·센서·요소 유틸, 다크 모드 예제
VueUse로 Vue 개발을 빠르게 하는 방법. 설치와 기본 사용, useLocalStorage 같은 상태 Composable, useFetch 등 브라우저 Composable, 센서·요소 Composable, 유틸리티, 다크 모드 예제를 정리합니다.
-
styled-components 사용법: props 기반 스타일, 상속과 as Prop, 테마, 전역 스타일, attrs
styled-components로 CSS-in-JS를 구현하는 방법. Tagged Template Literals, props 기반 스타일, 상속, as Prop, Theming, Global Styles, css 헬퍼, attrs, SSR을 예제로 정리합니다.
-
Swiper로 터치 슬라이더 만들기: React·Vue 통합, 반응형 breakpoints, 효과, 이벤트
Swiper를 Vanilla JS로 붙이는 기본 설정부터 autoplay·pagination·navigation 모듈, React의 Swiper와 SwiperSlide 컴포넌트, Vue 통합, 화면 폭별 breakpoints, fade·cube 전환 효과, 슬라이드 이벤트 처리까지 예제로 구현합니다.
-
React Router로 SPA 라우팅: 중첩 라우트, Loader·Action, 보호 라우트, Error Boundary
React Router로 SPA 라우팅을 구현하는 방법. 설치와 기본 설정, 중첩 라우트, Loader로 데이터 불러오기, Action으로 폼 처리, 보호 라우트, Error Boundary, 네비게이션을 예제로 정리합니다.
-
Rollup으로 라이브러리 번들링: 여러 출력 포맷, 플러그인, 외부 의존성, Tree Shaking
Rollup으로 라이브러리를 번들링하는 방법. 기본 설정, ESM·CJS 등 여러 출력 포맷, 플러그인, 외부 의존성 처리, Tree Shaking, Code Splitting, React 라이브러리 예제와 Watch Mode를 정리합니다.
-
RxJS 실전: Observable 만들기, switchMap·mergeMap·concatMap 선택, 에러 처리, 검색 자동완성
RxJS로 반응형 프로그래밍을 구현하는 방법. Observable 생성, 오퍼레이터, switchMap·mergeMap·concatMap 차이, Subject, catchError와 retry, 검색 자동완성 예제, Angular 연동, Cold·Hot Observable을 다룹니다.
-
Sass(SCSS) 활용: 변수, 중첩, Mixin, 함수, @use 모듈, Partials와 빌드 연동
Sass(SCSS)의 변수·중첩·Mixin·함수로 반복되는 CSS를 줄이고, @import 대신 @use로 모듈을 나누는 방법과 Partials 구성, Webpack·Vite 연동, 버튼 컴포넌트까지 포함한 작은 디자인 시스템 예제를 다룹니다.
-
PostCSS 플러그인 활용: Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite·Tailwind 연동
PostCSS로 CSS를 변환하는 방법. 설치와 기본 설정, Autoprefixer, CSS Nesting, CSS Modules, Webpack·Vite 통합, Tailwind CSS 연동을 예제로 정리합니다.
-
React Hook Form으로 폼 만들기: register·handleSubmit, Zod 검증, Controller, 배열 필드
React Hook Form으로 폼을 구현하는 방법. register와 handleSubmit, 검증 규칙, Zod 통합, watch와 control, Controller로 커스텀 컴포넌트 연결, 배열 필드, 복잡한 폼 예제를 정리합니다.
-
React & Next.js 입문 가이드
JSX와 컴포넌트, props와 state 구분, useState·useEffect·useContext·useReducer로 React 기초를 다진 뒤 Next.js App Router의 폴더 기반 라우팅과 Server Components로 넘어갑니다. ES6 문법 같은 사전 지식도 먼저 짚습니다.
-
Parcel로 설정 없이 번들링하기: 내부 파이프라인, TypeScript·React·CSS, 환경 변수, 코드 스플리팅
Parcel로 설정 없이 번들링하는 방법. Parcel 2 파이프라인 구조, 설치와 기본 사용, TypeScript·React·CSS·이미지 처리, 환경 변수, Code Splitting과 Tree Shaking을 예제로 정리합니다.
-
Pinia로 Vue 3 상태 관리하기: Store 정의, storeToRefs 반응성 함정, 플러그인, 내부 모델
Pinia 스토어를 Options·Setup 스타일로 정의하고 컴포넌트에서 쓰는 방법, 구조 분해 시 반응성을 잃는 storeToRefs 함정, $patch·$reset, 플러그인과 영속화, SSR·Nuxt 환경과 스토어 간 순환 참조 문제를 다룹니다.
-
Leaflet으로 인터랙티브 지도 만들기: 마커·팝업, GeoJSON, React·Vue 통합, 좌표계
Leaflet으로 지도를 띄우고 마커·팝업과 GeoJSON 레이어를 그리는 방법, React Leaflet과 Vue 통합, markercluster로 많은 마커를 처리하는 법, EPSG:3857 좌표계의 내부 동작과 SSR 환경에서의 주의점을 다룹니다.
-
MSW로 API 모킹하기: 핸들러 정의, 브라우저·Node 통합, 에러 시뮬레이션, 테스트와 GraphQL
MSW(Mock Service Worker)로 API를 모킹하는 방법. 핸들러 정의, Response Resolver, 브라우저와 Node 통합, 에러 시뮬레이션, 테스트에서 사용하기, GraphQL 모킹을 예제로 정리합니다.
-
MUI로 React UI 만들기: 레이아웃, sx Prop, 테마와 다크 모드, 폼 예제
MUI로 React 화면을 만들 때 기본 컴포넌트와 Grid·Stack 레이아웃, sx prop으로 스타일을 입히는 법, createTheme 토큰 커스터마이징과 다크 모드 전환, 폼 구성과 아이콘 사용, TypeScript 설정을 예제 코드로 정리했습니다.
-
Framer Motion으로 React 애니메이션: Variants, 제스처, 레이아웃 애니메이션, 스크롤
motion 컴포넌트의 기본 사용법, Variants로 부모와 자식 애니메이션을 조율하는 방법, hover·tap·drag 제스처를 예제로 설명합니다. layout 속성과 AnimatePresence로 만드는 레이아웃·퇴장 애니메이션, useScroll과 useInView를 이용한 스크롤 연동도 다룹니다.
-
Husky로 Git Hooks 관리하기: pre-commit에 lint-staged, pre-push 테스트, Commitlint
Husky로 Git Hooks를 관리하는 방법. 설치와 기본 설정, pre-commit과 lint-staged, pre-push 훅, Commitlint로 커밋 메시지 검사, 실무 함정과 CI 통합을 예제로 정리합니다.
-
D3.js로 차트 만들기: 데이터 바인딩, Scale, 막대·선 차트, 툴팁, React와 함께 쓰기
D3.js로 데이터 시각화를 구현하는 방법. Selection과 데이터 바인딩(data·enter), Scale과 Axis, 막대·선 차트, 툴팁과 인터랙션, React와 함께 쓰는 방법을 예제로 정리합니다.
-
Ant Design으로 관리자 대시보드 만들기: Form·Table·테마 커스터마이징
Ant Design으로 엔터프라이즈 관리자 UI를 만드는 방법. Layout, Form, Table, Theming, Modal·Drawer, TypeScript 활용을 사용자 관리 화면 예제로 정리합니다.
-
Axios 실전: 인스턴스·인터셉터 설계와 401 토큰 갱신 무한 루프 막기
Axios 인스턴스와 요청·응답 인터셉터로 토큰 주입과 공통 에러 처리를 구성하고, 401 응답 뒤 토큰 갱신이 무한 루프에 빠지지 않게 하는 패턴, AbortController 요청 취소, TypeScript 타이핑을 예제로 다룹니다.
-
Babel 내부 동작: 파서·AST 순회·코드 생성과 Presets·Plugins 설정
@babel/parser가 소스를 AST로 만들고, traverse의 방문자가 노드를 바꾸고, generator가 코드와 소스 맵을 내보내는 과정을 따라간 뒤 preset-env와 core-js 폴리필, Webpack·Vite 통합 설정을 다룹니다.
-
Chakra UI 실전: 스타일 props, 테마 토큰, 다크 모드와 Emotion 스택의 비용
Chakra UI의 스타일 props로 레이아웃과 폼을 구성하고, 테마 토큰 확장과 다크 모드, 반응형 배열 문법을 적용한 뒤, Next.js SSR 하이드레이션과 Emotion 기반 스타일링이 번들 크기에 주는 영향을 점검합니다.
-
Angular 핵심과 내부 동작: Component·DI 계층·Signals·Zone.js 변경 감지
Angular로 엔터프라이즈 웹 앱을 만들 때 필요한 Component, Service, RxJS, Routing, Signals, Standalone Components를 예제로 정리하고, 변경 감지와 DI 해석 규칙까지 설명합니다.
-
Next.js 15 정리: App Router 렌더링 결정, 캐싱 레이어, Server Actions, Turbopack, PPR
Next.js 15의 변경점과 App Router 구조 정리. 서버 컴포넌트, 정적·동적 렌더링이 결정되는 방식, 캐싱 레이어, Server Actions, Turbopack, Partial Prerendering, React 19 대응을 예제로 다룹니다.