[이력서 꾸미기] Geocode 오류때문에 얼마나 시간을 허비했는지

 

 

일단 과정은 간단했다

이제 수업이 얼마 남지 않은 시점에서 다 완성해가는 홈페이지를 보며 뿌듯해하며

이제 지도를 넣을 차례이구나 하며 기대하면서 만들고 있었는데

오류가 발생했고 오래걸렸다

 

<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로 바꿔주면 되는 것이었다

그러면 저장해도 <%- 이부분이 띄어쓰기가 되지 않아서

오류가 나지 않고 제대로 지도가 표시가 된다