it + 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 lang javascript 일반 함수와 화살표 함수의 차이점 이해하기이 블로그 포스트는 일반 함수와 화살표 함수의 차이점, 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점, 콜백 함수와 클로저의 개념을 다룹니다. 각 개념의 정의와 예제를 통해 이해를 돕고, 이를 적절히 활용하는 방법을 설명합니다. 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 ops aws rds uuidv7 Implement UUIDv7 in Amazon RDS for PostgreSQL using Trusted Language Extensions | Amazon Web ServicesUUID Version 7 (UUIDv7) was introduced to improve the randomness of UUIDv4. UUIDv7 encodes a Unix timestamp with millisecond precision in the first 48 bits of the UUID, meaning that UUIDv7 is time-based and sequential. Trusted Language Extensions (pg_tle) for PostgreSQL is a new open source development kit to help you build high performance extensions that run safely on PostgreSQL. In this post, we demonstrate how to create and install a Trusted Language Extension (TLE) using PL/Rust as the trusted language to generate a UUIDv7. We also take a deeper look into the underlying implementation of the extension. 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 ops db erd ☁️ ERD CLOUD - ERD 다이어그램을 온라인에서 그려보자ERD CLOUD 프론트엔드 작업을 하기전에 UI 와이어프레임을 그리는 과정은 중요하듯이, 백엔드에서도 데이터베이스 모델링 설계 과정은 매우 중요하다. 데이터베이스 모델링을 할 때 ERD 다이어그램 툴을 사용하는데, ERD 관련 소프트웨어는 대부분 유료이며 체험판 무료 버젼은 제약도 많고 대부분 연식이 좀 된 소프트웨어들이라서 디자인도 조금 올드하다. ERD(Entity Relationship Diagram) 문자 그대로 해석하면 '개체들의 관계를 다이어그램 형식으로 표현한 것' 이라고 볼 수 있고, 쉽게 정리하면 데이터베이스의 구조를 한눈에 파악할 수 있게 시각화한 것이다. [DB] 📚 데이터 모델링 개념 및 📈 ERD 다이어그램 그리는법 (1:N 관계) 데이터 모델링 이란? 데이터 모델링이란 정보시스.. 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 tool sts tip Eclipse is replacing editor window with new Search selectionWhen I search for a text string (or find references in workspace) in Eclipse (Version: Helios Service Release 1 Build id: 20100917-0705) I am able to double click on search results to open an editor wono | discuss | tweet + it lang trend “굳건한 1위” 가장 인기 있는 언어 자바스크립트…젯브레인 보고서젯브레인의 2024년 개발자 생태계 보고서에 따르면, 자바스크립트는 전 세계 개발자의 61%가 웹페이지를 만들 때 사용하면서 여전히 가장 인기 있는 프로그래밍 언어로 확인됐다. 파이썬(57%), HTML/CSS(51%), SQL(48%), 자바(46%), 타입스크립트(37%)가 뒤를 이었다. wono | discuss | tweet + it ops db del [DB] Delete가 Update보다 성능적으로 안좋은 이유? Delete 작업이 행을 실제로 제거하는 작업이므로 해당 행을 디스크에서 물리적으로 삭제해야 한다 반면에 Update 작업은 기존 행을 수정하고 새로운 데이터로 업데이트합니다. wono | discuss | tweet + it dev react report print React 특정 컴포넌트 프린트하기(한 장/여러 장)회사에서 개발한 기능 중 환자의 리포트를 프린트하는 기능이 있었다. 전체 화면이 아니라 리포트 부분만 프린트해야 해서 ReactToPrint 라이브러리를 사용했다. wono | discuss | tweet + it tool vscode postman postman 보다 훨씬 좋은 vscode extension rest client wono | discuss | tweet + it tool vscode postman [VSCode] 💽 Thunder Client (포스트맨 대신 이거 쓰자)보통 웹개발할 때 API 요청에 대한 결과를 체계적으로 확인하기 위해 포스트맨(Postman) 을 많이 들 사용한다. Postman은 API 개발, 테스팅, 문서화 및 모니터링을 위한 인기있는 플랫폼이다. 개발자들이 API 요청을 생성하고, 응답을 테스트하며, 협업을 통해 API를 관리할 수 있게 도와준다. 크롤링, RESTful 서비스, GraphQL 등 다양한 유형의 API와 커뮤니케이션할 때 유용한 도구로 사용된다. 하지만 단순히 API를 테스트 하는 목적으로서 포스트맨을 사용한다면 너무 기능이 과하고 무겁다. 따라서 VSCode 에디터 내에서 간단한 조작만으로 API 테스트를 빠르고 수월하게 할 수 있는 익스텐션을 소개해본다. Thunder Client Thunder Client 는 Postman.. 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 | tweetNext
+ 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 lang javascript 일반 함수와 화살표 함수의 차이점 이해하기이 블로그 포스트는 일반 함수와 화살표 함수의 차이점, 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이점, 콜백 함수와 클로저의 개념을 다룹니다. 각 개념의 정의와 예제를 통해 이해를 돕고, 이를 적절히 활용하는 방법을 설명합니다. 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 ops aws rds uuidv7 Implement UUIDv7 in Amazon RDS for PostgreSQL using Trusted Language Extensions | Amazon Web ServicesUUID Version 7 (UUIDv7) was introduced to improve the randomness of UUIDv4. UUIDv7 encodes a Unix timestamp with millisecond precision in the first 48 bits of the UUID, meaning that UUIDv7 is time-based and sequential. Trusted Language Extensions (pg_tle) for PostgreSQL is a new open source development kit to help you build high performance extensions that run safely on PostgreSQL. In this post, we demonstrate how to create and install a Trusted Language Extension (TLE) using PL/Rust as the trusted language to generate a UUIDv7. We also take a deeper look into the underlying implementation of the extension. 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 ops db erd ☁️ ERD CLOUD - ERD 다이어그램을 온라인에서 그려보자ERD CLOUD 프론트엔드 작업을 하기전에 UI 와이어프레임을 그리는 과정은 중요하듯이, 백엔드에서도 데이터베이스 모델링 설계 과정은 매우 중요하다. 데이터베이스 모델링을 할 때 ERD 다이어그램 툴을 사용하는데, ERD 관련 소프트웨어는 대부분 유료이며 체험판 무료 버젼은 제약도 많고 대부분 연식이 좀 된 소프트웨어들이라서 디자인도 조금 올드하다. ERD(Entity Relationship Diagram) 문자 그대로 해석하면 '개체들의 관계를 다이어그램 형식으로 표현한 것' 이라고 볼 수 있고, 쉽게 정리하면 데이터베이스의 구조를 한눈에 파악할 수 있게 시각화한 것이다. [DB] 📚 데이터 모델링 개념 및 📈 ERD 다이어그램 그리는법 (1:N 관계) 데이터 모델링 이란? 데이터 모델링이란 정보시스.. 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 tool sts tip Eclipse is replacing editor window with new Search selectionWhen I search for a text string (or find references in workspace) in Eclipse (Version: Helios Service Release 1 Build id: 20100917-0705) I am able to double click on search results to open an editor wono | discuss | tweet
+ it lang trend “굳건한 1위” 가장 인기 있는 언어 자바스크립트…젯브레인 보고서젯브레인의 2024년 개발자 생태계 보고서에 따르면, 자바스크립트는 전 세계 개발자의 61%가 웹페이지를 만들 때 사용하면서 여전히 가장 인기 있는 프로그래밍 언어로 확인됐다. 파이썬(57%), HTML/CSS(51%), SQL(48%), 자바(46%), 타입스크립트(37%)가 뒤를 이었다. wono | discuss | tweet
+ it ops db del [DB] Delete가 Update보다 성능적으로 안좋은 이유? Delete 작업이 행을 실제로 제거하는 작업이므로 해당 행을 디스크에서 물리적으로 삭제해야 한다 반면에 Update 작업은 기존 행을 수정하고 새로운 데이터로 업데이트합니다. wono | discuss | tweet
+ it dev react report print React 특정 컴포넌트 프린트하기(한 장/여러 장)회사에서 개발한 기능 중 환자의 리포트를 프린트하는 기능이 있었다. 전체 화면이 아니라 리포트 부분만 프린트해야 해서 ReactToPrint 라이브러리를 사용했다. wono | discuss | tweet
+ it tool vscode postman [VSCode] 💽 Thunder Client (포스트맨 대신 이거 쓰자)보통 웹개발할 때 API 요청에 대한 결과를 체계적으로 확인하기 위해 포스트맨(Postman) 을 많이 들 사용한다. Postman은 API 개발, 테스팅, 문서화 및 모니터링을 위한 인기있는 플랫폼이다. 개발자들이 API 요청을 생성하고, 응답을 테스트하며, 협업을 통해 API를 관리할 수 있게 도와준다. 크롤링, RESTful 서비스, GraphQL 등 다양한 유형의 API와 커뮤니케이션할 때 유용한 도구로 사용된다. 하지만 단순히 API를 테스트 하는 목적으로서 포스트맨을 사용한다면 너무 기능이 과하고 무겁다. 따라서 VSCode 에디터 내에서 간단한 조작만으로 API 테스트를 빠르고 수월하게 할 수 있는 익스텐션을 소개해본다. Thunder Client Thunder Client 는 Postman.. 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