dev + it dev ops db uuid UUID Benchmark WarThis month’s PGSQL Phriday #015 topic is about UUIDs, hosted by Lætitia Avrot. Lætitia has called for a debate. No, no, no. I say let’s have an all-out war. A benchmark war. I have deci… wono | discuss | tweet + it dev react Failed form propType: You provided a `value` prop to a form field without an `onChange` handlerWhen I load my react app I get this error in the console. Warning: Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only f... wono | discuss | tweet + it dev nextjs react-query Next.js와 React Query로 SSR 사용하기Next.js와 React Query로 SSR 사용하기 wono | discuss | tweet + it dev nextjs react-query Next.js app router에서 React Query 사용하면서 고민했던 것들지난 글에서 react-query의 hydrate, dehydrate을 통해 서버에서 prefetching 한 데이터 사용하는 방법에 대해서 살펴보았습니다. 서버에서 prefetching 한 데이터 사용하기 오늘은 조금 실용적으로 Next.js 13, 14 버전의 app router에서 react-query를 어떻게 사용하고 세팅하면 좋을지 고민했던 내용에 대해서 이야기해보도록 하겠습니다. 해당 글은 23년 10월에 메이저 버전 업데이트된, Next.js 14와 React-Query 5 를 기준으로 작성된 글입니다. 예시로 보여주는 코드는 저의 next-14-react-query repo에서 확인 할 수 있습니다. 제가 크게 고민했던 문제는 아래 세 가지입니다. Hydrate vs ReactQueryStreamedHydration 두 가지 API 중에 어떤 것을 채택할까? Hydration API 사용 시에 RSC, RCC 모두에서 깔끔한 코드를 유지하려면 queryOption은 … wono | discuss | tweet + it dev nextjs react-query How to Use React Query in Next.js Client ComponentsLearn how to integrate React Query in Next.js client components to improve your apps. Use React Query to handle data fetching, mutations, and revalidation. wono | discuss | tweet + it dev nextjs react-query Type-Safe Fetch with Next.js, Strapi, and OpenAPIThis blog post will teach you how to achieve type safety in a front-end application used for your Strapi backend. You can accomplish this with just a few lines of code using a REST API and the fetch… wono | discuss | tweet + it dev nextjs jest Next.js with Typescript 프로젝트 테스트 코드 작성하기(jest, testing-library/react)1. 현재 프로젝트 구성Next.js App router 사용TypescriptEslint 2. 테스트 툴 선택Jest 와 Testing Library 를 사용하기로 결정 3. 세팅1) Testing Libray React 패키지 설치(참고 : Installation - With Typescript)npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom 2) Jest (React) 패키지 설치(참고: Testing React Apps - Setup With Create React App)npm install --save-dev jest react-test-renderer (참고: Nex.. wono | discuss | tweet + it dev react [React] <Input>의 value에 접근하기React에서 <Input>의 value에 접근하는 방법 wono | discuss | tweet + it dev nextjs react-error-boundary [React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드📒 ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드잘 만든 Errorboundary백개의 try-catch 안 부럽다.프론트 개발을 계속하다 보니 다양한 상황을 마주치게 되었고, 그에 따른 적절한 화면 표현의 중요성을 점차 느껴갔습니다.대표적으로 서버 데이터에 대한 로딩과 에러 처리가 있죠.끊임없이 사용해 보고 개선해 보니 1년이 지난 지금에서야 어느 정도 감이 잡히는 거 같아 그 방법을 공유해보려 합니다.이 글은 실제 서비스에서의 적용 방법에 대해 설명하는 글이기 때문에 ErrorBoundary와 Suspense에 대한 개념은 아래 글을 참조해 주세요.ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법Suspense을 사용해 선.. wono | discuss | tweet + it dev nextjs error Understand Error Handling in Modern Next.jsWe cover how to handle errors on both the client and server sides, explaining error handling and its process and the types of errors specific to Next.js apps. wono | discuss | tweet + it dev nextjs error Next.js 에러 핸들링#next.js | Next.js 에러 핸들링을 위해 루트에 error.tsx파일을 생성했습니다. 특정페이지에서 서버 컴포넌트를 만든 후 `throw new Error` 를 통해 에... wono | discuss | tweet + it dev typescript unused Unused underscore variables not being ignored by lint rules · Issue #19614 · microsoft/TypeScriptTypeScript Version: 2.7.0-dev.20171031, 2.6.1 (Regression from 2.5.3) Expected behavior: Variables with names that begin with an underscore do not cause an error if not used. Actual behavior: components/panel/panel.ts(22,11): error TS613... wono | discuss | tweet + it dev react report print React 특정 컴포넌트 프린트하기(한 장/여러 장)회사에서 개발한 기능 중 환자의 리포트를 프린트하는 기능이 있었다. 전체 화면이 아니라 리포트 부분만 프린트해야 해서 ReactToPrint 라이브러리를 사용했다. wono | discuss | tweet + it dev nextjs auth Authentication Best Practices in Next.js: Middleware vs. Page-Level ApproachesAuthentication is a cornerstone of modern web development. With frameworks like Next.js, developers are equipped with powerful tools to manage authentication seamlessly. However, choosing the right… wono | discuss | tweet + it dev nestjs naming file naming in nest.jsThis question is about code styling in Nestjs. This framework suggests file naming lowercase letters and across the dot. Example: file user.service.ts export class UserService { } another file imp... wono | discuss | tweet + it dev typescript export Avoid Export Default | TypeScript Deep Dive wono | discuss | tweet + it dev nestjs naming NestJS - 네이밍 규칙NestJS는 일반적으로 아래와 같은 규칙을 따른다. 1. 파일명은 .으로 연결하고, 둘 이상의 단어로 구성되어 있을 시 -로 연결 hello.controller.ts my-first.controller.ts 2. 클래스명은 카멜 케이스 사용 HelloController MyFirstController 3. 같은 디렉터리에 있는 클래스의 경우 index.ts 사용 // index.ts 미사용 import { HelloController } from './contrllers/hello.controller' import { MyFirstController } from './contrllers/my-first.controller' // index.ts 사용 import { HelloController, MyF.. wono | discuss | tweet + it dev react-query 6. React Query가 필요한 이유나는 React Query를 좋아한다. React Query가 React앱에서 비동기 상태를 다루는 방식을 단순화하기 때문이다. 하지만 가끔 서버에서 데이터를 페칭해오는 것처럼 "간단한" 작업에는 React Query가 필요하지 않다고 주장하는 글들을 볼 수 있다.React Query가 제공하는 모든 추가 기능이 필요한 것은 아니니까, useEffect 안에서 fetch를 사용하는 것만으로도 충분할 때 굳이 서드파티 라이브러리를 추가하고 싶지 않다는 것이다. 이는 어느 정도 맞는 말이다.React Query는 캐싱, retry, polling, 데이터 동기화, prefetching 등 많은 기능을 제공한다.이러한 기능들이 필요하지 않다면 괜찮지만, 그렇다고 해서 React Query를 사용하지 말아야 한.. wono | discuss | tweet + it dev react state 어떤 상황에서 Zustand와 Jotai를 선택해야 할까?Frontend, React 클라이언트 상태 관리 도구 선택 가이드: Zustand vs Jotai wono | discuss | tweet + it dev typescript javascript TypeScript compile and keep commentsI like to have my comments intact in the resulting javascript file, by default the compiler removes them. Is there a tsc parameter for that? (The use case is to keep /// reference path's = ... for wono | discuss | tweetNext
+ it dev ops db uuid UUID Benchmark WarThis month’s PGSQL Phriday #015 topic is about UUIDs, hosted by Lætitia Avrot. Lætitia has called for a debate. No, no, no. I say let’s have an all-out war. A benchmark war. I have deci… wono | discuss | tweet
+ it dev react Failed form propType: You provided a `value` prop to a form field without an `onChange` handlerWhen I load my react app I get this error in the console. Warning: Failed form propType: You provided a value prop to a form field without an onChange handler. This will render a read-only f... wono | discuss | tweet
+ it dev nextjs react-query Next.js와 React Query로 SSR 사용하기Next.js와 React Query로 SSR 사용하기 wono | discuss | tweet
+ it dev nextjs react-query Next.js app router에서 React Query 사용하면서 고민했던 것들지난 글에서 react-query의 hydrate, dehydrate을 통해 서버에서 prefetching 한 데이터 사용하는 방법에 대해서 살펴보았습니다. 서버에서 prefetching 한 데이터 사용하기 오늘은 조금 실용적으로 Next.js 13, 14 버전의 app router에서 react-query를 어떻게 사용하고 세팅하면 좋을지 고민했던 내용에 대해서 이야기해보도록 하겠습니다. 해당 글은 23년 10월에 메이저 버전 업데이트된, Next.js 14와 React-Query 5 를 기준으로 작성된 글입니다. 예시로 보여주는 코드는 저의 next-14-react-query repo에서 확인 할 수 있습니다. 제가 크게 고민했던 문제는 아래 세 가지입니다. Hydrate vs ReactQueryStreamedHydration 두 가지 API 중에 어떤 것을 채택할까? Hydration API 사용 시에 RSC, RCC 모두에서 깔끔한 코드를 유지하려면 queryOption은 … wono | discuss | tweet
+ it dev nextjs react-query How to Use React Query in Next.js Client ComponentsLearn how to integrate React Query in Next.js client components to improve your apps. Use React Query to handle data fetching, mutations, and revalidation. wono | discuss | tweet
+ it dev nextjs react-query Type-Safe Fetch with Next.js, Strapi, and OpenAPIThis blog post will teach you how to achieve type safety in a front-end application used for your Strapi backend. You can accomplish this with just a few lines of code using a REST API and the fetch… wono | discuss | tweet
+ it dev nextjs jest Next.js with Typescript 프로젝트 테스트 코드 작성하기(jest, testing-library/react)1. 현재 프로젝트 구성Next.js App router 사용TypescriptEslint 2. 테스트 툴 선택Jest 와 Testing Library 를 사용하기로 결정 3. 세팅1) Testing Libray React 패키지 설치(참고 : Installation - With Typescript)npm install --save-dev @testing-library/react @testing-library/dom @types/react @types/react-dom 2) Jest (React) 패키지 설치(참고: Testing React Apps - Setup With Create React App)npm install --save-dev jest react-test-renderer (참고: Nex.. wono | discuss | tweet
+ it dev nextjs react-error-boundary [React] ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드📒 ErrorBoundary & Suspense, 거의 완벽한 사용방법 가이드잘 만든 Errorboundary백개의 try-catch 안 부럽다.프론트 개발을 계속하다 보니 다양한 상황을 마주치게 되었고, 그에 따른 적절한 화면 표현의 중요성을 점차 느껴갔습니다.대표적으로 서버 데이터에 대한 로딩과 에러 처리가 있죠.끊임없이 사용해 보고 개선해 보니 1년이 지난 지금에서야 어느 정도 감이 잡히는 거 같아 그 방법을 공유해보려 합니다.이 글은 실제 서비스에서의 적용 방법에 대해 설명하는 글이기 때문에 ErrorBoundary와 Suspense에 대한 개념은 아래 글을 참조해 주세요.ErrorBoundary를 통한 선언적인 에러 핸들링, react-query를 이용한 재호출 방법Suspense을 사용해 선.. wono | discuss | tweet
+ it dev nextjs error Understand Error Handling in Modern Next.jsWe cover how to handle errors on both the client and server sides, explaining error handling and its process and the types of errors specific to Next.js apps. wono | discuss | tweet
+ it dev nextjs error Next.js 에러 핸들링#next.js | Next.js 에러 핸들링을 위해 루트에 error.tsx파일을 생성했습니다. 특정페이지에서 서버 컴포넌트를 만든 후 `throw new Error` 를 통해 에... wono | discuss | tweet
+ it dev typescript unused Unused underscore variables not being ignored by lint rules · Issue #19614 · microsoft/TypeScriptTypeScript Version: 2.7.0-dev.20171031, 2.6.1 (Regression from 2.5.3) Expected behavior: Variables with names that begin with an underscore do not cause an error if not used. Actual behavior: components/panel/panel.ts(22,11): error TS613... wono | discuss | tweet
+ it dev react report print React 특정 컴포넌트 프린트하기(한 장/여러 장)회사에서 개발한 기능 중 환자의 리포트를 프린트하는 기능이 있었다. 전체 화면이 아니라 리포트 부분만 프린트해야 해서 ReactToPrint 라이브러리를 사용했다. wono | discuss | tweet
+ it dev nextjs auth Authentication Best Practices in Next.js: Middleware vs. Page-Level ApproachesAuthentication is a cornerstone of modern web development. With frameworks like Next.js, developers are equipped with powerful tools to manage authentication seamlessly. However, choosing the right… wono | discuss | tweet
+ it dev nestjs naming file naming in nest.jsThis question is about code styling in Nestjs. This framework suggests file naming lowercase letters and across the dot. Example: file user.service.ts export class UserService { } another file imp... wono | discuss | tweet
+ it dev nestjs naming NestJS - 네이밍 규칙NestJS는 일반적으로 아래와 같은 규칙을 따른다. 1. 파일명은 .으로 연결하고, 둘 이상의 단어로 구성되어 있을 시 -로 연결 hello.controller.ts my-first.controller.ts 2. 클래스명은 카멜 케이스 사용 HelloController MyFirstController 3. 같은 디렉터리에 있는 클래스의 경우 index.ts 사용 // index.ts 미사용 import { HelloController } from './contrllers/hello.controller' import { MyFirstController } from './contrllers/my-first.controller' // index.ts 사용 import { HelloController, MyF.. wono | discuss | tweet
+ it dev react-query 6. React Query가 필요한 이유나는 React Query를 좋아한다. React Query가 React앱에서 비동기 상태를 다루는 방식을 단순화하기 때문이다. 하지만 가끔 서버에서 데이터를 페칭해오는 것처럼 "간단한" 작업에는 React Query가 필요하지 않다고 주장하는 글들을 볼 수 있다.React Query가 제공하는 모든 추가 기능이 필요한 것은 아니니까, useEffect 안에서 fetch를 사용하는 것만으로도 충분할 때 굳이 서드파티 라이브러리를 추가하고 싶지 않다는 것이다. 이는 어느 정도 맞는 말이다.React Query는 캐싱, retry, polling, 데이터 동기화, prefetching 등 많은 기능을 제공한다.이러한 기능들이 필요하지 않다면 괜찮지만, 그렇다고 해서 React Query를 사용하지 말아야 한.. wono | discuss | tweet
+ it dev react state 어떤 상황에서 Zustand와 Jotai를 선택해야 할까?Frontend, React 클라이언트 상태 관리 도구 선택 가이드: Zustand vs Jotai wono | discuss | tweet
+ it dev typescript javascript TypeScript compile and keep commentsI like to have my comments intact in the resulting javascript file, by default the compiler removes them. Is there a tsc parameter for that? (The use case is to keep /// reference path's = ... for wono | discuss | tweet