Framework/Vue

안녕하세요~~~~ㅎㅎㅎ싸피 들어온 지가 엊그제 같은데 벌써 1학기가 끝나가네요😢 이제 곧 관통 프로젝트를 앞두고 있는데요!! 어떤 주제든 지도 API를 사용하실 거 같아요.그래서 지도 API를 미리 사용해 봤습니당! 전 카카오맵 API를 썼고, 이에 대해 정리해 보도록 하겠습니다🧐   1. API 키 발급 먼저 카카오맵 API를 쓰기 위해서는 여기에서 API 키를 발급받아야 합니다.  애플리케이션 추가하기를 누르고 정보를 입력해 주세요. 추가한 애플리케이션을 들어가면 이렇게 뜨는데, 저는 Vue에서 카카오맵을 활용해 개발할 거라 JavaScript 키를 사용할 거예요.그리고 아래 플랫폼 설정하기를 눌러서 도메인을 등록합니다. 저는 처음에 Web에 http://localhost:5173을 등록했고, 이..

Vue - Kakao Map1. Vue3에서 Kakao Map 사용하기 이전 글에서는 카카오맵을 활용해 기본 지도를 띄어 보았다.이번에는 마커 생성하기 예제를 활용해 마커를 띄어 보려고 한다. 📄 코드  🧩 결과

Vue에서 지도를 띄우기 위해 카카오맵 API를 사용하려고 한다. 카카오맵 API Key는 여기에서 받으면 되고, JavaScript 키를 사용하면 된다.플랫폼 등록하는 것도 잊지 말자! 포트 번호가 바뀌었을 때 바보 같이 도메인 등록하는 걸 까먹었다가 삽질했다... 아래는 카카오맵에서 제공하는 기본 지도 생성 예제를 활용해서 Vue에서 지도를 띄우는 코드이다. 📄 코드   options는 카카오맵 Docs에서 확인하고 필요한 대로 조정하면 된다. 🧩 결과

ref()반응형 상태(데이터)를 선언하는 함수 (Declaring Reactive State) ref() 사용인자를 받아 .value 속성이 있는 ref 객체로 wrapping하여 반환한다.ref로 선언된 변수의 값이 변경되면 해당 값을 사용하는 템플릿에서 자동으로 업데이트한다.인자는 어떠한 타입도 가능하다.const {createApp, ref } = Vueconst app = createApp({ const message = ref('Hello, Vue!') console.log(message) // ref 객체 console.log(message.value)}) 템플릿 렌더링반환된 객체의 속성은 템플릿에서 사용할 수 있다.Mustache syntax(콧수염 구문)를 사용하여 메시지 ..