중간중간 분리한 공부 글
[Vue 클래스 바인딩]
Vue3에서 폼이벤트 조지기
[날짜 포맷 바꾸기]
[vue url hash(#)]
Day.4
1. defineProps import
[@vue/compiler-sfc]
definePropsis a compiler macro and no longer needs to be imported.
https://www.cnblogs.com/Megasu/p/15865631.html
defineProps를 import 하지 않아도 된다고 함
import한거 지우고 props 오타난거(를 왜 지금알았지) 수정하니 해결
2. ux 개선
지금까진 리스트를 클릭하면 바로 디테일 페이지로 이동했는데
사용자가 매장 위치를 체크하기 번거롭겠다는 생각이 들었다.
나만해도 지도에서 맛집 검색할때 음식이나 가격 리뷰도 중요하지만 위치 먼저 보기때문에~
수정 전) 매장 리스트 클릭 > 디테일 push
수정 후) 매장 리스트 클릭 > 지도 중심 이동(마커) > 자세히보기 클릭하면 디테일 push
그래서 할일
1) 매장 리스트중 맘에 드는 매장을 클릭하면 (click 이벤트)
2) 해당 객체의 좌표로 맵 중심을 이동시킨다. (객체 정보를 받아서 map.setCenter해야함)
마커 이동 이벤트
매장 리스트중 맘에 드는 매장을 클릭하면 해당 매장의 id를 넘긴다.
그리고 데이터에서 해당 매장의 id를 조회하고 일치하는 데이터의 좌표 정보를 받아오는데
지금 생각해보니 객체를 통으로 넘겨도 되지않았나 싶음
와 비효율!!
1) 리스트 태그에 클릭 이벤트 생성
v-on:click="onClickStoreList(item.id)"2) id 일치한 데이터를 뽑아 center를 설정해준다.
item을 props로 보냈으면 filter를 안해도되지않나?? 이따 수정해야지
const onClickStoreList = (Num: number) => {
// console.log(Num)
const [item] = props.data.filter((item) => (item.id === Num))
props.map.setCenter(new kakao.maps.LatLng(item.coordinate.y, item.coordinate.x));
}이때 center 설정까지 좀 오래걸렸는데
kakao map을 props로 보내면 계속 undefined가 떴다.
리스트 컨테이너에 아래처럼 map을 보냈는데 왜 할당되지 않은걸까?
<storeMapsCont :data="data" :map="map" :isMapReady="isMapReady" />map 코드 순서를 보자면
인데 할당 전에 props를 받아서 그런 것 같다.
컴포넌트가 마운트되었을때 map에 지도를 생성하는 객체를 할당하니 해결되었다.
흐름을 못잡아서 거의 하루종일 붙잡고있었네 ㅠ
let map;
...
onMounted(async () => {
if (window.kakao && window.kakao.maps) {
map = computed(() => (new kakao.maps.Map(document.getElementById('map') as HTMLElement, {
center: new kakao.maps.LatLng(37.4986211, 127.0280297),
level: 3,
})));
fetchData();
}마커 이동 이벤트 결과
클릭하면 마커가 이동한다.
3. 검색시 첫 검색결과의 좌표로 이동
또 ux를 고려해보자면
검색했을때 대응하는 리액션이 중요하다고 생각한다.
네이버나 카카오 등 지도를 보면 검색 결과의 좌표가 전체적으로 다 보이게 지도를 확대하는데
나는 왠지 검색결과의 첫번째 데이터의 좌표로 이동시키고 싶었다.(지금 생각해보니 전체적으로 보이게 수정하는게 맞는 것 같음)
여튼 골고루 좌표이동 이벤트를 넣어주고 결과물은 다음과 같다.
Day.5
리로드 데이터 가져오기
디테일 페이지에서 뒤로가면go(-1) getData가 먹통이되었다.
이거도 데이터 선언문젠가 하고 생각해보니
isMapReady가 false였다.
isMapReady는 마운트시 지도를 그리고 나서
데이터를 가져오고 true가 되는데
뒤로가기 후 true가 되지 않는 듯 하다.
해결!
watch와 onMounted를 둘 다 써야했다.
데이터 변경을 감지하고, 마운트 될때 실행
const watchData = () => {
if (props.data.length > 0) {
isOnReady.value = true;
copyData = props.data;
}
}
watch(() => props.data, () => {
watchData();
}, { deep: true });
onMounted(() => {
watchData();
})제보 폼 만들기
맛있는 민초 가게를 제보할 수 있는 폼을 만들어봅쉬다
민초 마카롱 컨셉으로 귀엽게 그려봤어용
css에서 background image 다운로드가 안되서 인라인으로 작성했다.
import TipOffPng from '../../assets/images/fn/tipoff.png'
...
<button class='tipoffBtn' v-on:click="router.push('/tipoff')"
:style="{ backgroundImage: `url(${TipOffPng})` }"></button>귀엽게 잘 달렸다.
라우터 설정하고 작동 테스트!
뒤로가기시 렌더링 안되는 문제(2)
뒤로 버튼을 클릭해 루트 경로로 이동하면
해당 경로 컴포넌트의 onMounted에 선언한 map 데이터가 할당되어야하는데 콘솔은 찍히는데 안된다.
부모 컴포넌트에선 데이터가 출력되는데
자식 컴포넌트에서 데이터가 출력되지 않는 상황
props가 제대로 전달되지 않는다.
onMounted(() => {
console.log('왜')
if (window.kakao && window.kakao.maps) {
console.log('그럴')
...
});
} else {
...
}
fetchData();
console.log('까')
});
ref는 사용된 컴포넌트 내에서 값이 변경될 때마다 컴포넌트를 다시 렌더링합니다.
반면, computed는 의존하는 데이터에 변경이 있을 때만 다시 계산되고, 그 결과에 따라 렌더링이 결정됩니다.
data는 변화를 감지하도록 computed를 사용했는데 map도 computed를 사용한 상황이었다.
const data: ComputedRef<mapDataType[]> = computed(() => (store.state.data));computed 속성은 캐싱 메커니즘을 사용하여, 의존하는 데이터가 변경되지 않았다면 이전에 계산된 값을 재사용한다고 한다. 즉 값이 변하지 않기때문에 재할당이 되지 않은 것 같음
[참고문서]
https://ko.vuejs.org/guide/extras/reactivity-in-depth
그래서 ref로 바꿔줬당
=> 어이없게 해결됨
요약
computed를 사용한 이유는 반응형 구독을 하려한 것인데 필요한 시점(마운트)에는 캐싱된 값을 재사용해서 undefined가 반환되는 것
카카오 로그인 붙이기(1)
아직 못끝내서 괄호 숫자 붙임ㅠ
앱 등록은 맵을 신청할때 이것저것 해놨다.
비즈 신청해놔서
닉네임, 이메일, 프로필사진을 받아올 예정이다.
이메일은 고유값, 닉네임과 프로필사진은 후기 입력시 노출될 예정
그외의 정보는 받지않습니다요
아이콘 추가
마카롱에 이어 아이스크림
일반적으로 좌측 상단에 버거메뉴를 두고 좀 바꿔야할거같은데 으으ㅡ응ㅁ...
내일 고쳐야겠다
어쨌든 요렇게 있고
카카오 개발자 문서와 수많은 구글링을 통해 하나하나 붙여갑시다
1) index.html
head에 스크립트를 붙여준다
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>2) 예시코드 붙여넣기
vue환경이라 Kakao 앞에 window를 붙여주고
타입 오류나서 main.ts에서 전역으로 any 타입 설정해줬다.
Oauth 라우터도 설정해줍니당
<script setup lang="ts">
import { onMounted } from 'vue';
import LoginPng from '../../assets/images/fn/login.png'
onMounted(() => {
window.Kakao.init("");
})
const loginWithKakao = () => {
window.Kakao.Auth.authorize({
redirectUri: 'http://localhost:4000/oauth',
});
}
displayToken()
function displayToken() {
var token = getCookie('authorize-access-token');
if (token) {
window.Kakao.Auth.setAccessToken(token);
window.Kakao.Auth.getStatusInfo()
.then(function (res) {
if (res.status === 'connected') {
let tokennnn = window.Kakao.Auth.getAccessToken();
console.log(tokennnn)
}
})
.catch(function () {
window.Kakao.Auth.setAccessToken(null);
});
}
}
function getCookie(name) {
var parts = document.cookie.split(name + '=');
if (parts.length === 2) { return parts[1].split(';')[0]; }
}
</script>
<template>
<button class='loginBtn' v-on:click="loginWithKakao()" :style="{ backgroundImage: `url(${LoginPng})` }"></button>
</template>
url을 보니 인가 코드를 받은거같당
나머지는 내일 이어서 하겠습니다요
