HIT해

사전 준비 1. axios 설치 npm install axios 또는 npm i axios 2. Vue프로젝트의 utill/http-common.js 설정 import axios from "axios"; export default axios.create({ baseURL: "http://localhost:9999/userapi/user", headers: { "Content-type": "application/json", }, }); 이때 localhost: 부분은 여기서 쉽게 확인할 수 있다. 그리고 뒤의 url 부분 Spring Controller의 이 부분을 참고하여 설정해주면 된다. RequestMapping이 공란이라면 user만 하면 되겠죠? Spring과의 연동은 이거면 끝이다.

App.vue const quizList = ref([ {pk: 1, question:'Python 웹 프레임워크 중 하나로 마이크로 웹 프레임 워크로 빠른 개발을 지원하는 것은?', answer :'flask'}, {pk: 2, question:'HTML에서 텍스트 입력란을 만드는 데 사용되는 요소는?', answer :'input'}, {pk: 3, question:'웹 애플리케이션에서 클라이언트의 데이터를 서버로 전송할 "때 주로 사용되는 HTTP 메서드는?"', answer :'post'}, {pk: 4, question:'Python 의 가상 환경을 만들어 프로젝트 별로 라이브러리 의존성을 격리시키는 명령어는?', answer :'virtualenv'}, {pk: 5, question:'웹 애플..

준비사항 1. 뷰 프로젝트 생성 시 Store 사용 Yes 선언 stores 폴더 내의 product.js 설정 import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useProductStore = defineStore('product', () => { const productList = ref([ {name: '상품 1', imagePath: 'src/assets/product1.png', price: 10000, isFavorite: false}, {name: '상품 2', imagePath: 'src/assets/product2.png', price: 20000, isFavorite: false}, {..

사전 준비 index.js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' import QuizView from '@/views/QuizView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/quiz', name: 'quiz', component: QuizView } ] }) export default router index.js에 컴포..

Ctrl + ~ 를 하면 터미널이 켜진다. cd ~~~로 원하는 폴더로 이동하고 명령어 : npm create vue@latest => 뷰 프로젝트를 생성한다 이때 cd 로 한번 더 이동을 해주어야한다. 명령어 : cd vue.project 생성한 뷰 프로젝트로 이동한다. 명령어 : npm install => 필요한 모듈들을 다운 받기 위함 명령어 : npm run dev => 현재 뷰 프로젝트를 실행시킨다.

filter 를 사용해서 해결하는 방법 const busineseCards = ref([{ name: '일론 머스크', title: '테슬라 테크노킹' ,indexx : 1 }, { name: '래리 엘리슨', title: '오라클 창업주' ,indexx : 2}, { name: '빌 게이츠', title: '마이크로소프트 공동창업주' ,indexx : 3}, { name: '래리 페이지', title: '구글 공동창업주' ,indexx : 4}, { name: '세르게이 브린', title: '구글 공동창업주' ,indexx : 5}]) const deleteCardEventt = function (indexx) { const tmp = busineseCards.value.filter((io)=> io..

props 위에서 아래로 정보를 보낼 때 사용한다. 이렇게 인자들을 BusinessCardDetail.vue에 넘겨주면 BusinessCardDetail.vue에서는 const props = defineProps({ name : String. title : String, indexx = Number, }) 이렇게 각각의 인자들의 타입명을 지정해줘야한다. 이때 만약 객체배열 자체를 받아서 쓰고 싶다면 각각의 ChildPage에는 i 라는 chidren 객체 배열의 인자들이 들어갈 것이기에 :person="i" 로 보내고 :person ( 받은 곳에서 사용할 이름 ) person으로 받아서 이름 : {{ person.name }} 나이 : {{ person.age}} 용돈 : {{ person.balance..

const children = ref([ {name: '김하나', age : 30 , balance : 100000}, {name: '김두리', age : 20 , balance : 10000}, {name: '김서이', age : 10, balance : 1000}, ]) props로 넘겨줄 때 주의사항 이렇게 인자 하나하나를 보낼 때 balance의 값은 int 형이기에 " " 로 감싸서 보내면 문자열로 보내져서 값을 매칭시키지 못하는 오류가 발생한다