블로그에서 next.js를 주로 다루고 있기도 하고, 조금이라도 이슈를 더 알리고 싶어 글을 작성하게 되었다. 관련 링크: https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g Server-Side Request Forgery in Server Actions### Impact A Server-Side Request Forgery (SSRF) vulnerability was identified in Next.js Server Actions by security researchers at Assetnote. If the `Host` header is modified, and the below conditi...github.com관..
front-end
Waku라는 프레임워크에 대한 문서를 읽고 직접 프레임워크를 써보며 가볍게 소개해보려고 한다. 큰 프로젝트 외에도 간단한 프로토타입이나 토이 프로젝트를 만들 일이 종종 생기곤 한다.그럴 때마다 Next.js가 익숙해 자주 집어 들기는 하지만 너무 무겁다는 생각이 들 때가 있다. 이런 생각을 하던 중 Waku의 존재를 알게 되었고 딱 나의 니즈에 맞는 가치관을 가지는 프레임워크였기 때문에 문서를 천천히 읽고 번역하고 사용기를 적어 보려고 한다. 주요 기능사용해 보기 전 문서에서 소개하는 피쳐들을 먼저 간단히 요약하자면 아래와 같다.렌더링- 프레임워크 내에서 서버 컴포넌트, 클라이언트 컴포넌트 모두 만들 수 있음- weaving patterns을 통해 두 컴포넌트를 혼용해서 사용할 수 있음.- SSR, S..
원문: https://mobileappcircular.com/where-is-the-virtual-dom-stored-in-react-41724bc09f4f 글을 읽다가 너무 좋은 글이 있어 번역 및 정리를 해보려고 한다. React를 공부하다 보면 Virtual DOM에 대한 얘기를 지겹도록 듣는다. jquery가 중심인 프론트엔드 판에서 React가 파이를 가져갈 수 있었던 건 Virtual DOM 덕분이다. 그렇기 때문에 React를 공부하거나 사용할 때 기술에 대한 언급을 자주 듣는 건 어찌 보면 당연하다. Why Virtual DOM? 기존에는 직접 DOM에 접근했기 때문에 수정할 때마다 리렌더링 되었다. 하지만 Virtual DOM을 사용해 수정사항을 모아서 최소한의 리렌더링으로 프론트엔드를..
React의 다음 버전은 18.3이 아니라 19라고 한다. React 19에서는 새로운 훅이 추가되는데, 이 훅은 data fetching, form 생산성 향상에 대한 내용이다. 이 두 주제는 프론트엔드에서는 굉장히 중요한 주제인데, React에서는 이 주제애 대한 생산성 향상을 위해 어떻게 접근했을지 알아보자. use(Promise) Suspense는 이제 리액트와 뗄 수 없는 기술 스택이 되어가고 있다. React-Query에서 제공하는 useSuspenseQuery라는 훅이 있긴 했지만, React에서 제공하는 Suspense를 관리 훅이 따로 없었다. 이름을 왜 'use'로 지었는 지는 모르겠지만, 훅은 심플하고 강력해 보인다. import { use } from 'react'; async fu..
감히 2024년 프론트엔드의 방향과 트렌드를 예측해보려고 한다. Next.js 2023년에도 이미 프론트엔드의 중심이 되어버린 프레임워크였지만, 2024년에는 더 자리를 잡을 것 같다. SSR,SSG 프레임워크들은 Next.js를 중심으로 계속 발전되고 있으며 이제는 프론트엔드에서 빼놓고 얘기할 수 없는 주제들이 되었다. 하지만 최근 Next.js에 대한 다양한 논쟁이 오고 가고 있다. "Why I Won't Use Next.js" "Why I'm Using Next.js." 모든 기술들이 그렇겠지만 분명 각 프레임워크들이 맞는 상황이 각각 존재할 것이다. 하지만 분명 Next.js가 정말 압도적으로 치고 나온 기술임에는 틀림없다. 여기에는 App router과 같이 Vercel이 개발자 경험을 지속적으..
이전에도 언급한 적이 있지만 React Query는 정말 좋은 비동기 처리 라이브러리이다. 하지만 Suspense와의 연동성이 좋지 않아 최근에는 자주 사용하지 않고 있었다. 저번 달에 React Query v5가 출시되었다. 이 버전에는 Suspense와의 연동은 물론이고 Next.js의 Streaming과의 연동성도 매우 좋아졌다. 이번 글에서는 React Query v5의 주요 변경점과 함께 Next.js과는 어떻게 연결 지어야 하는지 다뤄보려고 한다. One Function One Parameter React Query에 있는 모든 Hook, Method들은 이제 하나의 Parameter를 갖게된다. 여러 개의 Parameter를 갖던 경우에는 Object 형태로 받을 수 있게 바뀌었다. 이 부분..
Next.js 13이 나온 지 얼마 되지 않은 것 같은데 Next.js 14가 출시했다. 바뀐 내용은 아래와 같다. 1. Turbopack 2. Server Actions (안정화) 3. 부분 Prerendering Turbopack https://areweturboyet.com/ Are We Turbo Yet? No 91.1% of next dev tests are passing though✅ areweturboyet.com 큰 내용은 없고 Turbopack의 진행상황을 공유해 줬는데, 위 사이트에서 Turbopack의 테스트 코드 통과율을 확인할 수 있는데 현재 대부분의 테스트 코드를 통과한 상태인데 100% 통과하면 안정화 버전으로 이동된다고 한다. Server Actions (안정화) https:..
개요 Next.js 13의 구조에 대한 좋은 글을 읽어서 이 글을 내 생각과 함께 같이 정리해보려고 한다. 원문의 제목은 'Component Patterns in Next.js 13'인데, 이 글에서는 Next.js 13에 도입된 Server Component를 어떻게 사용하는 게 좋은 지에 대해 다루고 있다 Server Component? https://bysxx.tistory.com/18 먼저 Server Component에 대한 내용은 위 글에서 확인할 수 있는데, 간단히 요약하면 event handler나 hook과 같은 기능이 없는 컴포넌트를 개발할 때 사용할 수 있는 기능으로 번들 사이즈를 크게 줄일 수 있는데 이렇게 되면 UX에서 매우 중요한 요소인 초기 로딩 속도를 줄일 수 있게 된다. N..
9월 13일에 Next.js의 13.5 버전이 출시되었다. 사실 지금 13.5.4까지 나와있고 지금 다루기에는 조금 늦은 감이 있지만, 몇 주정도 토이 프로젝트에 적용해서 써보았는데 실제 체감되는 점도 좋은 정보가 될 수 있을 것 같아 바뀐 점과 함께 적어보려고 한다. 업데이트 방법 버전 업데이트를 위해서는 아래 커맨드를 입력하면 된다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest 개발자 경험 향상 - 로컬 서버를 실행 속도 22% 향상 - HMR 속도 25% 향상 로컬 서버 속도 먼저 Next 13.5.4에서 로컬 서버 실행 속도를 체크해 보면 이 정도로 나오는데, 이전 버전에는 서버 실행 속도가 나오지 않지만 같은..
리액트는 매우 자유로운 라이브러리로 꼽힌다. 그렇기 때문에 리액트가 나온 이후로 다양한 패턴들이 등장하였고 연구되고 있다. 다양한 패턴들이 있지만, 최근 많이 사용하고 있는 패턴인 Compound Components Pattern에 대해 소개해보려고 한다. 예시 import type { ReactNode } from 'react'; import Buttons from './Buttons'; import Comment from './Comment'; import Title from './Title'; interface Props { children: ReactNode; } const Post = ({ children }: Props) => { return {children}; }; Post.Title = ..
