좌표 오류

맵에 선을 그리는 도중 이런식으로 클릭한 좌표가 겹치면

이런 에러가 뜨기 시작했다. 콘솔 로그를 보니 같은 자리에 찍힌 좌표가 같은 'key'값을 가지고 있어서 생기는 오류인 것 같았다. (API 사이트에서 테스트할 때 이런거 없었는데 왜ㅠㅠ)

튜터님들이 처음 프로젝트 기획을 보시면서, 좌표에 인덱스값을 추가해줘야할 것 같다고 하셨는데 이걸 말하는거였나보다. 말씀 안해주셨으면 생각도 어떻게 해야할지 막막했을 듯.
아무튼 키값에 인덱스를 추가해봤다.

변경 전

변경 후

신기하게도 에러가 사라졌다. 😎

셀렉트 옵션 오류

이렇게 만들고 싶어서 처음엔 아래처럼 작성했다.

변경 전

        <select value={selectedPuppy}>
          <option disabled hidden selected>
            이런 강아지에게 추천해요
          </option>
          <option value="bigPuppy">소형견</option>
          <option value="smallPuppy">대형견</option>
        </select>

변경 후

다음과 같이 수정해줬다.

유즈스테이트 초기값을 default로 작성해주고, placeholder 처럼 사용할 값에 default를 넣어준다.