frontend

프로젝트 생성 Vite로 프로젝트 생성하는 방법은 2가지가 있다 1. vite를 만들어주고 프레임워크랑 사용할 언어를 고르는 방법 npm create vite@latest yarn create vite 2. vite로 프레임워크랑 사용할 언어를 한번에 만드는 방법 // npm 6.x npm create vite@latest [프로젝트 명] --template react-ts // npm 7 버전 이상 npm create vite@latest [프로젝트 명] -- --template react-ts 마지막 부분 react-ts는 사용할 프레임워크와 언어에 따라 다르다 저는 2번 방법을 사용하여 프로젝트 세팅을 했습니다. npm 버전은 7버전 이상이라서 아래 명령을 사용했고 현재 폴더에 설치하기 위해 [프로..

이벤트 리스닝 하기 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행 v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용 인라인 핸들러 이벤트가 트리거될 때 실행되는 인라인 JavaScript 1 추가 숫자 값은: {{ count }} 메서드 핸들러 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로 v-on은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행할 수 있게 구현 function greet(event) { alert(`안녕 ${name.value}!`) // 'event'는 네이티브 DOM 이벤트 객체입니다. if (event) { alert(ev..

조건부 렌더링 v-if, v-else-if, v-else를 형제 요소로 사용할 수 있다 Hello Vue! Application.. Good Morning~ template 태그를 사용하면 template 안에 있는 내용만 출력된다 Hello Vue! Application.. 1234 987 Good Morning~ v-show true/false 값에 상관없이 해당요소를 구조적으로 출력하고 화면에 보이는지 아닌지는 CSS로 제어를 한다. 연결된 데이터의 true/false값에 따라 css의 display: none으로 바꾸거나 속성과 값을 제거하며 화면에 요소를 보여지거나 보여지지 않게 한다 초기 렌더링 비용이 높고 전환 비용이 낮다 보여지거나 보여지지 않는 구조가 많을 때 적합 v-cloak 디렉티브..

Computed 계산이 필요한 데이터를 사용할 때, computed 옵션을 사용하면 매번 계산을 하지 않고 첫번째 만들어진 결과를 캐싱해서 계산된 데이터를 다시 사용할 수 있다. ( methods는 계산 데이터를 사용할 때마다 계산을 한다 ) {{count}} {{double}} // 처음 계산된 데이터를 캐싱하여 다시 계산을 하지 않고 그대로 사용 {{double}} {{double}} {{double}} 계산된 데이터를 이용하여 내가 원하는 대로 데이터를 수정하여 사용할 수 있다 {{todo.title}} Watch 반응형 데이터가 변경되는 것을 감시하고, 변경될 때마다 정의한 함수가 실행된다 deep 객체 또는 배열 같은 참조형 데이터를 감시할 때 데이터 내부 일부 변경에 대해 감시하기 위해 깊은 ..