본문 바로가기

Web Development

 (78)
상태관리 [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 패턴의 한계모델과 뷰 사이의 양방향 데이터 흐름상태가 여러 곳에 흩어져 있음컴포넌트 간 의존성 증가유지보수와 디버깅 어려움📌 예시로 쉽게 이해해보기상황: 사용자에게 새로운 알림이 도착했습니다.헤더에 알림 아이콘이 있고, 목록 페이지에서도 알림을 확인할 수 있어야 합니다.❌ 기존 방식알림을 읽으면 헤더와 목록 상태를 각각 업데이트여러 컴포넌트에서 상태가 중..
[Next.js] Next.js 라우팅 방식의 장점과 다른 방식들과의 차이점 Routing이란?라우팅(Routing)은 URL과 페이지 컴포넌트를 연결하는 과정으로, 각 페이지의 경로를 정의하고 해당 경로에 어떤 컴포넌트를 제공할지 결정하는 것을 의미한다.다양한 라우팅 방식들명시적 라우팅개발자가 코드 내에서 직접 경로와 컴포넌트를 명시하는 방식이다.예를 들어, React에서는 다음과 같이 구현한다.@Controller('users') export class Users Controller { @Get() findAll():string { return 'This is ~~'; } }코드 기반 라우팅서버 측에서 코드로 경로를 정의하는 방식이다.Express.js에서는 다음과 같이 구현한다.app.get('/', (req, res) => { res.s..
[Next.js] 왜 우리는 Next.js를 사용하게 되었을까? Next.js를 빈번히 사용하는 프론트엔드 개발자의 입장에서,Next.js의 필요성에 대해서 정리해보았다.Next.js의 필요성을 알기 위해서는 Next.js가 어떤 배경에서 나타난 기술인지를 알아야 한다.웹 개발 방식의 변화 과정을 정리해보고, 거기서 어떤 문제를 해결하기 위해서 Next.js가 나타났는지 정리해보았다. 초기 웹사이트 개발서버 개발자들은 JSP와 같은 템플릿 엔진을 활용하여 서버에서 데이터를 주입한 HTML을 생성하고, 이를 사용자에게 전달하였다.AJAX의 등장웹의 상호작용성이 중요해지면서, 페이지 이동 시 깜빡임 등의 문제를 해결하기 위해 비동기 처리를 지원하는 AJAX가 도입되었다.CSR(Client-Side Rendering)의 부상JavaScript를 통해 클라이언트 측에서 동적..
[ETC] 모듈 번들러와 Vite, Webpack 비교 1. 모듈 번들러의 개요 1.1 모듈 번들러란 무엇인가? 모듈 번들러는 웹 애플리케이션을 구성하는 여러 자원(예: JavaScript, CSS, 이미지 파일 등)을 하나의 파일 또는 여러 개의 그룹으로 병합하고 압축하는 도구이다. 이를 통해 네트워크 요청 수를 줄이고, 로딩 속도를 향상시키며, 코드의 유지 보수성을 높일 수 있다. 1.2 모듈 번들러의 필요성 • 의존성 관리: 모듈 간의 의존성을 자동으로 파악하여 올바른 순서로 로드되도록 한다. • 네임스페이스 충돌 방지: 전역 스코프 오염을 방지하여 변수나 함수 이름의 충돌을 예방한다. • 파일 크기 최적화: 사용하지 않는 코드를 제거하고(minification), 코드를 난독화하여 파일 크기를 줄인다. • 개발 편의성: 모듈 단위의 코딩을 가능하게 하..
[Next.js] 클라이언트 컴포넌트 (공식 문서 따라가기) Client Component란 무엇인가? Client Component는 서버에서 미리 렌더링된 HTML과 브라우저에서 실행되는 JavaScript를 결합하여 인터랙티브한 사용자 인터페이스를 제공하는 컴포넌트이다. 이를 통해 사용자는 페이지 로드 시 즉시 콘텐츠를 확인할 수 있으며, 이후 JavaScript가 로드되면서 상호작용이 가능한 상태로 전환된다.클라이언트 렌더링의 장점상호작용성Client Component는 상태 관리, 효과 처리, 이벤트 리스너 등을 활용하여 사용자와의 즉각적인 상호작용을 지원한다. 이를 통해 버튼 클릭, 폼 입력 등 사용자 행동에 실시간으로 반응하는 동적인 UI를 구현할 수 있다.브라우저 API 접근Client Component는 지리적 위치 정보나 로컬 스토리지와 같은 브..
[Next.js] 서버 컴포넌트(공식 문서 따라가기) 서버 컴포넌트(RSC)란? RSC를 이용해서, 선택적으로 서버에 캐시되고 렌더링되는 UI를 만들 수 있다.Next.js에서는 렌더링 작업이 라우트 세그먼트(route segments)별로 나뉘어 스트리밍과 부분 렌더링이 가능하다.또한, Next.js에서 서버 렌더링 전략은 Static Rendering, Dynamic Rendering, Streaming이 있다.Route Segment : URL의 각 경로의 각 부분을 의미한다. /product/[id] ⇒ product와 [id] 각각이 Route Segment이다.부분 렌더링 : next.js는 Route Segment 단위로 렌더링 작업을 분리한다. ⇒ 헤더 따로, 내용 따로 렌더링스트리밍 : 페이지의 일부가 준비된 즉시, 브라우저로 전송해서 렌더..
[Google analytics4] 알아두면 좋을 GA4와 UA의 차이점 데이터 모델의 차이UA: 페이지 조회, 소셜 미디어, 이벤트 등 다양한 히트 유형을 사용하며, 세션 기반의 측정 방식을 채택했다. 세션이 종료되면 별도의 데이터로 간주된다.GA4: 모든 상호작용을 이벤트로 기록하며, 사용자와 이벤트 기반으로 활동을 추적한다.시간 측정 방법UA: 각 페이지로 이동한 시간을 기록하고, 이 시간들의 차이를 이용해 사용자가 페이지에 머문 시간을 측정한다.그러나 마지막 페이지에서의 체류 시간은 0초로 기록되는 한계가 있다. 또한, 사용자가 제3의 도메인을 이용한 후 다시 기존 도메인으로 돌아와도, 사용자가 계속 머물렀던 것처럼 시간이 측정된다.GA4: 모든 이벤트에 타임스탬프를 포함하며, 특히 탭을 이동하거나 종료할 때 ‘user_engagement’ 이벤트를 전송하여 사용자의 ..

티스토리툴바