frontend

Vue.js 템플릿 Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용한 모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 가상 DOM 개념에 익숙하고, JavaScript 본래의 기능을 선호한다면, 템플릿 대신 렌더 함수를 직접 작성할 수 있다 보간법 텍스트 보간법 데이터 바인딩의 가장 기본적인 형태는 "Mustache"(이중 중괄호) 문법을 사용한 텍스트 보간법 msg 속성이 변경될 때마다 갱신된다 메세지: {{ msg }} v-once 디렉티브 데이터가 변경되어도 갱신되지 않는 일회성 보간 수행 메세지(변하지않음):..

라이프사이클 훅 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 한다. 이 과정에서 라이프사이클 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 한다 라이프사이클 다이어그램 beforeCreate : Vue 애플리케이션이 만들어지기 전에 실행되는 라이프사이클 created : Vue 애플리케이션이 만들어진 직후 실행되는 라이프사이클 beforeMount : Vue 애플리케이션이 HTML 구조와 연결되기 직전의 라이프사이클 mounted : Vue 애플리케이션이 HTML 구조(DOM)..

제네릭 타입을 마치 함수의 파라미터처럼 사용하는 것 function toObj(a: T, b: T): { a: T; b: T } { // 재사용가능 return { a, b }; } toObj("a", "b"); toObj(1, 2); toObj(true, false); 타입변수를 명시적으로 넣어주지 않아도 된다. 그러나 첫번째 인수로 타입 추론을 하기 때문에 첫번째 인수와 타입이 다르면 에러가 발생한다 function toObj(a: T, b: T): { a: T; b: T } { // 재사용가능 return { a, b }; } toObj("a", 12); // 에러 발생 toObj(1, 2); // O toObj(true, false); // O 제약조건 제네릭을 더욱 안정적으로 사용할 수 있다 f..

추상 클래스 abstract(추상) : 클래스가 가져야 하는 실제적인 구현을 제외하고 클래스가 내부에서 가져야 되는 다양한 속성이나 메서드의 타입만 추상적으로 정의 추상 클래스는 class 앞에 abstract 키워드를 붙여줘야 한다 추상 클래스 vs 인터페이스 확장 : 추상 클래스는 extends 키워드 / 인터페이스는 implements 키워드 추상 클래스에서 확장할 클래스가 있으면 super()를 호출해야 한다 추상 클래스는 선언부와 구현부를 같이 포함할 수 있지만 인터페이스는 구현부를 포함할 수 없다 추상 클래스는 Is - A 관계로 extends 키워드를 통해 단일로 사용가능하다 class Dog extends AnimalA{} 인터페이스는 Has - A 관계로 implements 키워드 뒤에 ..