클론코딩 (airbnb) WIL

정신없이 한주 한주가 지나가고 있었는데 드디어 실전 프로젝트를 들어가기 전 마지막 주차인 클론코딩 주차를 보냈다.

 

일단 처음 새로운 팀원들을 만나고 난 뒤 백엔드 쪽에서 팀장이신분을 제외하고는 그다지 적극성이 없어 보이셔서 어떻게 해쳐나가야 할지를 먼저 생각했던것 같다.

 

어느정도 회의를 거치고 우리의 주제는 최종적으로 Airbnb로 결정이 되었다.

 

이후 이번에는 프론트엔드가 나 포함 2명밖에 없었기 때문에 VScode의 Live Share 기능을 사용해 보기로 했다.

하나의 프로젝트를 공유하며 같이 쓸 수 있으니 앞으로 계속 쓰지는 않는다 하더라도 둘이서 짧게 작업하기에는 나름대로 효율적으로 사용했던것 같다.

 

1주일이라는 시간밖에 없었기 때문에 우린 메인, 서울page의 postlist와 map, 그리고 상세페이지 정도를 구현 해보기로 했다. 원래 처음 정했었던 주제는 Slack 이었어서 이번주차에 새로운 기능인 실시간 채팅(socket.it)기능을 공부하고 구현해보고 싶었었는데 부득이하게 Airbnb로 바뀌게 되며 이왕 이렇게 된거 이중모달창과 맵 api를 사용해 지도를 구현해 보고 싶어졌다.

 

1. 이중 모달창

에어비앤비의 회원가입, 로그인 부분은 모두 모달창으로 이루어져 있었다.

버튼을 눌러 바로 두 모달창으로 이동하게 하는게 아닌 '내 정보' 버튼을 누르면 나오는 첫 모달창에 '로그인', '회원가입'의 버튼이 또 있었고, 그 버튼을 누르면 각각의 두번째 모달창이 나오는 구조이다.

 

나는 react-modal이라는 패키지를 사용했고 사용법은(공부하고 나니) 매우 간단했다.

처음에 리덕스 모듈을 사용을 안하고 버튼부분과 각각의 모달창 부분을 다 따로 컴포넌트를 나눠 만들다 보니 자식 컴포넌트에서 부모 컴포넌트의 값을 바꿔줘야 하는 상황이 발생하였다. 

이 부분에서 많은 오류들과 많은 시행착오를 겪으며 거의 2일이 넘는 시간동안 이 부분만 잡고 있었는데 결국엔 계속 시도해보았을때 두번째 모달창이 나오게까지는 구현이 가능했지만 모달창을 끄고 난 뒤에 버튼에는 모달창을 켜기위한(또  넘겨주기 위한) true값이 남아 있는데 이를 자식 컴포넌트인 모달창 부분에서 컨트롤 할 수가 없어서 임시 방편으로 버튼을 한번 더 누르면 false로 바뀌고 다시 버튼을 눌렀을때 모달창이 다시 나올 수 있도록 조취를 취해놨다. 

해결 방법으로 처음 생각했던 것은 그냥 리덕스 모듈을 통한 전역 상태 관리를 통해 부모 컴포넌트의 값들을 변경해주려고 했었다. 그러다가 우연찮게 props로 변수만 넘겨주는게 아닌 함수 자체를 넘겨줄 수 있는 방법을 알게 되었다.

 

그래서 부모 컴포넌트(버튼)에서의 값을 바꿀수 있는 함수(Example)를 만들어 예시와 같이 props로 넘겨주니 바로 해결이 되었다.... 2~3일 동안 혼자 구글링을 하며 끙끙대던 부분을 마침내 내가 원하는 데로 구현하게 되어 너무 만족스러웠고 그때의 그 성취감은 절대 잊을 수 없을것 같다!
예시 : <Modal Example={Example}/> 

 

2. Google Map Api

처음에 맵api에 대한 지식이 없을때 회의에서는 정적인 지도 ( 캡쳐를 통한 이미지 )를 사용하자고 결정이 되었었다. 그러고 막상 맵을 적용시킬때가 되어 공부를 좀 해보니 그런 정적인 지도마저도 이미지를 사용하는게 아닌 맵 api를 사용해야 한다는 것을 알았고, 이미지를 사용한다면 맵에 marker를 찍는 부분에 있어서 더 어려워 진다는 것을 알았다.

그래서 이왕 쓰게 되는거 정적인 지도가 아닌 확대 / 축소 등 이동이 가능한 동적인 지도 api를 적용하기로 결정했다.

 

일단 Google Map Api를 사용하는 방법도 생각보다 간단하였다. 

플랫폼에서 내 key값을 받고 예시로 나와있는 방법대로 import 하고 사용이 가능했는데, 

나는 google map 패키지를 사용하기로 했다. 

그리고 center 좌표를 서울 중간 부분으로 지정하여 맵 초기의 위치를 잡아주었고, 임의의 지점에 marker를 찍는것까지 완성하였다.

 

여기서 문제가 하나 발생했는데 백엔드중 이 postList 부분을 담당하시던 분이 사전에 얘기도 없이 api를 편의대로 많은 부분을 바꾸셨다. 또한, 각각의 데이터를 배열안에 각각의 딕셔너리 형태로 넘겨주기로 했는데 하나의 딕셔너리 안에 모든 데이터를 담아서 주셨다... 그 부분 말고도 이때까지 서버 통신과 관련해 문제 해결을 할 때 자신이 담당한 부분임에도 불구하고 혹시나 잘못된 부분은 없을까 똑같은 코드를 몇번이고 다시 확인해보던 우리와는 다르게 같이 해결을 적극적으로 하지 않으셨는데 역시나 잘못된 부분이 있었고 정말 필요한 부분들은 수정해달라고 요청을 하고 프론트 단에서 사용할 수 있는 부분은 어떻게든 사용해보자 싶었다. 그것도 왜그러냐 하면 넘겨주던 data에 postId를 넣기로 했었는데 어짜피 순서를 나타내는 accomoId라는 부분이 있으니 순서대로 쓸 수 있지 않느냐는 말에 그냥 더 말을 하기 싫어서(그리고 할 수는 있을것 같다 라는 생각이 들어서) 알겠다 하고 진행을 하였다. 

 

그렇다 보니 다시 데이터를 프론트 단에서 나누고 배열에 집어넣어주고 하는 작업 등이 필요했고 marker를 찍기위한 location(위도, 경도)를 사용해 map()함수를 돌려 각각의 위치별로 marker를 찍는데까지는 구현해내었다. 

그리고 그 각각의 marker를 눌렀을때 그 마커의 accomoId와 각 숙소(post)들의 accomoId를 대조해 그에 맞는 숙소를 모달창으로 구현을 했다,

처음엔 modal도 map()함수에 돌려 그 수에 맞는만큼 만들어야 하는줄 알고 했었는데 계속 오류가 났다.

계속 고민하고 다른 분에게도 조언을 얻었는데 마침 다른 조의 친한 분과 얘기를 나누는데 그분이 힌트를 많이 주셨다. 그래서 서로 머리를 맞대고 만들어 보았는데, 결국 모달창의 컴포넌트를 따로 하나 만들고 data를 props로 넘겨주어 각각의 마커를 누를때마다 모달 안에서의 값만 넘겨준 props의 값들중 일치하는게 나오도록 만들어 주었다.

 

소감

결국 이렇게 해결을 하여 두가지 주요 기능을 구현 해 내었고 밤낮없이 달려오며 이번주차에 뭔가 많은 것들을 배우고 익혔던 것 같다. 

마지막에 배포하기전 깃허브에 올리다가 병합충돌이 일어났는지 댓글의 삭제버튼이 없어지고 (삭제부분의 함수도 계속 빨간줄이 나오는 버그 발생), ESC나 오버레이 부분을 클릭해 나갈 수 있던 첫번째 모달창 부분도 꺼지지 않는 버그가 발생하여 너무 짜증나고 김이 빠지긴 했지만 전날부터 잠 안자고 쭉 달렸기도 했고 제출 시간이 이미 되었기 때문에 고치지 못하고 제출을 하게되어 너무 아쉬웠다. 

하지만 1주일 동안 개인적으로는 많은 성장과 만족스러웠던 하루하루 였던것 같다!ㅎㅎ

 

실전프로젝트도 화이팅!!

 

Github Link - https://github.com/WooMinGy/clone-airbnb/tree/zhiyeon

Youtube 영상 - https://www.youtube.com/watch?v=Gl6DlLB67Rg