프론트엔드(Front-End) (25) 썸네일형 리스트형 [TypeScript] es6 이전 자바스크립트의 클래스 선언과 prototype 자바스크립트와 클래스 es6 이후의 자바스크립트는 class 예약어를 통해 선언할 수 있습니다. 보통 웬만한 브라우저에서는 es6 문법을 지원하므로 우리는 자연스럽게 class 키워드를 통해 클래스를 선언합니다. 그러나, 과거 자바스크립트에서는 이러한 문법이 지원되지 않았기 때문에 클래스를 선언하려면 함수(function)을 사용해야 했습니다. 함수 내부의 변수를 통해 클래스의 속성(프로퍼티)를 구현하였습니다. // class var Person = /** @class */ (function () { function Person(name) { this.data = 0; this.name = name; } return Person; }()); var p1 = new Person('jo'); var p2 =.. [TypeScript] 타입스크립트의 타입 선언 : Class 타입스크립트와 Class 타입 타입스크립트에서는 클래스의 프로퍼티에도 타입을 지정할 수 있습니다. // 클래스의 타입 선언 class MyClass { name: string = ""; age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } } public, private, protected, static 타입스크립트는 자바(Java) 처럼 접근 제한자를 사용할 수 있습니다. 그런데, 타입스크립트의 접근 제한자는 자바의 접근제한자와 완전히 똑같지는 않은 것 같습니다. 그냥 자바스크립트는 접근제한자가 없으니, 변수의 사용 범위를 조금 더 제한해주는, const 의 상위 호환 버전 같은 느낌인거 .. [TypeScript] 타입스크립트의 타입 선언 : Object 타입스크립트와 Object type 타입스크립트에서 Object도 타입으로 선언할 수 있는데, 아래와 같이 타입을 선언할 수 있습니다. // Object 타입 선언 let myObject1: { name: string } = { name: "jay" }; console.log(myObject1); // { name: 'jay' } // type alias로 타입 선언도 가능하다 type MyObject = { name: string; age: number; }; let myObject2: MyObject = { name: "john", age: 13, }; console.log(myObject2); // { name: 'john', age: 13 } 타입스크립트의 literal type 타입스크립트에서 .. [TypeScript] 타입스크립트의 타입 선언 : Array 와 Tuple 타입스크립트와 배열 타입스크립트에서 배열의 타입 선언은 아래와 같이 선언합니다. // 배열의 타입 선언 let stringArray: string[] = ["hello", "world"]; let numberArray: number[] = [1, 2, 3]; 자바스크립트의 배열은 destructuring assignment가 가능합니다. 이 문법을 사용하면 기존에 작성된 배열에다가 새로운 요소를 간편하게 추가할 수 있습니다. // 배열의 타입 선언 let stringArray: string[] = ["hello", "world"]; let numberArray: number[] = [1, 2, 3]; // 배열의 destructuring 문법 let newArray: string[] = [...strin.. [TypeScript] 타입스크립트와 타입 선언 타입스크립트와 타입 타입스크립트는 모든 변수, 함수의 파라미터나 리턴타입, 오브젝트(Object), 클래스(class) 등에 대하여 타입을 설정할 수 있다. 말 그대로 Java와 같은 프로그래밍 언어에서 자료형을 정하는 것과 같습니다. 타입스크립트의 타입 추가 타입스크립트는 자바스크립트 변수 등에 타입(like 자료형)을 추가할 수 있습니다. // 자바스크립트 변수에 타입을 추가하기 let someVariable1: number = 123; let someVariable2: string = "hello"; let someVariable3: boolean = true; // let someVariable4: number = "123"; // 오류! 타입스크립트는 타입과 다른 값이 변수에 할당되려 하면 아래.. [TypeScript] 타입스크립트와 설치 TypeScript란? 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[4] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. 타입스크립트는 자바스크립트 엔진을 사용하면서 커다란 애플리케이션을 개발할 수 있게 설계된 언어이다.[5] 자바스크립트의 슈퍼셋이기 때문에 자바스크립트로 작성된 프로그램이 타입스크립트 프로그램으로도 동작한다. 타입스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. 타입스크립트는 모든 운영 체제, 모든 브라.. [REACT] Immer와 불변성 Immer란?? immer에 대해 이야기 하기 전 우리는 리액트의 함수형 컴포넌트와 Hook에 대하여 이해해야 합니다. https://1-hee.tistory.com/27 [REACT] 리액트의 컴포넌트(COMPONENT) 1. REACT의 컴포넌트(Component)란? 리액트는 화면을 컴포넌트(Component) 단위로 구성합니다. 컴포넌트란 화면을 구성할 수 있는 각각의 자바스크립트 파일들을 의미하며 root 태그로 묶여있습니다. 리 1-hee.tistory.com https://1-hee.tistory.com/33 [REACT] 리액트와 훅(HOOK) 리액트의 훅(Hook)이란? 리액트의 함수형 컴포넌트는 클래스형 컴포넌트와 같은 문법으로 state를 생성, 작성, 수정 등이 어렵습니다. 그래서 .. [REACT] Context API ContextAPI란? 리액트에서 컴포넌트간 데이터의 흐름은 단방향 입니다. 이러한 특징은 JavaScript라는 언어의 특성 상 디버깅이 어렵다는 단점을 보완하기 위해 도입된 rule에서 기인하는데요. 그래서 컴포넌트 간에 데이터를 전달하려면, 부모 컴포넌트로부터 props의 형태로 값을 물려 받아야 할 것입니다. 개발을 편하게 하려고 이러한 규칙을 정했다지만, 개발을 하다보면 컴포넌트 간에 데이터를 송수신 해야 할 경우가 무척이나 많겠죠? 아래의 모식도를 보겠습니다. 리액트로 개발된 어떤 SPA가 위의 모식도와 같이 구성되어 있다고 가정해 봅시다. 개발자가 C라는 컴포넌트에서 이벤트가 발생하면 이웃한 B와 E 컴포넌트에서 어떤 데이터가 반영되고자 한다면 모식도 처럼 최상위 컴포넌트인 App 컴포넌트부.. 이전 1 2 3 4 다음
