TypeScript6 dependencies, devDependencies 차이점 (@types/) Javascript 내에서 라이브러리의 의존성 관리를 위한 종류는 3가지로 나뉜다. > dependencies 현재 프로젝트를 실행하는데(런타임시) 필수적인 라이브러리들을 포함. 이는 컴파일을 수행하고 런타임 단계에서 수행되는 라이브러리들이 이에 해당된다. 프로젝트를 npm에 공개하여 다른 사용자가 해당 프로젝트를 설치하면 dependencies에 들어 있는 라이브러리도 함께 설치된다. (전이 의존성) yarn add react > devDependencies 현재 프로젝트를 개발하고 테스트를 하는데 사용되지만, 런타임에는 필요 없는 라이브러리들을 포함. 이는 런타임 단계에서는 수행되지 않고 이전 컴파일 단계에서까지만 수행되는 라이브러리가 해당 됩니다. ex) 컴파일 단계에서 사용하는 타입스크립트와 관련.. 2023. 11. 28. Cannot find module 'typescript' or 'ts-node' > Cannot find module 'typescript' 시 $npm install -g typescript $npm link typescript > Cannot find module 'ts-node' 시 위의 typescript 모듈이 먼저 전역 설치가 된 이후 진행한다. $npm install -g @types/node $npm install -g ts-node [참조 URL] https://github.com/TypeStrong/ts-node/issues/707#issuecomment-645757008 2023. 5. 7. Cannot find module 'png' or its corresponding type declarations. > 이슈 Typescript 프로젝트 중 src경로로 이미지 파일을 불러올 때, 아래와 같이 React에서는 발생하지 않던 오류가 발생하는 경우가 있다. Cannot find module 'xxx.png' or its corresponding type declarations. 타입을 정의하지 않았기 때문에 발생하는 오류이며 png 뿐만 아니라 jpg, webp, css, sass 파일 등도 등록을 해야 TypeScript에서 읽을 수 있다고 한다. > 해결 declare module을 통해 오류를 해결하면 된다. src/types/global.d.ts 파일 생성 // global.d.ts declare module "*.png"; declare module "*.jpg"; declare module "*.. 2022. 10. 26. setState is not a function 부모 컴포넌트의 boolean 상태값을(모달창 온오프) 자식 컴포넌트로 넘겨서 사용하던 도중 해당 오류를 접하게 되었다. Uncaught TypeError: setState is not a function 해당 오류의 해결책으로는 2가지 해결책이 제시되지만 1. Arrow function 사용 2. thisBinding 나는 이미 arrow function을 사용하여 상위 스코프의 this를 그대로 활용하고 있기 때문에 해결책이 아니였다. (thisBinding 과정 자체가 생략) > 원인 /* 부모 컴포넌트 */ const [open, setOpen] = useState(false); // 모달창 on off /* 자식 컴포넌트 props */ function ChildComponent(setOpen:.. 2022. 7. 29. HTMLInputElement에 number 사용하기 > 오류 페이지네이션을 작업하던 중 뜻하지 않은 에러가 나타났다. Argument of type 'string' is not assignable to parameter of type 'SetStateAction'. TS(2345) rowsPerPage는 페이지당 데이터 갯수(25개, 50개, 100개)를 보여주는 number인데 매개변수의 타입이 string이어서 number는 들어갈 수 없다는 오류이다. > 해결 구글링을 해본 결과 아주 높은 확률로 typeof e.target.value === 'string'이기 때문에, 타입스크립트가 오류로 뱉어내는 것이라 한다. HTML5에는 분명 number type input이 있긴 하지만, 일반 input과 차이가 없고 마크업의 내용상 개선과 클라이언트 구현.. 2022. 6. 28. for문 vs for...in문 vs forEach 인덱스 타입 다음 구문은 자바스크립트에서는 값이 나올지 몰라도 엄격한 타입스크립트에서는 Type Error를 뱉어낸다. // Typescript const myArray = [1, 2, 3]; for(var index in myArray) console.log(index * 2); // TS compiler error. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362) 이유는 간단하다. for...in 문의 index 타입은 string이기 때문! for...in문, 고전 for문, forEach문의 인덱스 타입을 정리해보았다. var myArray = [1, 2, .. 2021. 9. 23. 이전 1 다음
