본문 바로가기

Web Development/Next.js

 (11)
React Portal 정리 1. 무엇인가?React Portal은 React 컴포넌트를 기존 부모 DOM 계층이 아닌, DOM 트리의 임의의 위치(예: 루트나 특정 엘리먼트)에 렌더링할 수 있게 해주는 기능입니다.즉, 계층 구조와 무관하게 원하는 위치에 컴포넌트를 그릴 수 있습니다.2. 왜 사용하는가?Portal은 부모 DOM 계층의 스타일/레이아웃/기능 한계를 극복하기 위해 사용합니다.레이아웃/스타일링 이슈 해결(예: 모달, 드롭다운, 툴팁 등)→ 부모 요소의 overflow: hidden, z-index, position: relative 등 스타일 속성 영향을 받지 않고, 원하는 레이어(예: 화면 맨 위)에 노출 가능접근성 개선→ 모달 등을 DOM 트리 최상단에 렌더링함으로써, 스크린리더나 키보드 네비게이션 등 보조기기가 올..
[RxJS] 3편. RxJS로 CRUD 구현하기 – 그리고 절차형처럼 느껴지는 부분 이번 글에서는 RxJS로 게시글 CRUD(생성, 조회, 삭제 등)를 어떻게 구현할 수 있는지 살펴보고, 그 과정에서 일부 코드가 절차형처럼 느껴지는 이유에 대해서도 함께 정리해본다.🧱 postStore.js – 전역 상태 + API 흐름 구성import { BehaviorSubject, Subject, from, of } from 'rxjs';import { switchMap, tap, catchError } from 'rxjs/operators';const postSubject = new BehaviorSubject([]);export const posts$ = postSubject.asObservable();const fetchTrigger$ = new Subject();// 초기 fetchfetc..
[RxJS] 2편. React에서 RxJS로 상태관리를 한다는 것은? React는 컴포넌트 기반 + 선언형 UI 프레임워크다. RxJS는 데이터 흐름을 선언적으로 다루는 스트림 라이브러리다. 그렇다면 React에서 RxJS로 상태 관리를 한다는 것은 어떤 의미일까?🌐 전역 상태를 스트림으로 선언RxJS에서는 전역 상태를 BehaviorSubject로 선언하고, 이를 Observable로 구독하게 만든다.const count$ = new BehaviorSubject(0);export const counter$ = count$.asObservable();export const increment = () => count$.next(count$.value + 1);📂 React Hook으로 구독function useCounter() { const [count, setCoun..
[RxJS] 1편. RxJS와 선언형 프로그래밍의 관계 1편. RxJS와 선언형 프로그래밍의 관계RxJS는 단순한 유틸리티 라이브러리를 넘어서, 선언형 프로그래밍의 철학을 코드에 옮긴 대표적인 예다. 이 글에서는 RxJS가 왜 선언형 프로그래밍과 관련이 깊은지 살펴보자.✨ 선언형 프로그래밍이란?- "무엇을 할 것인가"에 집중- 데이터 흐름을 명시적으로 선언하고, 내부의 처리 방식은 숨김- 대표 예시: HTML, SQL, React JSX, Array.map/filter⚡ RxJS는 선언형 프로그래밍 그 자체RxJS는 Observable 스트림을 통해 비동기 데이터를 선언적으로 다룬다. 직접 흐름을 제어하지 않고, 연산자를 조합해서 "무엇을 할 것인지" 선언한다.fromEvent(document, 'click') .pipe( map(event => ev..
React에서 useEffect를 꼭 써야 할까? — 오히려 안 써도 되는 경우가 더 많다 React에서 useEffect를 꼭 써야 할까? — 오히려 안 써도 되는 경우가 더 많다React를 쓰다 보면 useEffect를 거의 습관처럼 쓰게 되는 경우가 많다.상태를 바꾸거나, 데이터를 갱신하거나, 뭔가 “변화”가 있으면 useEffect부터 떠오른다.하지만 React 공식 문서에서는 이렇게 말한다:"You might not need an effect."(공식 문서: https://react.dev/learn/you-might-not-need-an-effect)📌 useEffect는 React의 '비상구'다React는 기본적으로 선언형 프로그래밍 철학을 따르고 있다.하지만 세상에는 선언형으로 다 표현할 수 없는 일들이 있다. 브라우저 타이틀 변경 외부 API 호출 이벤트 리스너 등록 ..
React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기 React를 쓰면서도 몰랐던 선언형 프로그래밍 이야기React를 처음 접했을 때, 나는 그냥 시키는 대로 문법을 익히고, JSX를 따라 썼다.useState, map, onClick… 그렇게 UI를 만들고, 기능을 붙이고, 화면을 완성해 나갔다.그런데 어느 순간, 문득 이런 생각이 들었다.“나는 어떻게 UI를 구성하고 있었던 거지?”“이게 다 선언형 프로그래밍이라고?”React를 공부하면서 자연스럽게 사용했던 방식들이 사실은 선언형 프로그래밍이라는 걸, 꽤 시간이 지나서야 깨달았다.선언형 vs 절차형, 간단 정리스타일절차형 프로그래밍선언형 프로그래밍초점어떻게 처리할까무엇을 만들까특징명령 중심, 순차적의도 중심, 추상화예시DOM 직접 조작JSX로 UI 구조 선언절차형 프로그래밍은 “1번 하고 → 2번 하고..
[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를 통해 클라이언트 측에서 동적..

티스토리툴바