구조 project ├─ .eslintrc.js # eslint 설정 파일 ├─ .gitignore # 깃에서 특정 파일 혹은 디렉토리를 관리 대상에서 제외할 때 사용하는 파일 ├─ .prettierrc # prettier 설정 파일 ├─ babel.config.js # babel 파일 ├─ package-lock.json # 파일이 생성되는 시점의 의존성 트리에 대한 정보(안정성) ├─ package.json # 프로젝트 정보와 의존성(dependencies) 관리 문서 ├─ public #제일 처음 로드되는 기본 html - div id="app"을 통해 뷰가 호출 ├─ src │ ├─ App.vue # 최상위 컴포넌트 │ ├─ assets #기타 부수적인 내용의 파일 및 폴더를 넣어놓는 디렉토리 │..
Overloading 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것을 함수의 오버로딩이라고 한다. 파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것 함수의 다형성(다양한 형태)을 지원하는 것 function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다. 나쁜 예시 type Add = { (a: number, b: number) : number; (a: number, b: string) : number; } const add: Add = (a, b) => { if(typeof b === "string") return a; return a + b; } 실제 사용 type Config = { path: str..
💡 This : 객체를 참조하는 키워드 this의 값은 함수를 호출한 위치에서 결정됨. 1. 단독으로 쓰인 this this를 호출하는 경우엔 global object를 가리킨다. 브라우저에서 호출하는 경우 ⇒ [object Window] ES5 strict mode(엄격 모드)에서도 마찬가지 'use strict'; let x = this; console.log(x); //Window 2. 함수 안에서 쓴 this 함수 안에서 this는 함수의 주인(window객체)에게 바인딩 sloppy mode function myFunction() { return this; } console.log(myFunction()); //Window let num = 0; // (전역변수) function addNum()..
클래스 생성 class User { constructor ( private firstName: string, private lastName: string, private nickname: string ){} } 추상 클래스 - abstract abstract class User { // 추상 클래스 constructor ( private firstName: string, private lastName: string, protected nickName: string // protected로 해야 자식 클래스에서 접근 가능 ){} abstract getNickNmame(): void; // 추상 메소드, 상속받은 클래스에서 반드시 정의해야 함 getFullName() { return `${this.first..
Call Signatures 함수위에 마우스를 올려뒀을 때 뜨는 타입 생성 // 기본 함수 function sum(a: number, b: number) { return a + b; } // 일반 함수 선언식 function world(name: string):string { return `hello ${name}`; } // 일반 함수 표현식 let world2 = function (name: string):string { return `hello ${name}`; } // 익명함수 type Add = (a:number, b:number) => number; // const add = (a:number, b:number) => a+b; const add:Add = (a, b) => a + b; //화살..
화살표 함수 VS 람다 함수 람다 함수 일반함수 기본형 (함수명 포함) function 함수명(){ 함수 로직 } function honey(){ console.log("hi"); } 익명함수 기본형 (일회용, 함수명 미포함) 익명함수는 메모리를 차지하지 않아 일회용으로 많이 사용된다. ⇒ 불필요한 메모리를 줄일 수 있다. 변수에 주로 담겨서 많이 사용된다. (리터럴 방식) function() { 함수 로직 } const honey = function (){ console.log("hi"); } 익명함수는 호이스팅 시 위로 올라가지 않고 익명 함수를 저장한 변수만 올라가게 된다. 일반 함수일 땐 정상적으로 호이스팅되어 에러 발생X 💡 호이스팅 : 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또..
let a = "hello"; // 타입 추론으로 형 명시 let b : boolean = false; // 타입을 명시적으로 명시, 비추 let c : number[] = []; // 숫자형 배열 선언, 이런식으로 추론 불가일때 명시 표현 타입 모든 객체가 name요소 존재, 몇 명만 age요소가 존재할 때 // 객체의 형 명시 const player : { name:string, age?:number // ?를 붙이면 undefined일 수도 있음 명시 } = { name:"Honey" } if(player.age && player.age < 10) { //age가 undefined일수도 있기 때문에 보호장치 } 더 나은 코드, 별칭 생성 type Player = { //첫 글자는 대문자 name:s..
인터페이스 타입이랑 비슷함 (타입 체크를 위해 사용) 상호 간에 정의한 약속 혹은 규칙을 의미 just 객체의 모양을 TS에게 알려주기 위해 사용 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. 사용이유 타입의 이름을 짓고 코드 안의 계약을 정의 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체에 접근하는 방식 클래스 프로퍼티 컴파일러가 검사하는 프로퍼티의 두 가지 요소 필수요소 프로퍼티의 유무 프로퍼티 타입 예약어로 프로퍼티를 세밀하게 컨트롤 가능 ? : Optional Properties readonly : 읽기 전 type Team = "red" | "blue" | "y..
