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 과제중에 전자서명 구현이 있어서 찾아보다가 알게된 라이브러리다. ..

axios 인스턴스를 사용하는 이유는 여러 가지가 있습니다. 주된 이유는 다음과 같습니다:1. 공통 설정 관리axios.create()로 생성된 인스턴스는 기본 URL, 타임아웃, 헤더, 파라미터 직렬화 방식 등 공통적으로 사용되는 설정을 하나의 인스턴스에 정의할 수 있습니다. 이렇게 하면 특정 API와 통신할 때 매번 동일한 설정을 반복할 필요 없이, 인스턴스를 사용해 간단하게 요청을 보낼 수 있습니다.예를 들어, API의 기본 URL이나 공통적으로 필요한 인증 토큰, 또는 기본 헤더 등을 인스턴스에 설정해 두면, 개별 요청 시에 이러한 정보를 일일이 지정할 필요가 없어집니다.2. 코드의 재사용성 향상공통된 설정을 가진 인스턴스를 여러 곳에서 재사용할 수 있어 코드의 중복을 줄일 수 있습니다. 이는 코..

현재 react-hook-form을 사용해서 폼을 만들고 있는데 ,  분명 number 타입으로 만들었는데 아래와 같이 한글 자음도 입력을 받는것임.    아래의 링크와도 동일한 현상이 발생함.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number - HTML: HyperText Markup Language | MDN" data-og-description=" elements of type number are used to let the user enter a number. They include built-in validation to reject non-numerical entries." data-og-host="developer...

현재 구현하고 있었던 기능이  Next.js에서  터치 이벤트 발생 시 옆으로 스와이프되는 기능을 구현하고 있었다.    에러 발생 내용   e.touches[0]에서 개체가 'undefined' 인 것 같다는 에러가 발생... 근데 작동은 잘됨.   // 스와이프 관련 핸들러 -> 터치 종료 지점 const handleTouchMove = (e: React.TouchEvent): void => { if (e.touches && e.touches.length > 0) { touchEndX.current = e.touches[0].clientX; } };  에러 해결 방법  널 병합 연산자를 사용해서 해결했다.   // 스와이프 관련 핸들러..

Session 방식세션은 클라이언트가 로그인을 위해 인증 정보를 서버에 전송서버는 메모리에 사용자를 저장하고, 세션 아이디를 쿠키로 전달클라이언트는 쿠키에 저장된 세션 아이디를 이용하여 요청함서버는 일치하는 세션 아이디를 메모리에서 검색한 후 응답 Session 방식의 한계 웹 Application 서버 측에 저장한다는 것은 서버 메모리에 인증 정보를 저장한다는 것이다. 세션은 사용자의 인증 정보를 서버에 저장하며, 서버의 과부하를 유발한다.특히 동시 사용자가 많아질수록 서버 메모리를 비례하여 사용하게 된다.  이러한 세션 방식의 한계를 보완하기 위해 아래의 방법들이 있다. 1. 인증 서버의 메모리 증설-  메모리 부족을 보완하기 위해서 메모리를 늘리는 것이다. - 물리적으로 서버 컴퓨터의 RAM을 업그..

Typescript - 타입스크립트(Typescript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어.- 타입스크립트를 사용하여 컴파일 시점에 에러를 확인할 수 있음1. 타입 애너테이션 기초아래와 같은 형태로 타입을 명시한다.  그 외의 다른 타입의 값을 할당할 때 에러 발생 let myVar: type = value// 문자열 타입 stringlet movieTitle: string = "Apple";movieTitle = "Pie";//movieTitle = 9; // errormovieTitle.toUpperCase();// 숫자 타입 numberlet numCatLives: number = 9;numCatLives += 1;//numCatLives = "zero" //erro..