클래스 OOP? Work with (real-life) Entities in your code Class & Instnaces Objects : The things you work with in code (Instance of classes) Classes : blueprints for objects 객체를 정의 다수의 객체를 생성 Class 생성하기 class Department { //class field name:string; //생성자 함수 constructor(n: string) { this.name = n; } } const accounting = new Department('Accounting'); console.log(accounting); 자바스크립트로 컴파일하기 "use strict";..

TypeScript 컴파일러 wath 변경 사항이 잦을 때 watch 모드를 사용하면 변경사항이 생길 때마다 자동으로 컴파일 할 수 있다. tsc app.ts --w 전체 프로젝트 컴파일 / 다수의 파일 타입스크립트에게 프로젝트 단위로 컴파일해야한다고 알려줄 수 있다. 아래 커맨드를 통해 tsconfig 파일을 생성한다. tsc --init 한꺼번에 컴파일을 할 수 있다. tsc 특정 파일 제외시키기 tsconfig.ts 에서 exclude 설정을 통해 특정 파일을 컴파일 시 제외할 수 있다. "exclude": [ "analytics.ts", ] 아무 것도 설정하지 않으면 자동으로 node_modules이 제외된다. 패턴으로 제외시키기 "exclude": [ "*.dev.ts", //dev.ts가 포함..

v-model input의 값을 처리하기 위해서 v-bind + v-on한 버전 input의 type에 따라 value 값의 타입을 자동으로 변환해준다. v-model은 modifier도 제공한다. lazy 기본적으로 v-model은 각 입력 이벤트 후 입력과 데이터를 동기화하는데 lazy 옵션을 사용하면 change 이벤트 이후에 동기화할 수 있다. number value를 number로 변환해줌 (parseFloat()로 변환되지 않는 값일 경우 원래 값을 리턴해줌) trim 시작과 뒤의 공백을 제거해줌 Custom Form 만들기 v-model 은 v-bind와 v-on 의 숏컷이기 때문에 props와 emits를 이용하면 커스텀 폼에서도 v-model로 상태 값을 연결할 수 있다. RatingCo..

Literal Type 특정한 값을 변수의 타입으로 지정하는 것을 리터럴 타입이라고 한다. const foo:string; string , number 외에 특정한 값을 타입으로 지정할 수도 있으며 union 타입과도 같이 사용할 수 있다. resultConversion: 'as-number' | 'as-text' Type alias 사용하고자 하는 타입을 별칭으로 지정하여 재사용할 수 있다. type ConversionDescriptor = 'as-number' | 'as-text'; 타입 객체를 생성하는 것도 가능하다. type User = {name: string; age: number}; function greet(user:User) { console.log(`Hi I'm ${user.name}`..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 뷰 CLI에서 사용하는 NPM NPM 설치 npm install을 사용하면 npm 설정 파일 (package.json)에 설정된 라이브러리 목록을 다운로드할 수 있다. 앞에서 뷰 CLI로 프로젝트를 생성한 후 웹팩 추가 설정을 위해 플러그인 라이브러리나 애플리케이션 로직과 관련된 외부 라이브러리를 추가하려면 --save, ---save-dev 옵션을 활용한다. npm install --save , --save-dev 옵션 package.json 파일에 아래 속성을 확인할 수 있다. dependencies : 뷰 코어 라이브러리, 애플리케이션 동작에 필요한 라이브러리, --save로 추가 devDependencies : 웹팩 관련 라이브러리 , 개발..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. Vuex 뷰엑스는 애플리케이션의 상태 관리를 돕는 라이브러리이다. 상태(state) : 특정 데이터를 여러 컴포넌트가 공유하고 있을 때 그 데이터 상태 관리가 필요한 이유 최하단 컴포넌트에서 메인 컴포넌트로 데이터를 전달할 경우 그 사이에 너무 많은 컴포넌트가 있기 때문에 모든 컴포넌트를 거쳐서 props로 데이터를 전달하는 것은 번거롭고 관리도 힘들어지게 된다. 이벤트 버스를 사용할 경우 상-하위 간의 데이터 전달 구조를 따르지 않고도 한 번에 로그인 폼 컴포넌트에서 메인 컴포넌트로 데이터를 보낼 수 있게 쉽게 데이터를 전달할 수 있다. 하지만 단방향 데이터 흐름이 아닌 다양하고 많은 데이터 흐름일 경우에는 파악이 힘들어질 것이다. 이러한 이유로..

Do it! Vue.js 입문을 읽고 정리한 내용입니다. 기존 애플리케이션 구조 개선하기 현재 애플리케이션 구조의 문제점은 다음과 같다. 할 일을 입력했을 때 할 일 목록에 바로 반영되지 않는 점 할 일을 모두 삭제했을 때 할 일 목록에서 바로 반영되지 않는 점 화면을 4개의 컴포넌트로 분리해놓았기 때문에 한 영역의 처리 결과(TodoInput, TodoFooter)를 다른 영역(TodoList)에서 감지하지 못한다는 문제가 있다. 각 컴포넌트에 있는 같은 성격의 '할일' 이라는 데이터를 최상위 컴포넌트(App 컴포넌트)에 정의하고 하위 컴포넌트들에서 props로 전달하여 사용하도록 구조를 개선해볼 수 있다. 뷰 데이터 속성 todoItems와 로컬 스토리지 관리를 App 컴포넌트에서 한다..

Enum 사용자 지정 타입 원하는 범위 내의 유효한 값만 받고 싶을 경우에 사용할 수 있다. TypeScrpit enum Role { Admin, READ_ONLY, ATHOR, }; 자바스크립트에서는 아래처럼 컴파일된다. Javascript var Role; (function (Role) { Role[Role["Admin"] = 0] = "Admin"; Role[Role["READ_ONLY"] = 1] = "READ_ONLY"; Role[Role["ATHOR"] = 2] = "ATHOR"; })(Role || (Role = {})); ; Any 타입에 구애받지 않고 모든 타입을 저장할 수 있다. 하지만 타입스크립트의 장점을 상쇄시켜 바닐라 자바스크립트를 쓰는 것과 같기 때문에 잘 쓰지 않는다. any ..