[Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기

부트스트랩 탭에 지도(카카오맵 api)를 여러개 넣어야하는 작업이 있었는데, 

하나 넣었던 때처럼 단순히 넣으면 제대로 구현되겠다고 생각했는데 막상 해보니 

생각처럼 단순한 게 아니었습니다.

열심히 삽질을 하고 구글링을 반복하던 끝에 다행히 구현할 수 있었는데,

먼저 하나씩 단계를 밟아가며 설명 드리겠습니다.

 부트스트랩 탭을 세팅합니다. 

 (제가 구현한 탭은 총 4가지입니다.)

<div class="tab">
	<ul class="nav nav-tabs" role="tablist" id="myTab">
		<li role="presentation" class="active"><a href="#place1" aria-controls="place1" role="tab" data-toggle="tab">장소1</a></li>
		<li role="presentation"><a href="#place2" aria-controls="place2" role="tab" data-toggle="tab">장소2</a></li>
		<li role="presentation"><a href="#place3" aria-controls="place3" role="tab" data-toggle="tab">장소3</a></li>
		<li role="presentation"><a href="#place4" aria-controls="place4" role="tab" data-toggle="tab">장소4</a></li>
	</ul>
	<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="place1">
		<!--장소 1 지도가 들어갈 자리-->
		</div>
		<div role="tabpanel" class="tab-pane" id="place2">
		<!--장소 2 지도가 들어갈 자리-->
		</div>
		<div role="tabpanel" class="tab-pane" id="place3">
		<!--장소 3 지도가 들어갈 자리-->
		</div>
		<div role="tabpanel" class="tab-pane" id="place4">
		<!--장소 4 지도가 들어갈 자리-->
		</div>
	</div>
</div>

<div class="tab-content">
	<div role="tabpanel" class="tab-pane active" id="place1">
	<div class="map" id="map1"></div>
	</div>
	<div role="tabpanel" class="tab-pane" id="place2">
	<div class="map" id="map2"></div>
	</div>
	<div role="tabpanel" class="tab-pane" id="place3">
	<div class="map" id="map3"></div>
	</div>
	<div role="tabpanel" class="tab-pane" id="place4">
	<div class="map" id="map4"></div>
	</div>
</div>

그리고 각각의 script에 아래 내용을 넣어줍니다.

(원하는 위치의 위도, 경도를 모를 경우는 https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl=ko , 

해당 URL에서 장소의 좌표 구하기의 내용을 참고하세요)

/* place1의 지도 */

var mapContainer1 = document.getElementById('map1'),
    mapOption1 = {  
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map1 = new kakao.maps.Map(mapContainer1, mapOption1);
var markerPosition1  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker1 = new kakao.maps.Marker({
    position: markerPosition1
});
marker1.setMap(map1);

/* place2의 지도 */
    
var mapContainer2 = document.getElementById('map2'),
    mapOption2 = { 
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
var markerPosition2  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker2 = new kakao.maps.Marker({
    position: markerPosition2
});
marker2.setMap(map2);

/* place3의 지도 */

var mapContainer3 = document.getElementById('map3'),
    mapOption3 = { 
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map3 = new kakao.maps.Map(mapContainer3, mapOption3);
var markerPosition3  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker3 = new kakao.maps.Marker({
    position: markerPosition3
});
marker3.setMap(map3);

/* place4의 지도 */

var mapContainer4 = document.getElementById('map4'),
    mapOption4 = { 
        center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
        level: 3
    };
var map4 = new kakao.maps.Map(mapContainer4, mapOption4);
var markerPosition4  = new kakao.maps.LatLng(원하는 위치의 위도, 경도); 
var marker4 = new kakao.maps.Marker({
    position: markerPosition4
});
marker4.setMap(map4);

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show');
  setTimeout(function(){
	  map2.relayout();
	  map2.setCenter(new daum.maps.LatLng(두번째 탭 지도 위치와 경도));
	  map3.relayout();
	  map3.setCenter(new daum.maps.LatLng(세번째 탭 지도 위치와 경도));
	  map4.relayout();
	  map4.setCenter(new daum.maps.LatLng(네번째 탭 지도 위치와 경도));
	}, 0);  
});

* 참고 사이트 :

https://devtalk.kakao.com/t/topic/57949

https://brunch.co.kr/@ourlove/79

[Tip] 크롬에서 현재 창 닫기 (window.close)

기획 사항 중에 버튼을 클릭시 보고 있는 창(현재 창)을 닫게 해달라는 요청으로 

자바스크립트의 window.close를 쓰면 되겠다고 생각하고 진행을 하던 중, 크롬에서 해당 소스가 먹히지 않는 상황이있었습니다. 

왜 안 되지 하고 삽질을 하던 중, 이 이슈가 생각보다 오래 전부터 있었던 이슈라는 것도 발견하게 되었습니다. 

https://stackoverflow.com/questions/19761241/window-close-and-self-close-do-not-close-the-window-in-chrome

(글 올려진 때가 2013년이면 .... 지금이 2020년이니까 7년 전이네요. 이런 뒷북이.. )

올려진 답안지를 해보다가 안 된다면서 다른 예제를 찾으러 돌아다니고 괜한 삽질하다보니 다행히도 해결방안을 찾게 됐는데요. 

너무 단순해서 허무할 정도였네요. 그래도 해결 됐으니 다행!

<a href="javascript:close();">창 닫기</a>
<script>
function close()
 {
  window.open('','_self').close(); 
}
</script>

[Tip] 워드프레스 관련 메모2

1. 가격표 플러그인 easy pricing table

(https://ko.wordpress.org/plugins/easy-pricing-tables/)

2. 게시판 플러그인 Kboard

(https://www.cosmosfarm.com/products/kboard)

: 게시판과 덧글을 같이 다운로드 해야합니다.

★ 플러그인 추가에서 직접 플러그인 업로드 가능 

★ Kboard 플러그인 사용 시, 웹 사이트 메뉴나 레이아웃이 보이지 않는 경우

: 대시보드 > 시스템설정 > font awesome 비활성화

3. SNS 공유하기 플러그인 korea SNS

(https://wordpress.org/plugins/korea-sns/)

: 활성화 시, 도구나 설정에서 메뉴를 찾아야 합니다.

4. 검색엔진최적화

- 성능최적화 : 워드프레스 자체 성능을 높이는 최적화

- 검색엔진 최적화 :인터넷에서 콘텐츠가 잘 검색되도록 검색 엔진에 노출하는 최적화

1/ 외부 링크를 통해 다른 웹 사이트를 내 웹 사이트에 연결

2/ 좋은 콘텐츠

3/ 도메인 이름과 기간이 긴 도메인 등록 기간 (주로 다루는 키워드가 도메인 이름에 포함되야 좋음)

4/ 웹사이트 접속 속도 향상 (플러그인 이용하여 정기적 최적화)

5. 용량 확인 방법 : php파일 업로드하여 확인 (memory_limit)

<?php phpinfo(); ?>

6. 검색 최적화 플러그인 yoast seo

(https://ko.wordpress.org/plugins/wordpress-seo/)

7. 복사방지 플러그인 wp content copy

(https://ko.wordpress.org/plugins/wp-content-copy-protector/)

8. 보안 플러그인 ithemes security

(https://ko.wordpress.org/plugins/better-wp-security/)

: 해킹 시도 내역을 메일로도 알려주는 플러그인입니다.

★ Security > setting으로 이동 

- Global Settings > Lockout White List 란에 아이피 입력

- 404 Detection > enable 클릭 후 내용 수정

: Minutes to Remember 404 Error (Check Period) : 공격시간을 뜻함, 5로 설정

: Error Threshold : 공격횟수를 뜻함, 20으로 설정

- Hide Backend : 체크하고 Login Slug에 로그인 접속주소 변경

- Local Brute Force Protection : 무차별 대입 공격 예방

: Max Login Attempts Per Host : 호스트 컴퓨터별 로그인 시도 제한 횟수

: Max Login Attempts Per User : 사용자 ID별 로그인 시도 제한 횟수

: Minutes to Remember Bad Login (check period) : 로그인 제한에 걸릴 경우 몇분동안 기능 막는지

9. 백업 플러그인 backwpup

(https://ko.wordpress.org/plugins/backwpup/)

: 제 경우에는 해당 새로 추가에서 플러그인이  설치가 되지 않아 플러그인 업로드 방식으로 설치하였습니다.

★ 수동 백업 설정

- add new job 메뉴 클릭

- Archive Format  > zip 체크

- Where should your backup file be stored?  >  Backup to Folder

- 스케쥴 탭과 투폴더에 내용 확인

-  jobs >  run now 버튼 클릭 시, 백업 작동

★ 자동백업 설정

: 자동백업 부분은 드롭박스와 mysql부분이 있음

★ 테마 포레스트 (https://themeforest.net/)

: 카드 정보 유출 위험이 있으므로 유료 테마는 테마포레스트 웹사이트를 권장

[Tip] 워드프레스 관련 메모

1. 설치형? 가입형?

: 가입형 워드프레스(https://ko.wordpress.com/create/) 는 사용하기 간편하다는 이점이 있으나

무료로 이용할 수 있는 부분이 제한되며 유료 요금 구간을 설정해서 서비스되고 있습니다. 

모든 기능을 이용하고자 한다면 자유도가 높은 설치형

(https://ko.wordpress.org/download/releases/) 이 좋습니다.

2. 워드프레스 사양?

: 우커머스나 PGALL 결제 등의 여러 플러그인에서 서버 환경인 PHP / MYSQL의 사양이 낮아 

정상적으로 동작되지 않은 상황이 발생할 수있습니다. 

PHP/mariadb-10.0x UTF-8로 서버 사양을 업그레이드해서 수정해야 합니다. 

(제가실습용으로 사용한 워드프레스 버전은 4.9.4 버전이었습니다.)

★ 워드프레스를 다운로드 받을 때, wordpress 폴더에 wp-config-sample 파일이 있습니다. 

해당 파일을 wp-config로 바꾸고 디비 네임과 디비 유저, 

디비패스워드를 수정하고 서버에 업로드 해야 합니다. 

★ 관리자 주소는 끝에 /wp-admin 를 붙여줍니다.

3. 고유주소? 

: 작성한 콘텐츠의 글이나 페이지에 접속할 수 있는 하나밖에 없는 주소를 뜻하는 URL입니다. 

고유주소는 글이름 형식으로 설정하는 것이 유리한데,  고유주소를 글 이름 형식으로 설정하면 

제목을 작성하는 순간 워드프레스는 제목의 텍스트를 사용해서 자동으로 고유주소를 생성합니다. 

이렇게 생성된 고유주소는 검색 키워드를 포함하므로 검색 엔진에 노출하는데 유리합니다. 

(설정 메뉴에서 고유 주소 클릭, 글 이름에 선택)

★ 글이나 페이지를 공개한 뒤에는 고유 주소를 변경하지 않는 것이 좋습니다. 

고유주소를 변경한다면 인터넷에 공유되어서 돌아다니는 

기존의 고유주소 링크를 다는 사람들이 클릭했을 때 

페이지를 찾을 수 없다는 오류가 발생하여 해당 오류가 자주 발생 시,

 웹사이트의 신뢰도가 떨어질 수 있습니다. 

검색엔진에서 고유주소 변경 전 URL을 색인했는데 고유 주소를 변경해서 

기존 링크가 깨지면 해당 글이 검색 엔진에 노출되기 어렵습니다.

★ 한글 고유 주소가 연결되지 않을 때는 명시적으로

 유니코드를 사용하도록 .htaccess를 아래와 같이 수정해야합니다.

<IfModule mod_url.c>
    ServerEncoding UTF-8
    ClientEncoding EUC-KR
</IfModule>

★ 카테고리와 태그를 잘 정리하면 검색 최적화에도 도움이 됩니다.

4. 특성 이미지?

: 일반적으로 글 목록에 나타나는 대표 이미지 입니다.

5. 이미지 대체 텍스트?

: 검색 엔진은 크롤링할 때 이미지 속성 중 대체 텍스트를 참조합니다. 

검색 엔진에 노출되어 자신이 올린 이미지와 글이 검색되는데 영향을 미칩니다. 

검색엔진 최적화 측면에서 이미지에 속성정보를 입력하는 것이 좋습니다.

6. 글과 페이지의 차이?

7. 댓글 관리?

: 자신이 운영하는 다른 웹 사이트나 블로그를 통합해서 관리할 수 있는 소셜 댓글 시스템, 라이브리 (https://livere.com/)

8. 전면페이지?

: 워드프레스 이전 버전에서 웹 사이트를 접속했을 때 처음 나타나는 홈페이지를 뜻하는 용어

9. 유용한 플러그인 

1/  contact form7 (https://ko.wordpress.org/plugins/contact-form-7/)

: 고객 문의 게시판을 만들 수 있는 플러그인 입니다. 

항목을 추가할 때 숫자가 나오는데 임의 지정된 문자라 수정해도 무방합니다.

2/ shortcodes ultimates (https://getshortcodes.com/docs/tabs/)

: 짤막한 코드를 사용해 웹사이트에서 원하는 기능을 구현하는 플러그인 입니다. 

[Tip] 세팅된 magnific popup에 추가 작업하기

반응형 페이지에서 쓰기 편한 팝업 플러그인으로

magific popup(https://dimsemenov.com/plugins/magnific-popup/)을 자주 쓰는 편인데,

근래에 해당 팝업이 세팅되어있는 페이지의 추가 작업이 있었습니다.

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
            items: {
                src: 'img/이미지명.jpg'
            },
            type: 'image'

        }, 0);
    });
})(jQuery);

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
          items: {
                src: $('<a  href="#내부링크" class="mfp-img" onClick="closePopup();"><img src="img/이미지명.jpg"></a>'),
	type: 'inline'
			}
        }, 0);
    });
})(jQuery);

function closePopup() {
  $.magnificPopup.close();
}

var data = [
  {
    userWebsite_href: '이동할 페이지.html', 
    userAvatarUrl_img: 'img/팝업 이미지명.png'
  }
];

(function($) {
    $(window).load(function () {
        $.magnificPopup.open({
 key: 'my-popup', 
  items: data,
  type: 'inline',
  inline: {
    markup: '<div class="white-popup"><div class="mfp-close"></div>'+
              '<a class="mfp-userWebsite">'+
                '<div class="mfp-userAvatarUrl"></div>'+
              '</a>'+'<a href="#">'+
                '<img src="img/버튼 이미지명.png" class="btn">'+
              '</a>'+
            '</div>'
  },
  gallery: {
    enabled: true 
  },
  callbacks: {
    markupParse: function(template, values, item) {
    }
  }
		
        }, 0);
    });
})(jQuery);

 이전에 썼던 스크립트들을 정리하다가 만들어둔 팝업창을  Esc키로 끄는 구문을 다시끔 보게됐는데,

 그때는 스크립트를 넣기만 했었지 따로 소스를 자세히 볼 생각을 못했어서 이번 기회에 구문을 다시

 보면서 다시끔 공부를 하는 기분이 들었습니다.

 Esc로 팝업창을 닫는 스크립트는 아래와 같습니다.

window.onkeyup = function(e) {
	var key = e.keyCode ? e.keyCode : e.which;

	if(key == 27) {
		$(".modal").fadeOut(90);
		$("body").css({overflow:'scroll'}).unbind('touchmove');
	}
}

 (이 아래 내용은 제가 공부 겸 메모로 적어놓은 구문풀이 내용임을 참고부탁드립니다)

 변수 key값이 e.keyCode ? e.keyCode : e.which; 구문 형태를 띄고 있는데,

 해당 구문은  조건부(삼항) 연산자로 e.keyCode가 true면 e.keyCode가 실행, false면 e.which가 실행된다고 합니다. 

조건부(삼항) 연산자는 if..else문의 단축형으로

 if..else문을 사용하면 너무 복잡해지는 식에서 사용된다고 하는데 

매번 보기만 해왔었지 이게 무슨 구문일지를 생각해오지 않았었다는게 다시끔 안습... 

(여기서 event.which는 키보드 키 또는 마우스버튼이 이벤트에 대해 눌러졌는지 반환합니다.)

if문에 쓰인 27의 경우는 keycode table에서 27이 Esc를 의미하기에 쓰인 값이며,

unbind는 이전에 연결된 이벤트 핸들러를 요소에서 제거하는 때에 쓰이는 메서드로 쓰인다고 하네요.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

코딩을 완료 후, 크롬에서는 아무 이상이 없었던 background의 이미지가 익스플로러에서 흐릿하게 뭉개지는 현상이 있었습니다.

css를 잘못 입력했나 이것저것 입력해봤는데 소용이 없더라구요.

구글링해보니 저와 같은 문제를 겪은 분이 계셨고, 그 분이 남기신 url로 들어가보니 왜 이런 문제가 생기는 지 알 수 있었는데요.

제 경우는 이미지보다 작은 엘리먼트에 해당 이미지를 background-image로 설정해서 발생한 버그였었습니다.

다행히도 이미지를 엘리먼트에 맞게 크롭하니 익스플로러에서도 이미지가 제대로 나오는 것을 확인할 수 있었구요.

(position을 center로 두는 것도 버그에 포함될 수도 있다고 하는데 이 부분은 참고로 알아두면 좋을 것 같습니다.)

이미지를 통째로 background로 넣기보다 이미지에 텍스트나 따로 뺄 수 있는 이미지 레이어가 있다면 분리해서 

background로 넣을 때 분리해서 넣는 것이 좋을 것 같다는 생각이 들었습니다.

... 꼭 크롬에서는 괜찮다고 여기면 늘 익스플로러에서 말썽이니;;

저만 번거롭게 느껴지는 걸까요. 크로스브라우징 체크는 기본이라고는 하지만

뭔가 손이 두번 세번 더 가는 기분이 들고 여간 번거로운게 아니네요.

++ 근래에 같은 버그가 또 생겨서 이유를 살펴보니 Element에 width 값을 주지 않아서 이미지가 흐릿하게 보이더라구요. 

위 방법으로 안될 시에는 width값을 주는 것도 방법이 될 것 같습니다.

* 참고 사이트 

- http://www.i-swear.com/956

- http://connect.microsoft.com/IE/feedback/details/810354/ie11-css-background-image-show-blur

모달창을 띄우고 그 안에 slick 슬라이더가 돌아가게 만드는 페이지를 코딩 작업중에 있었는데

이상하게 모달을 띄우면 슬라이더에 있는 이미지가 한대 뭉쳐져선 움직이지 않더군요.

글머리 기호를 클릭하거나 prev,next 버튼을 누르면 그제야 slick 슬라이더가 제대로 구현됐는데... 

그렇다고 사용자한테 글머리 기호 클릭하라고 할 수는 없는 노릇이니 어떻게든 오류를 수정해야만 했습니다.

css 뜯어고치고 모달 플러그인을 갈아엎고 슬라이더를 갈아엎고 별 난리를 쳐도 

저 상태가 계속 유지되서 북치고 환장할 노릇이었죠. -_-;;

하다가 도저히 안되겠어서 나같은 삽질자(..)가 분명 어딘가에 있겠지 싶어 열심히 구글링으로 뒤져보았는데

다행히도 저랑 같은 문제를 가지고 있던 분이 올린 게시물을 찾을 수 있었습니다.

https://stackoverflow.com/questions/26271790/slick-js-and-multiple-twitter-bootstrap-modal-windows

쉽게 말해 resize 함수를 쓰라는 내용이었죠. 

resize() 함수는 창의 크기가 변할때 무언가 처리하고 싶을때 쓰는 함수인데, 

제가 원하는 건 모달이 열릴때 슬라이더가 제대로 구현되어 작동되는 것을 원하는 거였으니까 

모달 팝업 자바스크립트에 해당 구문을 넣어야겠다는 생각이 들었습니다. 

settings = {
    //Model Popup
    objModalPopupBtn: ".modalButton",
    objModalCloseBtn: ".overlay, .closeBtn",
    objModalDataAttr: "data-popup"
}  
  $(settings.objModalPopupBtn).bind("click", function () {
        if ($(this).attr(settings.objModalDataAttr)) {

            var strDataPopupName = $(this).attr(settings.objModalDataAttr);

            
            //Fade In Modal Pop Up
            $(".overlay, #" + strDataPopupName).fadeIn(170);
	    $('slick 플러그인 클래스명').resize();
        }
    });

    //On clicking the modal background
    $(settings.objModalCloseBtn).bind("click", function () {
        $(".modal").fadeOut(90);
    });

$('slick 플러그인 클래스명').resize();를 넣으니까 그제야 제대로 구현이 되더라구요. 

이 한줄을 위해서 얼마나 삽질을 했던가... 혹시라도 모달 팝업창에 slick 슬라이더 넣으셔야하는 분들은 참고하셔도 좋을 것 같습니다.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

* slick slider 플러그인 : http://kenwheeler.github.io/slick/