dev + it dev nextjs ssr Upgrading: Migrating from Vite | Next.jsLearn how to migrate your existing React application from Vite to Next.js. wono | discuss | tweet + it dev nextjs api error feature request: api route global error handling · vercel/next.js · Discussion #49984https://github.com/y-nk/nonorepo/blob/69b8cac445c72885c6cfd5f8e7eff90deb2b6a05/next-utils/src/catchAll.ts#L92 wono | discuss | tweet + it dev typscript namespace Quick Start Typescript ~ 8장 정리📖 Quick Start Typescript 을 읽고, 간단히 몰랐던 부분이나 중요하다고 생각되는 부분을 작성 8장 모듈📝253p. 모듈 필요성 유지보수 전역 스코프 오염 방지 재사용성 모듈러 프로그래밍 기반 과정 모듈 식별 모듈 분리 선언 외부 공개 📝254p. 내부 모듈, 외부 모듈 차이타입스크립트 1.5부터 Namespce라는 특징과 ES wono | discuss | tweet + 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 | tweetNext
+ it dev nextjs ssr Upgrading: Migrating from Vite | Next.jsLearn how to migrate your existing React application from Vite to Next.js. wono | discuss | tweet
+ it dev nextjs api error feature request: api route global error handling · vercel/next.js · Discussion #49984https://github.com/y-nk/nonorepo/blob/69b8cac445c72885c6cfd5f8e7eff90deb2b6a05/next-utils/src/catchAll.ts#L92 wono | discuss | tweet
+ it dev typscript namespace Quick Start Typescript ~ 8장 정리📖 Quick Start Typescript 을 읽고, 간단히 몰랐던 부분이나 중요하다고 생각되는 부분을 작성 8장 모듈📝253p. 모듈 필요성 유지보수 전역 스코프 오염 방지 재사용성 모듈러 프로그래밍 기반 과정 모듈 식별 모듈 분리 선언 외부 공개 📝254p. 내부 모듈, 외부 모듈 차이타입스크립트 1.5부터 Namespce라는 특징과 ES wono | discuss | tweet
+ 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