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

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

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


typescript14

'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.
리액트 익스프레스 게시판 (React, Express typescript, file drag and drop) 리엑트(React)와 Node.js의 익스프레스(Express)를 활용하여 만든 프로젝트 입니다. 전반적인 기능은 아래와 같습니다. 1. 파일 드래그앤 드롭 2. 리엑트 hook-form을 활용한 데이터 바인딩 3. 데이터 등록은 FormData를 활용한 axios 라이브러리 사용 4. 리엑트 레덕스(redux)를 활용하여 상태 관리 5. 익스프레스 라이브러리를 활용한 서버 구성 6. multer를 활용한 파일 업로드 기능 구현 7. sqlite를 활용한 데이터베이스 구성 게시판(Notice Board) 작업을 한번 하고 나면 라이브러리, 프레임워크에 대한 기능이 좀 더 눈에 잘 들어옵니다. 게시판이라 불리는 기능에는 등록(Create), 읽기(Read), 수정(Update), 삭제(Delete) 의 기.. 2022. 6. 18.
타입스크립트 데코레이터(Typescript Decorator) 타입스크립트를 활용하여 만나보는 데코레이터(Decorator) 입니다. 앵귤러(Angular)를 활용하여 개발을 하다 보면 자주 만나는 기능이라 사실 앵귤러 환경에서만 지원되는 기능이라 생각 했었는데 타입스크립트에서 지원하는 기능인 줄 몰랐었습니다. 이래서 사람은 역시 공부를 깊게 해야되는가 봅니다.. * 기본적인 타입스크립트 개발환경을 알아야 합니다. 데코레이터는 자바의 에노테이션과 비슷한 느낌이 드는 기능으로, 데코레이터가 붙은 클래스, 메소드(함수) 및 변수 등에 데코레이터에서 정의된 기능이 동작하는 것을 의미 합니다. 아래 클래스 형태의 데코레이터가 적용 된 타입스크립트 코드를 살펴 보겠습니다. * 클래스에 적용하기, 파일 이름 : index.ts function whoAmI(target : Fu.. 2021. 7. 5.
앵귤러 튜토리얼 (Angular tutorial) - 3 * 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^ lts0606.tistory.com/328 앵귤러 튜토리얼(Angular tutorial) - 1 안녕하세요. 앵귤러에 대해서 알아보기위해 이곳을 찾아주신 분 들께 감사의 말씀 드립니다.^^ 천천히, 초심자도 조금 더 쉽게 접근할 수 있도록 내용을 구성하여 보겠습니다. 어�� lts0606.tistory.com 전 시간에는 ts파일에 메소드와 자료형을 토대로 콘솔이 동작하는 것 까지 확인 해 보았다. app.commponent.ts는 아직 자세히 알 수는 없지만, 웹 화면이 동작할 때 어떠한 행동을 만들어주는, 마치 Javascript의 내부에 쓰여진 코드같은 역할을 하는 것으로 볼 수 있다. 그.. 2019. 5. 23.
Typescript init, ES5 & ES6 그리고 상태변경 타입스크립트로 작업하다보면 간혹 만날 수 있는 오류가 있는데..바로 ES6, ES5관련된 오류이다. 해당오류는 여러 라이브러리를 받아서 사용하다보면 해당 라이브러라기 ES6기준으로 만들어져있어서 타입스크립트의 기본 컴파일 스타일인 ES5로 컴파일 할 때 발생하는 오류이다. Rxjs 모듈을 다운받아서 사용할 때 간간히 만나는 오류이다.. 구글링을 열심히 하다보면 타입스크립트가..아직 인기가 없어서인지 한글로된 자료는 거의 없는데다가..외국에서의 자료조차도 전문용어로 쓰여있어서 찾기 힘든데.. 아무튼 해당오류를 해결하기 위해서는 타입스크립트의 config파일이 필요하다. 해당 파일은 앵귤러js같은경우에 프로젝트를 생성하면 자동으로 만들어주는데, 앵귤러가 아닌 일반 프로젝트에서는 init이라는 명령어로 쉽게 .. 2019. 4. 26.
Typescript 네임스페이스 그리고 Import 타입스크립트에서 네임스페이스는 일종의 패키지 개념이다. 즉, 클래스나 인터페이스, 각종 함수 같은 내용을 한 파일에서 그룹화하여 관리 할 수 있게 해주는 개념이다. namespace classBody { //패키지 개념 export class classA{ //export를 하지 않으면 컴파일 오류가 난다. public num : number = 10; } export class classB{ public num : number = 20; } export function method() : void{ console.log('Just print..'); } } var cls = new classBody.classA(); console.log(cls.num); cls = new classBody.classB.. 2019. 4. 26.