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

1. Vue.js 프로젝트 빌드먼저, Vue.js 프로젝트를 배포 가능한 정적 파일로 빌드해야 합니다. 아래 명령어를 터미널에서 실행하여 dist/ 폴더를 생성합니다. vite.config.js에 다음과 같은 내용을 추가한다.# vite.config.jsimport { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), ], resolve: { alias: { '@': fileURLToPath(new URL..

12장 부록: 알아두면 좋은 ES6 12.1 ES6란ECMAScript 6 : 2015년에 도입된 자바스크립트 최신버전12.2 학습 준비console에서 실행하기html에서 실행하기12.3 ES6의 주요 문법1. let 과  constlet. const 중복 선언은 안됨.let 재할당은 가능하나 const는 재할당 불가let r = 'red';r = 'blue';const b = 'blue';b='red';2. 템플릿 문자열let str1 = 'hello';let str2 = "Hello";큰따옴표, 작은따옴표 가능3. 화살표 함수function 함수명(매개변수1, 매개변수2, ..., 매개변수n) { return ;}const 함수명 = (매개변수1, 매개변수2, ..., 매개변수n) => { re..

11장 날씨 애플리케이션 만들기 11.4 배포하기https://app.netlify.com/  Netlify App app.netlify.com깃허브에 개발 자료 업로드넷틀리파이에서 깃허브 불러오기 프로젝트를 고르고강조한 부분 확인하고 사이트를 배포. 11.5 숙련자로 나아가기1. 테스트 맛보기유닛 테스트, 종단 간 테스트(end-to-end test)

11장 날씨 애플리케이션 만들기 11.1 날씨 애플리케이션 살펴보기날씨 애클리케이션: 홈, 예보, 검색 화면검색화면에서 조회한 다른 지역의 날씨 데이터를 웹 브라우저 저장소(로컬 스토리지)에 저장11.2 날씨 애플리케이션 UI 구성하기11.3 날씨 애플리케이션 기능 구현하기날씨 api https://www.visualcrossing.com/ Weather Data & Weather API | Visual CrossingAbout Visual Crossing Visual Crossing is a leading provider of weather data and enterprise analysis tools to data scientists, business analysts, professionals, an..

"10장 데이터 통신하기 " 10.4 Axios로 데이터 통신하기1. 라이브러리 설치npm install axios//vue.js.frontend/ch10_axios/package.json{ "name": "axios", "version": "0.0.0", "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "axios": "^1.7.2", "vue": "^3.4.29" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.5", ..

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..