3주차 수요일

서비스가 어느정도 구현이 된 것 같다.

처음에는 vue를 쓸지 react를 쓸지 고민했지만 일단 가장 기초적인 HTML과 CSS, Javascript로 만들어보았다.

이렇게 만드는게 맞는지는 모르겠지만..
일단 만들어보았다.

fast api를 이용해서 배포도 해서 로컬 컴퓨터으로 연결해서 모바일 화면으로도 확인해보았는데 나쁘지 않았다.

UI는 너무 허접하다.. 좀더 손을 봐야할 것 같다..

이뒤에 session storage를 사용해서 데이터를 로컬 모바일 환경에 저장했는데 웹을 나가도 캐시와 세션에 저장되어 있어서 게임을 이어나갈 수 있게 했다.

'''

    <div id="course-buttons" class="map-courses">
    <button onclick="loadCourse(1)">어린이코스</button>
    <button onclick="loadCourse(2)">청소년코스</button>
    <button onclick="loadCourse(3)">도전자코스</button>

'''

이런식으로 구현을 했는데 신기하게 leaflet /map안에 구현을 하던, 밖에 구현을 하던 어짜피 position: absolute로 위로 올리는거라서 큰 차이가 없었다.

나머지 꾸미는 것은 생 css로 했는데
망고시스템의 박진우 멘토님이 css를 생으로 하지말고 windtail css를 사용해보라고 하셨다.

보니 html 의 class의 이름을 설정하면 디자인이 그대로 적용되는 형식인데.. 그럴려면 지금까지 만들어 놓을걸 전부 갈아엎어야 되서 너무 하기 싫다 ㅠㅠ