개발 공부 (366) 썸네일형 리스트형 RxJS pipe this.route.paramsthis.route.params이 값은 단순한 객체가 아닙니다.Observable입니다.URL 파라미터가 바뀔 때마다새로운 값이 흘러나오는 스트림입니다.this.route.params.subscribe(params => { console.log(params);});위 코드는"URL 파라미터가 바뀔 때마다 실행해 줘" 입니다. Observable은 왜 바로 쓰면 안 될까?아래 코드는 처음엔 문제가 없어 보입니다.this.route.params.subscribe(params => { const id = params['id']; this.loadData(id);}); 하지만 실무에서 이런 문제가 생깁니다.조건 분기 추가파라미터 가공API 연쇄 호출구독 해제 로직그러면 sub.. Mutable vs Immutable 업데이트 Mutable 업데이트Mutable(가변) 업데이트는 기존 객체나 배열 자체를 직접 변경하는 방식입니다. const user = { name: 'Alice', age: 20 };user.age = 21; // 기존 객체 변경배열도 마찬가지입니다.const list = [1, 2, 3];list.push(4); // 기존 배열 변경 코드가 짧고 직관적메모리 사용량이 적음변경 추적이 어려움상태 관리 / 렌더링에서 문제 발생 가능2. Immutable 업데이트란?Immutable(불변) 업데이트는 기존 데이터는 유지하고, 새 객체 / 새 배열을 만들어 변경하는 방식입니다.const user = { name: 'Alice', age: 20 };const newUser = { ...user, age: 21};.. React useMutation + invalidateQueries 서버 데이터 변경(mutation) → 기존 캐시 무효화 → 최신 데이터 재요청(query 재실행) 서버 상태와 React Query의 역할React Query가 관리하는 건 UI 상태가 아니라 서버 상태입니다.서버 상태의 특징서버가 진짜 진실(Single Source of Truth)클라이언트가 마음대로 바꾸면 안 됨언제든 다른 사용자/요인으로 바뀔 수 있음그래서 React Query는 이렇게 동작합니다.내가 아는 데이터는 캐시일 뿐이고, 틀릴 수 있다 updateAppointmentStatus: 서버 변경export async function updateAppointmentStatus(input: { id: string; status: AppointmentStatus;}) { try { c.. Next.js API Route App Router를 쓰면, 프론트 페이지(page.tsx)뿐 아니라 서버에서 실행되는 API 엔드포인트도 app 폴더 아래에서 함께 관리할 수 있습니다.왜 app/api/.../route.ts로 API를 만들까?App Router의 핵심은 “라우트는 폴더 구조로 결정된다” 입니다.app/(something)/page.tsx → 페이지 라우트app/api/(something)/route.ts → API 라우트즉, route.ts는 “이 폴더 경로에 해당하는 요청을 처리하는 서버 핸들러”라는 의미입니다.이렇게 쓰는 이유프론트 + API를 한 프로젝트에서 통합 관리별도의 Express/Nest 서버 없이도 가벼운 백엔드 역할을 수행서버 코드가 자동으로 서버에서만 실행이메일 발송 같은 민감한 로직(비밀키 사용.. 비트 연산 비트(bit)컴퓨터는 숫자를 0과 1로만 표현합니다.0/1 하나를 비트(bit) 라고 합니다.여러 비트가 모이면 숫자가 됩니다.예를 들어 십진수 5는 이진수로 101입니다.101을 오른쪽부터 보면1의 자리(2^0) = 12의 자리(2^1) = 04의 자리(2^2) = 1즉 101 = 4 + 1 = 5 이진수는 “2의 거듭제곱 자리”로 숫자를 표현한 것이라고만 생각하시면 됩니다. “i번째 비트”숫자를 이진수로 썼을 때, 오른쪽 끝부터 0번째 비트라고 부릅니다.예: 13 = 11010번째 비트: 11번째 비트: 02번째 비트: 13번째 비트: 1 비트 연산자 AND (&) — 둘 다 1이면 1aba&b000010100111 OR (|) — 하나라도 1이면 1aba|b000011101111 오른쪽 시프트 .. DP-Dynamic Programming(동적 계획법) DPDynamic Programming(동적 계획법)이란, 큰 문제를 작은 문제로 나누고, 그 결과를 저장해 두었다가 재사용하는 방법 입니다. 핵심 키워드는 딱 두 가지입니다.중복되는 부분 문제 (Overlapping Subproblems)최적 부분 구조 (Optimal Substructure)즉,같은 계산을 여러 번 하게 되고작은 문제의 최적해가 큰 문제의 최적해로 이어질 때DP를 사용할 수 있습니다. DP를 써야 하는 문제의 특징다음과 같은 신호가 보이면 DP를 의심해 보셔야 합니다.최대 / 최소 / 경우의 수~까지의 최적값앞에서부터 누적선택하거나 / 선택하지 않거나이전 상태에 따라 현재 상태가 결정됨예를 들면:최대 이익최소 비용가능한 경우의 수최장 증가 수열최단 경로 1차원 DP 예제문제: 계단.. Heap HeapHeap은 특정 기준에 따라 항상 정렬 상태를 유지하는 트리 기반 자료구조입니다. Heap은 아래 조건만 보장합니다.MinHeap부모 ≤ 자식가장 작은 값이 항상 맨 위(root)MaxHeap부모 ≥ 자식가장 큰 값이 항상 맨 위(root)그래서 Heap은 이렇게 쓰입니다.상황이유가장 작은 값 / 큰 값 빠르게 꺼내기O(1)삽입 / 삭제O(log n)정렬 없이 Top K 유지효율적 PriorityQueue = Heap자바스크립트 / 타입스크립트에서 흔히 쓰는 MinPriorityQueue 는 MinHeap 구현체입니다.const minHeap = new MinPriorityQueue();여기서 중요한 메서드 3개minHeap.enqueue(value); // 삽입minHeap.dequeue();.. Clerk PricingTable 은 Clerk Billing 기능에 포함된 사전 제작 요금제 UI 컴포넌트입니다. 프론트엔드 입장에서는요금 카드 레이아웃로그인/비로그인 분기결제 버튼Stripe Checkout 이동을 직접 구현하지 않아도 됩니다. 내부 동작 구조은 단순 UI 컴포넌트가 아닙니다.동작 흐름은 아래와 같습니다.Clerk Dashboard에 설정된 Billing Plan 조회현재 로그인한 유저 확인유저의 구독 상태 확인선택 가능한 플랜만 렌더링버튼 클릭 시 Stripe Checkout으로 이동결제 완료 → Clerk가 구독 상태 갱신프론트엔드에서 결제 로직을 거의 다 제거할 수 있습니다. 기본 사용법import { PricingTable } from "@clerk/nextjs";export default function .. 이전 1 2 3 4 ··· 46 다음