개인코딩개발공장

# 설치 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: ..

휴대폰에서 사용자의 정보를 가져오는 기능을 개발하려는데 보통은 노트북으로 공부하니까 이게 테스트를 어떻게 해야할지 몰랐다 그래서 이번엔 휴대폰으로 테스트 하는 방법을 찾아봤다. 일단 내 컴퓨터의 ip주소를 알아봐야한다. 커맨드에 ipconfig를 쳐서 아이피를 따오자. 여기서 IPv4주소를 쓰면된다. 그리고 서버 실행하고 휴대폰으로 저 IPv4주소:포트번호 이렇게 접속하면된다. 중요한건 집인터넷으로 휴대폰 와이파이를 연결해야한다.

# 라우터 넘기기 app.get('/',(req,res,next)=>{ res.sendFile(path.join(__dirname,'/index.html')); if(false){ next('route') }else{ next() } },(req, res)=>{ res.send('라우터1') }) app.get('/',(req,res,next)=>{ res.send('라우터 2') console.log('라우터 2') }) 먼저 슬레시로 들어가면 if 조건이 true 이면 next('route')가 있다. 그럼 라우터 1로 연결되는게아니라 라우터 2가 연결된다. 다음라우터라는 뜻이 밑에 연결된 미들웨어가 아니라 '다음라우터'라는 뜻이다 만약 조건이 false면 라우터 1로 연결되겠지. 이걸로 로그인한사람..