리액트 (48) 썸네일형 리스트형 [Vitest 설정] ~ 형식의 인수는 'UserConfigExport' 형식의 매개 변수에 할당될 수 없습니다. 발생 에러vite.config.ts 파일 내에서 vitest 설정 시 test 속성이 UserConfigExport 형식에 존재하지 않아서 타입에러가 발생하는 것을 확인 하였습니다. 해결방법이는 기본적인 vite.config.ts 파일에서 선언된 타입이 vitest 설정의 타입과 불일치하여 생기는 문제이므로, vite.config.ts 파일 상단에 /// 를 추가 해줍니다./// export default defineConfig({ plugins: [react()], test: { globals: true, environment: 'jsdom', setupFiles: ['./setup.js'], },}) 결과더 이상 타입 에러가 발생하지 않는 것을 확인하였습니다. 사실 http.. ReactJS(NextJS) 에서 tailwindCSS 초기화 설정이 Editor.js 스타일도 초기화 하는 문제 고치기 문제 발단현재 NextJS 에서 공지사항 게시판을 만들던 중 Eidtor.js 를 사용해보기로 하였습니다. 그래서 적용 후 사용해보려고 하니, 아래와 같이 레벨 1의 Heading 이 적용되어야 하는(h1) 상황임에도 기존에 설정해둔 tailwindcss 의 초기화 설정이 해당 에디터 라이브러리의 CSS 도 같이 초기화 해버리는 문제가 발생하고 있습니다. 해결방법보통 이러한 문제를 개선하기 위해 tailwindcss 에서 제공하는 도구가 존재하는데, 해당 도구를 사용해서 문제를 개선할 수 있습니다. 우선 아래 도구를 설치해줍니다. npm i @tailwindcss/typography tailwind.config.ts 파일로 이동합니다. 아래와 같이 plugins 부분의 앞서 설치한 도구를 require.. useContext 를 사용해서 로그인 상태를 전역적으로 관리해봅시다. 들어가는 말저는 보통 useContext 를 사용하지 않고, 해당 훅을 내부적으로 사용하고 있는 전역 상태 라이브러리를 사용해서 쓰고 있었습니다. 과거에 다크모드 테마를 전역적으로 관리하기 위한 목적으로 useContext 를 사용한 후에는 굳이 쓸 필요성을 느끼지 못해서 눈 여겨보지는 않았죠. 오늘은 이렇게 서먹해져버린 이 친구에 대해서 다시 상기해보면서 유저의 로그인 상태를 관리하는 간단한 예제를 바탕으로 다시 친해지는 시간을 가져볼까 합니다. useContext 에 대해 깊이 있고, 명확한 정보는 리액트 공식 문서(https://ko.react.dev/learn/passing-data-deeply-with-context) 를 참고하면 됩니다. 해당 포스트는 간략하게 알아보는 것이 목적이므로 나.. 한 번쯤 상기해보는, 클로저의 개념 & 일반적인 리액트 사례 들어가기 전 | 리액트와 클로저의 관계?어찌보면 당연한 것일지도 모릅니다. 그런데, 평소에 신경쓰지 않고 있다가 클로저라는 개념에 대해서 잠시 상기해보는 시간을 가지게 되었는데, 리액트의 함수 컴포넌트 구조와 클로저의 구조가 유사하다는 것이 눈에 들어왔습니다. 사실 이는 당연한 것이겠죠? 왜냐 하면, 리액트 함수 컴포넌트는 결국 하나의 함수이고, return 을 통해 값을 반환하고 있기 때문에, 그 내부적으로 저리되는 상태와 해당 상태를 업데이트 할 때 이전 상태의 값을 참조하여 변경하는 작업은 결국 내부적으로 클로저의 개념을 적용할 수 밖에 없기 때문입니다. 따라서 오늘은 리액트와 클로저, 정확히는 함수 컴포넌트와 클로저의 관계에 대해서 나름의 생각을 정리해볼 것입니다. 기초개념 | 클로저란 무엇인가.. [깃허브 액션 빌드 에러] 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 파일 제외하려면 참고하세요. 보호되어 있는 글입니다. 이전 1 2 3 4 ··· 6 다음
