kzh4295 kzh4295

제목Storybook | React & TypescriptInteraction testing in Storybook출처https://medium.com/@xiaominzhu/storybook-react-typescript-ac667cb54eedhttps://medium.com/storybookjs/interaction-testing-in-storybook-32935c657b39요약Next.js 프로젝트 만들기 : 아직 만들지 않았다면 create-next-app다음 명령을 사용하여 Next.js 앱을 만들어 시작하세요.Storybook 설정 : 스크립트를 사용하여 Next.js 프로젝트 내에서 Storybook을 초기화하고 sb initWebpack 5와의 호환성을 보장합니다.Next.js 페이지에 대한..

제목This Free React Library Will Blow Your Mind 😮— A Total Game-Changer!12 Awesome Next.js Libraries to Supercharge Your Development!출처https://medium.com/@letscodefuture/this-free-react-library-will-blow-your-mind-a-total-game-changer-15054bee0acbhttps://www.reactbits.dev/backgrounds/grid-motionhttps://medium.com/lets-code-future/12-awesome-next-js-libraries-to-supercharge-your-development-38632f..

제목“How to tackle Docker and Kubernetes” for Frontend, tutorial includedKubernetes Deployment: Connect Your Front End to Your Back End With Nginx출처https://medium.com/@rickmint/how-to-tackle-docker-and-kubernetes-for-frontend-tutorial-included-87e8b1d7d5f8https://medium.com/better-programming/kubernetes-deployment-connect-your-front-end-to-your-back-end-with-nginx-7e4e7cfef177요약Docker와 Kubernetes에..

제목The Popover API: Building Modals Has Never Been EasierMastering React’s Specialized Hooks: 7 Essential Hooks for Your Next Project출처https://medium.com/javascript-in-plain-english/building-modals-has-never-been-easier-fe59d56b8478https://medium.com/javascript-in-plain-english/mastering-reacts-specialized-hooks-7-essential-hooks-for-your-next-project-deec985aae20요약팝업을 네이티브로 접근하는 api가 나왔다!2025 기준..

제목(Sort of) Fixing autofocus in iOS Safari 7 React Custom Hooks I Can’t Live Without in My Projects 🚀출처https://medium.com/@brunn/autofocus-in-ios-safari-458215514a5fhttps://medium.com/@letscodefuture/7-react-custom-hooks-i-cant-live-without-in-my-projects-2c06a02ecb2e요약ios에서는 정책상 사용자의 제스처없이 autoFocus를 지원하지 않는다고 합니다...  ;_;1. useFetch : simplify API2. useDebounce : optimize performance3. useTogg..

제목Backend for Frontend (BFF) ArchitectureECMAScript 2024 (ES15): Unveiling the Latest JavaScript Features출처https://medium.com/gitconnected/backend-for-frontend-bff-architecture-64fa9f316a5ahttps://medium.com/javascript-in-plain-english/ecmascript-2024-es15-unveiling-the-latest-javascript-features-9186d72a10ae요약BFF의 작동 방식1. 클라이언트 요청: 각 클라이언트(웹, 모바일 등)가 해당하는 BFF로 요청을 보냅니다.2. BFF 계층: BFF는 여러 마이크로서비..

제목Advanced React Patterns and Best PracticesYou’re Using Context Providers the Wrong Way! Here’s How to Fix It출처https://medium.com/@rashmipatil24/advanced-react-patterns-and-best-practices-74cd09a7c2d9https://medium.com/devlander/youre-using-context-providers-the-wrong-way-here-s-how-to-fix-it-c91247b6e828요약3가지 패턴 소개- HOCs : 여러 컴포넌트에 걸쳐 사용할 공통 논리 재사용, 인증, 권한, 데이터 가져오기와 같은 문제를 추상화, 컴포넌트가 UI 렌더링에 ..

제목Optimizing React Performance: Strategies to Avoid Unnecessary Re-RendersA Guide to Building Reusable React Components출처https://medium.com/javascript-in-plain-english/optimizing-react-performance-strategies-to-avoid-unnecessary-re-renders-f8110b4e37b2https://medium.com/@rashmipatil24/reusable-react-components-7b025f232ca4요약렌더링 빈도 줄이는 방법- memo : 고차컴포넌트가 의존성 배열에 해당할때만 렌더링- useCallback : 의존성 배열에 해..