<오늘 작업 한 것들>
1. 클러스터 기능 완성
2. 클러스터 오류 문제 해결
3. SearchList , GlobeCluster, Post, Globe 부분 리펙토링
[면접 질문]
동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
대답: 동기 작업은 요청 즉시 결과를 반환하지만, 비동기 작업은 결과가 나오기 전에 다른 작업을 수행해도 됩니다. 비동기 프로그래밍이 없으면 정보를 렌더링 하는데 그 정보를 불러오느라 다른 기능을 수행하지 못할경우 프로그래밍이 매우 비효율적이며 고정 적으로 발생할 것이기 때문에 비동기 프로그래밍은 필요하다.
[Trobule Shotting]
[문제점]
1. click 을 하여 Detail 페이지를 가는데 my를 갔다가 다시 검색 칸으로 와서 click을 하니 코드가 작동을 안한다.
[고민의 흔적]
1. 코드에 대한 작업에 문제 인줄 알고 코드를 콘솔로 일일히 찍어 보기
2. addEventLister에 있으니 거기에 함수명으로 뺴주지 말고 그대로 입력해보기
3. 작업 오류에 대한 문제해결하기
[해결 과정]
1. 보니 async await 관련된 문제라고 팀원들한테 조언을 얻어서 역할에 await 되는게 아니라서.. 다음과 같이 해결했다.
[문제 코드]
const handleUnclusteredPointClick = async (e: any) => {
if (postsData) {
const postId = await e.features[0].properties.cluster;
const unclusteredData = postsData.filter(item => item.id === postId);
mount('detail', <Detail data={unclusteredData[0]} />);
flyToLocation(unclusteredData[0].longitude, unclusteredData[0].latitude);
}
[해결 코드]
const handleUnclusteredPointClick = async (e: any) => {
if (postsData) {
const postId = await e.features[0].properties.cluster;
const unclusteredData = postsData.filter(item => item.id === postId);
if (unclusteredData.length === 1) {
mount('detail', <Detail data={unclusteredData[0]} />);
flyToLocation(unclusteredData[0].longitude, unclusteredData[0].latitude);
}}