[TIL] 내일배움캠프 React 과정 2023.01.22

Today I Learned

• GOLLA  팀 프로젝트 회의
• 카카오 API로 마커 클릭 이벤트 구현하기

---

Typescript 에러

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

처음부터 타입스크립트로 프로젝트를 생성한 게 아니라 CRA로 프로젝트를 생성한 다음에 typescript를 따로 설치했더니 다음과 같은 에러가 떴다. 이때 해결 방법은 에러가 발생하는 컴포넌트에 import React from 'react' 해주기!

 

 

typescript .d.ts 파일이란?

.d.ts 파일 (선언 코드만 담긴 파일)

• 구현부가 아닌 선언부만을 작성하는 용도의 파일을 의미한다.
• JS 코드로 컴파일되지 않는다.
• skipLibCheck 프로퍼티가 false라면 다음 규칙들을 강제한다. (true여도 지키는 것이 좋다.)
  • 선언 코드만 작성이 가능하고, 일반 코드는 작성할 수 없다.
  • 따라서 최상위에 존재하는 변수, 상수, 함수, 클래스, 네임스페이스의 선언 앞에는 반드시 declare 혹은 export가 붙어야 한다.
• 이 파일에 작성되는 declare namespace 블록과 declare module 블록의 필드들에는 export 키워드가 기본으로 붙는다. 즉 굳이 또 붙여줄 필요가 없다.

참고 https://it-eldorado.tistory.com/127

 

 

카카오 지도 API 마커 클릭 시 이벤트 작동하기

window.kakao.maps.event.addListener(marker, 'click', function() {
    // 클릭한 마커의 좌표를 반환함
    const markerPosition = marker.getPosition();  

    // 마커 클릭 시 이동 좌표 지정
    const  moveLatLon = new window.kakao.maps.LatLng(markerPosition.Ma, markerPosition.La);

    // 지도 중심을 부드럽게 이동함
    map.panTo(moveLatLon);  
});

이렇게 보니까 코드 몇 줄 안 되는 거 같은데 오늘 하루종일 고생한 너무 소중한(?) 결과물이다. 구글링도 정말 많이 했고 결과적으로는 공식 문서의 도움을 많이 받았다. 왜 공식 문서에서 Docs 탭에 들어가 볼 생각을 안 했는지ㅠㅠ 

 

특히 힘들었던 부분이 마커를 클릭했을 때 해당 마커의 위도와 경도를 가져와서 그 위치로 이동하도록 좌표를 지정하는 것이었는데 처음에는 marker를 콘솔로 찍어봤지만 정말 많은 데이터 속에서 위도와 경도만 찾지 못했다. 그런데 검색을 더 하다 보니 카카오 지도 API에서 제공해 주는 getPosition이라는 메서드가 있었다 ㅎㅎ 이름만 봐도 딱 역할이 파악되는.. 아무튼 getPosition라는 메서드를 실행해서 해당 마커의 위도와 경도 정보를 가져와 마커를 클릭했을 때 위치가 이동하도록 구현할 수 있었다.

 

나의 치열한 고민의 흔적..

[공식 문서]

마커에 클릭 이벤트 등록하기 https://apis.map.kakao.com/web/sample/addMarkerClickEvent/

마커의 좌표 가져오기 https://apis.map.kakao.com/web/documentation/#Marker_getPosition

 

참고 블로그

https://velog.io/@bearsjelly/React-kakao-지도-띄우기-5-여러개-인포윈도우띄우기이벤트-등록하기#인포윈도우에-이벤트적용하기

 

---

Programmers 문제 풀기

모음 제거

나의 풀이

function solution(my_string) {
    return my_string.split("").filter((str) => !"aeiou".split("").includes(str)).join("")
}

 

다른 사람의 풀이

function solution(my_string) {
    return my_string.replace(/[aeiou]/g, '');
}

 

my_string 안에서 aeiou를 전역적으로 검사해서 replace 메서드를 통해 모든 알파벳 모음을 ""로 전환한다.

 

 

숨어있는 숫자의 덧셈

나의 풀이

function solution(my_string) {
    let answer = [...my_string].filter((str) => "123456789".split("").includes(str))
    return answer.reduce((acc,cur) => acc + parseInt(cur), 0)
}

my_string을 배열로 만든 후 그중에서 숫자만 배열에 남도록 filter를 돌린다. 그리고 reduce 메서드를 이용해서 모든 숫자를 더한 누적값을 구한다.

 

 

개미 군단

나의 풀이

function solution(hp) {
    const a = Math.floor(hp / 5)
    const b = hp % 5
    const c = Math.floor(b / 3)
    const d = b % 3
    return a + c + d
}

풀긴 풀었는데 풀이가 지저분해서 썩 마음에 들지 않는다.🤔

 

다른 사람의 풀이

function solution(hp) {
    return Math.floor(hp/5)+Math.floor((hp%5)/3)+(hp%5)%3;
}

내 풀이 방법이랑 똑같은데 한 줄로 나타낼 수도 있었다.

 

---

회고

오늘은 나를 좀 칭찬해주고 싶다. 어제 나를 좌절하게 만들었던 문제를 오늘 내내 붙잡고 노력해서 결국 해결했다. 이렇게 하나씩 문제를 해결할 때마다 생기는 쾌감이 코딩을 더욱 재밌게 만드는 거 같다. 어려운 문제를 만나더라도 포기하지 않고 한 박자 쉬고 다시 도전하는 것! 그것이 내가 지향하는 목표다 ㅋㅋ

 

오늘 저녁에는 코딩 생각에서 벗어나 여유로운 시간을 보내보려고 한다. 내일부터 또 열심히 달려야지. 오늘은 어제보다 더욱 좋은 기분으로 하루를 마무리한다.