개요 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 = ..
Next13(fetch, middleware)를 작성하던 중 Next 13.4 출시와 함께 App Router 안정화 버전 출시 소식이 들려왔다. 이와 함께 Turbopack은 Alpha -> Beta로 넘어왔고, Server Actions라는 개념이 새로 생겼다. App Router App Router에서는 바뀐 폴더 구조와 함께 Layout, Server Components, Streaming이라는 개념에 대한 이해가 필요하다. 아래 글들에서 App Router에서 이해가 필요한 내용에 대해 소개했기 때문에 아래 글에서 확인해 보면 될 것 같다 Layout, Server Components Streaming Turbopack (Alpha -> Beta) Turbopack에 대해 다뤄본 적이 없기 때문..
https://vercel.com/blog/vercel-storage 이번 Vercel Ship에서 Storage에 대한 발표를 진행했다. 이번 발표에서 소개한 내용은 아래와 같다 - KV: Serverless Redis Solution - Postgres: Serverless SQL Database - Blob: S3와 같은 Cloud Solution 여기서 KV, Postgres, Blob에 대해 소개했지만 가장 관심 가는 부분은 Postgres였다. 유저 정보, 금융 거래와 같이 무결성이 중요한 데이터를 저장할 때는 RDB를 사용해야 한다. 하지만 인스턴스 구성을 필요로하는 MySQL은 부담될 때가 있다. 이런 상황을 Vercel도 알았는 지 프론트엔드와 호환성이 좋은 Serverless Datab..
https://bysxx.tistory.com/18 Next13을 알아보자 - 1 (Nested Layout, Server Components) Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?) 아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자 Layout (Nested Layout) 가장 눈이 bysxx.tistory.com 이전 Layout, Server Components에 이어 Next13에 추가된 여러 가지 Feature들을 계속 적어보고자 한다. Streaming? 기존 SSR의 flow를 생각해보면 아래와 같다. 1. Server(API)로 부터 Data를 가져옴 2. Server(Next.js)에서 HTML을 렌더링 ..
Next13을 공부하며 기존 가지고 있던 템플릿 코드를 Next13으로 업데이트했습니다. Next13에 새로 도입된 기능, 문법들이 전부 적용되지는 않았지만 차차 적용시키고 예시도 추가할 예정입니다. Next를 어느 정도 알고 계시면 문제없이 사용하실 수 있지만 Next 자체가 꽤 난이도 있는 프레임워크이기 때문에 Next를 어느정도 숙지하신 상태에서 사용하시면 좋을 것 같습니다! 사용된 스택 Next13 TypeScript TailwindCSS Zustand React Query https://github.com/bysxx/next13-ts-template-tailwind GitHub - bysxx/next-ts-template-tailwind: Next + TypeScript Template Next..
Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?) 아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자 Layout (Nested Layout) 가장 눈이 가는 기능은 Layout이다. Next, Nuxt를 둘 다 사용해 본 개발자들은 아마 분명 Next의 Layout 방식이 아쉬울 것이라고 생각할 것 같다. 하지만 레이아웃 기능이 생기면서 UI 공유에 대한 고민으로부터 조금 자유로워질 수 있을 것 같다. export default function DashboardLayout({ children, // will be a page or nested layout }: { children: React.ReactNode, }) { return..
농담반 진담반으로 리액트로 프론트엔드를 구성할 때 다른 스택은 양보해도 React-Query는 절대 양보하지 않는다.. 그래서 React-Query 소개와 함께 내가 사용하는 노하우를 공유하려고 한다. 개요 대부분의 프론트엔드는 비동기 상태 관리가 필요하다. 각자 다양한 방식으로 구성하겠지만 현재 가장 많이 사용되는 방식은 Redux일 것이라고 생각이 든다. 분명 Redux도 좋은 상태 관리 툴이지만 나는 비동기 상태 관리 스택으로 채택하지 않는다. 두 가지 정도 이유가 있는데 이유를 간단히 설명하자면 우선 Redux는 비동기에 특화된 스택이 아니기 때문에 비동기 처리에 도움을 크게 주지 못한다. 예를 들어 비동기 요청을 일정한 텀마다 보내야 한다면 Redux에서는 직접 구현해야 하지만 React-Que..
React에서 css in js를 다루는 여러 가지 방법이 있다. 그중 가장 선호되는 스택 두 개는 Tailwind CSS와 Styled-components이다. 항상 프로젝트를 시작할 때면 이 두 개를 고민하고는 한다. 각 스택의 장단점을 먼저 소개해보자면 Tailwind CSS Tailwind CSS는 클래스를 활용해 css를 적용시키는 방식으로 아래와 같이 코드를 짤 수 있다. // made by tailwind css 안녕하세요 // made by vanilla 안녕하세요 처음 보는 사람은 스타일 인라이닝보다 조금 간결하다는 점을 제외하면 장점을 잘 못 느낄 수도 있다. 하지만 :hover, @media와 같은 요소들은 인라이닝이 안되고 스타일시트를 따로 작성해야 한다. 이 경우 장점이 드러나게 ..
