분류 전체보기

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..

저번 달의 목표 달성 기록하는 습관 가지기 "왜"?라는 생각 가지기 건강 챙기기, 운동 열심히 하기 다음 3가지를 목표로 했는데 1.5개 달성한거 같다😓 한달 동안 운동을 거의 못했던거 같다... 졸업 작품이라는 핑계 아닌 핑계로 운동을 가지 않았다.. 그리고 기록하는 습관은 점점 익숙해지는 것 같다 항상 조금씩 기록하고 내가 기록한 내용을 공개하려고 노력하고 있다 ㅎㅎ 한달 간 기록 강의 1 ~ 2주차 : 노션 클로닝 개인 프로젝트 첫째주, 둘째주 모두 노션 클로닝 프로젝트를 진행했다. Vanila JS만을 이용해 노션을 클로닝 하는 프로젝트였다... 요구사항을 구현하는데 정말 어려웠다 처음 노션 페이지를 봤을 때는 나름 간단한(?) 프로젝트라고 생각을 했다. 그러나 요구사항을 하나씩 정리하다 보니까 ..