분류 전체보기

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..

Next13 https://bysxx.tistory.com/18 Next13을 알아보자 - 1 (Nested Layout, Server Components) Next13에 적용된 내용을 정리하면 위와 같다. (흠 근데 패션도 그렇고 어디서 많이 본듯한데..?) 아무튼 핵심적인 변경 사항들을 같이 공부해 보며 하나씩 체크해 보자 Layout (Nested Layout) 가장 눈이 bysxx.tistory.com https://bysxx.tistory.com/19 Next13 + TypeScript Template 공유 (Next13 쉽게 시작하는법) Next13을 공부하며 기존 가지고 있던 템플릿 코드를 Next13으로 업데이트했습니다. Next13에 새로 도입된 기능, 문법들이 전부 적용되지는 않았지만..

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..

Tailwind CSS 3월에는 Tailwind CSS를 사용할 일이 많았다. 상황에 따라 다를 것 같지만 기존에는 보통 Styled-Components를 선호했었는데 지금은 tailwind css가 좀 더 좋다고 느낀다. Styled, className을 어떻게 섞어서 써야 할지 고민할 필요가 없어 개발 속도가 훨씬 빨랐던 것 같다. 관련글: https://bysxx.tistory.com/15 Tailwind CSS vs Styled-components 비교 React에서 css in js를 다루는 여러가지 방법이 있다. 그 중 가장 선호되는 스택 두 개는 Tailwind CSS와 Styled-components이다. 항상 프로젝트를 시작할 때면 이 두개를 고민하고는 한다. 각 스택의 장단점 bysxx..

농담반 진담반으로 리액트로 프론트엔드를 구성할 때 다른 스택은 양보해도 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와 같은 요소들은 인라이닝이 안되고 스타일시트를 따로 작성해야 한다. 이 경우 장점이 드러나게 ..

2월은 정말 빨리 지나간 것 같다. 2월은 복학 준비와 함께 사이드 프로젝트를 진행했고 이와 관련해서 적어보려고 한다. 먼저 가볍게 속초를 다녀온 이야기를 해보자면 이전 회사 동료들과 함께 강원도로 여행을 다녀왔다. 개발자들끼리 만나면 무슨 얘기를 할지 궁금한 사람이 있을지 모르겠지만 사실 별 다를 게 없다 각자 회사 이슈를 공유하고 공부하고 있는 거에 대해 얘기하는 정도를 제외하면 그냥 정말 똑같은 얘기를 한다. 재택근무를 한다면 한 1주일은 강원도에서 바다를 보면서 일하는 것도 괜찮을 것 같다는 생각이 들었다. 새 프로젝트 아무튼 다시 개발 얘기를 해보자면 학교 사람들과 새로운 프로젝트를 시작하게 되었다. 맨 처음 이 프로젝트를 마주쳤을 때 학부생들끼리 진행한 프로젝트라고 믿기 힘들 정도로 꽤 고도화..