본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


앵귤러, 리엑트, 뷰110

'ImportMeta' 형식에 'env' 속성이 없습니다. 타입스크립트(Typescript) 환경에서 env를 import 하는 경우에 발생하는 컴파일 단계에서의 오류 입니다. 가령 아래와 같은 코드를 사용하려 하는데.. 해당 오류를 만나는 경우가 있습니다. const mode : string = import.meta?.env?.MODE if(mode ==='development'){ console.log('개발모드 입니다') } else { console.log('운영모드 입니다') } 타입스크립트가 meta 이하의 env가 무엇인지 몰라 발생하는 오류이므로 해당 오류를 해결하기 위해서는 간단하게 파일 한개만 추가하여주면 됩니다. * 파일이름 : env.d.ts (경로는 최상위 src 디렉토리이여 합니다) //인터페이스를 통한 타입 추론 interface Im.. 2023. 12. 12.
[Vite] Vite 개발 환경에서 타입스크립트(Typescript) 적용하기 vite 환경에서 타입스크립트(Typescript) 환경을 설정하는 방법입니다. 당황스럽게도 아무것도 하지 않아도(?) ts 파일이든 js 파일든지간에 vite는 훌륭하게 컴파일을 해 줍니다. 아무 생각없이 위 사진처럼 코드를 넣고 vite 명령어를 실행하면 그냥 컴파일된 내용이 나오는 걸 볼 수 있습니다. 그렇지만 이러한 경우 eslint에서 나오는 "Parsing error : Unexpected token" 또는 "빠른 수정을 사용할 수 없습니다" 같은 오류를 만나게 되므로 몇가지 추가 설정을 해 주어야 합니다. * 모듈 추가 yarn add @typescript-eslint/parser --dev 개발 모듈을 설치한 뒤에 tsconfig.json 파일을 루트 폴더에 생성하여 줍니다. * 파일 이름.. 2023. 12. 11.
[Vuejs] Mock 적용하기(vite) vite 환경에서 mock 환경을 구성하여 보았습니다. * 타입스크립트를 사용하지 않았습니다. 필요한 모듈은 2개 입니다. yarn add mockjs yarn add vite-plugin-mock 먼저 응답에 사용될 함수를 만들어 줍니다. 함수는 익명함수로 만들되, 배열형태의 값을 반환하면 됩니다. 만약, 타입스크립트를 사용 한 다면 타입제한을 붙일 수 있습니다(MockMethod 타입 등) * 파일이름 : index.js //URL 목록 export default function () { return [ { url: '/api/get', //get 방식 method: 'get', response: ({ query }) => { console.log(query) return { code: 0, data.. 2023. 11. 21.
[Vuejs] setup function returned a promise, but no <Suspense> boundary was found in the parent component tree 뷰 개발 환경에서 만날 수 있는 경고문구 입니다. setup function returned a promise, but no boundary was found in the parent component tree 라우터 기반의 환경에서 라우팅 되어야 할 컴포넌트에 setup 부분에 반환 형태가 promise 인 경우 해당 경고문구와 함께 아무것도 뜨지 않을 수 있습니다. * 대상 : 샘플 vue 파일 이때 라우팅하는 파일에 keepAlive 노드를 붙여주믄 해당 문제는 해결 가능 합니다. 2023. 10. 16.
Vuejs 인덱스 파일 사용하기(index.js, index.ts) 파일 형식은 아래와 같습니다. * 파일 이름 : index.js export { default as 이름1 } from './이름1.vue' export { default as 이름2 } from './이름2.vue' export { default as 이름3 } from './이름3.vue' 해당 파일을 만들어준 뒤에 사용법은 기존 인덱스 파일 사용법과 동일 합니다. 간단 정리 끝! * 굳이 저렇게 사용하실꺼면..차라리 글로벌 컴포넌트로 등록하시는 걸 추천드립니다. 2023. 10. 16.
[Vue warn] Extraneous non-emits event listeners ... vuejs 3 [Vue warn]: Extraneous non-emits event listeners (.....) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. at at > at at at at at at at 뷰 환경에서 만날수 있는 경고문구 입니다. 해당 경고문구는 정의되지 않는 html element 이벤트를 사용자가 사용할 경우 발생 합니다. *.. 2023. 8. 23.