조금(?) 늦은 Team R.I.P. 후기

코래블러·2021년 3월 3일

프로젝트 소개

그 누구라도 이 프로젝트의 결과물을 보면 껌뻑 죽을 수 밖에 없을 결과물일것이다 라는 각오를 담은 팀 네임 R.I.P.

FRIP 을 모티브로 해서 소셜 액티비티를 사용자들에게 제공하는 어플리케이션을 만들었습니다. 유저가 사용할 회원가입/로그인, 메인, 카테고리, 피드, 상품 상세, 사용자 화면 들을 작업하였습니다.
frip 이란?
프로젝트 기간 : 2020.12.14 ~ 2020.12.24 (총 11일)
유튜브 시연 영상

기술 스택

React Native
Functional Component
Hooks
Navigation
react-native-image-slider
Styled-Component/Native

협업 도구

Git, Github
Slack : 비대면 소통
Trello : 일정관리 및 작업 현황 공유
Notion : 팀 내 개발 자료, 규칙, 안건 등 기록

내가 구현한 기능

Feed 페이지
1. 피드 하나를 재사용 가능하게 컴포넌트화
2. 피드 페이지에서 제품 상세 페이지로 로 navigate 구현
신고하기 모달창
1. 라이브러리 없이 컴포넌트만으로 구현
2. 모달창이 올라올 때 배경은 Fade, 신고하기 버튼이 담긴 모달창은 slide 로 이중 모달창 구현
댓글 페이지
1. FlatList 를 이용하여 댓글들을 나열
  - 왜 ScrollView,map을 안 쓰고 FlatList로?
2. 각각의 피드의 id에 따른 다른 댓글창 구현
3. AsyncStorage 로 로그인시에 받아온 토큰에서 가입 시에 등록하였던 닉네임을 댓글 추가할 때 사용
상품 상세 페이지
1. stack 을 쌓은 채로 피드 페이지에서 넘어오기
2. react-native-image-slider 를 이용하여 상품의 이미지 갯수 만큼 구현

프로젝트 후기

React Native 프로젝트가 끝이 났다. 이번 프로젝트도 1차 때처럼 많은 두려움으로 시작했던 프로젝트였다. 원래 위코드 2차 프로젝트때는 정큐 커리큘럼상 그 전처럼 React 로 진행을 해야 한다. 그리고 멘토님들도 React Native 로 2차 프로젝트를 진행 하려는 사람들에게 이런 말들을 하셨기에 겁이 났다.

React, React Native 둘 다 놓칠 수 있습니다.

RN은 버그가 자주 발생하며 검색해도 자료가 현저히 부족합니다.

최소한의 가이드만 제공됩니다.

하지만 새로운 기술 스택에 대한 호기심도 컸었고, 공부해야 하는 내용이 어렵지 않으면 오히려 흥미를 잃어버리는 이상한(?) 마인드도 생겼기에 두렵지만, 또 설레는 마음으로 프로젝트를 시작했다.

프로젝트중 기억에 남는 코드들

웹과 어플리케이션의 차이점이 뭐라고 생각하나요?

위 질문에 대해 답을 하라고 하면, 나는 스택이라고 답을 할 것이다.

지금까지 다뤄왔던 기술들 ( HTML, CSS, JS, React ) 은 전부 웹 기반이었기에, 사용자가 새로 이동한 링크의 URL 이 블라우저 히스토리 스택에 푸시가 되고, 그 전 페이지로는 pop 을 이용하여 돌아간다.

하지만 어플리케이션에서는 글로벌 히스토리 스택에 대한 내장된 기능이 없고, 이 때문에 나온 기능이 React Navigation 이다. 그래서 React Native 에서 초기 세팅을 한다는 것은 Navigation 설계를 한다는 것이다.

FRIP 어플의 특이한 점 중 하나가 유저의 토큰값이 존재하지 않으면 아래 화면처럼 가입/로그인 하라는 화면이 뜬다는 것이다.

그래서 우리는 유저의 토큰 값이 존재할때는 사용하는 화면들의 스택 , 그리고 로그인 하기 전의 스택 2가지로 아래와 같이 구분을 하였다.

모달창이 나타나는 걸 보면, 배경은 fade 의 효과로 뜨지만 신고하기 버튼이 담긴 모달창은 아래에서 위로 slide 하는 것을 알 수 있다. 이를 react-native-modal 라는 라이브러리를 사용하면 바로 구현이 가능하다. 실제로 적용도 해봤을 때 금방 끝나긴 했다.

하지만 처음부터 라이브러리를 사용하기 보단 React Native 공식 문서에 나온 Modal 로 내가 스스로 구현을 해보는 게 나에게 더 큰 이해를 주겠다는 생각을 했다.

이 Modal 을 구현하는 데 있어서 가장 애먹었던 포인트는 배경은 fade, 컨텐츠는 slide 로 온다는 점이었다. 그래서 처음에 했던 수많은 생각들 중 하나는 다음과 같은 구조를 생각해보기도 했다.

<Modal> //fade 배경용 Modal
	<Modal>신고하기</Modal> //신고하기 버튼이 담긴 Modal
</Modal>

하지만 이렇게 하면 화면은 화면이 뜨기는 커녕 수 많은 에러 코드로 화면이 뒤덮이기에 틀린 생각임을 바로 알 수 있었다.

그래서 결국 생각한 방법은 하나의 컴포넌트를 위에 또 다른 를 띄우는 식이다. 그리고 배경을 transparent 를 사용하는 것이었다.

이번 프로젝트에서 배운/느낀 점

이번 프로젝트때 새로운 기술 스택을 배울 때 내가 어떻게 대응하는 지, 그리고 그 대응 자세를 어떻게 고쳐나갈지에 대한 것들을 정말 뼈저리게 느꼈다.

일단 내 스스로에게 칭찬 해주고 싶은 부분은 React Native 라는 새로운 기술 스택을 접하는 대담함을 발휘하고, 이로 인해 익숙했던 기술에 대해 다른 관점을 가지게 되었다는 것이다. React Native 를 하면서 그 동안 웹기반의 기술을 사용하며, 당연시하며 누리던 것들이 사실은 당연한 것들이 아니라는 것을 느끼고, 내가 썼던 코드들이나 사용했던 기능들에 대해 다시 한번 생각해보는 계기가 되었다.

아쉬웠던 점은 대담함을 좀 더 발휘했으면 어떠했을 까 라는 생각을 해본다. 프로젝트 사전 회의 때, 나는 피드 페이지를 주력으로 만들고 싶다고 했다. 개인적으로 이번 프로젝트의 주 목적은 새로운 기술 스택을 온전히 나의 것으로 만들어보자는 것이었기 때문이다. 그래서

쉬운 기능은 다뤄보자!

라는 마인드였다. 하지만 이는 내 오판이었다. 새로운 기술 스택에 대한 두려움이, 1차때 배웠던 어려운 것을 도전해보자! 마인드를 너무 위축시켰다. React Native 는 결국 React 기반이라 익숙해지고 나면 결국 React 와 많이 비슷하다라는 느낌을 받았다. React Native 가 익숙해지고 난 뒤 그 후에 하는 작업들은 해 봤던 기능들을 다시 하는 작업들이었고, 이는 어렵지 않으면 재미가 없다 라는 내 마인드가 발동되버리는 계기가 되었다.