안녕하세요 프로젝트를 진행하다 모듈 불러오기 관련 오류가 발생하여 질문 남겨봅니다.문제상황> 모듈 불러오기중 not found react + typescript + yarn berry를 사용했고 zero install과 pnp를 사용해 모듈들을 캐싱했습니다. 이 과정에서 모듈들을 import 할때아래와 같은 오류가 발생합니다.예시// main.tsx import * as ReactDOM from "react-dom/client"; // Cannot find module 'react-dom/client' or its corresponding type declarations import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; // Cannot find module '@tanstack/react-query' or its corresponding type declarations. import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; // Cannot find module '@tanstack/react-query-devtools' or its corresponding type declarations. import { BrowserRouter } from "react-router-dom"; // Cannot find module 'react-router-dom' or its corresponding type declarations import App from "./App"; import { GlobalStyle } from "./themes/globalStyle"; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: true, refetchOnMount: true, staleTime: 60_000, retry: 2, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <QueryClientProvider client={queryClient}> // Cannot find module 'react/jsx-runtime' or its corresponding type declarations. <BrowserRouter> <ReactQueryDevtools /> <App /> <GlobalStyle /> </BrowserRouter> </QueryClientProvider> );기대효과> 모든 모듈들이 정상적으로 불러와짐참고자료// package.json { "name": "fe", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@tanstack/react-query": "^5.59.0", "@types/react-router-dom": "^5.3.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.26.2", "styled-components": "^6.1.13", "zustand": "^5.0.0-rc.2" }, "devDependencies": { "@eslint/js": "^9.11.1", "@tanstack/react-query-devtools": "^5.59.0", "@types/node": "^22.7.4", "@types/react": "^18.3.10", "@types/react-dom": "^18.3.0", "@types/styled-components": "^5.1.34", "@vitejs/plugin-react-swc": "^3.5.0", "eslint": "^9.11.1", "eslint-plugin-react-hooks": "^5.1.0-rc.0", "eslint-plugin-react-refresh": "^0.4.12", "globals": "^15.9.0", "typescript": "^5.6.2", "typescript-eslint": "^8.7.0", "vite": "^5.4.8" }, "packageManager": "yarn@4.5.0" }// tsconfig.json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "node", "allowImportingTsExtensions": true, "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "jsx": "react-jsx", "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "baseUrl": ".", "paths": { "@/*": ["./src/*"] } }, "include": ["src", "**/*.ts", "**/*.tsx"] } 타입스크립트 버전 : 5.6.2vsc 버전 : September 2024 (version 1.94)시도한 것> vsc 재시작, 재설치

저는 이전엔 윈도우에서 yarn이 아닌 npm을 통해 패키지를 설치해왔었습니다. 최근 맥으로 OS를 바꿨고 강사님이 알려주신대로 yarn을 설치를 해서 사용을 하려고 했으나 몇몇 다른 점 및 문제점이 생겼습니다. 첫째로 yarn init시에 강사님처럼 엔터를 치는 과정이 생략되고 바로 init이 완료되는가 하면 추가로 .yarn 폴더, .editorconfig, .pnp.cjs 등 여러 다른 파일들이 생성됨과 동시에 node_modules 폴더가 생성되지 않았습니다. 또한 package.json파일은 생성되었지만 package-lock.json 파일이 생성되지 않았습니다. 또한 yarn add express를 명령어로 입력하여 package.json 파일에 dependencies에 분명이 express가 추가가 되었고 2_express_server.js 파일에서 express를 require해와서 쓸 때도 자동완성도 잘 되었습니다. 근데 node 2_express_server.js 를 통해 서버를 실행해보면 express라는 모듈을 찾을 수 없다고 계속 나옵니다. 이게 yarn의 문제인지 아니면 그냥 버전의 차이때문에 설치하는 방법이 달라진건지 궁금합니다. 일단 현재 npm install을 통해 진행을 하곤 있지만 강사님께서 계속해서 yarn을 이용해 패키지를 설치하실 예정으로 보이시길래 웬만하면 저도 yarn으로 설치하면서 강사님을 따라하는게 더 좋을 것 같아 질문드립니다. 감사합니다.

eslint가 개인적으로 설치가 안되어있어서 package.json에 수업에서 나오는 내용과 동일하게 코드를 작성해서 yarn install로 전체 다시 다운을 받으려고 시도했는데 다음과 같은 에러가 발생하였습니다...아무리 시도해봐도 도저히 해결이 안되서 결국 파일을 새로 만들어서 yarn install을 시행해 봤는데도 동일한 에러가 발생하였습니다. 어떻게 해결해야할까요...?

http://server01.hadoop.com:19888/ 가 크롬에서 열리지가 않는데 왜그러는지 모르겠습니다.CM - YARN - Web UI - HistoryServer Web UI 메뉴로 들어거도 동일한 오류가 나옵니다.

안녕하세요! 강의 매우 잘 듣고 있습니다 npm에서 react버전 때문에 발생한 문제가 yarn을 통해서는 해결되는 이유가 뭔지 알 수 있을까요?

터미널에 이렇게 입력했는데... npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev ------------------------------------- 192 packages are looking for funding   run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run:   npm audit fix --force Run `npm audit` for details. 위와 같이 나오고, 설치가 진행되지 않습니다. 어떻게 해야할까요? --------------------------------------------------- yarn으로 설치하니까... 되는데, 이렇게 해도 되나요? $ yarn add --dev eslint-plugin-testing-library yarn add eslint-plugin-jest-dom

안녕하세요. 다름이 아니라, npm 과 yarn의 차이가 궁금해서 질문드립니다. 어디서는 그저, 취향의 차이라고 하고 다른 블로그에서는 처음에는 NPM으로 시작하지만, 나중에는 yarn으로 갈아타는 게 더 좋다고 하고... 뭔가 정보의 일관성이 떨어져서, 이 부분에 관해 가장 확실하게 답을 주실 수있는 제로초님께 여줘보고 싶은 게  있습니다.   Q1) npm과 yarn 은 어떤 차이가 있나요??   Q2) 실무에서는 npm을 많이 사용하나요?? yarn을 많이 사용하나요?? 그리고 제로초님은 둘 중에 어떤 것을 추천하시나요??    

-   혹시 위와같은 문제에 대해서 알수 있을까요

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요 강사님 강의 잘 듣고 있습니다. cli로 프로젝트 생성할 때 패키지 관리툴로 yarn하고 npm 둘중에 하나 선택하게 되어있는데, 강의에서는 npm을 사용하셨지만 실무에서는 어떤 걸 더 많이 사용하는지 궁금합니다. 그리고 이 두 명령어의 차이가 많이 나는지도 궁금합니다.    

수업 구간: 섹션3 Lottery UI 마크업(처음부터) 제가 수업을 들으면서 먼저  실행해보고 코드를 분석해보는 식으로 공부하고 있었습니다. 제가 react web을 올리고 난 후에 yarn add bootstrap을 하면 사진과 같은 에러가 계속 나네요  인터넷에 찾아모니 모듈과 package-lock.json을 삭제하고 npm install하면 된다고 해서 했는데 그러면 yarn start로 웹서버창이 켜지지 않았습니다. 제가 의심스러운 것은 yarn 버전이 강의에서 쓰시던 버전과 달라서 그런건지 궁금합니다. 어떻게 해야 웹서버창도 켜고 yarn add bootstarp도 성공해서 웹 UI를 볼 수 있을까요?