개인코딩개발공장

문제점 설명 : gogo1 이렇게 만드는건 이미 배웠고 정상적으로 작동된다. 하지만 내가 원하는 기능은 메서드 안에서 라우터를 조정하는것이다.. 조건에따라 다른 라우터를 연결하는 버튼을 만들고 싶어서였다. gogo2 여긴 템플릿 const test = ()=>{ router.push({ name: 'test' }) } 이건 메서드.. this.$router.push~ self 머시기 다 써봤는데 안되더라. 구글링 졸라게 해보니 답이나온다. 먼저 import { useRouter, useRoute } from 'vue-router' 이렇게 라우터를 임포트해주고 const router = useRouter(); const route = useRoute(); 이렇게 변수지정을 해준다. 그다음 메서드에서 con..

# children만들기 { path: "/detail/:index", component: Detail, children: [ { path: "author", component : Author }, { path: "comment", component : Comment }, ] }, 이렇게 칠드런 컴포넌트를 써주면 됨. author은 detail/:index/author으로 연결이 되는거임. 물론 import해줘야함. # detail.vue에서 으로 갖다쓰면됨. 연결은 {{posts[$route.params.index].title}} 이렇게 해줬음. ## router함수 # push함수 여기서 제목을 클릭하면 detail/~/author이라는 라우터를 기본 주소에 붙여준다는거임. 페이지 이동되는거. # g..

# 설치 npm install vue-router@4 # ./src/main.js에서 라우터 선언 import { createApp } from 'vue' import App from './App.vue' import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' import router from './router.js' createApp(App).use(router).mount('#app') # ./router.js파일만들고 내용 넣기 import { createWebHistory, createRouter } from "vue-router"; import List from './components/List.vue' import Main from ..

package.json에 "rules": { "vue/multi-word-component-names": "off" } 추가 그리고 재시작해야함.

vue create frontend 로 프론트앤드 만들기 # 1 app.vue 세팅 import Ground from "./components/Ground.vue"; export default { components: { Ground, } } 그라운드라는 컴포넌트로 세팅. # 2 component/ground.vue 세팅 import Header from './Header.vue' import Footer from './Footer.vue' import Memo from './Memo.vue' export default { name: "Ground", components: { Header, Footer, Memo } } 헤더, 푸터, 그리고 메인인 memo로 나눔. # component/header세팅 ..

개념을 다시 잡기위해 다시 포스팅 해본다. async함수가 프로미스를 리턴하는데 프로미스는 resolve로 데이터를 보내고 .then에서 그 데이터를 쓸 수 있다. 근데 async는 프로미스를 리턴하는데 앞선 delay함수 예시에서는 직접 만든 프로미스를 리턴해버렸다... 그래서 async함수에서 가공한 데이터는 어떻게 resolve하는지 헷갈렸다. # delay함수 async function delay(ms){ return new Promise((resolve, reject)=>{ setTimeout(()=>{resolve()},ms) }) } 앞서 예시로 배운 delay함수이다. 리턴으로 직접적으로 promise를 해준다. async function delay(ms){ return new Promis..

# 인풋창에 입력한 값 Month : {{monthChosen}} 개월 선택할거야? {{monthChosen * products[now].price }}원 인풋값에 입력한값은 monthChosen이란 데이터값에 저장된다. 그리고 데이터에 data(){ return{ monthChosen : 1, dataa : '', } }, 이렇게 monthChosen은 기본값 1로 해놨다. 그리고 p태그들 안에서 데이터를 사용하면 된다. # 축약버전 {{dataa}} dataa라는 키값에 인풋값을 자동으로 저장해줌. v-model.number하면 받은 인풋값을 숫자로 저장해줌. ## watcher사용 (인풋값 감시) monthChosen의 인풋값에 숫자만 와야함. data(){ return{ monthChosen : ..

먼저 Modal.vue에서 props로 App.vue의 데이터를 가져왔다. 근데 props로 가져온 데이터는 수정을 할 수가 없음. 그럼 Modal.vue에서 App.vue의 데이터를 수정하고 싶을때는? custom event를 사용하자. Modal.vue 에서 App.vue에 메세지를 보내는것임. Lists.vue에서 {{ products.title }} 이건 제목으로 한거고.. App.vue에서 lists.vue에서 opanModal이라는 이벤트가 오면 modalStatus를 여기서 데이터도 전해질수 있는데 {{ products.title }} 이런식으로 원하는 데이터를 옆에 적고 보내면 $event로 데이터를 가져올수있음. 모달창 닫기버튼 Modal.vue close App,vue # 이미지 클릭으..

컴포넌트 쓰는 순서 #1 ~~~.vue파일을 만들어서 정리. 이렇게 파일 아무대나 갖다 만들어놓음. #2 ~~~.vue내용 및 export vue 템플릿( 꺽쇠 이렇게 원하는 데이터들을 갖다 붙여줌. 왼쪽은아무렇게 작명해도되고 오른쪽은 데이터 객체 키값 보통 둘다 똑같게씀. 난 Modal로 만들어봄. 그리고 Modal.vue에 가서 익스포트를 수정해줘야함. 이렇게 전해받을 데이터를 props키값 객체에 넣어줌. 이거 막만들다가 겁나복잡해질듯. 프롭스로 가져온 데이터는 수정을 못함!! 그래서 mdalStatus가 작동안됨. ## 컴포넌트 연습코드 # app.js import List from './Lists.vue' components: { Discount: Discount, //Discount, 걍 이렇..

예전에 배우다만 뷰js를 다시 시작하면서 그동안 배운것들을 다시 정리해본다. # 프로젝트 생성 시작하면서 cmd에서 프로젝트부터 만들자. 이전에 뷰 설치는 npm install -g @vue/cli로 하고 익스텐션 vetur, html css support, vue 3 snippets설치하고 시작한다. 프로젝트 만드는건 cmd에 vue create 프로젝트명, 그리고 vue3을 선택한다. 그리고 프로젝트 이름을 vs코드로 열고 시작하자. # 데이터바인딩 export default { name: 'App', components: { }, data() { return { modalStatus : 0, now : 0, menus: ['Home', 'Shop', 'About'], family: [ {name: ..