"마지막 포트폴리오는 자유 주제"
나에게 필요한 서비스를 만들어야지~ 하는 마음으로 주제를 이래저래 고민한 결과
🌿민초지도🍫를 만들고싶다는 마음이 가장 앞섰다.
우선 난 완전 민초단이고 오늘도 민초 프라페를 먹었고!!
이번 기회에 카카오 로그인, 카카오 지도 사용법을 익히고 싶어서이다!
마지막까지 마라와 경합을 벌였는데 마지막에 마라가 될수도 있음(?
vue로 개발해야해서(아는게 1도없음) 그게 좀 이슈긴한데
일단 하면서 절충해나가자면 되지않을까싶다.
하면서 배우는거지~
그래서 기록하는 우당탕탕 개발일지 시작!
1. 서비스 기획
전문 주제가 아니다보니 최대한 열심히 간단하게 작성했다.
1-1. 서비스 개요
<민초맵>
주변에 멋진 민초 파는 곳 없나?
혈중민초농도가 내려가 식도가 드릉드릉한 민초단을 위해
민트초코 식품을 판매하는 주변 가게를 안내하는 지도 서비스
1. 서비스 개요
- 목적: 민트초코 제품을 판매하는 주변 가게를 쉽게 찾을 수 있도록 돕는 지도 서비스 제공
- 대상: 민트초코를 사랑하는 사람들(민초단)
2. 주요 기능
-
1차 목표
지도 기반 가게 표시: 사용자 위치 기반으로 주변의 민트초코 제품 판매 가게 표시 -
2차 목표
리뷰 및 평점: 사용자 리뷰와 평점 기능 제공 -
3차 목표
검색 기능: 특정 지역 또는 가게 이름으로 검색 가능
가게 정보 제공: 가게의 상세 정보(영업 시간, 메뉴, 가격 등) 제공
즐겨찾기 기능: 자주 방문하는 가게 즐겨찾기 추가
3. 기술 스택 및 구현 방법
- 기술 스택: Vue, Typescript, MongoDB
- 구현 방법: kakao login local(map) api ...RESTful API
그리고 궁금함 + ui를 위해 부트스트랩을 써보기로 함!
4. 예산 및 일정
개발 일정: ~19일(2주)
1-2. API 점검
현실적으로 가능할지...? 를 위해 카카오 로그인, 맵 연동 테스트
등록을 간단하게 하고 다음 데모 예제를 통해 연동 테스트를 진행했다.
후기에 사용자 사진과 닉네임이 필요하니까 추가하여 신청했당!
https://devtalk.kakao.com/t/rest-api-node-js/119865
2. 디자인 계획
민트와 초코 컬러 그리고 쿠앤크(BW)를 기반으로 직관적으로 표현하고자 했다.
모바일도 고려해서 유연하게 하고싶다...
지도를 넓게 깔고 검색창과 결과가 가장자리를 가리지 않는 구조가 위치를 가리지 않으며 잘 보이게 하는 것 같다.
하지만 요소들이 잘 보이게하기 위해 배경에 반투명한 검정을 까는게 좀 신경쓰인다. 이게 최선인가...
구글 지도나 네이버, 카카오 지도처럼 하는게 좋을지도
3. 프로젝트 구조 설계
개발 선배님들은 vue 프로젝트에 어떤 구조를 쓰고있을까?
더 좋은 구조가 있을까?
[참고링크] https://joshua1988.github.io/web-development/vuejs/vue-structure/
참고하여 프로젝트에서 필요할 폴더들을 다음과 같이 정리했다.
src/
├── assets/
│ ├── images/ # 이미지 파일
│ └── styles/ # 스타일시트 (CSS, SCSS 등)
├── components/ # 재사용 가능한 Vue 컴포넌트
├── views/ # 각 페이지에 해당하는 Vue 컴포넌트
├── router/ # Vue Router 설정
├── store/ # Vuex 상태 관리 (Vue 3에서는 Pinia 고려)
├── api/ # 외부 API 호출 함수
├── types/ # TypeScript 인터페이스와 타입 정의
└── utils/ # 유틸리티 함수 및 헬퍼그리고 지난번에 vercel에 배포한 Express MongoDB가 있으니 고걸 사용할 예정이다.
4. 프로젝트 생성
4-1. github
새로운 레퍼지토리를 생성하고 dev 브런치를 생성했다.
4-2. install
클론하고 vue를 설치한다
npm i -g @vue/cli
vue create .원래 수업땐 @vue/cli로 프로젝트를 생성했는데
위에서 폴더구조 서치하다가 Vite로 프로젝트를 하면 빠른 번들링 속도와 캐싱 최적화 등의 장점이 있다하여 vite로 시작해보았다!
npm create vite@latest . -- --template vue-ts
뒤에 ts 안붙여서 다시 생성한건 안비밀...
readme 읽기부터 진짜 뷰알못이다보니 모르는거 하나하나 꼬리물기로 검색하다보니 너무 길어져서 포스팅을 분리했다!
[vue 공부 모음(Composition API)]
https://velog.io/@worte5633/vue-%EA%B3%B5%EB%B6%80-%EB%AA%A8%EC%9D%8CComposition-API
4-3. 구조 수정
앞서 프로젝트 구조 설계한대로 수정해준당!
은 아직 view 뭐 만든게 없음
코드를 입력하세요
그리고 실행 테스트!
5. 지도 띄우기
[참고 문서]
https://apis.map.kakao.com/web/sample/basicMap/
https://apis.map.kakao.com/web/
5-1. 코드 옮기기
공식 문서에 상세하게 코드가 나와있다.
js + html 코드이므로 적재적소로 가져다 쓰면 될거같아서 일단 script에 쓱 복사해서 가져다 넣었더니 오류가 발생했다(머쓱)
[plugin:vite:vue] Tags with side effect (
<script>and<style>) are ignored in client component templates.[plugin:vite:vue] Tags with side effect (<script> and <style>) are ignored in client component templates. /Users/sky/MinchoMap/src/components/MainMap.vue:5:3 3 | <template> 4 | <div id="map" style="width:500px;height:400px;"></div> 5 | <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=......"></script> | ^
templete 내부에서 script와 style을 사용하지 못한다고 한다.
script src는 index.html의 head로 옮기고 style은 scoped 영역으로 이동시켰다.
5-2. script 분리
카카오맵 api에 보면 스크립트 불러오는걸 실행 코드보다 먼저 선언되어야 한다고 되어있다.
그리고 vue 공식문서의 생명주기 훅을 보면
[참고 링크] https://ko.vuejs.org/guide/essentials/lifecycle
요로코롬 되어있는데
그럼 컴포넌트가 마운트된 시점에 kakao api를 읽어오면 좋을 것 같다. (=mounted)
5-2-1. import onMounted
kakao, kakao.maps가 잡히지 않으면 헤드에 스크립트를 추가하는 코드이다.
import { onMounted } from 'vue';
const initMap = () => {
// 지도 표시 코드 옮김
}
onMounted(() => {
if (window.kakao && window.kakao.maps) {
initMap();
} else {
const script = document.createElement('script');
script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=a7c8dc5e9a80d7a0d9c12c5d44404383';
document.head.appendChild(script);
script.onload = () => kakao.maps.load(initMap);
}
});5-2-2. Cannot find name 'kakao'.ts(2304) any
오류 원인
kakao 객체의 타입 정의가 TypeScript에 포함되지 않았기 때문에 발생한다고 한다.
kakao는 타입을 따로 제공하지 않고 kakao develop 커뮤니티에서도 any를 넣으라 함
[참고 링크] https://velog.io/@a_in/migrate-to-Kakao-Map-API-with-Errors
공식문서를 보면 아래와 같이 파라미터 타입이 있긴하다.
해결책 1
1) 루트에 window.d.ts를 생성한다.
// window.d.ts
declare global {
interface Window {
kakao: any;
}
const kakao: any;
}
export {};
2) 루트에 kakao.maps.d.ts 생성
1번 해결책으로 해결되지 않아 config를 수정하기로 함
declare var kakao: any;2-1) config include에 kakao.maps.d.ts 추가
{
"compilerOptions" : {
...
"include" : [... "kakao.maps.d.ts"]
}
}에러가 사라졌다.(편안)
해결책 2
나중에 발견했는데 타입을 패키지로 만든 분이 계셨다..!
https://github.com/JaeSeoKim/kakao.maps.d.ts
바로 window.d.ts 삭제하고 가이드대로 했더니
오오...!
mapContainer 오류는 HTMLElement임을 명시해주니 간단하게 해결
선배 개발자님들 감사합니다 최고최고
5-2. 실행
100vw, 100vh로 설정했는데 overflow가 발생한다.
당연함 reset css 적용이 되지 않았다.
수정 완료
그리고 parser-blocking 오류에 대해 실제 지도 동작에는 문제가 없기 때문에 정책적으로 대응하지 않기로 했다고 함
으음...
https://devtalk.kakao.com/t/parser-blocking/115430
일단 오늘은 여기까지 하고 내일 이어서 화면 퍼블리싱을 해보려 한다!
