안녕하세요 ~ geony 입니다. 

노마드코더에서 개발 공부를 시작하며 가졌던 첫번째 목표가 인스타 클론 챌린지 졸업이었는데요. 

이렇게 나름의 목표를 달성하니 간단한 후기를 적어보고 싶었습니다. 

인스타 클론 강의는 풀스택을 목표로 하는 개발자라면 마스터해야될 여러 파트들

웹 / 네이티브 앱 /  프론트 / 백엔드 / DB / 클라우드 서버 / CSS 디자인와 같은 다양하고 방대한 개념들의 핵심만을 추려 일목요연하게 정리해줍니다. 

강의를 다 듣는다고 해서 각 파트들을 절대 마스터할 수는 없지만 적어도 어떤 흐름으로 개발을 진행해야하는지에 대해서는 확실히 감을 잡을 수 있었습니다. 

특히 풀스택 개발을 목표로 하고 계신 분이라면 꼭 수강해보시는 걸 추천드립니다.

인스타그램이라는 굉장히 대중적인 앱을 클론하기 때문에 프론트를 만들어가는 과정도 굉장히 즐거웠습니다. 

특히 리액트 네이티브로 iOS 앱을 만들어볼 때 Expo 를 이용해 폰으로 구동하니 실제 인스타그램 앱과 똑닮아서 신기했습니다 ㅎㅎ

이렇게 성공한 SNS 서비스의 UI 디자인에는 나름의 비법이 있지 않을까 생각하며 이리저리 뜯어보는 것도 흥미로운 시간이었습니다. 

이번 강의에 특히 GraphQL 와 Apollo 기초를 확실하게 다질 수 있어서 정말 훌륭했습니다.

이전에 공부를 하며 RestAPI 를 기반으로 만들때 API URL에 계속 depth를 쌓아가니 복잡함과 제약을 조금씩 느끼던 참에
GraphQL을 배우고 하나의 EndPoint에서 Query를 불러오고 Mutation을 쉽게 처리하니 정말 신세계가 아닐 수 없었는데요.

특히 이번 강의에서는 Apollo Client 의 Cache Modify를 이용해 즉각적으로 화면을 업데이트하고 앱 전역 상태관리까지 Apollo 로 가능하다는 것까지 배울 수 있었습니다.  

강의 진행을 타입스크립트로 하며 타입 정의들을 혼자 처리하는 통에 진도가 조금 느려지긴 했지만 타입스크립트에 대해 더 많이 배우며 새삼 그 위력을 실감할 수 있는 좋은 기회였습니다.

가능하시다면 타입스크립트로 진행보시는 것 추천드립니다!

완강 후에 인스타 챌린지도 진행하며 강의에서 배운 내용을 제대로 복습해볼 수 있는 과제들을 많이 출제해주셔서 완강을 미리 했지만 챌린지 내용을 복습하기 위해 해당 부분들을 여러번 돌려보며 개념들을 확실히 내것으로 만들 수 있었습니다. 

최종 과제는 잘 만들고 싶은 욕심 때문에 이렇게 챌린지가 끝난 후 이렇게 한참 뒤에야 완성할 수 있었습니다 ㅠㅠ

노마드 커피 과제 이름을 처음 보고는 여행을 다니며 쉽게 카페를 찾을 수 있는 서비스를 만드는 것이구나 어렴풋이 짐작했는데,

이를 위해서는 위치 기반 검색 기능이 필수라고 생각했습니다. 

사실 어디 외딴 동네에 가면 주변에 카페를 찾기 위해서 지도앱을 켜서 현재 내 위치를 잡고 카페를 검색하여 이리저리 화면을 옮겨보며 가까운 카페를 찾는 이 과정이 다소 불편하지 않나 (전혀 불편함을 못 느끼신 분도 있겠지만 … ㅋ) 싶어 가까운 곳에 카페를 자동으로 찾아주는 컨셉으로 가상의 서비스를 생각해보았습니다.

그렇게 탄생한 노마드 커피 의 모습입니다. 

https://nomadcoffee-geony.netlify.app/

메인 화면에 헤더 부분에는 제일 가까운 카페가 노출되어 주변에 어떤 카페가 나랑 제일 가까운지 한 눈에 볼 수 있습니다.

그리고 리스트의 카페 사진이나 제목을 클릭하면 카페 위치와 자세한 설명, 사진, 리뷰 댓글들을 볼 수 있는 상세 페이지로 연결됩니다. 

메인 리스트에 나오는 카테고리들을 클릭하면 각 카테고리별 카페를 정리해서 볼 수 있구요. Search 기능이 있습니다. 

그리고 유저 Follow / UnFollow 도 해당 유저 프로필 페이지에서 가능합니다. 

만들면서 제일 어려웠던 기능은 역시 지도 기반으로 카페 위치를 표시하는 것이었는데요 KaKaoMap API 와 Daum 주소 검색 서비스를 이용하여

해당 카페의 좌표를 추출하여 처리할 수 있었습니다. 

현재 브라우저 클라이언트의 위치를 받아 비동기적으로 거리를 계산하여 표시하는 작업이 까다로웠습니다. 자바스크립트의 Promise를 공부해서 응용해보았습니다만 개선이 필요할 것 같아요.

그리고 사진을 여러장 업로드 / 삭제가 가능하도록 만들다보니 백엔드단에서 도전과제가 많았습니다. 여러 파일을 AWS S3 스토리지에 업데이트하고 선택한 여러 장의 사진 또한 삭제가 가능하도록 만들어 보았습니다.

프론트 단에서는 슬라이드 형식으로 업로드할 사진 리스트를 볼 수 있고 인스타그램처럼 슬라이드 끝에서 새로운 파일을 업로드할 수 있는 버튼을 만들었는데 생각보다 까다로웠지만 흥미로운 작업이었습니다.

마지막으로 뒤늦게 급히 구현한 댓글 기능은 별점 기능을 넣어 카페 평균 별점으로 합산되도록 하였어요

혼자 카페 데이터를 올리려니 힘들더라구요. 핫플 아시는 곳 있으면 업로드 부탁드립니다 ㅋㅋ

살펴보시고 많은 조언 부탁드립니다. 

감사합니다.