https://www.npmjs.com/package/react-month-picker react-month-pickerMonth-Picker Component offers a popup month selection panel with responsive layouts.. Latest version: 2.2.1, last published: 4 years ago. Start using react-month-picker in your project by running `npm i react-month-picker`. There are 13 other projects in twww.npmjs.com   https://www.react-lite-month-picker.dev/ React Lite Month P..

1. React Fragment? 여러 개의 자식을 하나의 부모 요소로 묶기 위해 사용하는 컴포넌트. HTML 구조 상에 불필요한 DOM 요소를 추가하지 않고도 여러 요소를 그룹화할 수 있게 해줌 import React from "react";function Example() { return ( Title This is a paragraph. );}export default Example;위의 예제에서 와 는 Fragment의 축약 문법으로, 렌더링 시 실제 DOM에 추가적인 노드를 생성하지 않음 이를 활용하기 좋은 예제가 map 을 사용할 때이다.map 의 경우 최상위 컴포넌트에 key를 부여해야하는데  key를 부여하고자 불필요한 div를 만들기보단 React.Fr..

API Routes ?NEXT.JS 에서 API를 구축할 수 있도록 도와주는 기능임 간단한 API를 구축해서 클라이언트, 즉 브라우저로 부터 요청을 받아 데이터베이스에서 데이터를 꺼내온다던가아니면 또 다른 서드파티에서 데이터를 불러와서 전달을 해주는 일련의 동작들을 할 수 있음.   Next앱에서는 pages -> api 라는 폴더 내에 hello.ts를 보면 자동으로 api 파일이 생성되어있는 것을 확인할 수 있는데, // Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport type { NextApiRequest, NextApiResponse } from "next";type Data = { name: str..

Pre-Fetching이란?    -  페이지를 사전에 불러오는 것을 의미한다.    -  예를 들어 현재 페이지에서 링크로 연결되어 있는 페이지를 현재 페이지가 실행될 때 사전 미리 다 불러와 놓는 기   -  페이지 이동을 빠르게 지체없이 하기 위해 NEXT.JS에서 지원한다.   이는 개발자모드의 네트워크 탭에서 눈으로 확인이 가능하다. 이해를 쉽게 하기 위해 아래에는 각 페이지로 이동하는 Link와 버튼을 클릭했을 때 이벤트 핸들러를 통해 이동하는 경우 두 가지를 작성하여 확인해 보겠다. import "@/styles/globals.css";import type { AppProps } from "next/app";import Link from "next/link";import { useRouter..

Client Side Rendering(CSR) 의 단점을 효율적으로 해결하는 기술- 페이지 이동이 매우 빠르고 쾌적하다는 장점이 있음   단점? 초기 접속 속도가 느려짐 화면에 나타나는데까지 걸리는 이 시간을  FCP(First Contentful Paint) 이라고 함 이는 웹 페이지의 성능을 대표할 정도로 중요한 지표  NEXT.JS 는 이런 단점을 해결하기 위해 사전 렌더링을 사용함  TTI : 상호작용까지 걸리는 시간     출처 : 한 입 크기로 잘라먹는 Next.js (15+)https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs/dashboard

const styles = useSpring({ from: { transform: 'translateX(0px)' }, to: { transform: 'translateX(100px)' }, reset: true,});https://www.react-spring.dev/ react-springWhy Springs? We think of animation in terms of time and curves, but that causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that. Springs don’..

나는 이때까지 map을 사용해서 리스트를 랜더링 할 때 보통 데이터에 이미 고유한 ID가 있다면 그 ID를 사용하지만 없는 경우에는 index를 넣는 경우가 있었는데이는 권장하지 않는 방법이라고 한다.   key에 index 값을 넣지 않는 것이 권장되는 이유는 리스트 항목의 순서나 내용이 변경될 때 예상치 못한 렌더링 문제를 일으킬 수 있기 때문이다.1. 항목 순서 변경 시 문제리스트 항목의 순서가 바뀌면, index 값은 그대로 유지되기 때문에 리액트는 항목 자체가 변경되었음을 인식하지 못한다. 이는 결과적으로 불필요하거나 잘못된 렌더링을 유발할 수 있다. 예를 들어, 항목이 삽입되거나 삭제될 때, 각 항목의 key가 여전히 같은 index 값을 가지면 리액트는 항목이 그대로 있다고 잘못 판단할 수 ..

https://www.npmjs.com/package/react-hook-form react-hook-formPerformant, flexible and extensible forms library for React Hooks. Latest version: 7.53.0, last published: 19 days ago. Start using react-hook-form in your project by running `npm i react-hook-form`. There are 5111 other projects in the npm registry usingwww.npmjs.com  https://ko.legacy.reactjs.org/docs/forms.html#controlled-components..

E2E 테스트란 ?  E2E 테스트란 ? E2E 테스트 과정에서는 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하게되고,또한 프론트엔드에서 OS와 브라우저엔진 환경이 달라서 발생하는 크로스 브라우징 이슈를 E2E 테스트를 통해 미리 방지할 수 있습니다.이 테스트를 통과함으로써 애플리케이션의 무결성을 증명할 수 있게 됩니다.E2E 테스트는 End To End의 약자로 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미합니다.React 에서의 테스팅도구  ? React 에서 가장 많이 사용하는 테스팅 도구는 cypress다. 하지만 요즘에 playwright 가 뜨기 시작하면서 찾아보니 cypress에서 playwright 로 옮기는 개발자들도 늘고 있는 것 같다.  Cypress..

https://www.npmjs.com/package/react-signature-canvas?activeTab=readme react-signature-canvasA React wrapper component around signature_pad. Unopinionated and heavily updated fork of react-signature-pad. Latest version: 1.0.6, last published: 2 years ago. Start using react-signature-canvas in your project by running `npm i react-signature-canvas`.www.npmjs.com 과제중에 전자서명 구현이 있어서 찾아보다가 알게된 라이브러리다. ..