일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- MTB
- 샤오미
- 미지아
- 청주시 일반계 고등학교
- 오프로드
- 자전거
- 대한민국선거
- 액티언스포츠
- 40대아빠육아
- 아빠육아
- 전동전기톱
- 데이터시각화
- 가칭 동남고등학교
- 저출산
- 파리브레스트파리
- 엔진오일
- 콜로라도
- 도로패임
- 인공지능
- 코란도스포츠
- 국민을 위한 국민연금은 없다
- 준연동형비례대표
- 2024년 합계출산율
- 청주시 지하철
- 육아휴직급여
- 남자육아휴직
- 픽업트럭
- 싸이클
- 감나무전지
- 중고노트북
- Today
- Total
목록정보교육/프런트엔드 (22)
열심히 일한 당신 떠나라
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..
[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, }, ..