My World! 세계지도 땅따먹기 웹앱 🌎

세계지도에 내가 가본 곳을 색칠하여 땅따먹기하듯 기록할 수 있는 웹앱을 만들어 배포하려고 한다. 내가 여행 가본 나라들을 한눈에 보고, 또 앞으로는 어디를 색칠할지 기대할 수 있는 그런 앱이 되었으면 한다.2주동안 대부분의 기능 구현 >> 1주일간 디자인 >> 마지막

서버를 따로 사용하지 않고 내 컴퓨터 드라이브에 있는 파일을 바로 웹 브라우저에서 실행시켜 테스트하며 개발하고 있었음.그러나 같은 로컬에 있는 json 파일을 읽어오기 위해 fetch()를 호출하자 아래의 에러 발생.Access to fetch at 'file:///프

사용자가 가본 나라를 선택할 수 있도록 전세계 나라 목록을 띄워야 하는데 API를 사용할 수도 있지만 데이터 특성상 변경이 거의 일어날 것 같지 않아서 굳이 그렇게 하지 않고 json 파일을 다운받아서 띄우기로 했다.아래 Github 프로젝트에서 zip을 다운받았다.h

예상은 했지만 지도에 내가 간 곳을 색칠하는 서비스가 생각보다 아주아주 많았다. 웹 사이트며, 모바일 앱이며..이왕 보게된 거 모아서 비교 정리해보고 차별성이나 개선점을 찾아보고자 한다.https://www.mytravelmap.xyz/?02차원 지도이며, 고

mapboxjs 라이브러리를 npm으로 다운받아 사용해야할지 cdn으로 사용할지 고민하다가 갑자기 번들링으로 주제가 옮겨왔다.대충 웹 앱의 수많은 파일들을 가볍게 묶어주는 작업이고 그 번들링 도구에는 Webpack이나 Vite 등이 있다는 건 알겠는데 좀 더 자세히 어

번들링을 하지 않고 우선 진행을 해보려고 하다 문제가 발생했다. 공식 홈페이지에서는 npm으로 mapbox-gl 설치 후, js 파일에서 아래와 같이 임포트하여 사용하라고 돼있었다. 그러나, 에러가 발생했다. 구글링을 해보며 온갖 짓을 다 시도해봤으나, 모두 실패

주요 기능은 완성하고 디자인 대강 마무리해서 Netlify에 배포했다. (아무래도 혼자서 하니까 점점 미루게 되어...)나머지 기능과 내 앱만의 차별점도 추가하고, 성능도 개선하여야 한다. 처음으로 바닐라 자바스크립트로 프로젝트를 해보니까 확실히 자바스크립트가 많이 부

Netlify에 index.html이 있는 폴더를 올리라고 하길래 문득 궁금해졌다. 그렇다면 index.html과 build 결과인 bundle.js 파일, css 파일, 기타 정적 파일(이미지 등)을 아래처럼 넣은 폴더를 올리면 되나?\-> 답은 No. ❌개발할 때

결론부터 Before | After ---|---| 이렇게 Lighthouse Performance가 77점에서 98점으로 개선되었다. 체감하기에도 개선 전에는 배경 이미지가 위에서부터 느리게 조금씩 나타나서 사용자 경험이 아주 나빴는데, 개선 후 훨씬 빠르게 나타