반응형
React + Typescript 프로젝트를 연습해보기 위해 아래 글을 참고하여 프로젝트를 만들어봤다.
https://time-memorizer.tistory.com/203
React 설치 오류(react@19.0.0 관련)
React JS를 공부해보려고 인터넷을 찾아 설치하려고 하는데 오류가 발생했다.npx create-react-app first-appCreating a new React app in /Users/hyosukjung/git/react-app/first-app.Installing packages. This might take a couple of minutes
time-memorizer.tistory.com
npx create-react-app [프로젝트 이름] --template typescript
이렇게 하니 지난번처럼 역시나 버전 관련 에러가 발생하여 버전을 변경하여 다시 설치했다.
npx create-react-app my-app
cd my-app
npm install react@18 react-dom@18
npm i web-vitals
npm start
그런데 이렇게 했는데 에러가 또 발생했다.
Failed to compile.
Module not found: Error: Can't resolve './App' in '/Users/hyosukjung/git/portfolio_2025/portfolio_project/src'
ERROR in ./src/index.tsx 7:0-24
Module not found: Error: Can't resolve './App' in '/Users/hyosukjung/git/portfolio_2025/portfolio_project/src'
ERROR in ./src/index.tsx 8:0-48
Module not found: Error: Can't resolve './reportWebVitals' in '/Users/hyosukjung/git/portfolio_2025/portfolio_project/src'
webpack compiled with 2 errors
처음에는 뭐가 문제인지 잘 몰랐는데, GPT한테 물어보고 이래저래 찾다보니 뭔가 typescript에 대한 의존성이 추가되지 않았다는 것을 발견했다.
다른 사람들을 보아하니 설치가 잘 되면 package.json 파일에 아래처럼 [@types/~] 이런 코드가 붙는것 같은데, 내꺼를 확인해보니 그런 코드가 전혀 없었다.
그래서 다시 GPT한테 어떻게 해야하는지 물어보니 typescript 관련 패키지를 설치해야 한다고 한다.
npm install typescript @types/react @types/react-dom @types/node --save-dev
- typescript: TypeScript 컴파일러
- @types/react, @types/react-dom: React 및 React-DOM용 TypeScript 타입 정의 파일
- @types/node: Node.js용 타입 정의 파일 (React 프로젝트에서 일부 유틸리티를 사용할 때 필요)
이렇게 하고나니 package.json 파일 제일 하단에 typescript 관련 코드가 생겼다
그리고 나서는 TypeScript 설정 파일을 추가해야 한다고 하는데, 프로젝트 루트에 tsconfig.json 파일이 있어야 TypeScript가 정상적으로 동작한다 하여 아래 명령어를 통해 파일을 생성했다.
npx tsc --init
그러고나니 정말 tsconfig.json 파일이 생성되었는데 생성된 파일 내의 최초 코드는 대부분 주석처리된 부분이 많았다.
그런데 일단 뭐 생성이 됐으니 의심 없이 재빌드 후 실행을 시켜봤다.
# 의존성 설치
npm install
# 프로젝트 실행
npm start
그런데 이렇게 실행하니 또 에러가 발생했다.
jeonghyoseogs-MacBook-Pro:portfolio_project hyosukjung$ npm install
npm error code ERESOLVE
npm error ERESOLVE could not resolve
npm error
npm error While resolving: react-scripts@5.0.1
npm error Found: typescript@5.7.3
npm error node_modules/typescript
npm error dev typescript@"^5.7.3" from the root project
npm error peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm error node_modules/fork-ts-checker-webpack-plugin
npm error fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm error node_modules/react-dev-utils
npm error react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm error node_modules/react-scripts
npm error react-scripts@"5.0.1" from the root project
npm error 1 more (tsutils)
npm error
npm error Could not resolve dependency:
npm error peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm error node_modules/react-scripts
npm error react-scripts@"5.0.1" from the root project
npm error
npm error Conflicting peer dependency: typescript@4.9.5
npm error node_modules/typescript
npm error peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm error node_modules/react-scripts
npm error react-scripts@"5.0.1" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error /Users/hyosukjung/.npm/_logs/2025-01-24T16_43_27_937Z-eresolve-report.txt
npm error A complete log of this run can be found in: /Users/hyosukjung/.npm/_logs/2025-01-24T16_43_27_937Z-debug-0.log
또 GPT한테 물어보니 이 오류는 react-scripts가 요구하는 TypeScript 버전(^3.2.1 || ^4)과 현재 설치된 TypeScript 버전(5.7.3) 간의 충돌 때문에 발생한 것이라고 한다.
react-scripts@5.0.1은 TypeScript 5 버전과 호환되지 않으므로, 이 문제를 해결하려면 TypeScript를 지원되는 버전으로 다운그레이드하거나, 강제로 설치를 진행해야 한다고 했다.
react-scripts@5.0.1에서 지원하는 TypeScript 버전은 4.x이라고 하여. TypeScript를 해당 버전으로 다운그레이드했다.
npm install typescript@4.9.5 --save-dev
다행히 react의 최초 화면을 만나볼 수 있었다. 드디어!
그런데 또 문제는, 이렇게 잘 실행되고 나서 터미널 창에 갑자기 이런저런 에러 메세지들이 뜬 것이다.
Compiled successfully!
You can now view portfolio_project in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.0.12:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
ERROR in src/App.test.tsx:2:32
TS2307: Cannot find module '@testing-library/react' or its corresponding type declarations.
1 | import React from 'react';
> 2 | import { render, screen } from '@testing-library/react';
| ^^^^^^^^^^^^^^^^^^^^^^^^
3 | import App from './App';
4 |
5 | test('renders learn react link', () => {
ERROR in src/App.test.tsx:3:17
TS6142: Module './App' was resolved to '/Users/hyosukjung/git/portfolio_2025/portfolio_project/src/App.tsx', but '--jsx' is not set.
1 | import React from 'react';
2 | import { render, screen } from '@testing-library/react';
> 3 | import App from './App';
| ^^^^^^^
4 |
5 | test('renders learn react link', () => {
6 | render(<App />);
ERROR in src/App.test.tsx:5:1
TS2582: Cannot find name 'test'. Do you need to install type definitions for a test runner? Try npm i --save-dev @types/jest or npm i --save-dev @types/mocha.
3 | import App from './App';
4 |
> 5 | test('renders learn react link', () => {
| ^^^^
6 | render(<App />);
7 | const linkElement = screen.getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
ERROR in src/App.test.tsx:6:10
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
4 |
5 | test('renders learn react link', () => {
> 6 | render(<App />);
| ^^^^^^^
7 | const linkElement = screen.getByText(/learn react/i);
8 | expect(linkElement).toBeInTheDocument();
9 | });
ERROR in src/App.test.tsx:8:3
TS2304: Cannot find name 'expect'.
6 | render(<App />);
7 | const linkElement = screen.getByText(/learn react/i);
> 8 | expect(linkElement).toBeInTheDocument();
| ^^^^^^
9 | });
10 |
ERROR in src/App.tsx:2:18
TS2307: Cannot find module './logo.svg' or its corresponding type declarations.
1 | import React from 'react';
> 2 | import logo from './logo.svg';
| ^^^^^^^^^^^^
3 | import './App.css';
4 |
5 | function App() {
ERROR in src/App.tsx:7:5
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
5 | function App() {
6 | return (
> 7 | <div className="App">
| ^^^^^^^^^^^^^^^^^^^^^
8 | <header className="App-header">
9 | <img src={logo} className="App-logo" alt="logo" />
10 | <p>
ERROR in src/App.tsx:8:7
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
6 | return (
7 | <div className="App">
> 8 | <header className="App-header">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | <img src={logo} className="App-logo" alt="logo" />
10 | <p>
11 | Edit <code>src/App.tsx</code> and save to reload.
ERROR in src/App.tsx:9:9
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
7 | <div className="App">
8 | <header className="App-header">
> 9 | <img src={logo} className="App-logo" alt="logo" />
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
10 | <p>
11 | Edit <code>src/App.tsx</code> and save to reload.
12 | </p>
ERROR in src/App.tsx:10:9
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
8 | <header className="App-header">
9 | <img src={logo} className="App-logo" alt="logo" />
> 10 | <p>
| ^^^
11 | Edit <code>src/App.tsx</code> and save to reload.
12 | </p>
13 | <a
ERROR in src/App.tsx:11:16
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
9 | <img src={logo} className="App-logo" alt="logo" />
10 | <p>
> 11 | Edit <code>src/App.tsx</code> and save to reload.
| ^^^^^^
12 | </p>
13 | <a
14 | className="App-link"
ERROR in src/App.tsx:13:9
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
11 | Edit <code>src/App.tsx</code> and save to reload.
12 | </p>
> 13 | <a
| ^^
> 14 | className="App-link"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 15 | href="https://reactjs.org"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 16 | target="_blank"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 17 | rel="noopener noreferrer"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 18 | >
| ^^^^^^^^^^
19 | Learn React
20 | </a>
21 | </header>
ERROR in src/index.tsx:4:17
TS6142: Module './App' was resolved to '/Users/hyosukjung/git/portfolio_2025/portfolio_project/src/App.tsx', but '--jsx' is not set.
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
> 4 | import App from './App';
| ^^^^^^^
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | const root = ReactDOM.createRoot(
ERROR in src/index.tsx:11:3
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
9 | );
10 | root.render(
> 11 | <React.StrictMode>
| ^^^^^^^^^^^^^^^^^^
12 | <App />
13 | </React.StrictMode>
14 | );
ERROR in src/index.tsx:12:5
TS17004: Cannot use JSX unless the '--jsx' flag is provided.
10 | root.render(
11 | <React.StrictMode>
> 12 | <App />
| ^^^^^^^
13 | </React.StrictMode>
14 | );
15 |
ERROR in src/reportWebVitals.ts:1:10
TS2305: Module '"web-vitals"' has no exported member 'ReportHandler'.
> 1 | import { ReportHandler } from 'web-vitals';
| ^^^^^^^^^^^^^
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
ERROR in src/reportWebVitals.ts:5:34
TS2339: Property 'getCLS' does not exist on type '{ default: typeof import("/Users/hyosukjung/git/portfolio_2025/portfolio_project/node_modules/web-vitals/dist/modules/index"); onCLS: (onReport: (metric: CLSMetric) => void, opts?: ReportOpts | undefined) => void; ... 10 more ...; FIDThresholds: MetricRatingThresholds; }'.
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^^^^^^
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
ERROR in src/reportWebVitals.ts:5:42
TS2339: Property 'getFID' does not exist on type '{ default: typeof import("/Users/hyosukjung/git/portfolio_2025/portfolio_project/node_modules/web-vitals/dist/modules/index"); onCLS: (onReport: (metric: CLSMetric) => void, opts?: ReportOpts | undefined) => void; ... 10 more ...; FIDThresholds: MetricRatingThresholds; }'.
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^^^^^^
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
ERROR in src/reportWebVitals.ts:5:50
TS2339: Property 'getFCP' does not exist on type '{ default: typeof import("/Users/hyosukjung/git/portfolio_2025/portfolio_project/node_modules/web-vitals/dist/modules/index"); onCLS: (onReport: (metric: CLSMetric) => void, opts?: ReportOpts | undefined) => void; ... 10 more ...; FIDThresholds: MetricRatingThresholds; }'.
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^^^^^^
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
ERROR in src/reportWebVitals.ts:5:58
TS2339: Property 'getLCP' does not exist on type '{ default: typeof import("/Users/hyosukjung/git/portfolio_2025/portfolio_project/node_modules/web-vitals/dist/modules/index"); onCLS: (onReport: (metric: CLSMetric) => void, opts?: ReportOpts | undefined) => void; ... 10 more ...; FIDThresholds: MetricRatingThresholds; }'.
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^^^^^^
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
ERROR in src/reportWebVitals.ts:5:66
TS2339: Property 'getTTFB' does not exist on type '{ default: typeof import("/Users/hyosukjung/git/portfolio_2025/portfolio_project/node_modules/web-vitals/dist/modules/index"); onCLS: (onReport: (metric: CLSMetric) => void, opts?: ReportOpts | undefined) => void; ... 10 more ...; FIDThresholds: MetricRatingThresholds; }'.
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
> 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
| ^^^^^^^
6 | getCLS(onPerfEntry);
7 | getFID(onPerfEntry);
8 | getFCP(onPerfEntry);
이번에도 GPT한테 물어봐서 하나씩 시키는대로 해봤다.
1. @testing-library/react 모듈 관련 오류
TS2307: Cannot find module '@testing-library/react' or its corresponding type declarations.이 오류는 @testing-library/react 모듈이나 해당 모듈의 타입 선언 파일이 설치되어 있지 않아서 발생
해결 방법: 아래 명령어로 해당 패키지를 설치
npm install @testing-library/react @testing-library/jest-dom --save-dev그리고 타입 선언 파일도 추가로 설치해야 할 수 있다.
npm install @types/testing-library__react @types/jest --save-dev
2. --jsx 플래그 관련 오류
TS17004: Cannot use JSX unless the '--jsx' flag is provided.이 오류는 TypeScript 컴파일러가 JSX 문법을 인식하지 못해서 발생하고, tsconfig.json 설정 파일에 JSX 옵션이 제대로 설정되지 않았을 가능성이 크다고 한다.
그런데 위에서 말한듯 tsconfig.json 파일이 최초에는 대부분 주석처리된 코드가 많았기 때문에, 일단 그 주석을 모두 풀어봤다.
tsconfig.json 최초파일
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */
// "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
// "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
/* Language and Environment */
"target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
// "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
// "jsx": "preserve", /* Specify what JSX code is generated. */
// "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
// "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
// "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */
/* Modules */
"module": "commonjs", /* Specify what module code is generated. */
// "rootDir": "./", /* Specify the root folder within your source files. */
// "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
// "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
// "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */
// "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */
// "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */
// "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */
// "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */
// "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
// "noUncheckedSideEffectImports": true, /* Check side effect imports. */
// "resolveJsonModule": true, /* Enable importing .json files. */
// "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */
// "noResolve": true, /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
/* JavaScript Support */
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
/* Emit */
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
// "noEmit": true, /* Disable emitting files from a compilation. */
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
// "outDir": "./", /* Specify an output folder for all emitted files. */
// "removeComments": true, /* Disable emitting comments. */
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
// "newLine": "crlf", /* Set the newline character for emitting files. */
// "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
// "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
// "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
/* Interop Constraints */
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
// "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
// "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
/* Type Checking */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
// "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
// "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */
// "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
// "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
// "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
// "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
/* Completeness */
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
여기 주석처리 된 애들을 모두 주석해지하고나서 다시 프로그램 실행을 해보니 react 화면도 잘 뜨고 더이상 에러메세지는 나오지 않았다.
반응형
'IT개발 > JS 관련' 카테고리의 다른 글
| [vue] Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점 (0) | 2025.02.10 |
|---|---|
| Vue.js 프로젝트 만들기 (0) | 2025.02.08 |
| 자바스크립트(JavaScript) JSON.stringify & JSON.parse (1) | 2025.01.24 |
| 자바스크립트(JavaScript) 필터(filter) (0) | 2025.01.24 |
| 자바스크립트 객체(JavaScript Object) (1) | 2025.01.21 |
댓글