안녕하세요 카카오지도를 이용하여 개발하던 중 지도가 정상적으로 보여지지 않아 질문드립니다.
개발환경은 아래와 같습니다
테스트 : Visual Studio Code, Vue.js
npm script로 webpack-dev–server 실행 후 테스트했습니다.
위의 환경에서는 지도가 표시되고 마커까지 전부 다 찍혔는데요.
문제는 운영서버에 올린 후 발생했습니다.
운영 : Tomcat 1.8.x
다른 UI는 모두 정상적으로 출력되는데 지도는 타일이 렌더링되지 않는 것 같습니다.
혹시 예상되는 문제점이나 해결방법이 있으면 조언부탁드립니다.
감사합니다.
**아래 아래 사진은 지도 API가 호출된 것으로 추측되는 사진과 개발자모드에서 지도타일 이미지를 정상적으로 가져온 화면 캡쳐입니다.
전체 혹은 지도 내부의 엘리먼트에 영향을 주는 CSS를 확인해 보세요.
이미 API는 제대로 불렸고
네트워킹을 통해 이미지도 다운로드 받았다면
실제 의도하지 않은 스타일이 잘 못 먹어서 노출이 안 되고 있을 확률이 가장 큽니다.
답변 감사합니다.
알려주신 링크에 소개된 방법으로 npm을 이용하여 was를 구동하였을 때 지도가 정상적으로 출력되도록 해결했습니다.
(원래는 npm을 이용한 테스트환경에서도 지도가 보이지 않았습니다.)
그래서 api를 정상적으로 사용한다고 판단되어 운영에 배포했는데 api가 표기되지 않았습니다.
소스는 똑같구요. npm으로 빌드를 헀으니 webpack을 통한 산출물을 운영서버에 배포했습니다.
바뀐부분은 Tomcat을 이용하여 운영하는 방식만 바뀐건데 혹시 이 부분에 대해서 더 알수있을까요?
추가글을 작성하던 중에 doji.doo님이 추가 답변을 달아주셨네요.
이 부분 확인해보도록 하겠습니다.
감사합니다.
두분 답변을 참고해서 여러가지 검토를 해봤습니다.
일단 idle 이벤트를 이용해서 중심좌표를 찍어봤는데 이동할때마다 변경된 값이 찍히긴 합니다.
위의 2가지 중 중심좌표가 계속 변경되는것으로 보아 map 객체 자체는 잘 잡고있는 것 같은데요.
혹시 타일만 렌더링이 안되는 이유가 있을까요?
감사합니다.
타일 이미지를 개발자 도구의 inspector로 찍어서 한 번 보여주세요.
스타일이 잘 먹었는지 볼 수 있게요.
위치는
이렇게 됩니다.
아뇨… 옆에 스타일 부분 전체가 보여야 합니다.
그래야 CSS가 어떤게 적용받았는지 알 수 있죠.
해당 이미지에 적용받은 CSS가 없다면
상위 엘리먼트를 확인해 가면서
페이지에서 선언한 CSS가 적용 받았는지 확인해 보세요.
그리고 해당 속성값에 마우스 커서를 대 보면 체크박스가 뜨는데
이 체크를 풀어보면서 확인 해 보세요.
@doji.doo 님 감사합니다. 말씀하신대로 css를 하나하나 지워가면서 체크해 본 결과 원인을 찾은 것 같습니다.
혹시 저와 같은 에러로 고생하실 분들을 위해 아래 캡처파일로 css 충돌난 부분 올립니다.
**한가지 궁금한점이 npm 커맨드로 테스트용 서버를 구현하는것과 build 커맨드 입력 후 산출물을 tomcat에 구현하는것이 어떤 차이가 있길래 다른 결과물이 나왔을까요…이 부분은 나중에 더 알아보도록 하겠습니다.
일단 CSS 파일명을 보면 자동생성된 것 처럼 보입니다.
특별히 톰캣과는 상관 있어보이지는 않습니다.
프로덕션 빌드시 의존성이 존재하는 어딘가의 Style Sheet가 얽혀버린 것일 수 있습니다.
실제 개발단계에서 사용하지 않았지만
뷰 구성의 편의를 위해 끌어다 쓴 컴포넌트나 템플릿, 혹은 프레임워크가 한데 묶여버린 상황을 고려해 볼만 합니다.
아니면 하위 브라우저의 부작용을 방지하기 위해서
빌드 설정 어딘가에서 무조건 저 문구를 넣어버리는 상황일 수도 있고요.
이는 웹팩 혹은 VueCLI의 설정을 봐야할지도 모릅니다.
아…전체적으로 확인을 해봐야겠군요…
여러명이서 작업한 내용을 하나의 파일로 만들다보니 이런 문제가 발생했던 것 같습니다.
css를 공통으로 관리하는부분을 마지막에 작업하려고 했는데… 그 부분에서 실수가 있었네요.
많은 도움 주셔서 감사합니다.
