ㅇㅅㅇ

네이버 지도 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..

모든 입력폼을 input type="text"으로 사용한다면 PC환경에서는 큰 차이가 못 느끼지만, 모바일에서는 작은 화면에서 제공되는 키패드를 사용하기 때문에 상황에 따라 불편을 느낄 수 있다. 이것을 해소해 주는 것이 input 태그의 type 속성이다. input 태그의 type 속성은 아래의 이미지 처럼 속성에 따라 최적화된 입력 환경으로 사용자에게 편의를 제공한다. (이미지는 안드로이드 버전) number : 숫자패드가 나온다. tel :숫자패드가 나오는데 number과 다른점이 있다면 *,+,#를 입력할 수 있는 버튼이 있다. email : 숫자+영문패드가 나온다. 하단에 .com을 입력할 수 있는 버튼도 있다. search : 입력하면 입력창 우측에 x버튼이 생기고 누르면 작성했던 내용이 지..

의미없는 태그와 css로는 시각적으로 강조하는 모양은 만들 수 있으나 검색엔진과 시각장애인에게 의미는 전달할 수 없다. 검색엔진 최적화(SEO)와 시각 장애인들이 스크린 리더기를 통해 웹 사이트를 이용하는데 도움이 될 수 있도록 명확한 정보전달을 위해 의미전달이 필요한 콘텐츠가 있다면 거기에 맞는 의미있는 태그(Semantic Tag)를 사용해야 한다. 이번 글에는 의미있는 태그(Semantic Tag) 태그에 대한 개념과 효과 텍스트에 적용할 수 있는 의미있는 태그 만 정리해본다. 의미있는 태그(Semantic Tag) 사람과 기계가 읽을 수 있는 방식으로 의미를 명확하게 설명하는 요소를 말한다. 의미있는 태그를 사용하면 아래와 같은 효과을 얻을 수 있다. 검색엔진 최적화 SEO (Search engi..

유튜브를 둘러보다 발견한 자바스크립트 라이브러리 중 하나 키보드 타이핑 효과를 주는 자바스크립트 라이브러리 TypeIt TypeIt The most versatile JavaScript typewriter effect library on the planet. www.typeitjs.com 공식문서에서 말하는 장점으로는 ~4kb의 저용량 의존성 없음 매우 유연한 API SEO 친화적 을 들고 있다. *기본사용방법 여기에 지우고 다시 입력되는 등등의 옵션도 추가할 수 있다. 참고할 결과물은 아래와 같다. (코드펜에 더 좋은 예시가 많이 있으니 필요하면 그쪽을 참고하시길...) *etc 공식문서 하단에 보면 개인 및 오픈소스에는 무료지만 상업적 이용은 유료라고 한다. 용도(?)에 맞춰 잘 사용하자. 알기만 하..

최근에 효과에 관심이 많아져서 찾아보게 되었다. 이미지 혹은 텍스트가 겹칠 때 겹치는 부분이 반전효과로 구분되면 좋겠다 싶어서 찾아봤다. mix-blend-mode라는 혼합모드 설정하는 css를 사용하는 간단한 방법이 있었다. 많은 효과(?)가 있는데 그 중에서 나는 아래것을 사용해 봤다. mix-blend-mode: difference; 적용 전 적용후 (개인작업 중인 페이지에서 캡쳐해왔다.) 비교해보면 알겠지만 겹치는 부분끼리 혼합이 일어났다. (모질라 사이트에서 캡쳐해옴) mix-blend-mode는 여러 효과가 있으니 보고 필요한 효과를 사용하면 될 것 같다. 참고 : https://brunch.co.kr/@skykamja24/524 내가 찾던건 아니지만 알아두면 좋을 것 같아서 모아봤다. fil..

작업할 때 대부분 1개를 넣지만 간혹 2개 이상을 삽입 요청하는 경우가 있어 정리해둔다. (예시는 구글 가이드 사이트에서 발췌) 1개만 삽입할 경우는 아래와 같은데 여기서 2개 이상 삽입이 필요한 경우, 공식문서를 보면 각 페이지에는 전체 사이트 태그 인스턴스가 하나만 있어야 하기에 추가 제품마다 새로운 전체 사이트 태그를 복사하면 성능 문제가 발생하고 코드를 유지하기가 더 어려워질 수 있다고 한다. 해서 이미 소스가 있는 경우 추가할 소스의 config()부분만 가져와 아래처럼 추가하면 된다고 한다. 이렇게 하고 이벤트 추적도 넣어보니 잘 되었다. 참고 : https://amina.co.kr/bbs/board.php?bo_table=apms_qa&wr_id=119381 https://developers..