[ 개념 ]계산된 값(computed value)을 만들 때 사용다른 반응형 데이터를 기반으로 자동으로 계산되는 값을 정의ref()나 reactive() 로 만든 값이 바뀌면, computed() 도 자동으로 다시 계산됨 [ 예시 ] 가격: {{ price }} 원 수량: {{ quantity }} 개 총합: {{ total }} 원 - price 나 quantity 가 바뀌면 total 도 자동으로 다시 계산됨- total 은 그냥 변수 처럼 쓸 수 있지만, 내부적으로는 computed() 가 캐싱하고 있음 [ 참고 ] https://ko.vuejs.org/guide/essentials/computed Vue.jsVue.js - 프로그래시브 자바스트립트 프레임워크ko..
[ 개념 ] 반응형(reactive) 데이터를 만들때 사용기본형 값(string, boolean 등)을 반응형으로 만들 때 사용내부적으로 .value 라는 프로퍼티에 진짜 값이 들어있음 [ 예시 ] Count: {{ count }} + count 를 ref() 객체로 선언ref() 객체의 .vaule에 진짜 값이 들어있다고 하였으므로 count의 값을 읽거나 수정할때는 count.value 로 접근해야함template 안에서는 .value 를 쓰지않고도 자동으로 꺼내주기 때문에 {{ count }} 로 써도 됨 React 를 공부했다면 , ref() 는 React 의 useState() 같은 역할을 하는 것 같다 . [ 출처 ] https://ko.vuejs.org/ap..
나는 그동안 XMLHttpRequest 만 사용해왔다.이번 정리를 통해 최신 API 기술( fetch(), axios)에 대해 확실하게 알고 넘어아가자! AJAX(Asynchronous JavaScript And XML) 란 ? 페이지 새로고침 없이 서버와 비동기적으로 데이터를 주고 받는 기술 방식웹페이지를 "부분적으로 업데이트" 할 수 있는 방법임 [ 구현 방식 ] 구현 방식 설명XMLHttpRequest (XHR)예전 방식. 콜백 기반. 복잡함.jQuery $.ajax()XHR을 jQuery로 감싼 것. 쓰기 쉬움.Fetch API최신 표준. Promise 기반. 깔끔하고 가독성 좋음.AxiosFetch를 더 편하게 만든 라이브러리. 자동 JSON 변환, 에러처리 등 좋음 Fetch ..
개념props부모 컴포넌트 -> 자식 컴포넌트로 데이터를 보내는 방법 defineProps: 부모로 부터 받을 데이터를 정의하는 함수 기존에 props 를 정의하는 방식 export default { props: { title: String, subtitle: String }} 기본값 설정 : default defineProps({ title: { type: String, default: '기본 제목' }}) 부모가 값을 넘겨주지 않을 때 기본값 설정 타입 체크(type) 타입 값은 필수는 아니지만 써주는 것이 좋음에러잡기도 편하고 코드 안정성이 생기기 때문 필수값 지정 : requireddefineProps({ subtitle: { type: ..
https://v3-docs.vuejs-korea.org/guide/essentials/template-syntax.html#directives 템플릿 문법 | Vue.js v3-docs.vuejs-korea.org ~~ Vue 공식 홈페이지 정리 ~~ 텍스트 보간법(Interpolation) Vue 에서 Interpolation 이란 ? {{ }}을 사용하여 JavaScript 데이터를 HTML에 삽입하는 방식 사용 예시 ) {{ name }} # HTML 출력 이중 중괄호는 데이터를 HTML 이 아닌 일반 텍스트로 해석함 ! -> 실제 HTML 을 출력하려면 `v-html` 디렉티브를 사용 디렉티브 Directive : Vue에서 DOM 요소에 특수한 반응형 동작..
2025.04.02 - [Frontend] - ES 모듈이란? 기본 ES 모듈 방식과 Vite 번들링 방식 차이 js 파일을 여러개로 나누고 필요한 것만 가져다 쓸 수 있도록 도와주는 기능 ! # ES 모듈" data-og-host="megak.tistory.com" data-og-source-url="https://megak.tistory.com/321" data-og-url="https://megak.tistory.com/321" data-og-image="https://scrap.kakaocdn.net/dn/TS3I4/hyYCkjUYz2/vAyC3h9Jb8r5TyylDMKiTK/img.png?width=800&height=800&face=0_0_800_800,https://scrap.kakaoc..
Vue를 인스톨하면 vite 가 기본설정으로 vite.config.js 파일이 자동 생성된다. 아래 코드에서 port 를 임의지정해주기 위해서 server 구조만 추가로 작성하였고 나머지는 기본설정에 포함된다 vite.config.js 설정을 기반으로 Vite의 번들링 과정을 알아보자 !! import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import vueDevTools from 'vite-plugin-vue-devtools'// https://vite.dev/config/export default defineConfig({ plugins..
해당글은 Vue 공식문서를 기반으로 작성되었으며 출처는 하단에 존재합니다. [ 개념 ] 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 표준 HTML, CSS 및 JavaScript 를 기반으로 구축컴포넌트 기반 프로그래밍 제공 [ 예시 ] import { createApp } from 'vue'createApp({ data() { return { count: 0 } }}).mount('#app') 숫자 세기: {{ count }} [ 예시로 볼 수 있는 Vue 의 주요특징 ] 선언적 렌더링(Declarative Rendering):Vue는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력..