리액트 (44) 썸네일형 리스트형 [깃허브 액션 빌드 에러] Error: node_modules/vite/dist/node/index.d.ts(5,41): error TS2307: Cannot find module 'rollup/parseAst' or its corresponding type declarations. 문제상황이 때 까지 아무런 문제가 없다가 오늘 갑자기 깃허브 액션을 통해 빌드를 수행하던 중 현 문제가 발생하였습니다. 에러 전문을 보면 node_modules/vite/dist/node/index.d.ts(5,41): 오류 TS2307: 'rollup/parseAst' 모듈 또는 해당 유형 선언을 찾을 수 없습니다. 라고 표기되고 있습니다. 문제원인이 메시지는 TypeScript 컴파일러가 모듈 해석 방식과 관련하여 경고하는 내용입니다. 주요 원인 아래와 같습니다. - TypeScript의 모듈 해석 설정이 최신 Node.js 버전이나 번들러와 호환되지 않는 옛 방식으로 설정되어 있는 경우- 프로젝트가 사용하는 일부 패키지(여기서는 rollup)가 최신 모듈 시스템을 사용하고 있어, 현재 설정으로는 .. [빌드 에러] node_modules/@testing-library/jest-dom/types/jest.d.ts: - error TS2304: Cannot find name 'expect'. ReturnType<typeof expect.stringContaining> 문제상황vite+ vitest + react 환경에서 npm run build 시 build 가 실패하는 문제가 발생했었습니다. 해당 에러 전문은 아래와 같이 jest 에 대한 참조와 expect 를 찾을 수 없다는 것이 문제였습니다. node_modules/@testing-library/jest-dom/types/jest.d.ts:1:23 - error TS2688: Cannot find type definition file for 'jest'.1 /// ~~~~node_modules/@testing-library/jest-dom/types/jest.d.ts:9:27 - error TS2304: Cannot find name 'expect'. 9 .. 리액트에서 변동 가능성이 없는 변수의 위치는? 함수 내부 VS 함수 외부 함수 내부 인가, 함수 외부인가리액트에서 함수 컴포넌트를 사용하다보면 한 가지 의문이 들 때가 있습니다. 변수는 함수 외부에 두는 것이 좋을까? 아니면 내부에 그대로 두는 것이 좋을까? 에 관해서 입니다. 예를 들어, 다음과 같은 변수가 컴포넌트 내부에 선언되어 있다고 가정해 봅시다.import React from 'react';const MyComponent = () => { const value = 42; return ( The value is: {value} );}; 여기서, value 은 MyComponent 내부에 선언되어 있습니다. 컴포넌트는 함수이므로 상태가 업데이트 될 때 마다 변수는 매번 메모리에 재할당이 됩니다. 그럼 한 가지 생각해볼 수 있습니다. val.. Vite + React 환경에서 test 파일 제외하려면 참고하세요. 보호되어 있는 글입니다. [React] 테스팅의 친구, userEvent 이해하기 with 예제 코드 포스트 목적 userEvent 를 빠르게 이해하고, 테스트에 적용하기 위한 목적으로 userEvent 가 가지는 핵심 메서드에 대해 정리 하였습니다. 예시는 최대한 공식문서의 내용을 참고해서, 이러한 예시로 사용할 수 있겠구나 싶은 것으로 작성해 보았습니다. userEvent.click(element, [options]) 주어진 엘리먼트를 클릭합니다. 옵션 객체를 제공하여 Shift, Ctrl 및 Alt 키와 같은 수정자를 추가할 수 있습니다. import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; test('Clicking a button', () => { con.. [React] React 혹은 Next 에서 forwardRef 타입에 대한 참조를 확인하는 방법 및 지정법 오늘의 명언? 포스트 작성 목적 forwardRef 의 타입을 지정할 때 어디서 내용을 참조해야 명확한 타입을 지정을 할 수 있는지 정리해본다. 다음 컴포넌트가 있다고 가정해보자 다음 컴포넌트가 있다고 가정해보자. 예시 컴포넌트는 대댓글 쓰기 Form 컴포넌트로서 기능을 수행한다. Form 의 action (전송 작업) 이 이루어지고 나면 해당 form 의 textarea 의 value 을 비우는 동작을 수행하기 위해 ref 를 사용해야 하는데, 해당 ref 를 참조해서 동작을 수행하는 함수는 ReplyForm 의 상위 컴포넌트에 있다. 현재 컴포넌트는 아무런 타입이 지정되어 있지 않으므로 __ 이 표시되는 것을 볼 수 있는데, 여기서 인터넷을 검색하지 않고 어떻게 타입을 지정해야 하는지 확인하려면 어떻.. [React] useId | 고유한 id 값을 생성해주는 리액트 훅 useId() useId() 훅을 사용하면 컴포넌트가 렌더링될 때 마다 고유한 id 를 생성하여 반환해준다. 따라서, 이를 활용한다면, 같은 컴포넌트를 동일한 부모 컴포넌트에서 재사용하는 경우 서로 id 값이 같아서 충돌이 날 수 있는 문제를 사전에 예방할 수 있다. 예를 들어 유저의 이메일을 입력 받은 동일한 컴포넌트를 하나의 부모 컴포넌트에서 여러 번 재사용하는 경우를 가정해보자. // 이메일을 입력받는 자식 컴포넌트 import { useState } from 'react'; function EmailInput({ onChange }) { const [email, setEmail] = useState(''); const handleInputChange = (e) => { const { value }.. [개인 정리]프론트엔드 상태관리 라이브러리 비교(redux, recoil, zustand) 보호되어 있는 글입니다. 이전 1 2 3 4 ··· 6 다음
