728x90

전체 글 80

브라우저 vs 서버 / React를 실행하는 주체

React로 개발을 하다 보면 어느 순간 Next.js를 마주치게 된다. 그리고 Next.js 문서를 열면 RSC(React Server Component), RCC(React Client Component), SSR(Server Side Rendering), CSR(Client Side Renderting), SSG(Static Site Generation) 같은 용어들이 쏟아진다. 처음엔 단순히 "서버에서 렌더링하는 것"과 " 클라이언트에서 렌더링 하는 것"의 차이로 이해했지만, 실제로 파고들수록 이 개념들이 단순한 렌더링 위치의 차이가 아니라는 걸 알게 됐다.이 글은 그 흐름을 처음부터 다시 짚어본다. CSR에서 시작해서 SSR을 거쳐 RSC에 도달하는 과정을 따라가다 보면, 마지막에 하나의 질문이..

프론트엔드 2026.03.30

[위클리 브리핑] 2026년 3월 둘째 주 (3/9~3/17)

주요 지표 스냅샷3/14(금) 종가 기준. 월요일(3/16) 데이터는 별도 코멘트로 보충.지표3/14 종가주간 변동비고S&P 5006,632.19-1.6%연초 이후 최저치. 3주 연속 하락Nasdaq22,105.36-1.3%200일 이동평균선 아래로 위협Dow Jones46,558.47-2.0% US 10Y~4.29%상승이란전 이후 인플레 우려 반영US 2Y~4.0%±소폭 상승 DXY~100.5강세4주 연속 상승 — 2025년 중반 이후 최고VIX27.19상승공포 구간 진입WTI~$98.71+3.1% (금)주중 $119 터치 후 후퇴Gold~$5,061변동성 확대두바이 항공 차질로 공급 불안USD/KRW~1,483±원화 약세이란전 충격 + 에너지 수입 우려USD/JPY~157±(추정)엔 약세 가속4주간 ..

[위클리 브리핑] 2026년 3월 첫째 주 (3/02~3/09)

전쟁, 관세, 고용 — 세 가지 충격이 동시에 시장을 강타했고, 주말을 넘기며 유가는 $100을 돌파했다. 이번 주 핵심 이벤트1. 미-이스라엘-이란 전쟁 본격화 (Operation Epic Fury)2월 28일 시작된 미국과 이스라엘의 대(對)이란 군사작전 'Operation Epic Fury'가 이번 주 내내 시장을 지배했다. 첫 번째 공습에서 이란 최고지도자 알리 하메네이가 사망했고, 이란은 이스라엘과 걸프 국가들을 향해 수백 발의 미사일과 드론 공격으로 맞대응했다. UAE의 아마존웹서비스(AWS) 데이터센터 세 곳이 피해를 입었고, 두바이 국제공항이 일시 폐쇄됐으며, 걸프 지역 주요 항구의 선적이 사실상 중단됐다.주 후반으로 갈수록 전선이 빠르게 확대됐다. 이란은 레바논 헤즈볼라와 협조해 이스라..

타입스크립트의 유틸리티 타입

이전에 맵드 타입, 조건부 타입, infer, 분산적 조건부 타입을 포스팅했다.유틸리티 타입은 그 기능들을 이용해 타입스크립트가 기본으로 저장해둔 타입 변환 도구들이다.직접 구현할 수도 있지만 이미 만들어져 있으니 가져다 쓰면 된다.이 포스팅의 목적은 사용법을 외우는 것보다, 각 유틸리티 타입이 어떻게 구현되어 있는지 이해하는 것이다.원리를 알면 언제 무엇을 써야하는지 자연스럽게 판단할 수 있다.PartialPartial는 객체 타입의 모든 프로퍼티에 ?를 붙여 선택적으로 만든다.interface Post { title: string; tags: string[]; content: string; thumbURL?: string;}const draft: Partial = { title: "", c..

프론트엔드 2026.03.08

타입스크립트의 조건부 타입

타입에 조건을 걸 수 있다."이 타입이 저 타입을 확장하면 A, 아니면 B"라는 식의 분기를 타입 수준에서 표현하는 것이 조건부 타입의 핵심이다.조건부 타입의 기본 구조조건부 타입은 삼항 연산자와 동일한 형태를 사용한다.type A = number extends string ? string : number;// number는 string을 확장하지 않으므로 → numberT extends U ? X : Y 형태로 읽으면 된다. T가 U의 서브타입이면 X, 아니면 Yextends는 상속이 아니라 부분집합 관계, 즉 호환 가능 여부를 묻는 것이다.type ObjA = { a: number };type ObjB = { a: number; b: number };type B = ObjB extends ObjA ?..

프론트엔드 2026.03.07

타입스크립트의 인덱스드 액세스 / keyof / 맵드 타입 / 템플릿 리터럴 타입

타입스크립트를 처음 배울 때는 타입을 선언하는 것에 집중하게 된다.string, number, 인터페이스를 정의하고, 함수의 파라미터와 반환값에 붙이는 식으로 진행한다.타입을 선언하는 것을 넘어서, 기존 타입으로부터 새로운 타입을 만들어내는 방법도 존재한다.인덱스드 액세스 타입타입 내부의 값을 꺼내는 방법이다.객체 타입에서 특정 프로퍼티의 타입만 추출하고 싶을 때 사용한다.마치 자바스크립트에서 객체의 값을 obj["key"]로 접근하듯, 타입도 같은 문법으로 내부 타입을 꺼낼 수 있다.type Post = { title: string; content: string; author: { id: number; name: string; };};type AuthorType = Post["auth..

프론트엔드 2026.03.05

[위클리 브리핑] 2026년 2월 마지막 주 (2/24~2/28)

작성일 : 2026년-03-02한 줄 요약"완벽한 실적을 내고도 팔리는 시대가 왔다."엔비디아가 역대급 숫자를 찍었는데 주가는 -10%, Block이 직원 절반을 자르자 주가는 +18%. 시장은 더 이상 "좋은 숫자"가 아니라 "좋은 이야기의 다음 챕터"를 원하고 있다. 주요 지표지표금요일 종가주간 변동월간 변동비고S&P 5006,878-0.4%-0.9%목·금 변동성 확대Nasdaq22,668-0.9%-3.3%소프트웨어 매도 주도Dow48,978-1.1%(금)+0.2%9개월 연속 상승US 10Y 금리~3.98%하락-10bp(월)경기둔화 우려로 4% 하회US 2Y 금리~3.48%——10Y-2Y 스프레드 +50bpDXY (달러)97.57약보합+0.9%(월)96~98 레인지, 첫 월간 상승VIX19.86+6...

타입 시스템을 구조화하는 세 가지 도구(인터페이스, 클래스, 제네릭)

인터페이스 / 확장 / 선언 합침타입스크립트에 이름을 붙이는 방법은 type alias가 대표적이다.그러나 Interface 키워드도 같은 역할을 하는데, 단순히 이름만 붙이는 것에서 더 나아가 객체의 구조를 정의하는 데 특화된 문법이다. 상속이나 선언 합침 같은 기능이 여기에 속한다. 인터페이스로 객체 타입을 정의하면 프로퍼티뿐 아니라 메서드도 선언할 수 있고, 동일한 메서드 이름으로 시그니처를 여러 개 나열하는 오버로드도 가능하다.interface Person { name: string; age: number; sayHi(): void; sayHi(a: number, b: number): void;}다만 type alias에서는 &나 | 연산자로 인터섹션과 유니온을 표현할 수 있지만, 인터페이..

프론트엔드 2026.02.26

NET(Cloudflar) 기업 분석

Cloudflare는 어떤 회사인가?기업 개요Cloudflare(클라우드플레어)는 2009년 매튜 프린스(Matthew Prince), 미셸 자틀린(Michelle Zatlyn), 리 할로웨이(Lee Holloway)가 공동 창업한 미국 샌프란시스코 본사의 클라우드 인프라 기업이다. 2019년 NYSE에 상장(티커: NET)했으며, 현재 시가총액 약 $62B 규모다.한 마디로 정의하면, "인터넷의 보이지 않는 인프라"를 책임지고 있는 회사이다.우리가 웹사이트에 접속하거나, 앱을 사용하거나, API를 호출할 때 — 그 트래픽이 안전하고 빠르게 전달되도록 중간에서 보안, 가속, 라우팅을 담당하는 글로벌 네트워크를 운영한다. 현재 전 세계 125개국 이상, 330개 도시에 데이터센터를 보유하고 있으며, 전체 ..

TypeScript 함수와 타입

함수 타입과 매개변수 기본타입스크립트에서 함수를 잘 설명한다는 건, 어떤 타입의 값을 받아서 어떤 타입의 값을 돌려주는지 명확히 드러낸다는 뜻이다. 즉, 그 자체가 함수의 스펙이 된다.기본적인 선언 방식은 매개변수와 반환값에 타입을 붙이는 것이다.function func(a: number, b: number): number { return a + b;}const add = (a: number, b: number): number => a + b;화살표 함수도 동일한 방식으로 타입을 정의할 수 있다. 선택적 매개변수매개변수 뒤에 ?를 붙이면 해당 값을 생략할 수 있는 선택적 매개변수가 된다.이때 타입스크립트는 해당 값의 타입을 number | undefined를 포함한 유니온 타입으로 추론한다.그래서 그 ..

프론트엔드 2026.02.22
728x90