[WIL] 내배캠4기 React 13주차

맵 API를 활용해서 다양한 기능을 만들어보고자 했다.
카카오 공식 문서는 정리가 잘 되어있었는데 막상 프로젝트에 쓰고려고 하니 코드가 길어지고
반복되는 로직도 많아지는 것 같아 고민이었다.

그래서 sdk를 설치해서 이런 부분을 조금 해결하고자 했으나 역시 이것도 리팩토링이 필요하다.
내가 라이브러리를 제대로 이해하고 쓴 건지 기능구현에 급급해서 긁어오고나서 이해를 해보려한건 아닌지 돌아보고 있다. 팀장님이 리팩토링한 내 코드를 보며

이런 식으로도 쓸 수 있구나..
이렇게 쓰면 그 문제가 해결됐던거구나
하며 자기반성과 자극을 받게 되었다. 이게 최선 100%가 아니면 나 진심코딩하면 정말 큰일나겠군...😎?
최종 프로젝트 전 많이 배운 프로젝트였다. 프로젝트 셋업, 깃헙 관리, 배포까지. 라코를 보며 이런식으로 구성하고 진행하면 되는구나 하는 프로세스들을 많이 엿보고 익혔다.
아쉬웠던, 고쳐야 할 점은 또 내 코드, 로직을 구현하는데 빠져 다른 팀원들의 혹은 전체 프로젝트 관리에는 미흡했다는 것이다. 팀장님 없었으면 정말 아찔..할 뻔했다. 팀 협업 프로젝트이니 만큼 좀 더 주변을 살피고 어려운 점은 나누며 진행해야겠다는 반성을 해본다.

내 좁은 시야에 다시금 절망하고...

내가 짠 코드 -> 원하는대로 잘 동작하지 않았다.

{clickedItem?.content === marker.content && info && (
  <>
    <InfoWindow onClick={() => setIsPopupMemoOpen(true)}>
      <InfoContent>{marker?.content}</InfoContent>
    </InfoWindow>
    <CustomOverlayMap
      position={marker.position}
      clickable={true}
      zIndex={1}
      yAnchor={1}

      {isPopupMemoOpen && (
        <PopUpMemo
          setIsPopupMemoOpen={setIsPopupMemoOpen}
          setIsDetailUiOpen={setIsDetailUiOpen}
          content={marker.content}
          info={info}
</PopUpMemo>
      )}
    </CustomOverlayMap>
    <CustomOverlayMap
      position={marker.position}
      clickable={true}
      zIndex={2}
      yAnchor={1}

      {isDetailUiOpen && (
        <MainDetailUi
          setIsDetailUiOpen={setIsDetailUiOpen}
          content={marker.content}
          info={info}
        />
      )}
    </CustomOverlayMap>
  </>
)}

팀장님이 리팩토링한 코드 -> 내가 원하는대로 동작한다. 뜯어보며 비교해보자..

  {clickedItem && (
          <CustomOverlayMap
            position={clickedItem.position}
            clickable={true}
            zIndex={2}
            yAnchor={1}

            <InfoContent
              onClick={() => {
                setIsShowMemo(true);
                setInfo(clickedItem);
              }}

              {clickedItem.content}
              <CustomButton
                width="100px"
                backgroundColor="black60"
                color="white100"

                메모작성하기
              </CustomButton>
            </InfoContent>
          </CustomOverlayMap>
        )}
        {isShowMemo && info && (
          <CustomOverlayMap
            position={info.position}
            clickable={true}
            zIndex={2}
            yAnchor={1}

            <PopUpMemo
              setIsShowMemo={setIsShowMemo}
              setIsShowDetail={setIsShowDetail}
              content={info?.content}
              info={clickedItem!}
            />
          </CustomOverlayMap>
        )}
        {isShowDetail && clickedItem && (
          <CustomOverlayMap
            position={clickedItem.position}
            clickable={true}
            zIndex={2}
            yAnchor={1}

            <MainDetailUi
              setIsShowDetail={setIsShowDetail}
              clickedItem={clickedItem}
            />
          </CustomOverlayMap>
        )}