개발/vue(17)
-
프젝1103
2021-11-03 컴포넌트 url 지정 컴포넌트 등록 - > router 등록 - > 각버튼에 router.vue 줘서 활용 경로 : vue_page/src/router/index.js 이런식으로 라우터패스 설정해면 path: 이름 get방식으로 요청하면 해당 컴포넌트 페이지 볼수있음 vue 에서는 a 태그 대신 router link 사용해서 클릭했을때 get방식 요청이 이루어지도록 설계 vue webpack init할떄 eslint 설치 ㄴㄴ 귀찮은 문법규범 하나도 안걸림 너무 좋음 나중에 써야할 필요가 생기면 사용하기 html css 그대로 뷰에서도 bootstrap 적용가능 인덱스.html 에 cdn 적용 근데 이번 프로젝트에서는 순수html css 에 기존사용하던 bootstrap 가지고옴 따로..
2021.11.03 -
스프링 부트 프로젝트와 뷰 연결하기
부트 설정하고 생성 1.sts 새로운 프로젝트 생성 예 )backend폴더임 2.루트에서 폴더 하나 생성 예 )frontend폴더임 3. frontend 폴더에서 우클릭 show in -> terminal sts 에서해도 되고 vscode 에서 해도 되고 ! 여기까지는 빈껍데기인데 여기서 터미널 명령어로 ============================================= cmd vue init webpack > project name = vue-front discription = vue-fronted ----------------- run +compile o ----------------- router y/n = y ESlint y/n = y ----------------- ESlint p..
2021.10.22 -
Vuex -action
ajax 는 비동기식 통신방식을 지원하는 코드여서 시간이 많이걸림 자바스크립트는 시간이 오래걸리는것을 후순위로 처리하는데 그래서 mutations에 state 변경과 함께 사용하게 되면 순서대로 이루어지지 않을수 있음 mutations에서는 state 변경만 처리하도록 하고 ajax 처리는 action에서 하도록 하여서 실행시 발생할수 있는 오류를 미연에 방지하는것. actions 만드는법 그낭 mutations처럼 actions 항목을 만드신 후에 함수형태로 만드시면 됩니다. actions : { 데이터가져오기(){ axios.get('').then(()=>{ 성공시 실행할 코드 }) } } 그럼 이제 App.vue 이런 곳에서 $store.dispatch('데이터가져오기') 라고 사용했을 때 진짜 데..
2021.10.20 -
Vuex
지금까지 배운거 다 ~ 부질없게 만들법한 강한녀석등장 store.js(관습적 이름 상관 x) 파일만들고 거기에다가 데이터 다꽂아두고 거기서만 뺴서쓰는거임 프롭스 mitt 이딴거 다필요없어짐 띠용 근데 간단한거는 프롭스 이런게 좋다고함 왜냐면 기본셋팅이 많이걸림 https://next.vuex.vuejs.org/ 여기서 설치 명령어 보고 설치 or 애초에 프로젝트 만들때 vuex 선택 Vuex 셋팅src 안에 아무데나 store.js를 만들고 다음코드 작성 import { createStore } from 'vuex' const store = createStore({ state(){ return { } }, }) export default store 그다음 store.js 를 main.js 에 등록 (ma..
2021.10.19 -
Ajax Axios 에 대하여...
에이 찎!쓰! 와 엑시오스에 대해서 Ajax란 Asynchronous JavaScript and XML의 약자입니다. 비동기 통신방식 아~싱크로노스아니네 자바스크립트 and xml 싱크로노스 = 동기 어싱크로노스 = 비동기 서버와 브라우저 간에 비동기 방식으로 자바스크립트와 xml을 주고받는 창을 새로 실행하지 않아도 새로운 정보가 표시 된다구 !! axios = Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 사람들 어렵게 쓰는거 싫어하잖아 도구 만들어 놓은거임 axios ㅅㄱ. 사용법 ㅈㅅ 설명해드림 axios.get(주소) .then(function(작명데이터)){. ------> 잘받아오면 실행함 console.log(작명데이터) } ...
2021.10.19 -
데이터 관리, 컴포넌트, 프롭스
데이터들이 많이모임 이전시간에는 방대한 양의 데이터는 export import로 관리한다고함 postdata = 엄청길어서 내가 여기 app.vue data(){}칸에 적으면 적다가 콜론 하나 빠져서 오류나고 정신나갈꺼같은 긴 데이터 는 임포트 (아 그걸 기억하셈 ! 왼쪽은 작명 오른쪽은 원래있는거) 게시물(작명) : postdata,(원래있던거) 사실 임포트를 postdata로 안하고 똥강아지로 했으면 게시물 : 똥강아지, 임 왜냐 임포트 당시에는 postdata 위치가 from '경로' 왼쪽이니깐 작명이거든 근데 왠만하면 임포트 작명은 파일명을 따라하셈.. 그게 정신건강에좋음 Container = 보시다시피 컴포넌트임. 마찬가지로 방대한양의 html 덩어리는 component로 관리 근데 컴포넌트를 ..
2021.10.19