[025] vue.js: vue-router와 axios를 사용해서 TodoList 만들기

 

2024.06.12(수)
 
스켈레톤 3일차

 

내일부터는 발표자료 제작과 병행 예정

부트스트랩: Bootstrap · The most popular HTML, CSS, and JS library in the world. (getbootstrap.com)
W3C ...

1. axios 코드 이해하면서(GPT와 함께) 작성해보기 (~금)

2. axios 최대한 스스로 작성하기(토)

 

---

 

Vue.js 복습

 

NotFound.vue

 

 

<div class="m-3">

: 마진 스타일

: <div>의 내용 주변에 여백 공간 추가

 

<p>요청 경로 : {{ currentRoute.path }}</p>

: Vue.js에서 {{ }}는 데이터 바인딩에 사용

: currentRoute.path는 현재 경로의 경로를 나타내는 자리 표시자

 

 

import { useRoute } from 'vue-router';

const currentRoute = useRoute();

 

: Vue Router를 사용하여 현재 페이지의 라우트 정보를 가져와 currentRoute 변수에 할당

 

reactive와 ref 차이점

1. 반응형으로 만드는 대상:
   • reactive: 객체와 배열
   • ref: 원시 값과 객체/배열을 포함한 모든 값
2. 접근 방식:
   • reactive로 만든 객체는 일반 객체처럼 접근
   • ref로 만든 값은 .value를 통해 접근
3. 단일 값 vs. 복합 값:
   • reactive는 여러 속성을 가진 복잡한 데이터 구조에 적합
   • ref는 단일 값 또는 단일 데이터 구조에 적합

#reactive는 복잡, ref는 간단

#reactive는 일반 객체, ref는 .value 속성

#reactive는 복잡하지만 어디든지 일반 객체처럼!

 

12강 14페이지까지 구현 완료