Sweat100

[1028 책] 너의내면을 검색하라 by 차드 멩탄

Sweat100 — Fri, 16 Jan 2026 00:14:21 +0900

1단계 주의력 훈련

2단계 자기이해와 자기통제

3단계 유용한 정신습관 창조

감성지능은 학습되는 능력

>> 행복훈련 : 현상을 바라보는 깊은 통찰에서 시작.

>> 행복 설정값

>> 반응의 유연성 >> 감정에 이름을 붙이자 "나는 분노를 느껴" >> 감정의 고해상도 인지능력

2분 마음챙김 >> 행위에서 "존재"로 전환, 그냥 존재하는 것은 인생에서 가장 평범하면서도 동시에 가장 귀중한 경험 . 살아있음, 존재함을 느낀다.

주의력 , 메타주의력(주의력이 벗어났음을인지)

명상 >> 고요함, 청명함, 행복

행복은 마음의 초기 상태다. "행복은 허용하는것" 행복은 이미 존재한다. >> 나의 행복을 챙기겠다.

자신을 자애로운 할머니의 마음으로 봐라.

1. 사실을 인정한다.

2. 판단하거나 반응하지 않고 경험한다.

3. 반응해야 한다면 마음챙김을 유지한다. - 감각, 의도, 움직임

4. 그냥 내버려둔다.

마음 챙김 듣기 = 경청 , 상대 몰입

우리가 타인에게 줄 수 있는 가장 귀중한 선물은 우리의 존재다.

마음챙김 대화

>>듣기

>>루핑 = 청자가 화자의 말을 완전 히 이해할 수 있도록 서로 돕는 협력프로젝트

>>디핑 - 상대 말에 집중을 방해하는 내적 요소들을 그냥 주목하고 인정해야한다. 듣기에 어떤 영향을 주는지만 의식하라.

2026-01-15

존재만으로 행복할수 있음을 허락할것.

듣기를 명상으로 사용할 수 있음을 몰랐다. 필요하다. 디핑이 필요한 상황도 많이 경험하는거같은데.

cpu, gpu 차이

Sweat100 — Sat, 9 Aug 2025 09:34:36 +0900

CPU : 헤비한 연산 , 코어수 적고 병렬처리 최적화 X

GPU : 자잘한 작업을 병렬로 잘한다.

딥러닝모델 : 엄청 큰 행렬 연산을 어떻게 효과적으로 할 수 있을까?

딥러닝 모델들은 자잘한 작업을 엄청 많이 해야함 GPU 작업에 훨씬 어울림

엔비디아가 Cuda드라이버 생태계를 잘 조성해놔서 최적화가 잘되있음

이름	중앙 처리 장치 (Central Processing Unit)	그래픽 처리 장치 (Graphics Processing Unit)
주 역할	범용 컴퓨팅 (논리, 조건문 등)	대규모 병렬 계산 (행렬 곱 등)
코어 수	적고 강력함 (4~16개)	많고 가벼움 (수백~수천 개)
구조	직렬 처리 중심	병렬 처리 중심

Vue.js - API 호출 정리 - Promise

Sweat100 — Thu, 7 Aug 2025 13:42:14 +0900

API 호출	호출 시점	- 페이지 로딩시 onMounted : DOM 이 준비된 뒤 실행 - 값이 바뀔때 watch() : 반응형 데이터 변경시 - @click = "함수" : 사용자 UI 상호작용(인터렉션) 발생시
	호출방법	fetch	Promise 기반 1. 기본적용 2. header 설정 필요, body 를 분명히 명시해야 하고, JSON.stringify() 수동파싱 3. 응답을 res.json() 직접호출 4. 구버전 브라우저 안됨
	호출방법	axios	Promise 기반 1. npm install axios 2. header application/json 자동설정, 객체 전달시 자동 JSON처리- JSON.stringify() 3. res.data 로 받음 기타. timeout 지연, 인터셉터 지연, 폴리필지원으로 IE11 까지 지원(내부 XHR 사용)
	비동기 처리 흐름 정	1995~2014: 콜백(callback)	- 초창기 JavaScript는 비동기 작업을 콜백 함수로 처리. - 중첩 호출이 많아지면 "콜백 지옥(callback hell)" 발생.
		2005: AJAX 등장	- XMLHTTPRequest(XHR)를 기반으로 서버와 비동기 통신 가능해짐. - Gmail, Google Maps 등에서 사용되며 대중화.
		2015 (ES6): Promise 도입	- 비동기 처리 후, 결과를 나중에 알려주는 객체 - 콜백 대신 `.then()` 체이닝으로 가독성과 에러 처리 개선.
		2015 (ES6): Promise 도입	promise // then, catch 전에는 pending 상태 .then(result => { console.log("Then:", result); // fulfilled 성공하면 이 블록 실행 }) .catch(error => { console.error("Catch:", error); // rejected 실패하면 이 블록 실행 });
		2015 (ES6): fetch API 등장	- XHR을 대체할 새로운 API로, Promise를 기반으로 동작. - 네트워크 요청을 더 간단하게 작성할 수 있게 함.
		2015 (ES6): fetch API 등장	1. fetch 는 Promise로 반환 const promise = fetch('/api/data'); console.log(promise); // Promise { <pending> } 2. POST,PUT, PATCH 사용시 반드시 headers, body 직접작성 - Promise 형식 처리 fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' // 꼭 명시! }, body: JSON.stringify({ name: '홍길동', age: 30 }) }) .then(res => res.json())// res.json() 도 Promise { <pending> } .then(data => console.log(data));
		2017 (ES8): async/await 문법 도입 (작성 권장)	- Promise를 더 간결하고 동기 코드처럼 작성할 수 있게 함. - 내부적으로는 Promise를 기반으로 동작하며, 가독성 향상. - async 는 비동기작업(await)로 기다리다 결과를 res에 저장 async/await 버전 async function postData() { try { const res = await fetch('/api/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: '홍길동', age: 30 }) }); const data = await res.json(); // 결과처리 } catch (error) { console.error("에러 발생:", error); throw error; // 에러도 밖으로 던져줘야 catch에서 처리 가능 } } postData();
		2016 : axios	import axios from 'axios'; async function postData() { try { const res = await axios.post('/api/data', { name: '홍길동', age: 30 }); res.data; // 결과처리 } catch (error) { console.error("에러 발생:", error); } } postData();
		2020 : Vue 3.x	<script setup> import { ref, onMounted } from 'vue'; import axios from 'axios'; const result = ref(null); onMounted(async () => { try { const res = await axios.get('/api/data'); result.value = res.data; } catch (err) { console.error("에러:", err); } }); </script>

Promise	비동기 처리 후, 결과를 나중에 알려주는 객체 Promise.resolve(value) // 즉시 성공상태 promise 생성 Promise.reject(error) // 즉시 실패상태 promize 생성
함수	Promise.all	모두성공시 실행	const fetchUser = () => axios.get('/api/user'); const fetchPost = () => axios.get('/api/post'); const fetchComment = () => axios.get('/api/comment'); Promise.all([fetchUser(), fetchPost(), fetchComment()]) .then(([user, post, comment]) => { console.log(" ", user.data); console.log(" ", post.data); console.log(" ", comment.data); }) .catch(err => { console.error("❌ 하나라도 실패함:", err); });
			const urls = [ '/user', '/book', '/log' ]; const fetchAll = Promise.all( urls.map(url => fetch(url).then(res => res.json())) );
	Promise.race	빨리 끝나는 하나사용 실패가 먼저 끝나면 실패처리됨	const fetchFromA = () => axios.get('/api/a'); const fetchFromB = () => axios.get('/api/b'); Promise.race([fetchFromA(), fetchFromB()]) .then(res => { console.log(" 먼저 도착한 응답:", res.data); }) .catch(err => { console.error("❌ 에러:", err); });
			const timeout = new Promise((_, reject) => setTimeout(() => reject("⏰ 서버 너무 느림"), 3000) ); // race로 둘 중 먼저 끝나는 걸 본다! const result = await Promise.race([fetchAll, timeout]);
	Promise.allSettled()	끝날 때까지 기다리고 성공(fulfilled)이든 실패(rejected)든 결과를 전부 알려줌	const p1 = Promise.resolve("✅ 성공1"); const p2 = Promise.reject("❌ 실패"); const p3 = Promise.resolve("✅ 성공2"); Promise.allSettled([p1, p2, p3]) .then(results => { console.log(results); }); [ { status: "fulfilled", value: "성공1" }, { status: "rejected", reason: "실패" }, { status: "fulfilled", value: "성공2" } ]
	Promise.any()	성공한 것 중 가장 먼저 도착한 결과만 반환
프로마이즈 체이닝		앞 단계 결과 등 Promize 실행	fetch('/api/step1') .then(res => res.json()) .then(data1 => fetch(`/api/step2/${data1.id}`)) .then(res => res.json()) .then(data2 => console.log("최종 결과:", data2)) .catch(err => console.error("에러:", err));

[핵심만 골라 배우는 Vue.js by 수코딩] 11. 네트워크 - axios (액시오스), json-server

Sweat100 — Tue, 5 Aug 2025 18:03:57 +0900

API	Applicaion Programming Interface 프론트엔드에서는 서버와 통신하기 위한 약속된 일련의 규칙
	Fetch API	브라우저 내장, 모든 현대 브라우저 - 단순요청, 의존성 줄이기 , ie11 지원안함 fetch(url, options) fetch('http://localhost:3000/posts') .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.error(err)) ***modern JS 에서는 fetch 또는 axios 사용, ajax 사용안함
	Axios(엑시오스)	외부 라이브러리, 모든 브라우저 (IE도 Polyfill로 가능), 자동 json 파싱, 인터셉터, 타임아웃 - 에러처리, 인터셉터, 전역설정 복잡한로직, ie11 지원 설치 : npm i axios axios.request(config) axios.get(url) axios.post(url, data) 등 Promise를 지원 - .then, .catch, awit 같은 Promise(비동기정처리가능) 문법 사용가능 - async 비동기 함수를 정의할 때 사용. 함수는 항상 Promise를 반환 - await Promise가 완료될 때까지 기다렸다가 그 결과를 반환
		plugins/api.js	import axios from 'axios' // 1. Axios 인스턴스 생성 const api = axios.create({ baseURL: 'https://example.com/api', //기본 요청 URL timeout: 5000, //요청 제한 시간(ms) headers: { 'Authorization': 'Bearer my-token', //인증 토큰 'Content-Type': 'application/json' //요청 데이터 타입 }, params: { lang: 'ko' //기본 쿼리 파라미터 }, withCredentials: false, //쿠키 포함 여부(CORS) transformRequest: [(data, headers) => { return JSON.stringify(data) //요청 전 데이터 가공 }], transformResponse: [data => { return JSON.parse(data) //응답 후 데이터 가공 }], responseType: 'json', //응답 데이터 형식 validateStatus: status => { return status >= 200 && status < 300 //성공으로 간주할 상태코드 } })
			// 2. 요청 인터셉터 // header 가 applicaion/json 이면 JSON.stringify 자동으로 변환 api.interceptors.request.use( config => { // 공통 토큰 삽입 등 처리 const token = localStorage.getItem('access_token') if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config }, error => { console.error('[요청 에러]', error) return Promise.reject(error) } )
			// 3. 응답 인터셉터 api.interceptors.response.use( response => { return response }, error => { const status = error.response?.status // 공통 에러 처리 switch (status) { case 401: alert('로그인이 필요합니다') // router.push('/login') 등 처리 가능 break case 403: alert('권한이 없습니다') break case 500: alert('서버 오류가 발생했습니다') break default: alert(error.message \|\| '알 수 없는 오류') } return Promise.reject(error) } )
		main.js	// main.js import { createApp } from 'vue' import App from './App.vue' import api from './plugins/api' const app = createApp(App); app.provide('api', api); // 옵션스 api //app.config.globalProperties.$http = api ; // 컴포넌트 api app.mount('#app');
		inject	axios.create()로 만든 인스턴스를 전역으로 주입 재사용.
			import { inject, onMounted, ref } from 'vue' const api = inject('api') // main.js에서 provide한 api 인스턴스 받기 const loadData = async () => { try { const res = await api.get('/posts') // 옵션스 api //const res = await $http.get('/posts') // 컴포넌트 api posts.value = res.data } catch (err) { console.error('데이터 로드 실패:', err) } }
		injectStrict - 컴포넌트 api 사용안함	import { inject } from 'vue' export function injectStrict(key, fallbackMessage = 'Injection failed') { const resolved = inject(key) if (resolved === undefined) { throw new Error(fallbackMessage + `: "${String(key)}"`) } return resolved }
			<script setup> import { onMounted, ref } from 'vue' import { injectStrict } from '@/utils/injectStrict' // 직접 만든 함수 const api = injectStrict('api', 'Axios 인스턴스 주입 실패') const posts = ref([]) const loadData = async () => { const res = await api.get('/posts') posts.value = res.data } onMounted(loadData) </script>

json-server 라이브러리	JSON 기반 빠른 Mock API- 실제 서버 없이도 API처럼 동작하는 가짜 서버 -서버 구축 도구
	설치	npm install -g json-server 전역설치 npm install json-server --save-dev 지역설치
	db.json	{ "posts": [ { "id": 1, "title": "Hello Vue" }, { "id": 2, "title": "Using json-server" } ] }
	서버실행	json-server --watch db.json --port 3000 접속 : http://localhost:3000/posts
http method	get : 읽기 post ; 쓰기 put : 전체 데이터 변경 patch : 일부데이터 변경 delete : 삭제 <script setup> import { ref, onMounted } from 'vue' import axios from 'axios' const posts = ref([]) const newTitle = ref('') const editId = ref(null) const editTitle = ref('') // API: 목록 불러오기 (GET) async function fetchPosts() { const res = await axios.get('http://localhost:3000/posts') posts.value = res.data } // API: 글 추가 (POST) async function addPost() { if (!newTitle.value.trim()) return await axios.post('http://localhost:3000/posts', { title: newTitle.value }) newTitle.value = '' fetchPosts() } // 수정 모드 진입 function startEdit(post) { editId.value = post.id editTitle.value = post.title } // API: 글 수정 (PUT) async function updatePost() { if (!editTitle.value.trim()) return await axios.put(`http://localhost:3000/posts/${editId.value}`, { title: editTitle.value }) editId.value = null editTitle.value = '' fetchPosts() } // API: 글 삭제 (DELETE) async function deletePost(id) { await axios.delete(`http://localhost:3000/posts/${id}`) fetchPosts() } // 컴포넌트 초기 로드 시 실행 onMounted(() => { fetchPosts() }) </script> <template> <div style="padding: 2rem"> <h1> Vue + json-server CRUD 예제 (form 사용)</h1> <!-- ✅ 추가 폼 --> <form @submit.prevent="addPost" style="margin-bottom: 1rem"> <input v-model="newTitle" placeholder="새 글 제목" /> <button type="submit">등록</button> </form> <!-- ✅ 수정 폼 --> <form v-if="editId !== null" @submit.prevent="updatePost" style="margin-bottom: 1rem"> <input v-model="editTitle" /> <button type="submit">수정 완료</button> <button type="button" @click="editId = null">취소</button> </form> <!-- ✅ 목록 --> <ul> <li v-for="post in posts" :key="post.id"> {{ post.title }} <button @click="startEdit(post)">수정</button> <button @click="deletePost(post.id)">삭제</button> </li> </ul> </div> </template>
컴포저블 패턴 사용	// plugins/api.js import axios from 'axios' const api = axios.create({ baseURL: 'https://example.com/api', headers: { 'Content-Type': 'application/json' } }) export default api // composables/useAxios.js import { ref } from 'vue' import api from '@/plugins/api' // Axios 인스턴스 import export function useAxios() { const data = ref(null) const error = ref(null) const loading = ref(false) const request = async (config) => { loading.value = true error.value = null try { const res = await api.request(config) data.value = res.data } catch (err) { error.value = err } finally { loading.value = false } } return { data, error, loading, request } } <script setup> import { onMounted } from 'vue' import { useAxios } from '@/composables/useAxios' const { data, error, loading, request } = useAxios() onMounted(() => { request({ method: 'get', url: '/posts' }) }) </script> <template> <div v-if="loading">로딩 중...</div> <div v-else-if="error">에러: {{ error.message }}</div> <ul v-else> <li v-for="item in data" :key="item.id">{{ item.title }}</li> </ul> </template>

[핵심만 골라 배우는 Vue.js by 수코딩] 10. 피니아(Pinia), storeToRefs

Sweat100 — Tue, 5 Aug 2025 17:17:34 +0900

Pinia(피니아)	Vue.js의 공식 상태 관리 라이브러리(vue3) Pinia는 전역 상태(state)를 관리하는 도구로, Vue 컴포넌트 간 데이터를 공유할 수 있게 해줍니다. * 라우팅으로 상태관리가 어려워 피니아 사용 1. 피니어가 공유되면 초기화가 안되니 변수를 다르게 하거나, 매개변수를 분리 2. 파일은 js or 타입스크립트 가능
	명명규칙	1. use + 파일명 + Store ex) useCounterStore 2. 고유값은 파일명과 같게 ex) defineStore( ' counter ',
	구조분해할당JS문법	const store = { count: 5, name: 'Vue' } const { count, name } = store 동일 : const count = store.count, const name = store. name
	storeToRefs	import { useCounterStore } from '@/stores/counter' const store = useCounterStore() watch(() => store.count, (newVal) => { console.log('store.count changed:', newVal) }) const { count } = store // > 구조가 분해됨. 최초이후 반응성 없음 watch(() => count, (newVal) => { console.log('count changed:', newVal) // ❌ 작동안함 }) import { useCounterStore } from '@/stores/counter' const store = useCounterStore() watch(() => store.count, (newVal) => { console.log('store.count changed:', newVal) }) const { count } = storeToRefs(store) //>구조분해 반응성 유지 watch(() => count, (newVal) => { console.log('count changed:', newVal) // ✅ 이제 count는 ref })	state, getters를 ref로 안전하게 추출 **actions 는 반응형이 아님 const { increment } = store
	Option Store vs Setup Store :
	Option Store	Vue2 : state, getters, actions 객체로 나눔 // stores/counter.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: '피니아' }), getters: { doubleCount: (state) => state.count * 2 }, actions: { increment() { this.count++ } } }) ----------------------------------------------------- import { useCounterStore } from '@/stores/counter' const store = useCounterStore() const { count, name, doubleCount } = storeToRefs(store) // ✅ 반응형 유지 const { increment } = store // ✅ 메서드는 그냥
	Setup Store	Vue3 : ref, computed, function을 setup()처럼 사용 // stores/counter.js import { defineStore } from 'pinia' import { ref, computed } from 'vue' export const useCounterStore = defineStore('counter', () => { const count = ref(0) const name = ref('피니아') const doubleCount = computed(() => count.value * 2) function increment() { // this 사용안함 count.value++ } return { count, name, doubleCount, increment } }) -------------------------------------------- import { useCounterStore } from '@/stores/counter' const store = useCounterStore() // ✅ 모든 속성이 ref나 computed 이므로, 구조분해 바로 사용해도 반응형 유지 const { count, doubleCount, increment } = store
기본구현	main.js	import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) app.use(createPinia()) app.mount('#app')	npm install pinia npm create vue@latest 사용시 여부 물어봄
	stores/counter.js src/ ├── main.js ├── App.vue ├── stores/ │ └── counter.js	import { defineStore } from 'pinia' // 스토어 정의 export const useCounterStore = defineStore('counter', {// 이름 파일동일 state: () => ({ // data options 랑 같음 count: 0, name: '피니아' }), getters: { // computed options 랑 같음, status 에 매개변수전달 doubleCount: (state) => state.count * 2 }, actions: { //methods 같음, status this.로전달, 반응형아님 increment() { this.count++ }, async incrementLater() { await new Promise(resolve => setTimeout(resolve, 1000)) this.increment() } } })
	App.vue	<template> <div style="padding: 2rem"> <h1> Pinia 샘플</h1> <p>이름: {{ counter.name }}</p> <p>카운트: {{ counter.count }}</p> <p>2배 카운트: {{ counter.doubleCount }}</p> <button @click="counter.increment">+1</button> <button @click="counter.incrementLater">1초 후 +1</button> </div> </template> <script setup> import { useCounterStore } from './stores/counter' // 스토어 인스턴스 불러오기 const counter = useCounterStore() </script>

[핵심만 골라 배우는 Vue.js by 수코딩] 9. 라우팅

Sweat100 — Tue, 5 Aug 2025 16:21:08 +0900

라우팅 Routing	서버측 라우팅	하나의 네트워크 에서 다른 네트워크로 데이터 패킷이 전달되는 경로를 결정하는 과정 ex) 웹사이트를 열면 요청이 여러 라우터를 거쳐 해당 서버까지 도달 * 라우터 : 이 경로를 결정해주는 장비
	클라이언트측 라우팅	사용자가 요청한 URL 에 따라 어떤 코드(페이지, 함수)를 실행할지 정하는 것 . 주소 호출시 어떤 코드로 연결할지
		해시 라우팅 ( Hash Routing )	http://example.com/#/about 해시(#) 뒤의 내용을 클라이언트 에서만 해석 URL이 # 포함이라 미관상 별로고 SEO에 약함 * SEO 검색엔진 최적화
		브라우저 라우팅 ( History Mode / HTML5 History API 사용 )	실제 URL 경로를 사용 history.pushState() 이용해 페이지를 바꾸지만 전체 새로고침 없이 처리
	방식 (실전사용X)	src/ ├── BrowserRouter.vue ├── pages/ │ ├── Home.vue │ ├── About.vue │ └── NotFound.vue ← 이거 추가! <script setup> import { ref, computed } from 'vue' import Home from './pages/Home.vue' import About from './pages/About.vue' import NotFound from './pages/NotFound.vue' // 경로 → 컴포넌트 매핑 const routeMap = { '/': Home, '/about': About } // 현재 경로 추적 const currentPath = ref(window.location.pathname) // 주소가져옴 default "/" // 페이지 이동 함수 function navigate(path) { // 현재 주소로 등록 window.history.pushState({}, '', path) currentPath.value = path } // 현재 컴포넌트 가져오기 const CurrentView = computed(() => routeMap[currentPath.value] \|\| NotFound) </script> <template> <div> <h2>Current Path: {{ currentPath }}</h2> <nav> <button href="/" @click="navigate('/')">Home</button> <button href="/about" @click="navigate('/about')">About</button> </nav> <hr /> <component :is="CurrentView" /> </div> </template>
	Vue-router 라이브러리	1. 스케폴드 설치시 이미 vue-router 설치 필요없음 - npm install vue-router@4 4점대 버전 로 설치 2. lazy loading : 설정 안하면 초기로딩히 모든페이지 로딩 - component: () => import('../pages/About.vue') 3. routers 의 name 속성 중복 금지. 4. router-link 생성시 name, params 등록 가능 5. 동적경로 매칭 . URLL 의 일부분을 동적으로 변할 수 있게 해줌
		main.js	import { createApp } from 'vue' import App from './App.vue' import routers from './routers' createApp(App).use( routers ).mount('#app')
		router/index.js 권장	import { createRouter, createWebHistory } from 'vue-router' import Home from '../pages/Home.vue' import About from '../pages/About.vue' import NotFound from '../pages/NotFound.vue' const router = createRouter({ // HTML5 History API 사용= 브라우저 라우팅 , 해시방식 적용 가능 history: createWebHistory(import.meta.env.BASE_URL), //baseurl 설정 routes: [ { path: '/', name='home' , component: Home }, { path: '/about' , name='about', component: () => import('../pages/About.vue') // ✅ lazy load}, { path: '/about/:id/contexts/:index' , name='aboutDetail', component: () => import('../pages/AboutDetail.vue') // ✅ lazy load}, *{ path: '/:pathMatch(.)', name: 'NotFound', component: NotFound }, // 404* ] }) export default router
		App.vue	<template> <div> <h2>라우터 예제</h2> <nav> <router-link to="/">Home</router-link> <router-link :to="{name:'about', params:{id:12}}">About</router-link> <router-link :to="`/about/${id}/contexts/${index}`">AboutDetail</router-link> </nav> <hr /> <router-view /> <!-- 현재 라우트에 해당하는 컴포넌트를 렌더링 --> </div> </template>
		useRoute(); 동적 경로 매칭	import { createRouter, createWebHistory } from 'vue-router' const route = useRoute(); const ids =Number( route.params.id ); const index=Number( route.params.index); const router = createRouter({ history: createWebHistory(), routes })
		useRoute();	Proxy 속성 fullPath hash meta << 라우트정의 시 meta 정보로 원하는 사용자 지정속성 가능. name params path query << URL ? 다음 문자 = 쿼리 스트링 redirectedFrom
		meta 속성	라우트에 부가적인 정보 넣는 속성 const routes = [ { path: '/about', component: () => import('../pages/About.vue'), meta: { title: 'About Page', // ✅ 문서 제목 설정 requiresAuth: true, // ✅ 로그인 여부 확인 layout: 'admin', // ✅ 특정 레이아웃 지정 transition: 'fade-slide' // ✅ 페이지 전환 효과 } } ] <script setup> import { computed } from 'vue' import { useRoute } from 'vue-router' import DefaultLayout from './layouts/DefaultLayout.vue' import AdminLayout from './layouts/AdminLayout.vue' const route = useRoute() const layout = computed(() => { return route.meta.layout === 'admin' ? AdminLayout : DefaultLayout }) </script>
		중첩 라우트	* name 속성은 children 에만 추가 가능, 부모X import { createRouter, createWebHistory } from 'vue-router' import Users from '../pages/Users.vue' const routes = [ { path: '/users', component: Users, // 부모 라우트 children: [ { path: '', // /users name : 'users', component: () => import('../pages/UserList.vue') }, { path: ':id', // /users/123 name : 'userDetail' component: () => import('../pages/UserDetail.vue') } ] } ] const router = createRouter({ history: createWebHistory(), routes }) export default router Users.vue ------------------------------------------------------------ <template> <div> <h1> 사용자 영역</h1> <router-view /> <!-- 자식 라우트가 여기 들어옴 --> </div> </template>

const comma = (price) => price.toLocaleString();

prive: {{comma(productDetail.price)}} 원

[핵심만 골라 배우는 Vue.js by 수코딩] 8. Options API vs Composition API, 컴포저블 패턴

Sweat100 — Mon, 4 Aug 2025 18:00:51 +0900

	Options API	Composition API (vue3)
ref reactive	export default { name:'', // 컴포넌트 이름 components:{}, // 자식 컴포넌트 등록 props:{}, // 부모로부터 받는 속성 emits:[], // 자식 → 부모 이벤트 data(){return{};}, // 반응형 데이터 computed:{}, // 계산된 속성 watch:{}, // 감시자 methods:{}, // 메서드 정의 provide(){return{};}, // 하위 컴포넌트 제공 inject:[], // 상위 컴포넌트에서 주입 mixins:[], // 믹스인 extends:{}, // 확장할 컴포넌트 created(){}, // 생성 시 mounted(){} // 마운트 시 };	<script> import {ref, reactive, comupted } from "vue"; export default{ const count = ref(0); //RefImpl 형태 value로접근이유 console.log(count); const increment = comupted(()=>{ return `count: ${count.value}`++; }); setup(){ return{ // 객체로 반환해야 정상사용 count, increment, message }; } }; </script> <template> <h1>{{message}}</h1> <button @click="increament">증가 </button> </template>	ref : 기본자료형 reactive : 참조자료형
watch	export default { data() { return { user: { name: '홍길동' } }; }, watch: { user: { handler(newVal, oldVal) { console.log('깊은:', newVal.name); }, deep: true, immediate: true } } };	<script setup> import { reactive, watch } from 'vue'; const user = reactive({ name: '홍길동' }); console.log( user ) //proxy 객체 watch( user, (newVal, oldVal) => { console.log('깊은', newVal.name); }, { deep: true } ); or watch( ()=>user.value.name, (newVal, oldVal) => { console.log('깊은', newVal.name); }, { deep: false, immediate: true } ); </script>	객체 내부 속성 변화를 감지 1. deep: true 깊은 감시여부 선택가능 2. immediate: true 감지여부 상관없이 처음 무조건 실행 3. flush 옵션 pre : Dom 업데이트이전, 기본 post :Dom 업데이트 이후 , css 적용시 고려 sync : 반응형상태 변경과 동시 4. 배열로 지정가능 const x = ref(0); const y = ref(0); const z = ref(0); watch( [x, y, z], (newVal, oldVal) => { }); 감시대상이 감지안되면 callback 함수 호출안함 * getter함수 : ()=>user.value.name
watchEffect()	없음	import { ref, watchEffect } from 'vue'; const message = ref('안녕'); watchEffect(() => { console.log(user.value.name); # name 만 추적 });	watchEffect() 안에서 사용된 반응형 변수들을 Vue가 자동으로 추적 1. 즉시실행 2. 자동추적 3. 사용된 값만 추적 4. 각각 의 값을 추적할때 공통된 콜백함수 실행 5. flush 옵션 pre : Dom 업데이트이전 post :Dom 업데이트 이후 , css 적용시 고려 sync : 반응형상태 변경과 동시
watchposteffect()		watchPostEffect(() => { if (box.value) { console.log('렌더링 후 박스 높이:', box.value.offsetHeight); } });	watchEffect() 와 비슷하지만 DOM 업데이트 이후 실행, offsetHeight, scrollTop, focus 같은 css 요소 읽을때 유리
watch 해지	var unwatch = watch() var unwatch = watchEffect () var unwatch = watchposteffect() unwatch() // 해지

컴포저블 패턴	Vue Composition API(vue3)를 이용해 반복되는 로직을 재사용 가능한 함수로 분리하는 방식 setup() 안에 자주 쓰는 ref, watch, api 호출, 유효성 검사, 토스트 알림 등등을 밖으로 빼서 따로 함수화해두고, 필요한 컴포넌트에서 불러다 재사용하는 패턴
	상태 비저장 로직		어떤 입력에 따른 결과값을 즉시 반환 ex) 날짜 포멧팅
	상태 저장 로직	마우스포인터위치 composables/useMouse.js -------------------------------- import { ref, onMounted, onUnmounted } from 'vue' export function useMouse() { const x = ref(0) const y = ref(0) function updateMouse(e) { x.value = e.pageX y.value = e.pageY } onMounted(() => { window.addEventListener('mousemove', updateMouse) }) onUnmounted(() => { window.removeEventListener('mousemove', updateMouse) }) return { x, y } } components/MouseTracker.vue ----------------------------- <script setup> import { useMouse } from '@/composables/useMouse' const { x, y } = useMouse() </script> <template> <p>마우스 위치: X = {{ x }}, Y = {{ y }}</p> </template>	시간이 지나면서 변경되는 상태를 다루는 로직 - 반응형 localStorage 구현시 새로고침때유지 확인가능
	상태 저장및 비동기 ( axios 사용 )	// plugins/api.js import axios from 'axios' const api = axios.create({ baseURL: 'https://example.com/api', headers: { 'Content-Type': 'application/json' } }) export default api // composables/useAxios.js import { ref } from 'vue' import api from '@/plugins/api' // Axios 인스턴스 import export function useAxios() { const data = ref(null) const error = ref(null) const loading = ref(false) const request = async (config) => { loading.value = true error.value = null try { const res = await api.request(config) data.value = res.data } catch (err) { error.value = err } finally { loading.value = false } } return { data, error, loading, request } } <script setup> import { onMounted } from 'vue' import { useAxios } from '@/composables/useAxios' const { data, error, loading, request } = useAxios() onMounted(() => { request({ method: 'get', url: '/posts' }) }) </script> <template> <div v-if="loading">로딩 중...</div> <div v-else-if="error">에러: {{ error.message }}</div> <ul v-else> <li v-for="item in data" :key="item.id">{{ item.title }}</li> </ul> </template>	try { const res = await api.request(config) data.value = res.data } catch (err) { error.value = err } finally { loading.value = false } } 는 api.request(config) .then(res => { data.value = res.data }) .catch(err => { error.value = err }) .finally(() => { loading.value = false }) 으로 구현가능 watchEffect(()=>{ request(); }) 결과값을 watch 로 변경된값을 받아야함.
	pinia 사용	// stores/post.js import { defineStore } from 'pinia' import { ref } from 'vue' import api from '@/plugins/api' export const usePostStore = defineStore('post', () => { const posts = ref([]) const loading = ref(false) const error = ref(null) const fetchPosts = async () => { loading.value = true error.value = null try { const res = await api.get('/posts') posts.value = res.data } catch (err) { error.value = err } finally { loading.value = false } } return { posts, loading, error, fetchPosts } }) <script setup> import { onMounted } from 'vue' import { usePostStore } from '@/stores/post' const postStore = usePostStore() onMounted(() => { postStore.fetchPosts() }) </script> <template> <div v-if="postStore.loading">로딩 중...</div> <div v-else-if="postStore.error">에러: {{ postStore.error.message }}</div> <ul v-else> <li v-for="post in postStore.posts" :key="post.id">{{ post.title }}</li> </ul> </template>

[핵심만 골라 배우는 Vue.js by 수코딩] 7. 컴포넌트 심화- 상속, 동적렌더링

Sweat100 — Mon, 4 Aug 2025 16:06:19 +0900

컴포넌트	상속 inheritance	<template> <MyButton class="red" id="main" label="클릭!" @click="handleClick" /> </template> <script> import MyButton from './MyButton.vue' export default { components: { MyButton }, methods: { handleClick() { alert('부모가 클릭 받음!') } } } </script> --------------------------------------------------------------- <template> <button v-bind="$attrs" @click="$emit('click')"> {{ label }} </button> </template> <script> export default { inheritAttrs: false, // 자동 전달 방지 props: { label: String }, emits: ['click'] } </script>	속성 상속 1. root node 가 한개만 있을때 하기를 제외하고 모두 속성이 상속됨 - 자식 클래스에서 props, emits 로 선언하지 않은것들 : 이벤트, v-model - 상속 불가 특수속성 : ref, key, slot - scope style : 부모 style 은 자식에 영향없음 2. 상속금지 == inheritAttrs: false 설정 자동 속성 상속 비활성화 <button v-bind="$attrs">Click</button> 로 수동입력 3. $attrs: 부모에서 전달된 props가 아닌 모든 속성들을 담은 객체, props 로 선언되지 않은 속성들만 $attrs 에 들어감. 4. 멀티루트 상속 == root node 가 두개이상일때 v-bind="$attrs" 지정시 상속 일어남 5. 중첩 컴포넌트 상속 ==상속이 반복되는 구조에서도 상속이 됨.
			병합 속성 class, stayle 속성은 자동으로 병합됨 그외 속성은 자식 우선 적용, 없으면 부모속성적용 cf) 부모, 자식 컴포넌트에서 각각 id 지정시 자식 컴포넌트 정보를 따름.
			이벤트속성 props, emits 선언안할때
		<template> <div class="box"> <slot ></slot> <!-- 부모가 넣는 콘텐츠 자리 --> </div> </template> ------------------------------------------------------------- <template> <SimpleBox> <p>이 내용은 부모에서 넣었어요!</p> <p>여러줄 가능 {{click}} </p> </SimpleBox> </template> <script> import SimpleBox from './components/SimpleBox.vue' export default { components: { SimpleBox } data(){ return { click: "클릭" } } } </script> -------------------------결과 <div class="box"> <p>이 내용은 부모에서 넣었어요!</p> <p>여러줄 가능 클릭</p> </div>	1.<slot></slot> 템플릿 구조를 자유도가 높게 구성 - 컴포넌트 템플릿부분에서 다른 컴포넌트, html 요소 콘텐츠 동적으로 삽입위한 기능 단일 루트요소일 필요 없음, 이벤트, 변수 모두 전달. 2. v-slot <template v-slot:top> <h3> 여긴 top slot</h3> </template> <slot name="top"></slot> name 지정사용** 3. 변경가능 <!-- v-slot:header → #header 로 줄여쓸 수 있어요 --> <template #header> <h2>제목</h2> </template> 직역 : 구멍
	다이나믹 컴포넌트 동적 렌더링	<template> <div> <h2>동적 컴포넌트 예제</h2> <button @click="current = 'One'">One 보기</button> <button @click="current = 'Two'">Two 보기</button> <!-- 동적 컴포넌트 --> <component :is="current" /> </div> </template> <script> import One from './components/One.vue' import Two from './components/Two.vue' export default { components: { One, Two }, data() { return { current: 'One' // 시작은 One 컴포넌트 } } } </script>	<component :is="컴포넌트명" /> <button :class="{ active: 'One'== current}" @click="toggleActive">
	provide	A.vue ← provide (상위 컴포넌트) └── B.vue └── C.vue └── D.vue └── E.vue ← inject (하위 컴포넌트) A.vue ----------------------------------------------- <template> <div> <h1>A 컴포넌트</h1> <B /> </div> </template> <script> import B from './components/B.vue' export default { components: { B }, provide() { return { sharedMessage: 'A에서 제공된 메시지입니다!' } } } </script> E.vue ---------------------------------------------------- <template> <div> <h5>E 컴포넌트</h5> <p>수신한 메시지: {{ sharedMessage }}</p> </div> </template> <script> export default { inject: ['sharedMessage'] } </script>	데이터를 제공 - 여러 컴포넌트를 상속하는구조일때 컴포넌트의 속성이아닌 privide - inject 를 이용해 빠르게 등록가능 데이터를 주입 , 변수&함수 가능 1. provide 하위관계에서만 주입가능 2. 어플리케이션 단위 provide 사용. main.js 에서 app 에 직접 provide 주입 3. 객체 형태로 전달 <template> <div> <h5>E 컴포넌트</h5> <p>이름: {{ member.name }}</p> <p>나이: {{ member.age }}</p> </div> </template> export default { inject: { member: { from: 'userInfo', // provide에서 받은 키- 키값 별도 js 로 관리가능 default: () => ({ name: '기본값', age: 0 }) // fallback } } } 4. computed(반응형) 도 전달가능 -composition API - vue에서 가져옴 - 부모 컴포넌트 변경시 자식 자동업데이트가능 export default { setup() { const count = ref(1) const double = computed(() => count.value * 2) // provide로 computed 값도 전달 가능 provide('doubleCount', double) return { count } } }
	inject

[핵심만 골라 배우는 Vue.js by 수코딩] 6. 컴포넌트 기본- 스타일, 템플릿, 렌더함수

Sweat100 — Fri, 1 Aug 2025 18:00:44 +0900

컴포넌트 > 템플릿 > 렌더함수

컴포넌트 정의 > 템플릿 작성(template) > 랜더 함수로 컴파일됨(rander function) > 가상 DOM 트리 생성 > 실제 DOM에 반영(mount)

컴포넌트

컴포넌트	재사용 가능한 화면 단위 (UI 조각) Vue는 컴포넌트를 조립해서 SPA ( Single Page Application 단일 페이지 애플리케이션) 을 만듬 1. Vue 의 기본단위 2. HTML + JS +CSS UI 블록 장점 1. 재사용성 여러 곳에서 같은 UI/로직을 재사용 가능 Button, Modal, Card, ProductItem 등 2. 코드 분리 (관심사의 분리) UI 단위를 역할별로 나누어 관리 Header / Footer / Sidebar 컴포넌트 분리 3. 유지보수성 향상 하나의 컴포넌트만 수정하면 전체 반영 UserCard.vue만 수정하면 전체 사용자 카드 일괄 변경 4. 테스트 용이성 컴포넌트 단위로 유닛 테스트 가능 LoginForm.vue 단독 테스트 5. 구조적 설계 가능 트리 구조로 앱을 구성, 관리가 쉬움 App → Layout → Page → Item 구조 등 연결 1. props : 부모-> 자식 2. emit : 자식-> 부모 3. v-model : 양방향
	파일명 규칙	최소 2개의 단어연결 , 케이스는 프로젝트당 사용하는걸로. MyComponent.vue - 파스칼케이스 my-component.vue - 케밥케이스
	위치	components 하위생성
	연결	** 자기 자신을 컴포넌트로 재귀적으로 등록하면 루프(순환 참조) 오류 import MyButton from './components/MyButton.vue' 하고 import MyButton from '@/components/MyButton.vue' 하고 같음 vite.config.js 에 설정 resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
		import { createApp } from 'vue' import App from './App.vue' import MyButton from './components/MyButton.vue' const app = createApp(App) app.component('MyButton', MyButton) // 전역 등록 app.mount('#app') <template> <div> <MyButton /> </div> </template>	전역 등록 (Global Registration)
		<!-- ParentComponent.vue --> <template> <div> <MyButton /> </div> </template> <script> import MyButton from './MyButton.vue' export default { components: { MyButton // 지역 등록 } } </script> or <script setup> import MyButton from './MyButton.vue' // 지역 등록 (자동 인식) </script>	지역 등록 (Local Registration)

컴포넌트 사용	부모 -> 자식 props	src/ ├── App.vue ← 부모 컴포넌트 └── components/ └── InfoBox.vue ← 자식 컴포넌트 App.vue -------------------------------------------------------------- <template> <div> <h1>부모 컴포넌트</h1> //1. 문자열 전달 <InfoBox title="공지사항입니다." /> //2. 바인딩 전달 <InfoBox :score="userScore" /> //3. 객체 <InfoBox :profile="userProfile" /> <!-- 혼합 전달 --> <InfoBox title="사용자 정보" :score="userScore" :profile="userProfile" /> </div> </template> <script> import InfoBox from './components/InfoBox.vue' export default { components: { InfoBox }, data() { return { userScore: 88, userProfile: { name: '홍길동', age: 30 } } } } </script> InfoBox.vue -------------------------------------------------------------- <template> <div class="box"> <h2>자식 컴포넌트</h2> <p v-if="title">[제목] {{ title }}</p> // 공지사항입니다. <p v-if="score !== undefined">[점수] {{ score }}</p>//88 <p v-if="profile">[프로필] 이름: {{ profile.name }}, 나이: {{ profile.age }}</p> // 홍길동 30 </div> </template> <script> export default { props: { title: String, score: Number, profile: Object } } </script>	props 사용 1. 문자 2. 바인딩 전달 3. 객체전달 4. mounted() 안에서는 props를 안전하게 사용할 수 있습니다. 5. 자식컴포넌트에서 수정 불가. 데이터 흐름 단방향성 유지
		props 1. 정의 : 부모 → 자식으로 데이터 전달하는 방법 2. 목적 : 컴포넌틔 재사용성, 유현성 향상 3. 주의 : 자식에서 직접 수정안됨. 읽기전용 4. 선언방법 배열 : props: ['title'] <MyComponent 속성명1="값1" 속성명2="값2" 속성명N="값N" /> export default { props:['속성명1', '속성명2', ...'속성명N'] } 객체 : props: { title: { << 권장 type: String, required: true, // 필수 여부 default: '기본 제목', // 기본값 // 유효성 검사 validator: value => value.length <= 10 // or //validator(value) { // return ['black', 'blue'].includes(value) //} }, 4. 사용 템플릿 : {{ title }} or :style="{ backgroundColor: title }" 스크립트 : this.title mounted() : console.log(this.title) 5. 유효성검사 - type, required, validator >> 개발자 콘솔 warning 발생	props 와 mounted
		<template> <div> <h1>부모 컴포넌트</h1> <!-- 1번 InfoBox --> <InfoBox bgcolor="red" size="3" /> <!-- 2번 InfoBox --> <InfoBox bgcolor="yellow" size="5" /> </div> </template> <script> import InfoBox from './components/InfoBox.vue' export default { components: { InfoBox } } </script> ------------------------------------------------------------------------- <template> <div class="box" :style="{ backgroundColor: bgcolor, fontSize: size + 'rem' }"> <p>배경색: {{ bgcolor }}</p> <p>글자 크기: {{ size }}rem</p> </div> </template> <script> export default { props: ['bgcolor', 'size'], mounted() { console.log('✅ InfoBox mounted') console.log(' 배경색:', this.bgcolor) console.log(' 글자크기:', this.size) } } </script>	재사용이 가능한 css 에 적용가능 * mounted() 안에서는 props를 안전하게 사용할 수 있습니다. 1. props { bgcolor: tring, size : string }
		<template> <div> <h2>부모 컴포넌트</h2> <PropsChild :onClickButton="handleChildClick" /> </div> </template> <script> import PropsChild from './components/PropsChild.vue' export default { components: { PropsChild }, methods: { handleChildClick() { alert('부모 함수가 자식에 의해 실행됨!') } } } </script> ------------------------------------------------------------------------ <template> <div> <h3>자식 컴포넌트</h3> <button @click="onClickButton">버튼 클릭</button> </div> </template> <script> export default { props: { onClickButton: { type: Function, required: true } } } </script>	부모 -> 자식 1. 부모 컴포넌트에서 온 데이터 자식컴포넌트에서 수정불가. props 읽기전용
	자식-> 부모 emits	<template> <div> <h2>부모 컴포넌트</h2> <MessageChild @send-message="receiveMessage" /> </div> </template> <script> import MessageChild from './components/MessageChild.vue' export default { components: { MessageChild }, methods: { receiveMessage(payload) { alert('자식이 보낸 메시지: ' + payload) } } } </script> ----------------------------------------------------------------- <template> <div> <h3>자식 컴포넌트</h3> <button @click="emitToParent">메시지 전송</button> </div> </template> <script> export default { emits: ['send-message'], // 이벤트 이름 명시적 선언, 생략가능 methods: { emitToParent() { this.$emit('send-message', '안녕하세요, 부모님!')// 두번째 부터 매개변수 } } } </script>	부모 <- 자식 1. emit : 자식이 부모에게 결과를 알림, 자식컴포넌트 수정가능 => 권장 2. 인라인 실행가능 <button @click="$emit('send-message', 'Hello inline emit!')"> 인라인 emit 실행 </button>
	양방향 v-model	<template> <ChildComp v-model:title="title" v-model:content="content" /> </template> ----------------------------------------------------------------- <template> <div> <label> 제목: <input :value="title" @input="$emit('update:title', $event.target.value)" /> </label> <label> 내용: <textarea :value="content" @input="$emit('update:content', $event.target.value)" ></textarea> </label> </div> </template> <script> props: ['title', 'content'], emits: ['update:title', 'update:content'] </script>	1. v-model은 다음을 자동화해주는 편의 문법 :value → modelValue (또는 v-model:foo → foo) @input → @update:modelValue 2. v-model 디렉티브 사용 수식어는 온전히 개발자가 직접 구현 - 뷰 디렉티브 참고

스타일

스타일	1. 지역은 style scoped 속성 적용하여 사용. 2. 전역은 src/assets 폴더 하위 별도 css 파일만들고 src/main.js 파일에서 import 하여 적용.
	1. 외부스타일	// main.js import './assets/main.css'	모든 컴포넌트 전역적용 공통, 초기화, reset.css
	2. SFC 내부 스타일	<template> <div class="box">Hello</div> </template> <script> export default { name: 'MyComponent' } </script> <style scoped> .box { color: blue; } </style>	전역 or 지역 (scoped) * <style scoped> 사용 안하면 정의 하지 않은 components 에도 적용됨 = 전역처리
	3. 인라인 스타일	<template> <div> <!-- 1. 기본 객체 형태 --> <p :style="{ color: 'blue', fontSize: '18px' }">기본 객체형</p> <!-- 2. data로 스타일 정의 후 바인딩 --> <p :style="myStyle">data 스타일 바인딩</p> <!-- 3. 여러 스타일 객체 배열로 적용 --> <p :style="[myStyle, yourStyle]">여러 스타일 합치기</p> <!-- 4. 조건부 스타일 적용 --> <p :style="{ backgroundColor: isActive ? 'yellow' : 'white' }">조건부 스타일</p> <!-- 5. 계산된 스타일 (computed) --> <p :style="computedStyle">계산된 스타일</p> </div> </template> <script> export default { data() { return { isActive: true, myStyle: { color: 'red', fontSize: '20px' }, yourStyle: { border: '1px solid gray', padding: '4px' } } }, computed: { computedStyle() { return { color: this.isActive ? 'green' : 'gray', fontWeight: 'bold' } } } } </script>	해당 요소에만 적용 1. 기본 객체 형태 2. data로 스타일 정의 후 바인딩 3. 여러 스타일 객체 배열로 적용 4. 조건부 스타일 적용 5. 계산된 스타일 (computed)

뷰 컴포넌트 생성 & 등록

뷰 컴포넌트 생성 & 등록	템플릿 속성	컴포넌트의 내부 구조 1. HTML 처럼 생긴 UI 정의 영역 2. Vue 컴파일러가 이 템플릿을 렌더 함수로 변환함
		import { createApp } from 'vue/dist/vue.esm-bundler.js' const app = createApp({ template: `<div> <h1>{{ message }}</h1> <button @click="count++">Clicked {{ count }} times</button> </div>`, data() { return { message: 'Hello from runtime-compiled template!', count: 0 } } }) app.mount('#app') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Runtime Compile</title> </head> <body> <div id="app"></div> <script type="module" src="/main.js"></script> </body> </html>	( 가능하지만 추천안함 ) - 런타임 환경에서 컴파일은 vue/dist/vue.esm-bundler 패키지 사용 data, methods 도 가능 컴파일과정에서 (최초 주소호출시실행) SFC (Single File Component ex .vue) 형식의 파일은 vite에 의해 사전컴파일 런타임 환경에 제공 template 속성은 런타임 환경에서 컴파일
	랜더 속성 (render)	import { createApp, h } from 'vue' const MyComponent = { props: ['msg'], render() { return h('div', { class: 'box' }, [ h('h2', `메시지: ${this.msg}`), h('button', { onClick: () => alert('버튼 클릭됨!') }, '클릭') ]) } } const app = createApp({ render() { return h(MyComponent, { msg: '안녕하세요 Vue!' }) } }) app.mount('#app') <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Vue h() 렌더 예제</title> </head> <body> <div id="app"></div> <script type="module" src="/main.js"></script> </body> </html>	( 가능하지만 추천안함 ) - 템플릿 컴파일러 필요없음(vue) 사용 - h함수는 vue 에서 가져옴 data, methods 도 가능 템플릿은 내부적으로 JS 함수(rander)로 바뀜 이 함수는 Virtual DOM 트리를 생성함 랜더링되는 요소를 만들기 위한 함수h h(태그명, 태그의 속성, 자식요소) ex) h('div') h('div', null, 'hello') = <div>hello</div> h('div', { class: 'red' }, 'hello') = <div class="red">hello</div>

[핵심만 골라 배우는 Vue.js by 수코딩] 5. 라이프사이클 훅

Sweat100 — Fri, 1 Aug 2025 17:07:30 +0900

그림출처 : https://vuejs.org/guide/essentials/lifecycle.html

라이프사이클 훅

라이프사이클 훅 lifecycle hook	라이프사이클 훅은 브라우저가 Vue앱을 "실행"할 때 Vue 컴포넌트가 생성되고, DOM에 붙고, 갱신되고, 제거되는 과정 그 각 단계마다 호출되는 함수(훅, hook) * hook 낚시바늘
	진행순서	npm run dev -> local : http://localhost:5173 -> 브라우저 주소 호출
	호출방법	Options API	Composition API	공통설명
		export default { name: 'LifecycleDemo', data() { return { message: 'Hello Vue!', } }, beforeCreate() {}, created() {}, beforeMount() {}, mounted() {}, beforeUpdate() {}, updated() {}, beforeUnmount() {}, // Vue 3 unmounted() {}, // Vue 3 methods: { updateMessage() { this.message = 'Updated!' } } } </script>	<script setup> import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue' onBeforeMount(() => console.log('beforeMount')) onMounted(() => console.log('mounted')) onBeforeUpdate(() => console.log('beforeUpdate')) onUpdated(() => console.log('updated')) onBeforeUnmount(() => console.log('beforeUnmount')) onUnmounted(() => console.log('unmounted')) </script> or export default { name: 'LifecycleExample', setup() { onBeforeMount(() => { console.log('beforeMount') }) onMounted(() => { console.log('mounted') }) onBeforeUpdate(() => { console.log('beforeUpdate') }) onUpdated(() => { console.log('updated') }) onBeforeUnmount(() => { console.log('beforeUnmount') }) onUnmounted(() => { console.log('unmounted') }) return {} }
	설명	Vue2 부터 사용 vue 내부에서 자동사용	Vue 3 새롭게 도입(권장) 사용자가 직접 사용
	creation( 생성 )	beforeCreate	setup() : Vue가 Composition API를 통해 개발자가 만든 반응형 상태를 로드하는 함수 값은 return 으로 전달	인스턴스 초기화 전. data, props 사용 불가
		Init Options API
		created : 반응형 API 기반 객체 모두 준비 this. 접근가능		생성 후. data, props, methods 접근 가능 - 페이지 진입 시 사용자 정보 불러오기, 서버에서 목록 로딩 등 * 일찍 로딩하는게 이득인 데이터
		템플릿이 이미 js 변환되었나? NO-> 실행중에 템플릿 컴파일 YES -> beforeMount 진행
	mounting (연결)	beforeMount()	onBeforeMount() : setup 내부에서 사용 this 사용불가	DOM에 붙기 전. 가상 DOM은 만들어짐
		초기 랜더링 & DOM 노드 생성 및 삽입
		mounted()	onMounted()	DOM에 붙은 후. $el, ref 접근 가능 - 차트 그리기, 3rd-party 라이브러리 연동, focus 지정 등 dom 에 의존하는작업
	updating(수정) 사용자 사용중 상태	반응형 데이터가 바뀌면 Vue는 컴포넌트를 다시 렌더링하고, 변경된 부분만 DOM에 패치(수정)합니다.
		beforeUpdate()	onBeforeUpdate()	반응형 데이터 변경 → DOM 업데이트 직전
		updated()	onUpdated()	DOM 업데이트 완료 후 - 데이터 바뀔 때 UI 애니메이션 트리거 데이터가 갱신된 후 DOM 작업 필요할 때
	해제 (unmounting)	beforeUnmount()	onBeforeUnmount()	컴포넌트 제거 직전
	해제 (unmounting)	unmounted()	onUnmounted()	컴포넌트 제거 완료 후 - WebSocket 연결 종료, 타이머 해제, 이벤트 제거, 서비스 종료 또는 페이지 이탈 시 정리 작업