겨리의 개발일기

vite를 사용해서 React + TS 프로젝트 환경을 세팅하던 중 ESLint 오류가 발생했다. 🧨 에러 .eslintrc.cjs와 vite.config.ts 파일에서 ESLint 오류가 발생하고 있다. 😬😬 에러 내용 // eslintrc.cjs Parsing error: ESLint was configured to run on /.eslintrc.cjs using parserOptions.project: /tsconfig.json However, that TSConfig does not include this file. Either: - Change ESLint's list of included files to not include this file - Change that TSConfig to i..

Programming/기타 2024. 1. 12. 18:36

React와 TypeScript 기반의 프로젝트에 Tailwind CSS 를 설치하는 과정에서 에러를 발견했다. 나중에 비슷한 일이 생기면 참고하기위해 기록해둔다. 일단 Tailwind CSS 설치하는 방법부터 시작! Tailwind CSS 설치하기 ✅ 터미널을 열어 설치 명령어를 입력해준다. npm install -D tailwindcss ✅ 설치가 완료되면 init 명령어를 입력한다. → tailwind.config.js 파일을 생성하기 위함 npx tailwindcss init tailwind.config.js 파일이 생겨서 확인해보니... 에러가 났다! 'module' is not defined' 검색을 해보니 ESlint 설정시 env 쪽에 node를 설정해주지 않아서 나타나는 현상이라고 한다...

Programming/기타 2023. 7. 14. 15:43

함수 ✅ 타입스크립트로 함수를 작성한 코드 function hello(name: string,age?: number ) : string{ if(age !== undefined) return `Hello, ${name}. You are ${age}.`; else return `Hello, ${name}.`; } console.log(hello('gyeol',30)); // "Hello, gyeol. You are 30." 출력 🤔 만약 매개변수 age를 name보다 먼저 선언하고 싶다면? function hello(age?: number, name: string) : string{ if(age !== undefined) return `Hello, ${name}. You are ${age}.`; else r..

Programming/TypeScript 2023. 6. 20. 21:29

타입스크립트를 쓰는 이유 🤔 브라우저는 타입스크립트를 이해하지 못한다. 근데 왜 이걸 사용할까? ✅ JavaScript는 동적언어. 런타임에 타입이 결정되고 오류가 발견된다. → 만약 개발자가 실수를 하게되면 오류가 사용자에게 그대로 노출된다. ✅ Java, TypeScript는 정적언어. 컴파일시 타입이 결정되고 오류가 발견된다. 타입스크립트 기본타입 타입스크립트의 기본 타입에는 크게 열두가지가 있다. Boolean, Number, String, Object, Array, Tuple, Enum, any, void, null, undefined, never String, Number, Boolean, Array // number, string, boolean let age:number = 30; let ..

Programming/TypeScript 2023. 6. 20. 13:57

기존 React + JavaScript 를 사용하여 개발하던 프로젝트를 TypeScript로 변경하는 과정에서 에러가 발생했다. .js 파일을 .tsx 파일로 변경하고 타입을 잡아줬는데도 에러가 잡히지 않았다. 에러 사진 에러 내용 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead. 대강 'React'는 UMD 전역을 뜻하지만 현재 파일은 모듈이니 가져오기를 추가하는 것이 낫다 라는 뜻이다. 해결 방법 🔨 첫 번째 방법 가장 간단한 해결 방법은 각 파일에 React를 import 하는 코드를 추가해주는 것! import React from 'react' 하지만 이 방법은 각 파..

Programming/TypeScript 2023. 5. 26. 15:29

v-text-filed ui 컴포넌트 에서 v-mask 기능을 사용해야하는데 구글링해서 나오는 방법으로는 실패했고 사수의 도움으로 간신히 해결한거라 기록한다 (ㅠ.ㅠ) 보통 밑의 내용처럼...해결하는데 https://thewebdev.info/2022/03/13/how-to-use-mask-in-a-vue-js-vuetify-text-field/ How to use mask in a Vue.js Vuetify text field? - The Web Dev Spread the love Related Posts How to override Vuetify styles with Vue.js?Sometimes, we want to override Vuetify styles with Vue.js. In this a..

Programming/Vue.js 2022. 7. 17. 23:49