javascript
-
Typescript - import & export & namespaceFront-end/Typesrcipt 2023. 4. 18. 16:55
Typescript exrpot typescript export 란 파일에 선언되어있는 변수 및 함수 등을 다른 파일로 내보내서 사용한다는 것이다. // test.ts // export 키워드를써서 다른 파일에서 사용할 수 있도록 한다. export var myName: string = 'zelord'; export var myAge: number = 27; export 키워드를 써서 다른 파일에 사용할 수 있도록 선언한다. export 키워드는 변수 뿐만 아니라 type 도 내보낼 수 있다. // test.ts export type MyName = string;// export 키워드를 사용하여 type 도 내보낼 수 있다. Typescript import Typescript import란 다른 파일에..
-
Typescript - public & privateFront-end/Typesrcipt 2023. 4. 18. 09:27
Typescript public Typescript public 이란 class에서 쓰이는 키워드이다. public 이 붙은 변수에는 모든 자식들이 사용 가능하다. class Pet {// 클래스를 선언한다. public name = 'bomi';// public 키워드 선언 (생략이 가능) constructor(a) { this.name = a; } } let myPet = new Pet('bomi');// 클래스 변수를 선언한다. myPet.name = 'ruru';// public 키워드가 붙은 변수를 사용/수정이 가능하다. public 키워드는 축약어를 사용하여 간단하게 코드를 짤 수 있다. class Person {// 클래스선언 constructor(public name: string) {//..
-
Typescript - never typeFront-end/Typesrcipt 2023. 4. 18. 02:07
Typescript never type Typescript never type 이란 function return 값에 붙일 수 있고, 에러함수를 사용할때 이거나 무한루프함수에서 사용하다. never type 은 return 값이 없어야하고 endpoint 가 없어야한다. // return값이 없는 error 함수 function myNever(): never { throw new Error(""); } // 무한루프함수 function myNever(): never { while (true) { /// } } 함수에는 return undefined 가 기본 내장되어있다. function myNever(param: string) { // param은 오직 string 타입만 올 수 있다. if(typeof..
-
Typescript - NarrowingFront-end/Typesrcipt 2023. 4. 18. 01:46
Typescript Narrowing Typescript Narrowing 이란 타입 에러를 피하기 위해 조건에 따라 변수를 더 정확한 타입으로 좁히는 방법이다. Typescript Narrowing 방법중 && 연산자를 사용하여 null 또는 undefined type 을 체크해 줄 수 있다. function narrowFn(a: string | undefined) { // string 타입이 아닌 undefined 타입이 올 경우 if ( a && typeof a === 'string' ) { // if문으로 narrowing 처리를 하여 string 타입만 허용 ... } } typeof 연산자는 number, string, boolean, object 등 타입을 지정하는것이 제한적이다. type키..
-
Typescript - HTML DOM 제어Front-end/Typesrcipt 2023. 4. 13. 17:22
Typescript DOM 제어 javascript 에서 DOM 조작 및 제어를 할땐 타입과 상관없이 조작하지만 typescript 에선 조작 및 제어를 하기위한 HTML 태그의 타입으로 Narrowing 처리를 해야한다. tsconfig.json 파일에서 Null 체크를하기위해 옵션을 추가해야한다. "strictNullChecks": true//엄격한 null타입 체크 HTML 태그 속 글자 변경 예시 타이틀입니다. 위의 html태그의 글자를 변경하기위해 타입스크립트에서 narrowing 처리를 해야한다. let title = document.querySelector('#title'); title.innerHTML = '타이틀 변경'; // narrowing이 필요하다. 에러 // narrowing 처..
-
Typescript - 설치 및 셋팅Front-end/Typesrcipt 2023. 4. 11. 10:46
Typescript 란 Javascript를 기반으로 타입을 추가하여 더 나은 도구를 제공하는 강력한 유형의 프로그래밍 언어이다. Typescript를 쓰는 이유 Javascript 는 Dynamic Typing(동적 타입 / week Type) 을 제공한다. Dynamic Typing 이란 변수의 타입 지정(Type annotation)없이 값이 할당되는 과정에서 자동으로 변수의 타입을 지정(타입추론 / Type Inference)해준다. 또한 같은 변수에 여러 타입의 값을 할당 할 수 있다. var str = 'Hello'; var num = 31; var strArr = ['Js', 'HTML', 'CSS']; var dynamicVariable = 'String'; console.log(dynam..
-
AEM Eclipse 폴더 구조 편하게 보기AEM 2022. 3. 10. 09:21
Eclipse 폴더구조 간단하게 보게 1. 프로젝트 패키지 시작폴더 변경 프로젝트명.ui.apps의 폴더를 마우스 우클릭 후 Properties 를 클릭후 AEM탭을 클릭한다. Contentsync root directory의 Browse... 를 클릭한 후 ui.apps > src >main > content > jcr_root 를 클릭후 OK버튼을 누른다. 설정된 화면은 이렇게 나타난다. Apply를 클릭한다. 2. 프로젝트 패키지 필요없는 폴더 숨기기 프로젝트명.ui.apps의 폴더를 마우스 우클릭 후 Properties 를 클릭후 Project Facets탭을 클릭한다. 체크 표시로 남겨두어야 할 Project Facet는 Content Module JavaScript Sightly 이다. 체크 ..