기술로 감동을 주자

원문 : https://github.com/pmndrs/zustand/blob/main/docs/typescript.md#independent-slices-pattern GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React 🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub. github.com 해당 라이브러리의 공식문서에서도 타입스크립트 관점에서 꽤나 배울 점이 많아 정리해둠. 공식문서 메인 핵심 발췌 링크 : https://github.com/pmndrs/..

원문 : https://www.thisdot.co/blog/how-to-create-reusable-form-components-with-react-hook-forms-and-typescript How to create reusable form components with React Hook Forms and Typescript - This Dot Labs Why Should I Create Reusable react-hook-form Input Components? Like many in the React community, you've decided to use react-hook-form. While not every… www.thisdot.co 완성된 코드 보기 https://stackblitz...

https://www.lgcns.com/ LG CNS IT 컨설팅, 시스템 통합, 아웃소싱, ERP, BI, IT인프라솔루션, IT컨버전스 www.lgcns.com 혹시 추가로 아시는 항목이 있으면 집단지성을 위해 댓글로 추가 부탁드립니다. 가장 자신있는 언어 객체지향이란? 지원한 직무/부서에 왜 관심을 갖게 되었는지 지원한 직무/부서에 가게되면 이력서에 기재한 내용과 다른 업무를 할 수도 있는데 괜찮은지 가장 관심있는 도메인 개발자가 되고싶은 이유 자소서 공백기간 성실하지만 잘하는 직원 VS 잘하지만 불성실한 직원, 누구와 일하고 싶은지? 마지막으로 하고싶은말, 회사에 대해 궁금한점

원문 : https://dev.to/devmdmamun/create-contextual-modal-navigation-with-react-router-v6-28k2 Create contextual modal navigation with React Router V6. I'm currently (April 2022) creating a side-project using ReactJs. I have taken inspiration from... dev.to 리액트 라우터를 이용하면 뒤 배경이 살아있지만, URL이 변경되는 모달을 만들 수 있습니다. 리액트 라우터 v6에 대한 자세한 내용은 해당 게시물을 참고하세요. 리액트 라우터 v6(React Router v6) 딥 다이브 https://reactrouter..

사용자는 Form과 상호 작용하는 데 많은 시간을 할애하며 Form은 응용 프로그램에서 가장 중요한 부분입니다 (예: 전자 상거래 앱의 "체크아웃" Form 또는 대부분의 앱의 "로그인" Form). 사용자가 Form에서 입력을 찾고, 정보를 입력하고, Form을 제출할 때 제출된 데이터가 올바른지 확인할 수 있는지를 검증합니다. 로그인 폼 검증 테스트할 컴포넌트는 다음과 같습니다. function Login({onSubmit}) { function handleSubmit(event) { event.preventDefault() const {username, password} = event.target.elements onSubmit({ username: username.value, password: ..

이전 포스트에서 사용자가 사용하는 방법 (렌더링 결과와 프롭) => (인터랙션) => (렌더링 결과와 프롭) 측면에서 테스트해야 함을 이해했습니다. UI 측면의 테스트는 사용자가 보고, 듣고, 느끼는 것에 관한 것입니다. implementation details "구현 세부사항"은 추상화가 특정 결과를 달성하는 방법(how)을 나타내는 용어입니다. 코드의 표현력 덕분에 완전히 다른 구현 세부 사항(how)을 사용하여 동일한 결과를 얻을 수 있습니다. const multiply = (a, b) => a * b // 는 아래와 같습니다. function multiply(a, b) { let total = 0 for (let i = 0; i < b; i++) { total += a } return total ..

React Testing Library는 상용구 제거, 테스트 환경 자동 초기화 등 다양한 기능을 제공합니다. React Testing Library는 DOM Testing Library의 React 구현입니다. (다른 구현으로는 React Native Testing Library 등이 있습니다). 이전 게시물에서 작성한 코드 변경하기 돔 생성 보일러플레이트 제거 이벤트 보일러플레이트 제거 테스트 환경 초기화 보일러플레이트 제거 import * as React from 'react' import {render, fireEvent} from '@testing-library/react' import Counter from '../../components/counter' test('counter increme..

소프트웨어를 사용하는 것처럼 테스트하라- @kentcdodds 자바스크립트 테스트는 무엇일까요? 어떤 상태를 설정하고, 어떤 동작을 수행하고, 새로운 상태에 대한 주장을 하는 코드일 뿐입니다. 상태 > 동작 > 새로운 상태(assertion) 아래의 간단한 카운터 컴포넌트를 위의 원칙에 따라 테스트해 봅시다. 테스트 작성 시, 두 사용자를 고려합니다. 최종 사용자 : 사용자들이 내 코드와 인터랙션 하는 방법(버튼 클릭 등) 개발자 사용자 : 개발자들이 내 코드를 사용하는 방법 (렌더링, 함수 호출 등) 테스트 사용자(The Test User)는 고려 대상이 아닙니다! 리액트 컴포넌트 관점에서 개발자 사용자는 react-dom의 createRoot API(React Native와 유사한 개념)를 사용하여 ..

전정기관 장애가 있는 사람들에겐 잘못된 애니메이션이 불쾌감을 유발할 수 있음 미디어 쿼리의 prefers-reduced-motion를 통해 애니메이션 효과를 줄일 수 있는 옵션 제공하기 1. 애니메이션 디폴트, 설정으로 끄기 .fancy-box { width: 100px; height: 100px; transform: scale(1); transition: transform 300ms; } .fancy-box:hover { transform: scale(1.2); } @media (prefers-reduced-motion: reduce) { .fancy-box { transition: none; } } 2. 애니메이션 없음 디폴트, 설정으로 on .fancy-box { width: 100px; heigh..

Types of animation 작가 Rachel Nabors는 그녀의 놀라운 책 “Animation At Work”에서 애니메이션의 5가지 일반적인 범주를 설명합니다. Transition : 한 페이지에서 다른 페이지로 이동 모달 열기 또는 닫기, 다음 단계로 이동하는 다단계 마법사와 같이 페이지의 내용을 상당히 변경합니다. Supplements : "위치" 또는 작업을 변경하지 않고 페이지에서 정보를 추가하거나 제거합니다. 예를 들어 알림이 모서리에 나타날 수 있습니다. Feedback : 사용자가 애플리케이션이 사용자 입력에 어떻게 응답했는지 이해하는 데 도움이 됩니다. 예를 들어, 양식을 제출할 때 나타나는 오류 메시지 또는 클릭 시 아래로 미끄러지는 버튼이 눌러져 있음을 나타냅니다. Demon..