0. 인트로

이제 곧 파이널 프로젝트가 끝난다.
파이널 프로젝트가 끝나가는 순간에 가장 기억에 남는 기술이 무엇인지 남겨보는 것도
의미가 있을 것이니라.

1. 나는 즐기는 자이다.

본인이 프로젝트에서 소개하고 싶은 것을 소개하기 이전에 논어 옹야편의 한 구절을 소개하려고 한다.

知之者 不如 好之者 好之者 不如 樂之者

'아는 자는 좋아하는 자만 못하고 좋아하는 자는 즐기는 자만 못하다'라는 뜻이다.
기술을 아는 것도 중요하지만 더 중요하는 것은 아는 것을 뛰어넘어서
기술의 원리를 몸에 체득하면서 즐기는 단계로 가는 것이라고 본다.
본인이 그렇게 생각한 이유는 프로그래밍과 같은 IT 기술에서는 시간이 지남에 따라서
더욱 더 좋은, 새로운 기술이 끊임없이 나온다.
게다가 특정 기능을 사용하기 위해서는 기존에는 배우지 못했던 새로운 기술을 활용하여야 할 때가 있다. 그때마다 내가 마음 속에 새기려는 구절이 바로 위의 논어의 구절인 것이다.

2. 본인의 기술스택 소개

1. 지도 기본 완성

본인이 소개할 기술스택은 카카오맵 API이다.
본인이 이번에 개발한 프로젝트의 주제는 '장소와 감정을 담는 개인 다이어리'이다.
본 웹 어플에서 다이어리 사진을 첨부 할 때 위치정보를 같이 첨부하는 것은 필수적이었다.
따라서 외부 API(특히 지도 관련 API)를 불러오는 과정이 필요했다.
보통 외부 API를 사용할 때에는 사용 가이드가 주어진다.
처음에는 외부 API를 사용하는데 익숙해지는 과정이 필요했다.
처음에는 아래를 참고했다.
https://apis.map.kakao.com/web/guide/
카카오맵 API를 불러오기 위해서는 총 3단계가 필요했다.

우선, 첫번째 단계는 API Key를 받아서 script로 적용시키는 단계이다.
React의 Create-react-app을 이용한다면,
public 폴더의 index.html에서 아래와 같은 태그를 삽입해주면 되었다.

 <script
     type="text/javascript"
     src="//dapi.kakao.com/v2/maps/sdk.js?appkey='API_KEY'"
   ></script>

두 번째 단계는 API 키를 불러왔으면, div 태그 등으로 지도를 생성할 영역을 만들어주는 단계다.
본 프로젝트에서는 React를 사용하는 관계로 Styled Components를 사용하였다.
마지막 단계는 지도를 띄우는 코드를 작성하는 단계이다.
지도를 띄우는 코드를 작성할때 필요한 것은 지도를 담을 공간, 지도의 확대·축소정도와 지도의 중심좌표이다.
필자는 지도의 중심좌표를 불러오는데 애먹었다.

중심 좌표를 불러오기 위해서는 DiaryType 컴포넌트에서 axios요청으로 받은 데이터를
MapType 컴포넌트에서 받아오면 됐다.
중심좌표를 불러오는데 애먹은 가장 큰 이유는 State Lifting 하는 방법을 잘못 적용했기 때문이었다.

본 프로젝트의 컴포넌트의 구조는 다음과 같다.
하지만 실제로 적용되는 컴포넌트의 구조와는 아래와 같았다.

function App() {
 <중략>
          <Route path="/" element={<DiaryType />}></Route>
          <Route path="/map" element={<MapType />}></Route>
 <후략>
}

위의 코드를 보면 DiaryType과 MapType은 공통부모로 App 컴포넌트를 가지고 있고,
DiaryType과 MapType 컴포넌트는 형제관계였다.
둘의 관계가 생각보다 가까워서, props driling을 해도 복잡하지 않을 것이라고 생각했다.
아래 사이트를 참고해서 시도한 결과...
https://velog.io/@onezerokang/%ED%95%98%EC%9C%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EA%B0%80-%EC%83%81%EC%9C%84-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EA%B0%92%EC%9D%84-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

Cannot update a component (`App`) while rendering a different component (`DiaryType`). 
To locate the bad setState() call inside `DiaryType`, 
follow the stack trace as described in https://reactjs.org/link/setstate-in-render

위와 같은 Warning 메세지가 뜨는 것이었다.
이대로 하기에는 뭔가가 잘못된 것 같아서 최후로 생각한 방법은 Redux로 데이터를 불러오는 것이었다.
DiaryType에서 axios 요청으로 데이터를 받아오는 즉시 userPost를 변경시키는 action을 만들고 dispatch시키는 것이 핵심이었다.
이렇게 해서 데이터를 받아오는 방법은 성공하였고,
지도의 좌표는 0번째 index의 위도와 경도로 잘 적용하였다.

2. 마커 정보 변경

1. 기본 마커 변경 후 적용

이번 파이널 프로젝트의 주제는 '장소와 감정을 담는 개인 다이어리'이다.
지도에도 감정 정보가 들어가야 했다.
여기서 이견이 있었다.
만약에 한 포스트에 감정이 여러개 있을 때가 문제였다.
처음 생각한 방안은 감정을 있는 그대로 여러개 넣는 방안을 생각하고 적용을 해보았다.
그랬더니 지도에서 표시가 지저분하게 되는 문제가 있었다.
따라서 한 포스트에서 여러 감정이 있다면 대표 감정이 담긴 마커를 넣는 것으로 합의를 보았다.
그런데 대표 감정을 어떻게 정하냐는 문제가 있었다.
그것에 대한 해답은 생각보다 간단했다.
가장 먼저 선택한 감정이 대표감정이라는 것이다.
왜냐하면 가장 먼저 떠오른 것이 가장 우선으로 생각하는 감정이기 때문이다.
시험문제에서 바꾸면 틀리는 이유하고 비슷하다고 할까
그런 다음에 포스트의 정보만큼 마커를 적용시키면 됐다.

2. 확대·축소 단계에 따른 마커 변경

만약에 지도가 넓은 범위를 보여주는데 마커의 크기가 그대로라면
정보가 겹치는 문제가 나타날 것이다.
만약에 판교에 마커가 있고, 옆동네인 분당에 마커가 또 있다고 가정하자.
판교와 야탑인 이유는 카카오 본사가 판교에 있어서...
지도가 좁은 곳을 보여주는 상태라면 마커가 겹치지 않는다.
하지만 넓을 곳을 보여준다면 마커가 겹쳐서 보일 것이다.
이것을 적용하려면 마커를 변경시켜주어야 한다.
그런데 마커를 변경시키기 위해서는 마커 정보를 변경시켜야 되는데 아래 함수가 이해가 안갔다.

markers[index].setImage(marker)

markers가 도대체 무엇인지 고민을 했다.
생각보다 답은 간단했다. 기본 마커를 변경하여 마커를 찍을 때 마커를 저장하는 배열 변수였다.
기본 마커 변경 후 적용하기 전에 마커배열에 마커 정보를 추가하였다.
그다음에 위의 함수로 바꿔주었다.

3. 마커 클릭시 상세정보 뜨기

다 끝난줄 알았는데 생각해보니 마커를 클릭하면 상세정보가 뜨는 기능을 안넣었다.
이 기능을 넣는 이유는 포스트를 누르면 상세 정보가 뜨는데,
지도의 마커를 클릭하면 상세정보가 안뜨는 것은 이상하기 때문이다.
이것은 비교적 쉬웠다.
포스트를 누르면 오른쪽 화면이 상세 정보가 뜨는 창으로 바뀌는데,
그것에 대한 설정을 필자가 했기 때문이다.
(사실 사이트의 기본 골격은 필자가 거의 만들었다고 봐도 무방)
오른쪽 화면은 리덕스로 상태가 관리되기 때문에 useDispatch를 이용하여 바꿔주었다.

3. 마치면서

모든 기술은 변한다. 다음날이 되면 기존의 기술보다 더 좋은 기술이 나올 수도 있다.
이때 필요한 것은 새로운 것에 대한 적응력이다.
새로운 것에 대한 적응력이란 공식 문서를 읽고 자기의 것으로 만드는 능력이라고 생각한다.
그렇기 때문에 이번 기술 발표의 주제를 카카오맵 API 문서로 정한 것이다.
마치기 전에 유학의 경전중 하나인 대학의 한 구절을 인용하면서 마무리하고자 한다.
이것은 필자의 좌우명이며, IT업계에 일하고자한다면 반드시 가져야되는 마음가짐이라고 생각한다.

苟日新 日日新 又日新(구일신 일일신 우일신: 실로 날마다 새로워지고, 날마다 새로워지되 또 날마다 새로워진다)