orange056

안녕하세요 오늘은 카카오 api를 사용해 지도를 띄우기를 해 보았어요 카카오 api를 사용하기 위해선 앱키를 먼저 발급 받아야해요 그리고 앱키를 다운 받은 후 지도를 담을 영역 먼저 지도를 담을 div를 만들어줍니다. javascript 불러오기(index.html) 다음으로 실제 지도를 그리는 javascript를 불러와 줍니다 이때 appkey= 옆에 발급 받은 앱키를 넣어줍니다 이 작업은 vue 파일이 아닌 index.html에 해줍니다 잘못된 방법 다음으로 스크립트를 넣어주면 되는데요 설명대로 이렇게만 넣어주면 kakao를 찾을 수 없다는 에러가 나옵니다. vue에서는 위와 같은 방법으로 사용하면 안됩니다! 실제 방법 실제 성공하기 위해선 이 방법을 사용해 주었습니다. vue3를 사용하면 더 간결..

1. Visual Studio Code 설치 - 사실 본인이 사용하고자 하는 코딩 편집 프로그램을 설치하면 된다. 2. vue.js devtools 설치 vue.js devtools는 vue에 적용되어 있는 값, 컴포넌트들을 개발자 도구에서 실시간으로 추적하여 사용자가 눈으로 확인 할 수 있도록 GUI로 출력시켜 주는 툴이다. https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd Vue.js devtools Browser DevTools extension for debugging Vue.js applications. chrome.google.com 위 링크에서 설치해주면 된다. 3. vetur 설치..

너무너무 간단하지만 처음 vue 프로젝트를 접하는 분들이나 오랜~만에 프로젝트를 접하는 사람들은 모를 수 있기 때문에 적어봅니다. 1. cmd를 들어간다 2. vue 프로젝트가 있는 경로로 들어간다 3. npm run serve를 입력한다 이렇게 나오면 프로젝트 실행 성공이다 4. 로컬호스트로 접속한다 그럼 위와 같은 결과를 얻을 수 있다 참 쉽죠잉

vue3를 이용해 슬라이드 기능구현을 해봤다 npm install vueperslides 먼저 vueperslides를 설치해준다 다음으로 코드이다 이건 짧아서 이해하는데 큰 어려움이 있진 않을 것이다 // npm install vueperslides // https://antoniandre.github.io/vueper-slides/ 완성된 모습 잘 안보이지만 자세히 보면 왼쪽 오른쪽 버튼도 있고 아래 부분에도 몇번째 사진인지 알 수 있도록 되어있다. 끝

vue3를 사용하여 슬라이드 기능구현을 해봤다. 근데 이제 그냥 슬라이드가 아닌 한 화면에 3개의 이미지가 나오고 가운데 이미지를 제외한 양쪽에 이미지는 어둡게 나오도록,,! 구현 성공!!! npm install vueperslides 위 명령어로 vueperslides를 먼저 설치해줘야한다!! 그리고 코드는 아래와 같다 // npm install vueperslides // https://antoniandre.github.io/vueper-slides/ ▼ 공식문서 바로가기 https://antoniandre.github.io/vueper-slides/

- html - script 원랜 더 길었지만 필요한 부분만 두고 나머지 부분은 지웠다 파일을 선택하면 위처럼 미리보기가 나온다 ^-^

- html Preview - script - style ** npm 설치 명령어 npm install cropperjs - 완성된 모습 사이즈를 바꿀때마다 preview가 바뀐다 >

- html 저장 - script

- 상위컴포넌트 let testData = '하위컴포넌트로 보낼 데이터'; 보낼 데이터 testData라는 데이터를 보내줌 - 하위컴포넌트 import { defineProps } from 'vue'; const props = defineProps({ data: String }); 보낸 데이터를 String으로 받아옴 - 사용하는법 props.data

- 하위 컴포넌트 // 하위컴포넌트에서 상위컴포넌트로 데이터 보내기 const test = '테스트 데이터임!!'; const emit = defineEmits(['child']); const testBtn = () =>{ emit('child', test); } child라는 이름으로 데이터를 보내줌 - 상위 컴포넌트 child로 데이터가 넘어오면 parents 함수 실행 const parents = (data) => { // 실행할 내용 입력 console.log(data); } parents함수에 실행할 내용을 입력해주면 끝