FrontEnd104 BroadcastChannel API 를 통한 브라우저 동기화 BroadcastChannel API는 동일 origin 탭·창·iframe·worker 사이에서 서버 없이 메시지를 주고받을 수 있게 해 주는 브라우저 내장 Web API다. 아래 내용은 예제 코드(AAPage)를 중심으로 BroadcastChannel을 React에서 어떻게 활용할 수 있는지 정리한 실험 보고서 형식의 글이다.BroadcastChannel API 개요BroadcastChannel API는 같은 origin을 공유하는 브라우저 컨텍스트(탭, 창, iframe, worker)끼리 메시지를 브로드캐스트하는 단일 채널을 제공한다. 채널 이름만 일치하면 여러 컨텍스트가 자유롭게 참여하고 탈퇴하면서 데이터를 주고받을 수 있다.이 API는 로컬스토리지 이벤트나 서버 기반 WebSocket 없이도 .. 2025. 12. 23. [React 19] Activity 컴포넌트 React 19에서 추가된 는 “컴포넌트를 언마운트하지 않고 숨기는” 용도로 쓰는 새 컴포넌트다.탭/모달/사이드바처럼 자주 보였다 숨겼다 하는 UI에서 상태를 그대로 유지한 채 토글할 수 있게 해준다.Activity 기본 개념는 자식 컴포넌트의 생명주기 경계를 만들어 주는 컴포넌트다.mode="visible" | "hidden" | "auto" 같은 props로 Activity 안의 UI를 보이거나 숨길 수 있다.숨길 때도 컴포넌트를 언마운트하지 않고 DOM과 React state를 보존하는 것이 핵심이다.상태가 유지되는 숨김 처리일반적인 조건부 렌더링({isOpen && })은 false가 되면 컴포넌트가 언마운트되어 useState 등 로컬 상태가 사라진다.으로 감싸면, 화면에서는 display.. 2025. 12. 19. 추가로 발견 된 리액트 취약점 https://react.dev/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components Denial of Service and Source Code Exposure in React Server Components – ReactThe library for web and native user interfacesreact.dev 아래는 퍼플렉시티를 통해 얻은 분석이 글은 최근 React Server Components(RSC) 관련 추가 보안 취약점 공지입니다.[2]어떤 취약점인지두 가지 새 취약점이 공개되었습니다.[1][2]Denial of Service (CVE-2025-55184, CVSS 7.5, Hig.. 2025. 12. 12. React Server Components CVE-2025-55182 취약점 분석 2025년 12월 3일에 공개된 CVE-2025-55182(CVSS 10.0)는 React Server Components에서 발견된 critical한 인증되지 않은 원격 코드 실행(RCE) 취약점입니다. 이 취약점은 "React2Shell"이라는 별칭으로 불리며, Log4Shell과 유사한 수준의 심각성과 광범위한 영향을 미칩니다.//선 요약React 공식 문서의 인용:"React Server Functions allow a client to call a function on a server. React translates requests on the client into HTTP requests which are forwarded to a server."취약점이 발생하는 이유:클라이언트가 Server.. 2025. 12. 5. app router 기준 렌더링 로직을 비교해보기 보호되어 있는 글 입니다. 2025. 12. 2. Next.js로 SSE 환경 만들기 (app router에서 better-sse 사용 불가 이유) 1. SSE란?Server-Sent Events웹소켓과 마찬가지로 명시적으로 연결을 끊지 않는 한 서버와 클라이언트의 연결은 쭉 유지되는 통신클라이언트는 서버로부터 정보를 실시간으로 받을 수 있을 뿐 요청을 보내지는 않음 (보낼거면 별도 요청)알람 기능 구현, 뉴스피드 받기 등등. 클라이언트의 동작이 서버에 등록될 필요는 없는 기능에서 활용연결 방법 (CS적으로)기본적으로 HTTP 연결을 열어둔 상태로 유지클라이언트가 서버에 요청을 처음 보낸다 (연결 요청)서버는 응답을 완료하지 않고 해당 HTTP 연결을 계속 열어둠 -> 해당 연결을 통해 데이터를 지속적으로 보냄각 데이터는 "data:"형식으로 전성 됨위의 연결 방법으로 유지가 가능한 이유HTTP 의 Content-Length 헤더를 사용하지 않거나 .. 2025. 11. 23. 좋은 코드를 위한 4가지 기준 토스 가이드문서를 읽고 정리프론트엔드 관점에서 좋다는 것은 변경하기 쉬운 코드 새로운 요구사항에 대해 유연하게 대응 할 수 있는 .기준 : 가독성, 예측 가능성, 응집도, 결합도 모두 충족하기란 어렵다함수 변수를 공통화,추상화 ~ 응집도 상승 ~ 가독성 하락중복 코드 허용 ~ 영향 범위 하락 ~ 결합도 하락 ~ 응집도 하락트레이드 오프 필요 (직면한 상황의 처리를 위한 가치 우선화)1. 가독성 [코드의 동작을 이해할 수 있게 하는]맥락 줄이기같이 실행되지 않는 코드 분리구현 상세 추상화로직 종류에 따른 함수 분리이름 잘 짓기위에서 아래로 읽히게 하기 2. 예측 가능성 협업자들이 내 코드의 동작을 보더라도 예측할 수 있게 일관적인 규칙, 변수명, 반환 값만 보고도 동작 이해 3. 응집도 수정되어야 할 코드.. 2025. 11. 22. 자바스크립트의 배열 인덱스 접근은 왜 O(1)인지 자바나 c언어에서는 변수를 선언할 때 타입까지 한 번에 지정해줘야한다.특히 단일 타입만을 지정해야한다. 그런데 자바스크립트는 타입 지정을 안하고 변수 선언을 하다보니 하나의 배열에 원시 타입이나 객체 타입을 뒤죽박죽으로 넣을 수 있다. 자바 , c에서는 인덱스 접근 시 변수에 담긴 배열의 첫 주소(포인터)+ index*typeSize 로 한번에 메모리에 접근하여 이 O(1)로 맞춰진다. 하지만 타입 사이즈를 보장하지 않는 자바스크립트는 어떻게 O(1)이 될까?답은 v8과 같은 자바스크립트 엔진에 있었다. 우선 빌드 시까진 낙관적으로 접근을 하고 컴파일 시 해당 배열이 단일 타입으로 이루어진 빠른 배열이라면 자바처럼 포인터+index*typeSize로 인덱스에 접근한다. 하지만 여러 타입이 섞인 느린 배.. 2025. 11. 13. revalidatePath로 캐시 무효화 시 마주칠 수 있는 상황 내 상황을 클로드가 정리해줌# Next.js revalidatePath: 'page' vs 'layout' 타입의 차이와 함정## 상황블로그에 새 포스트를 작성한 후 `revalidatePath`로 캐시를 무효화했지만, 포스트 목록에 새 글이 나타나지 않는 문제가 발생했습니다.**환경:**- Next.js 15 (App Router)- `generateStaticParams`를 사용한 정적 페이지 생성- ISR(Incremental Static Regeneration) 환경**코드 구조:**```typescript// app/[page]/page.tsxexport const generateStaticParams = async () => { const totalCount = await getTotal.. 2025. 10. 2. 이전 1 2 3 4 ··· 12 다음