열심히 일한 당신 떠나라 열심히 일한 당신 떠나라

10장 데이터 통신하기10.1 데이터 통신에서 알아야 할 개념1. HTTP와 메서드통신 프로토콜: 데이터 통신에 필요한 특정한 규칙과 규약클라이언트에서 서버로 HTTP 요청서버는 요청에 대해 HTTP 응답주요 HTTP 메서드GET: 데이터 가져오기POST: 데이터 쓰기(추가하기)PUT: 데이터 전체 변경하기PATCH: 데이터 일부 변경하기DELETE: 데이터 삭제하기 2. APIAPI: Application Programming Interface, 클라이언트와 서버는 HTTP를 사용해 데이터를 주고받을 때 필요한 데이터를 어떻게 요청하고 어떻게 응답받을지 정하는 약속엔드포인트: 클라이언트에서 직접 API의 기능을 사용하려고 호출하는 끝점10.2 Node.js로 웹 서버와 API 만들기// vue.js.f..

9장 Pinia로 상태 관리하기 9.4 실습: Pinia를 사용해 장바구니 앱 만들기1. 뷰 애플리케이션 초기화//vue.js.frontend/ch09_cart/src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'import HomeView from '../views/HomeView.vue'const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/ca..

9장 Pinia로 상태 관리하기 9.1 상태 관리란상태(state): 웹 애플리케이션을 렌더링하는 과정에 영향을 줄 수 있는 값을 의미상태관리: 이러한 값 관리9.2 Pinia 사용 준비하기pinia 설치npm install piniapinia 인스턴스 생성 및 등록import { createApp } from 'vue';import { createPinia } from 'pinia'; // createPinia 함수 불러오기import App from './App.vue';import router from './router';const app = createApp(App);const pinia = createPinia(); // pinia 인스턴스 생성app.use(router);app.use(pini..

[Vue 13일차] ~8.3 뷰 라우터의 고급 기능 다루기(종이책 p.374-390)내비게이션 가드라우팅 과정 중 특정 지점에서 라우트 전환을 가로채 사용자 정의 로직을 실행할 수 있게 해주는 훅내비게이션 가드를 사용하며 라우트 접근을 제어하거나 조건에 따른 다른 라우트로 리다이렉션하거나 라우트 변경 전에 데이터를 불러오는 작업 등을 수행할 수 있다.사용방식에 따라 전역 가드, 라우트별 가드, 컴포넌트 내 가드로 구분할 수 있다.경로 메타 필드meta 속성을 사용해 해당 라우트에 대한 추가적인 사용자 정의 정보를 저장하는 기능 제공// src/router/index.jsimport { createRouter, createWebHistory } from "vue-router";import HomeView ..

[Vue 12일차]~8.2 뷰 라우터 추가 기능 사용하기(종이책 p.351-373)동적 경로 매칭// src/router/index.jsimport { createRouter, createWebHistory } from "vue-router";import HomeView from "@/views/HomeView.vue";import UserView from "@/views/UserView.vue";const router = createRouter({ history: createWebHistory(), routes: [ { path: '', name: 'home', component: HomeView, }, ..

[Vue11일차]~8.1 뷰 라우터 다루기(종이책: p.341-350)뷰 라우터 설치npm install vue-router@4// package.json{ "name": "ch08_01", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.4.29", "vue-router": "^4.4.0" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", "vite": "^5..

우연히 페이스북에서 보게 되어 신청하게 된 코딩 자율학습. 예전에 머 이런 html 문법을 약간 공부한 입장에서  평소 프런트엔드 쪽 동향을 궁금해 하던 차에 vue.js가 맘에 들어 신청하게 되었다. 현재 2주차 학습까지 끝난 지금 약간의 html 문법과 자바스크립트 문법만 알고 있는 저로써도 쉽게 책을 읽을 수 있었습니다.그리고 매주 인증(사실, 매일 인증 중)이 없었다면 반도 읽지 못했을 저로써는 매일 인증할 수 있게하는 매력의 카톡이 매일 옵니다. 이런 것들이 복합적으로 작용하여 현재 책을 보면서 계산기, todoList 페이지를 작성할 수 있으며 , 컴포넌트를 다룰 수 있고, 옵션스 api, 컴포지션 api가 무엇인지 알 수 있습니다. 아마 4주차까지 갈 수 있을 지 모르지만 지금까지 한 ..

7장 컴포지션 API 다루기7.3 컴포지션 API에서 달라진 컴포넌트 구성 요소o 라이프사이클 훅beforeCreate(), created() 가 setup 영역으로 대체함.beforeMount() -> OnBeforeMount() ... 으로 변경됨.ㅇpropsㅇ emitsㅇ provideㅇ inject