ㅇㅅㅇ

vue를 공부하면서 vue없이 작성했던 소스들을 적용하는 연습 중에 있다. 이번에는 회원가입, 배송정보 입력시 주소 찾기 및 입력에 많이 사용하는 다음주소 API를 Vue에 적용해보고자 한다. 다음주소 API도 카카오 맵처럼 js를 vue 환경에 맞게 수정해 적용할 수 있다고 한다. 공식문서에 들어가면 예시 및 사용방법을 확인할 수 있다. Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 적용하기 공식문서에서 스크립트 소스를 가져와 public/index.html head에 추가한다. 혹은 관련 특정 페이지에 스크립트 ..

네이버 지도 api와 함께 많이 사용하는 카카오 Maps API를 vue-cli에 적용해 보려고 한다. (Vue에 적용하려는 이유는 특별히 없다. 현재 공부중인 프레임워크라서 일뿐...) 카카오 Maps API의 공식문서에는 Vue에 적용하는 방법은 따로 기재되어 있지 않지만 javascript로 적용방법이 잘 적혀 있어 Vue에 맞게 적용하면 된다. 1. 준비하기 : 내 애플리케이션 등록 및 카카오 키 발급 카카오 Maps API를 가져오기 위해서는 Javscript API가 필요한데 발급을 받아야 사용할 수 있다. 이 키를 발급받기 위해서는 카카오 계정이 필요하다. 카카오 개발자센터 접속 및 회원가입, 로그인 후 내 애플리케이션 메뉴 클릭 애플리케이션 추가하기 클릭 및 정보입력 후 저장 클릭(정보입력..

백엔드 지식이 없거나 구축하기가 번거울 때, 간단하게 서버와 연동해서 테스트를 하고자 한다면 json-server를 설치해 사용해 볼 수 있다. json-server란? 실제 배포할 서비스용(프로덕션)이 아니라 로컬에서 혼자 연습할 때 사용하기 좋은 기본적인 Rest Api의 기능은 다 가지고 있는 라이브러리이다. json-server 설치방법 npm을 이용해 설치 npm install -g json-server 데이터베이스 역할을 할 db.json 파일 생성 { "todos": [ { "id": 1, "content": "HTML", "completed": true }, { "id": 2, "content": "CSS", "completed": false }, { "id": 3, "content": "..

배열(Array)에 사용할 수 있는 내장함수 toString() : 배열을 하나의 문자열로 바꿔주는 함수 let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; console.log(brands.toString()); // 애플, 구글, 아마존, 마이크로소프트, 메타 join() : 피라미터로 전달된 문자가 요소 사이사이마다 삽입되어 하나의 문자로 결합 해주는 함수 let brands = ["애플", "구글", "아마존", "마이크로소프트", "메타"]; console.log(brands.join(" * ")); // 애플 * 구글 * 아마존 * 마이크로소프트 * 메타 console.log(brands.join(" ")); // 애플 구글 아마존 마이크로소프트 메타 p..

쇼핑몰에서 판매 중인 상품이나 장바구니 등의 정보 등 대부분의 웹 사이트에서 사용자나 서버에서 입력받은 정보를 처리하는 방식으로 동작하는데, 이러한 정보를 저장할 때 변수가 사용된다. 여기서 말하는 변수는 무엇이고 어떻게 선언할까? 변수란? 자바스크립트에서 변수는 데이터를 담는 그릇을 의미한다. 변수는 var, let, const 키워드를 사용하여 선언하고, let x; 할당 연산자(=)를 사용해 값을 할당한다. let x = "a";// 문자열 저장 그리고 식별자인 변수명을 사용해 변수에 저장된 값을 참조한다. let x; x = 'a'; alert(x); // 변수에 저장된 값을 보여준다. 한 줄에 변수 선언과 값 할당을 할 수 있으며, 한 번에 여러 변수를 선언할 수 있다. // 한 줄에 변수 선언..

간혹 하나의 이미지에 여러개의 링크를 담아야 할 때가 있다.(ex. 쇼핑몰 프로모션 이미지에 여러개의 링크 걸기 등) 그럴 때 가장 쉽게 할 수 있는 방법으로 image map태그가 있다. 태그 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다. 기본작성법 img 태그로 이미지 맵을 적용할 이미지를 불러온다. map 태그를 추가하고 name을 지정해 img 태그와 연결한다. img의 usemap과 map name가 동일해야 한다. img usemap에는 # + map name으로 작성한다. map 태그 내부에 이미지맵 영역을 설정할 area 태그를 추가로 입력한다. shape : rect(사각형) circle(원형) poly(다각형) 3가지 중 하나의 좌표 모양을 선택한다. coord..