Meme's IT

0. 틀만들기 TodoListItem.vue, TodoList.vue, TodoForm.vue 컴포넌트 만들고 TodoList.vue만 다음과 같이 작성, 나머지는 기본틀에 template에 파일 제목만 // TodoList.vue // App.vue Todo PJT counters.js도 수정해준다 // counters.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', () => { let id = 0 const todos = ref([ {id: id ++, text: 'todo 1', isDone: false}, {id: ..

# Pinia 설치 처음 Vite를 이용해서 프로젝트 만들 때, Pinia 추가하기 stores라는 새로운 폴더가 생긴다 counter.js를 확인해보면 상태와 기능이 있다 → 얘네가 중앙 저장소에 저장되는 애들 그리고 run server를 해보면 평소와 같지만 개발자도구 → vue를 켜서 보면 Pinia가 생긴 것을 확인할 수 있다 # Pinia의 구조 (flux pattern) 1. store (= counter.js 파일) 중앙 저장소 모든 컴포넌트가 공유하는 상태, 기능 등이 작성된다 파일 이름 변경 가능 2. state(= ref) 반응형 상태, 데이터 3. getters(= computed) 계산된 값 4. actions(= functions) 메서드 5. plugin 애플리케이션의 상태 관리..

# State Management (= 상태 관리) 여기서 상태 == 데이터 Vue에서는 이미 반응형 상태를 관리하고 있었음 Vue의 컴포넌트를 세가지 상태로 나누면.. 1) 상태(State) : 앱 구동에 필요한 기본 데이터 2) 뷰(view) : 상태를 선언적으로 매핑하여 시각화 3) 기능(Actions) : 뷰에서 사용자 입력에 대해 반응적으로 상태를 변경할 수 있게 정의된 동작 {{ count }} 그리고 뷰에서는 단방향 데이터 흐름을 가지고 있음 근데, 이 단방향 데이터 흐름(상태 관리의 단순성)이 무너지는 시점이 있다 → 여러 컴포넌트가 상태를 공유할 때 1. 여러 뷰가 동일한 상태에 종속되는 경우 공유 상태를 공통 조상 컴포넌트로 끌어올린 다음 props로 전달하는 것 계층 구조가 깊어질 경..

npm install axios view파일에서 import {ref} from 'vue' import axios from 'axios' const products = ref([]) const storeURL = 'https://fakestoreapi.com/products' axios.get(storeURL) .then((response) => { console.log(response) products.value = response.data }).catch ((error) => { console.error(error) }) 이런식으로 출력하면 데이터 확인 가능 # params와 query의 차이점?

# Navigation Guard란? vue router를 통해 특정 URL에 접근할 때 다른 URL로 redirect하거나 취소해서 네비게이션을 보호하는 것 예를 들어, 인증 정보가 없다면 특정 페이지를 못 들어가게 막음 종류 1. Globally(전역 가드) 애플리케이션 전역에서 동작 index.js에서 정의해줌 router.beforeEach( ) 다른 URL로 이동하기 직전에 실행되는 함수 // beforeEach의 구조 router.beforeEach((to, from) => { ... return false }) to : 이동할 url 정보가 담긴 route 객체 from: 현재 url 정보가 담긴 route 객체 반환값 false: 현재 네비게이션 취소 route location: route..

# router.push( ) 다른 URL로 이동하는 메서드 새 항목을 histoy stack에 push하기 때문에 뒤로가기 가능 RouterLink를 클릭했을 때 내부적으로 호출되는 메서드 앞 글에서 했던 유저 프로필 페이지에서 홈으로 가는 버튼을 만들어보자 // userView.vue // script import { useRoute, useRouter } from 'vue-router' const router = useRouter() const goHome = function() { router.push({name : 'home'}) } // template HOME으로 이런식으로 홈버튼이 생기며 클릭하면 홈으로 돌아감 뒤로가기가 가능하다!! # router.replace( ) push와 다르게 h..

# Routing이란? 네트워크에서 경로를 선택하는 프로세스 웹 애플리케이션에서 다른 페이지 간의 전환과 경로를 관리하는 기술 장고 → 뷰가 되면서 주체가 서버에서 클라이언트로 바뀜 즉, 페이지 간의 전환이 없어지면서 페이지가 한 개지만 링크에 따라 여러 컴포넌트를 렌더링해서 여러 페이지를 사용하는 것처럼 느끼도록 해야함 만약, routing이 없다면 URL을 통한 페이지의 변화를 감지할 수 없음 새로고침하면 처음 페이지로 돌아감 뒤로가기 기능을 쓸 수 없음 # vue에서 Router 써보기 Vue Router = 뷰의 공식 라우터 공식문서 웬만하면 영어로 보는걸 추천 하지만 우리는 Vite를 쓰니까 좀더 편하게 가능! 처음에 프로젝트 만들 때, 네모친 부분만 Yes로 바꿔주면 바로 router 사용 가..

부모 컴포넌트는 자식에게 데이터를 전달할 수 있지만, 반대로는 불가능했다... 그러면 어떻게 소통을 시킬 수 있을까? → 일어난 일(event)는 알릴 수가 있음! 즉, 자식은 자신에게 일어난 일을 부모에게 알리고(Emit Event), 부모가 prop 데이터를 변경하도록 해야한다 # emit( ) 자식 컴포넌트가 이벤트를 발생시켜 부모 컴포넌트로 데이터를 전달하는 역할 한번 해보자! 첫번째로 자식 컴포넌트에서 버튼을 하나 만들어준다 눌러봐요 그다음에 부모 컴포넌트에서 template 부분에 자식 태그에 추가를 해준다 이벤트를 받았을 때 어떤함수를 실행할건지를 써준다 그리고, script에 함수를 정의해준다 const myCallback = function () { console.log('와아!') } ..