디렉티브 기본 사용법 v-on:submit.prevent="onSubmit" // 이름(name):전달인자(argument).수식어(modifiers)="값(value)" v-text {{양방향 데이터 바인딩}} 타입 string 설명 🔖 엘리먼트의 텍스트 컨텐츠를 업데이트 세부사항 v-text는 엘리먼트의 텍스트 컨텐츠 속성을 설정 엘리먼트 내부의 기존 컨텐츠를 덮어씀. 텍스트 컨텐츠의 일부를 업데이트해야 하는 경우, 이중 중괄호를 사용 필요 사용법 {{msg}} v-show 타입 any : truthy를 판단해줄 수 있는 값 설명 🔖 표현식의 truthy 값을 기반으로 엘리먼트의 가시성을 전환 세부사항 v-show는 인라인 스타일을 통해 display CSS 속성을 설정 엘리먼트가 표시될 때 초기 d..
생명주기 표 onMounted() 타입 function onMounted(callback: () => void): void 설명 컴포넌트가 마운트된 후 호출될 콜백을 등록 컴포넌트가 마운트 되었다고 간주하는 조건 동기식 자식 컴포넌트가 모두 마운트됨( 트리 내부의 비동기 컴포넌트 또는 컴포넌트는 포함하지 않음). 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입됨. 앱의 루트 컨테이너가 Document 내에 있는 경우에만 컴포넌트의 DOM 트리가 문서 내에 있음을 보장 서버 사이드 렌더링 중에 호출X 예제 onUpdated() 타입 function onUpdated(callback: () => void): void 설명 반응형 상태 변경으로 컴포넌트의 DOM 트리가 업데이트된 후 호출될 콜백 등록 부모 ..
컴포넌트의 이름은 Multi-word를 사용 단일 단어(Card, Modal, Button)로 이름지으면 이름이 중복될 가능성이 있으며 명료하지 않다. // Bad Case - Card.vue - Button.vue - Modal.vue // Good Case - UserCard.vue - UserButton.vue - UserUserModal.vue 부모 컴포넌트와 강하게 엮여있는 컴포넌트는 부모 컴포넌트의 이름을 prefix로 사용 nest방식의 단점 비슷한 이름을 가진 파일이 너무 많으면 단축키로 파일간의 이동이 어려워진다. 하위 경로로 엮인 구조가 늘어나면 IDE의 사이드바에서 컴포넌트들을 브라우징하는데 더 많은 시간이 걸릴 수 있다. // Bad Case - User.vue - Card.vue ..
구조 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; //화살..
