2022/06 (64) 썸네일형 리스트형 React DnD 튜토리얼 원문 https://react-dnd.github.io/react-dnd/docs/tutorial React DnD react-dnd.github.io 마이크로소프트 엔지니어의 컴포넌트 아키텍처 설계 프로세스가 드러나는 읽을만한 글이라 정리해둔다 들어가기에 앞서 : React DnD의 Concept 아이템과 타입 Item(아이템) : 진실의 소스는 데이터다 DOM이나 컴포넌트가 아니라 아이템(데이터-자바스크립트 객체)가 드래그된다. 카드 : { cardId: 42 ,type:'card'} 체스 : { fromCell: 'C5', piece: 'queen' , type:"piece"} type(타입) 객체지향의 클래스와 비슷한 의미를 갖는다. 타입 간의 상호작용을 정의한다. 모니터(collect 함수) .. CSS : Flex와 min-width https://makandracards.com/makandra/66994-css-flex-and-min-width CSS: Flex and "min-width" min-width is known as a CSS property that can be set to define a least width for an element. Surprisingly, it can also be used to set something that feels like max-width. min-width in a flex context While the default min-width value is 0 (zero), for flex i makandracards.com min-width는 element의 최소 너비를 정의하도록 .. zustand와 타입스크립트 [공식문서번역] 원문 : 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/.. React-Hook-Forms로 재사용 가능한 폼 만들기 원문 : 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... LG CNS 면접 기출질문 LG CNS 면접 기출질문 - 2021년 하반기 최종입사자(2022.1 입사), 2022년 상반기 최종입사자 (2022.7 입사) - 의 기억을 토대로 재구성한 자료입니다. 혹시 추가로 아시는 항목이 있으면 집단지성을 위해 댓글로 추가 부탁드립니다. 1분 자기소개 가장 자신있는 언어 객체지향이란? 지원한 직무/부서에 왜 관심을 갖게 되었는지 지원한 직무/부서에 가게되면 이력서에 기재한 내용과 다른 업무를 할 수도 있는데 괜찮은지 가장 관심있는 도메인 개발자가 되고싶은 이유 자소서 공백기간 성실하지만 잘하는 직원 VS 잘하지만 불성실한 직원, 누구와 일하고 싶은지? 마지막으로 못다한하고싶은말 회사에 대해 궁금한점 지원한 직무가 무엇인지 아시나요? 지원한 직무에서 활약할 수 있는 지원자의 강점은 무엇인가요?.. 리액트 라우터 v6를 이용해 쉽게 모달 만들기 원문 : 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) 테스트 TLDR: mocking을 이용하여 software가 어떻게 사용되는지(how)를 명시적으로 테스트 할 수 있습니다. > jest.fn 테스트 케이스 작성 시에는 소프트웨어가 사용되는 how에 집중하는게 좋습니다. faker 라이브러리를 사용하여 매번 가짜 데이터를 만들 수 있습니다. 테스트 객체를 쉽게 만들기 위해 오브젝트 팩터리 함수를 사용합니다. 사용자는 Form과 상호 작용하는 데 많은 시간을 할애하며 Form은 응용 프로그램에서 가장 중요한 부분입니다 (예: 전자 상거래 앱의 "체크아웃" Form 또는 대부분의 앱의 "로그인" Form). 사용자가 Form에서 입력을 찾고, 정보를 입력하고, Form을 제출할 때 제출된 데이터가 올바른지 확인할 수 있는지를 검증합니다. 로그인 폼 검증 테스트할.. 리액트 테스트 : implementation details을 피하기 TLDR 구현 세부사항과 관련없는 테스트 사용자가 보는것처럼 테스트 마크업과 관련없는 유즈케이스 테스트 스크린 유틸리티 인터랙션 > 유저이벤트 눈에 보이는 데이터 중 핵심에 초점 이전 포스트에서 사용자가 사용하는 방법 (렌더링 결과와 프롭) => (인터랙션) => (렌더링 결과와 프롭) 측면에서 테스트해야 함을 이해했습니다. UI 측면의 테스트는 사용자가 보고, 듣고, 느끼는 것에 관한 것입니다. implementation details "구현 세부사항"은 추상화가 특정 결과를 달성하는 방법(how)을 나타내는 용어입니다. 코드의 표현력 덕분에 완전히 다른 구현 세부 사항(how)을 사용하여 동일한 결과를 얻을 수 있습니다. const multiply = (a, b) => a * b // 는 아래와 같습.. 이전 1 2 3 4 ··· 8 다음
