Light Purple Pointer
[라이브러리] react-spring 애니메이션 구현
·
STUDY
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’..
[라이브러리] react hook form 유효성 검사하는 폼 만들기
·
STUDY
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 테스트> playwright E2E 테스트 및 깃허브 CI 설정하기
·
STUDY
E2E 테스트란 ?  E2E 테스트란 ? E2E 테스트 과정에서는 실제 사용자의 시나리오를 테스트함으로써 애플리케이션 동작을 테스트하게되고,또한 프론트엔드에서 OS와 브라우저엔진 환경이 달라서 발생하는 크로스 브라우징 이슈를 E2E 테스트를 통해 미리 방지할 수 있습니다.이 테스트를 통과함으로써 애플리케이션의 무결성을 증명할 수 있게 됩니다.E2E 테스트는 End To End의 약자로 애플리케이션의 흐름을 처음부터 끝까지 테스트하는 것을 의미합니다.React 에서의 테스팅도구  ? React 에서 가장 많이 사용하는 테스팅 도구는 cypress다. 하지만 요즘에 playwright 가 뜨기 시작하면서 찾아보니 cypress에서 playwright 로 옮기는 개발자들도 늘고 있는 것 같다.  Cypress..
[react-signature-canvas] 전자서명 구현하기
·
STUDY
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 인스턴스
·
STUDY
axios 인스턴스를 사용하는 이유는 여러 가지가 있습니다. 주된 이유는 다음과 같습니다:1. 공통 설정 관리axios.create()로 생성된 인스턴스는 기본 URL, 타임아웃, 헤더, 파라미터 직렬화 방식 등 공통적으로 사용되는 설정을 하나의 인스턴스에 정의할 수 있습니다. 이렇게 하면 특정 API와 통신할 때 매번 동일한 설정을 반복할 필요 없이, 인스턴스를 사용해 간단하게 요청을 보낼 수 있습니다.예를 들어, API의 기본 URL이나 공통적으로 필요한 인증 토큰, 또는 기본 헤더 등을 인스턴스에 설정해 두면, 개별 요청 시에 이러한 정보를 일일이 지정할 필요가 없어집니다.2. 코드의 재사용성 향상공통된 설정을 가진 인스턴스를 여러 곳에서 재사용할 수 있어 코드의 중복을 줄일 수 있습니다. 이는 코..
session 방식의 개념 및 한계와 JWT token 인증 방식
·
STUDY
Session 방식세션은 클라이언트가 로그인을 위해 인증 정보를 서버에 전송서버는 메모리에 사용자를 저장하고, 세션 아이디를 쿠키로 전달클라이언트는 쿠키에 저장된 세션 아이디를 이용하여 요청함서버는 일치하는 세션 아이디를 메모리에서 검색한 후 응답 Session 방식의 한계 웹 Application 서버 측에 저장한다는 것은 서버 메모리에 인증 정보를 저장한다는 것이다. 세션은 사용자의 인증 정보를 서버에 저장하며, 서버의 과부하를 유발한다.특히 동시 사용자가 많아질수록 서버 메모리를 비례하여 사용하게 된다.  이러한 세션 방식의 한계를 보완하기 위해 아래의 방법들이 있다. 1. 인증 서버의 메모리 증설-  메모리 부족을 보완하기 위해서 메모리를 늘리는 것이다. - 물리적으로 서버 컴퓨터의 RAM을 업그..