728x90

Dodol 회고록

어느하나 쉽게 되지 않았던 3주간의 리액트 프로젝트가 끝이났다.
조금 욕심을 부린 덕에 수업 때 다루지 않았던
react-native 와 expo 그리고 typescript 까지 써서 프로젝트를 진행하였다.

1Week

첫 주에는 프로젝트의 개요를 잡는데 제법 많은 시간을 썼다.
처음 기획했던 OTT 채팅서비스는 Tech Issue로 인해 접어야 했고,
그다음 생각했던 자격증 정보 사이트는 대부분의 작업이 데이터를 긁어 모으는 작업이 될 것 같았고,
결정적으로 만드는 재미가 없을 것 같았다.

그리고 마지막으로 생각해낸것이 타입캡슐 어플리케이션 Dodol 이었다.

구현하고 싶은 아이템이 구체적으로 생기니 브레인스토밍을 하면서 세부적인 기능을 기획하는 것은 어렵지 않은 일이었다.
그 중 가장 중점적으로 생각한 부분이 위치기반 서비스 와 음악을 저장한다는 점이었다.

위치기반 서비스는
캡슐을 묻을 위치를 지정하고, 사용자의 현재 위치와 캡슐이 저장된 위치의 저장 된 반경안에 들어왔을 때 캡슐이 오픈 되는 기능이었고,

음악 저장은
youTube API 중 하나인 Data API를 이용해서 영상을 검색하고, 해당하는 영상의 url을 DB에 저장한 뒤,
iframe 태그를 이용해 해당 컴포넌트에서 보여주는 기능이었다.

이 과정에서 위치기반 서비스를 이용하기 위해서는 Web이 아닌 Mobile App을 이용해야한다는 것을 알게 되었고,
기존에 계획했던 typescript 이외에 react-native를 공부해야 한다는 부담감이 더해지기도 했었다.

전체적인 틀과 세부적인 기능에 대한 아이디어가 잡힌 이후에는 각자 study를 하기로 하였다.

react-native는 nomad-coder 가 무료로 제공하는 강의를 이용하였고,
typescript는 dream-coding 에서 제공하는(유료이다..) 강의를 이용하였다.

2Week

Back-end

주말까지 사용해가며 꼬박 채운 일주일 동안 최대한 typescript와 react-native를 공부한 뒤 드디어 작업에 착수 하였다.

우선 크게 업무분담을 나눌때에 나는 Back-end를 맡기로 하였다.
Back-end를 최대한 빨리 끝낸 뒤에, Front-end에 작업햡류를 할 예정이었다.
너무나 익숙한 express 에 너무나 낯선 sequelize와 typescript를 덧붙여 작업을 하느라 기존에 하던 작업과는 많이 다르게 느껴졌다.
그래도 다행이었던 점은 Back-end양이 많지 않았다는 점과, Table 구조가 복잡하지 않았다는 점.
그리고 예전에 MongoDB를 활용해 미니 프로젝트를 해본 적이 있어 ORM을 사용하는데 크게 낯설지 않았다는 점이었다.

하지만, sequelize를 이용해서 migration을 하는 과정은 정말정말 순탄치 않았다.
Back-end 코드 작성에는 약 이틀 정도의 시간정도 밖에 걸리지 않았었지만 그 이후에 무수히 많은 수정을 거쳐야했다.
특히 foreign key.. 사실 foreign key 수정이 bugFix 의 90%를 차지 했다고 해도 과언이 아니다.

그리고 예상보다 빨리 Back-end 배포를 진행했어야 했는데,
핸드폰에서 요청을 보낼시에 localhost로 요청을 보내면 핸드폰 에서 localhost 주소로 요청을 보내진다는 점이었다.
결국 해결책으로는 Back-end를 배포해서 localhost가 아닌 배포된 IP 주소로 요청을 보내는 것이었다.

하지만 배포 역시 순탄치는 않았다.
배포를 완료하였지만, 이번엔 요청을 보낼시에 CORS 에러가 뜨는 것을 확인 할 수 있었다.
express로 구축된 서버에 요청을 보내는 각각의 핸드폰이 모두 다른 ip를 가지고 있기 때문에,
nginx를 이용해서 reverse proxy 기법을 사용해서 문제를 해결 할 수 있었다.

Back-end 코드 작성부터 배포까지 약 3일의 시간이 소요되었다.

이 이후에는 작은 버그들을 수정하는 것 이외에는 Front 작업에 몰두 할 수 있었다.

Front-end

Back-end 코드를 작성함에 있어서 조금 난해했던 부분이 카카오 로그인 이었다.
편의를 위해 expo를 이용해 작업을 진행했는데,
expo를 이용하면 카카오 로그인 구현이 굉장히 굉장히 번거로워 진다.
(이 부분에 대해선 이후에 따로 포스팅을 해보려고한다.)
eject를 하지 않고, 카카오 로그인을 구현 하기 위해서는 react-native 내에서 webview를 이용하여야 했는데,
개념이 제대로 잡히지 않은 상태였기 때문에 back-end에서 어떠한 작업을 해줘야 하는지 뚜렷하지 않은 상태였다.

위에 기술한듯 배포까지 완료한 이후에 가장 먼저 시작한 Front 작업은 카카오 로그인 이었다.
기존에 이미 팀원이 작업을 진행하는 중이었는데, 어느정도 작업이후 막혀있어서 함께 작업을 하였다.

하루하고 반나절을 꼬박 사용한 뒤에서야 카카오 로그인기능을 구현 할 수 있었다.

그 이후엔 로그인 이후 Back에서 전달 받은 유저 정보를 App내부의 storage에 저장하고 dispatch를 이용해 상태를 변경하는 작업을 해주었고,
유저의 간략한 프로필을 보여주는 컴포넌트와 해당 컴포넌트에서 회원 탈퇴 기능 까지 완성했다.

2주차의 마지막 날에는 다른 팀원과 함께 youTube Data API를 이용해 영상을 검색하고 해당 영상의 url을 백엔드에 전달하는 코드를 작성했다.
아직까지도 원인은 모르겠지만, youTube API 공식문서에 나와있는 주소로 요청을 보내면 에러가 뜬다..!
결국 구글링을 하다가 요청하는 주소가 다르다는 것을 알게 되었고 블로그에 나와있던 주소로 요청을 보냈더니
원하던 결과를 받아오는 것을 확인 할 수 있었다.

조금 헤매긴 했지만 생각한대로 코드가 술술 작성 되었어서 가장 재밋게 작업했던 부분 중 하나이다.

3Week

Front에서 내가 어떤 부분을 작업할지 명확하게 정해진 시기였다.
생각보다 Back-end 작업이 빠르게 끝났고,
기존에 작업중이던 부분을 어느정도 정리가 된 뒤에 내가 이어받아 작업을 하다보니,
업무분담이 조금 더뎌지게 된 부분이 있었다.

내가 맡은 부분은 메인 컴포넌트에서 Back-end와 통신을 해서 로그인된 사용자의 캡슐 목록을 받아와서 화면에 그려주는 부분과,
캡슐의 정보를 확인한 뒤 지정한 날짜가 지나고, 캡슐을 묻어둔 위치와 현재 사용자의 위치를 비교해서 캡슐을 열어볼 수 있는 지 여부를 확인한 뒤,
캡슐을 오픈하는 부분 이었다.

캡슐 리스트를 가져오는 과정에서 캡슐의 썸네일을 prefetch를 이용해서 미리 캐시해둔 뒤에 화면에 보여주는 방식을 해보려 했지만,
서버가 느린건지.. 코드를 잘못 작성한 건지 로딩이 끝나질 않는다...

정말 안타깝게도 이부분은 끝끝내 해결을 하지 못했다.
필수적인 부분은 아니기에 로딩을 없애고 썸네일이 단계별로 하나씩 뜨도록 코드를 작성해주었다.
조금 더 공부를 한 뒤에 수정해보려고 한다.

캡슐을 오픈 하는 부분은 생각 보다 어렵지 않았다
잠깐의 구글링으로 두개의 위도/경도 좌표를 받아 두 좌표의 거리를 계산하는 함수를 발견하였고,
코드를 해석 해보려 했지만.. sin cos 이 나오는 걸 보고,
허헣 이건 모르겠는데 하며 덮었다.
이런건 잘하는 사람들이 만들어 놓은 코드를 사용하는게.. 정신건강에 이롭다고 생각한다.

여기까지 작업을 마쳤을 때 쯤 다른 팀원들도 맡은부분의 작업이 어느정도 마무리 되었기에,
전체적인 컨셉을 위한 아이콘과 폰트 선별을 했다.

이후에는 팀원들과 함께 디자인을 다듬고 코드를 정리했다.

대망의 금요일 플레이스토에 앱을 배포하려고 했지만,
허헣 typescript 에러 때문에 빌드가 되질 않았다. 주말간 각자 맡은 부분의 typescript 에러를 수정하고
월요일에 다시 배포를 진행해보기로 하였다.

4Week

4주차라고 하기엔 조금 애매하다.
월요일 하루만 썼으니까.
프로젝트 발표를 마친 뒤에,
미처 해결이 안된 typescript 에러를 수정하고,
플레이스토에 등록 신청을 하는 것으로 프로젝트를 마무리 지을 수 있었다.

전체 회고

이전 프로젝트와는 사뭇 다른 느낌으로 진행된 프로젝트였다.
기존에는 수업에서 배운내용 80% + 새로운 내용 20% 정도로 프로젝트를 진행했다면,
이번에는 대충 50:50 의 느낌이 아니었나 싶다.

그리고 typescript.. 너무 어렵다.
그냥 쌩으로 작성을하면 그렇게 어렵지 않은 것 같기도 한데,
외부 라이브러리를 끌어다 쓰는 순간부터 지옥의 시작이다.

어떤 라이브러리들은 공식문서에 type들이 아주 잘 나와있는 반면에,
또 어떤 라이브러리들은 그렇지 않았다.

하나하나 눌러보고 확인해보면서 타입을 지정해주었고, 정 안되는 것들은 별수 없이 any를 박았다.

하지만 typescript를 사용하다 보니 확실히 앱이 중간에 죽어버리는 일은 거의 없었다.
런타임 이전에 컴파일 과정에서 에러를 캐치해주니 조금더 완성도 있게 프로젝트를 진행할 수 있는 것 같다.

사용할 수록 typescript의 이점과 필요성을 깨닫게 되었다.
게다가 이후에 진행될 블록체인 수업은 typescript로 진행한다고 하니,
미리 예습을 한번 해봤다고 생각하면, 굉장히 큰 수확이 아니었나 싶다.

하루에 한시간에서 두시간 정도는 typescipt를 digging 해보고 싶다.