dev + it dev fe 작게 시작하는 성능 개선 wono | discuss | tweet + it dev nextjs swr React-Query vs SWR블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다... wono | discuss | tweet + it dev nextjs swr API – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. wono | discuss | tweet + it dev nextjs swr swr compared to @tanstack/react-query - Peterbe.comComparing swr compared to @tanstack/react-query for doing client-side data fetching in a React app. wono | discuss | tweet + it dev nextjs swr swr 에서 react-query 전환기 | 네이버페이 기술블로그안녕하세요. 금융 FE의 김범준입니다. 새로 팀에 입사한 후, 새로운 프로젝트를 시작하는데에 참여하게 ... wono | discuss | tweet + it dev nextjs cache NextJS cache patterns for server actions wono | discuss | tweet + it dev vscode prettier Prettier 상세 설정 - .Prettierrc 설정 파일 사용Prettier는 크게 3가지 방법으로 설정할 수 있다.첫 번째 방법은 Prettier 명령어를 실행할 때 커맨드 라인 옵션으로 넘기는 방법이다. 일회성 설정을 할 때는 간편하게 쓸 수 있지만, 설정할 항목이 많아지면 오히려 작성하기 어렵고 오타가 날 확률이 높다.Co wono | discuss | tweet + it dev nextjs react React와 Next.js 업그레이드 방법: React 19 호환성 확인 및 의존성 충돌 해결 가이드React 19 업그레이드 시 발생할 수 있는 의존성 충돌을 해결하고, Next.js 15.1의 새로운 기능과 호환성을 유지하는 방법을 알아봅니다. wono | discuss | tweet + it dev git 커밋 메시지 템플릿 설정하고, 짱편하게 커밋하기커밋 컨벤션(commit convention)프로젝트 참여자들이 일관적인 커밋 메시지를 작성하기 위한 규칙, 가이드라인을 의미한다.1. 가독성 향상으로 작업 내용 파악하기 쉬움 (커뮤니케이션 효율 증대)2. 변경 이력 추적 용이 Conventional CommitsA specification for adding human and machine readable meaning to commit messageswww.conventionalcommits.org 위 사이트에서는 커밋 메세지를 구성하는 방법을 아래와 같이 요약하고 있다: [optional body][optional footer] 1. 변경 사항 유형으로, 해당 내용만 봐도 어떤 커밋의 내용인지 확인하기 위해 명확하게 작성해야한다.feat새로운 .. wono | discuss | tweet + it dev nodejs nodemailer Sending mail with nodemailer to office@company.ro addresslet transporter = nodemailer.createTransport({ service: '?', auth: { user: 'office@company.ro', pass: 'passHere' } }); This is the code I'm using. Earlier, I was sendin... wono | discuss | tweet + it dev nodejs nodemailer 사용자에게 이메일 전송하기 (nodemailer)nodemailer를 사용해 사용자에게 이메일 알림이나 사용자 인증 메일을 보내야 하는 경우의 과정을 다뤄보겠습니다. nodemailer 모듈은 발신자와 수신자 정보, 보낼 내용만 설정하여 간편하게 서드파티 앱에서 이메일을 보낼 수 있게 도와줍니다 wono | discuss | tweet + it dev nodejs nodemailer [Node.js] nodemailer - 나의 이메일 계정 사용하기 회원 등록 시, 이메일 인증을 하는 플로우가 필요했다. 가장 많이 쓴다는 nodemailer을 사용하기로 했다. 예제를 따라하니 gmail 계정 연동하기까지는 참 쉬웠다. 문제는 보내는 사람의 이메일 주소가 회사 계정이어야된다는 점이었다. 왜 이런 예제는 없지요 wono | discuss | tweet + it dev react query TanStack Query(React Query) 직접 만들어보기 | GeekNews안녕하세요.TanStack Query를 직접 구현해보는 프로젝트를 만들게 되어 공유해봅니다.실제 TanStack Query 코드와 100% 일치하지 않지만전체적인 동작 흐름을 이해하는 데 도움이 되시기를 바랍니다.구현해 보는 기능은 아래와 같습니다.외부 라이브러리에 의존하지 않는 core 영역(QueryClient, QueryCache, Query, Que wono | discuss | tweet + it dev nextjs cache [Next.js] use cache - A new way to Cache in Next.js 15Next.js Caching 참고) unstable_cache는 archive 되었고 이를 대신하는 실험중인 기능입니다. This API is currently experimental and subject to change. use cache는 캐시할 컴포넌트, 함수 또는 파일을 지정합니다. 파일 상단에 사용하여 파일의 모든 함수를 캐시할 수 있음을 나타내거나 함수 상단에 인라인으로 사용하여 함수를 캐시할 수 있는 것으로 표시할 수 있습니다. 이것은 실험적인 Next.js 기능이며, use client나 use server와 같은 native React 기능이 아닙니다. Next.config.ts 파일에서 dynamicIO 플래그를 사용하여 use cache 지시어에 대한 지원을 활성화할 수 있습니다.. wono | discuss | tweet + it dev react devtools React 개발자 도구 활용하기 (Dev Tools)React Dev Tools 제대로 활용하여 좀 더 효율적인 개발을 해보자 🛠️ wono | discuss | tweet + it dev react hook form usefieldarray useFieldArray 사용하기서비스 특성 상 사용자에게 입력받는 form들이 많고, 같은 form을 여러개 중첩해서 받는 경우가 있다. 이 때 useFieldArray를 사용해서 쉽게 관리해보자! wono | discuss | tweet + it dev react rerender 리액트 리렌더링 최적화 방법 조사리액트 렌더링의 개념과 리렌더링 발생 조건, 리렌더링 최적화 방법을 소개합니다. wono | discuss | tweet + it dev react input rerender react-hook-from 에 대한 고찰react-hook-from 을 왜 사용하며, 사용하면서 알아야할 개념들 wono | discuss | tweet + it dev shadcnui bug calendar [bug]: add calender doesn't work · Issue #5671 · shadcn-ui/uiDescribe the bug Adding calender doesn't work.It requires to install the dependencies but i have installed all the dependencies. I think this error might occurring because of new date-fns versions 4.1.0 Affected component/components Cale... wono | discuss | tweet + it dev javascript new date 자바스크립트 Date / +new Date ?.. : 네이버블로그 wono | discuss | tweetNext
+ it dev nextjs swr React-Query vs SWR블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다... wono | discuss | tweet
+ it dev nextjs swr API – SWRSWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again. wono | discuss | tweet
+ it dev nextjs swr swr compared to @tanstack/react-query - Peterbe.comComparing swr compared to @tanstack/react-query for doing client-side data fetching in a React app. wono | discuss | tweet
+ it dev nextjs swr swr 에서 react-query 전환기 | 네이버페이 기술블로그안녕하세요. 금융 FE의 김범준입니다. 새로 팀에 입사한 후, 새로운 프로젝트를 시작하는데에 참여하게 ... wono | discuss | tweet
+ it dev vscode prettier Prettier 상세 설정 - .Prettierrc 설정 파일 사용Prettier는 크게 3가지 방법으로 설정할 수 있다.첫 번째 방법은 Prettier 명령어를 실행할 때 커맨드 라인 옵션으로 넘기는 방법이다. 일회성 설정을 할 때는 간편하게 쓸 수 있지만, 설정할 항목이 많아지면 오히려 작성하기 어렵고 오타가 날 확률이 높다.Co wono | discuss | tweet
+ it dev nextjs react React와 Next.js 업그레이드 방법: React 19 호환성 확인 및 의존성 충돌 해결 가이드React 19 업그레이드 시 발생할 수 있는 의존성 충돌을 해결하고, Next.js 15.1의 새로운 기능과 호환성을 유지하는 방법을 알아봅니다. wono | discuss | tweet
+ it dev git 커밋 메시지 템플릿 설정하고, 짱편하게 커밋하기커밋 컨벤션(commit convention)프로젝트 참여자들이 일관적인 커밋 메시지를 작성하기 위한 규칙, 가이드라인을 의미한다.1. 가독성 향상으로 작업 내용 파악하기 쉬움 (커뮤니케이션 효율 증대)2. 변경 이력 추적 용이 Conventional CommitsA specification for adding human and machine readable meaning to commit messageswww.conventionalcommits.org 위 사이트에서는 커밋 메세지를 구성하는 방법을 아래와 같이 요약하고 있다: [optional body][optional footer] 1. 변경 사항 유형으로, 해당 내용만 봐도 어떤 커밋의 내용인지 확인하기 위해 명확하게 작성해야한다.feat새로운 .. wono | discuss | tweet
+ it dev nodejs nodemailer Sending mail with nodemailer to office@company.ro addresslet transporter = nodemailer.createTransport({ service: '?', auth: { user: 'office@company.ro', pass: 'passHere' } }); This is the code I'm using. Earlier, I was sendin... wono | discuss | tweet
+ it dev nodejs nodemailer 사용자에게 이메일 전송하기 (nodemailer)nodemailer를 사용해 사용자에게 이메일 알림이나 사용자 인증 메일을 보내야 하는 경우의 과정을 다뤄보겠습니다. nodemailer 모듈은 발신자와 수신자 정보, 보낼 내용만 설정하여 간편하게 서드파티 앱에서 이메일을 보낼 수 있게 도와줍니다 wono | discuss | tweet
+ it dev nodejs nodemailer [Node.js] nodemailer - 나의 이메일 계정 사용하기 회원 등록 시, 이메일 인증을 하는 플로우가 필요했다. 가장 많이 쓴다는 nodemailer을 사용하기로 했다. 예제를 따라하니 gmail 계정 연동하기까지는 참 쉬웠다. 문제는 보내는 사람의 이메일 주소가 회사 계정이어야된다는 점이었다. 왜 이런 예제는 없지요 wono | discuss | tweet
+ it dev react query TanStack Query(React Query) 직접 만들어보기 | GeekNews안녕하세요.TanStack Query를 직접 구현해보는 프로젝트를 만들게 되어 공유해봅니다.실제 TanStack Query 코드와 100% 일치하지 않지만전체적인 동작 흐름을 이해하는 데 도움이 되시기를 바랍니다.구현해 보는 기능은 아래와 같습니다.외부 라이브러리에 의존하지 않는 core 영역(QueryClient, QueryCache, Query, Que wono | discuss | tweet
+ it dev nextjs cache [Next.js] use cache - A new way to Cache in Next.js 15Next.js Caching 참고) unstable_cache는 archive 되었고 이를 대신하는 실험중인 기능입니다. This API is currently experimental and subject to change. use cache는 캐시할 컴포넌트, 함수 또는 파일을 지정합니다. 파일 상단에 사용하여 파일의 모든 함수를 캐시할 수 있음을 나타내거나 함수 상단에 인라인으로 사용하여 함수를 캐시할 수 있는 것으로 표시할 수 있습니다. 이것은 실험적인 Next.js 기능이며, use client나 use server와 같은 native React 기능이 아닙니다. Next.config.ts 파일에서 dynamicIO 플래그를 사용하여 use cache 지시어에 대한 지원을 활성화할 수 있습니다.. wono | discuss | tweet
+ it dev react devtools React 개발자 도구 활용하기 (Dev Tools)React Dev Tools 제대로 활용하여 좀 더 효율적인 개발을 해보자 🛠️ wono | discuss | tweet
+ it dev react hook form usefieldarray useFieldArray 사용하기서비스 특성 상 사용자에게 입력받는 form들이 많고, 같은 form을 여러개 중첩해서 받는 경우가 있다. 이 때 useFieldArray를 사용해서 쉽게 관리해보자! wono | discuss | tweet
+ it dev react rerender 리액트 리렌더링 최적화 방법 조사리액트 렌더링의 개념과 리렌더링 발생 조건, 리렌더링 최적화 방법을 소개합니다. wono | discuss | tweet
+ it dev react input rerender react-hook-from 에 대한 고찰react-hook-from 을 왜 사용하며, 사용하면서 알아야할 개념들 wono | discuss | tweet
+ it dev shadcnui bug calendar [bug]: add calender doesn't work · Issue #5671 · shadcn-ui/uiDescribe the bug Adding calender doesn't work.It requires to install the dependencies but i have installed all the dependencies. I think this error might occurring because of new date-fns versions 4.1.0 Affected component/components Cale... wono | discuss | tweet