-
[이력서 꾸미기] Geocode 오류때문에 얼마나 시간을 허비했는지개발/프로젝트2(유데미) 2023. 5. 2. 17:44
일단 과정은 간단했다
이제 수업이 얼마 남지 않은 시점에서 다 완성해가는 홈페이지를 보며 뿌듯해하며
이제 지도를 넣을 차례이구나 하며 기대하면서 만들고 있었는데
오류가 발생했고 오래걸렸다
<script> mapboxgl.accessToken = '<%-process.env.MAPBOX_TOKEN%>'; const map = new mapboxgl.Map({ container: 'map', // container ID // Choose from Mapbox's core styles, or make your own style with Mapbox Studio style: 'mapbox://styles/mapbox/streets-v12', // style URL center: [-72.4, 10], // starting position [lng, lat] zoom: 10 // starting zoom }); </script>
일단 ejs 파일에 mapbox에서 복사해온 코드를 그대로 넣으면 된다고 해서
복사해오고 부분 수정한 것이다
여기까지는 문제가 없었다
지도가 잘 나와서 재미있었다
문제는 이 부분을 따로 떼서 js file에 넣으면서 시작됐다
mapboxgl.accessToken = mapToken; const map = new mapboxgl.Map({ container: 'map', // container ID // Choose from Mapbox's core styles, or make your own style with Mapbox Studio style: 'mapbox://styles/mapbox/streets-v12', // style URL center: [-72.4, 10], // starting position [lng, lat] zoom: 10 // starting zoom }); new mapboxgl.Marker() .setLngLat([-72.4, 10]) .addTo(map)
js file로 옮기면서 마커도 추가하고 ejs file에는
<script> const mapToken = '<%-process.env.MAPBOX_TOKEN%>'; const campground = <%- JSON.stringify(campground) %> </script>
이렇게 mapToken으로 변수 지정해서 쓰고 여기까지는 좋았는데
campground의 <%- 이부분이 자꾸 저장만 하면 띄어쓰기가 돼서 오류가 나고 있었다
난 이것도 모르고 이것도 고쳐보고 저것도 고쳐보고 도대체 뭐가 문제인가
하나하나 되짚어서 다시 코드를 이부분만 계속 돌려보고
하나하나 실행해보고 있었다
결론은 이것밖에 없었다
그래서 구글링을 해본 결과
vscode를 쓰는 사람 중 나같은 에러를 본 사람이 있었다
역시 혼자가 아니었다
답은 간단했다
extensions 에서 .ejs 를 설치하고
아래 utf-8 이부분에서 html을 누르고 ejs로 바꿔주면 되는 것이었다
그러면 저장해도 <%- 이부분이 띄어쓰기가 되지 않아서
오류가 나지 않고 제대로 지도가 표시가 된다
'개발 > 프로젝트2(유데미)' 카테고리의 다른 글
[이력서 꾸미기] flyio로 배포하기 (1) 2023.05.25 [이력서 꾸미기] 마지막을 향해가는 이력서 꾸미기 (0) 2023.05.22 [이력서 꾸미기] Mongoose 에러 해결하기 (0) 2023.03.15 [이력서 꾸미기] EJS(Embedded JavaScript Templating) (0) 2023.03.13 [이력서 꾸미기] 터미널 명령어가 왜 다른거죠 (0) 2023.03.03