기업 협업 후기

5월 7일 위코드가 끝났다. 끝나면 되게 좋을 줄 알았는데 이제 정말 실전이란 생각에 머리가 더 복잡해졌다. 그래서 더욱더 쉬는 몇일도 맘편히 쉬지는 못하였다...ㅎㅎㅎ
면접 준비하고 자바스크립트와 리액트에 대한 기본기가 부족하다는 생각을 항상 갖고있던 터라 요즘은 자바스크립트와 리액트를 공부하며 더 이상 늦어지면 안될꺼같은 기업협업 후기를 적는다.

1. 기업협업 프로젝트

Crocus Energy라는 회사에서 진행하였고 react Native를 사용하여 미국에서 현재 사용 중인 에너지 관리 앱어플리케이션(Olivine Community)을 구현하는 것이였다.

1. 팀 구성

프론트엔드 3명(정재욱 , 배성훈 , 권영균)
백엔드는 포스트맨을 통해 API로 데이터가 다 만들어진 상태였다.

2. 사용한 기술 스택

React Native / Styled Components / React Hooks / Redux

3. 개발도구

Trello /Bitbucket / Zeplin / Slack

• [Trello]
  

매일 오전 본인이 구현할 수 있는 작업량을 명시하고 최대한 세분화를 시켜 작업카드를 작성하였다. 따라서 팀원이나 사수분이 현재 진행상황을 쉽게 파악하기 용이하도록 하였다.

카테고리는 To Do / Doing / Review / Done / Meeting History 로 구성하여 직관적으로 구성하였다.

• [Bitbucket]
  Git을 대신하여 사용였고 개인의 Git에 ssh Key를 생성하여 Git과 Bitbucket을 연결시켰다.

• [Zeplin]
  사수분께서 구현하야할 페이지를 기능 단위로 나열식으로 보내주셔서 디자인작업이나 구현해야할 기능들을 파악할 수 있었다.(스크린은 혹시 문제가 될꺼같아 못올렸음)

• [Slack]
  팀원들과는 slack으로 소통하여 작업을 진행하였다.

2. 진행방법

• 첫번째는 제플린에 있는 페이지들을 보면서 어떤 방식으로 화면이 구성되어있고 플로우를 익히는 것이였다. 구성해야 할 화면의 개수가 많다보니 깊이있게 플로우를 이해하는데 시간이 걸렸다. 페이지 구성파악하는 것이 왜 중요한 것인지는 프로젝트를 하면 할수도록 더 느꼈던 것 같다. 구성요소 파악을 제대로 못할시 나중에 한창 프로젝트를 진행하면서 다시 페이지를 플로우를 생각해서 수정해야 하므로 첫 번째이면서도 가장 중요한 기간이였다.

• 두번째는Component 쪼개기였다!!
  각 페이지에서 공동으로 사용할 컴퍼넌트를 분리하고 먼저 구현을 시작하였다. 이렇게 컴퍼넌트 재사용을 함으로써 서로 각자 분담했던 컴퍼넌트들을 공동으로 사용함으로써 서로의 시간을 아낄 수 있었던 점이 제일 컸다!!
  (이전 프로젝트에서는 페이지 단위로 분담하였으나 이번 프로젝트에서는 같이 만든 컴퍼넌트를 같이 사용을 하니 정말 협업하는 느낌이 물씬 들어서 좋았다.)
  더욱 자세히 찾아보니 Atomic Design(아토믹 디자인은 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)로 효과적인 인터페이스 시스템을 만든다.)이였고 이는 리액트에서 가장 흥미로운 개념중 하나인 컴퍼넌트 기반의 프로그래밍이라고 한다.
  이 부분이 이번 프로젝트를 하면서 가장 기초적인거면서도 크게 다가왔다.

• 세번째는 공통의 컴퍼넌트를 바탕으로 모듈을 만들고 각자가 맡은 페이지작업을 진행하였다.

• 네번째는 각자 분담한 페이지들을 종합하여 최종적으로 어플리케이션을 완성하였다.

3. 내가 분담한 부분

• Bottom Tab Navigation라이브러리를 커스텀하여 슬라이드로 UI 구현

• 공통 컴퍼넌트 중 DropBox / Icon DropBox / Pop Up / Alert / Modal 구현

• Victory native 라이브러리를 사용하여 Dash Board 페이지 chart 구성

• Dash Board 페이지 구현

• <Youtube 링크>
  https://youtu.be/hIl9cVk8bqg

4. 블로커

• 오류와의 전쟁
  리액트와는 빅교도 할 수 없이 네이티브를 하면서 정말 많은 오류와 직면하게 되었다. 개발적인 부분의 오류는 물론이고 초기세팅과 라이브러리를 사용하면서 발생하는 오류의 연속이였다. 나중엔 오류가 안나오면 더 이상하게 느껴졌을 정도였다ㅎㅎㅎ
  대표적으로 나는 오류가 있었는데 블로그에 기록할 정도다.
  https://velog.io/@dudrbs1040/ReactNative-%EC%98%A4%EB%A5%98
  수없이 많았음에도 구글링하고 스택오버플로우, 유툽등을 통해 해결하게 되었다!!
  그리고 작업환경이 리눅스환경이 아니다보니 초기세팅 오류나 라이브러리 사용시 발생하는 오류의 빈도가 더 높았던 것같다.(그렇게 믿고싶다...ㅎㅎㅎ)

• 라이브러리 커스텀
  개발을 하면서 라이브러리는 처음 사용하였고 구현하려고 하는 페이지가 라이브러리와 다를 경우 커스텀을 해야했다. 라이브러리면 사용하면 다 될줄 알았으나 그건 착각이였고, 라이브러리도 참조하는 라이브러리들이 있어 같이 설치를 해야만 작동하는 것을 하면서 알아갔다.
  대표적으로 Victory native로 차트를 만들 수 있는 라이브러리인데 커스텀하는데 애를 먹었다.
  하지만 이번에도 역시 찾고 찾다보니 원하는 디자인으로 커스텀 할 수 있게 되었다.

5. 프로젝트를 마치며

이번 프로젝트를 하면서 리액트네이티브를 처음 사용해보았다. 첫 느낌은 되게 막막하고 어떻게 해야하나 싶었는데 막상 시작해보니 점점 익숙해지고 나아졌다. 하지만 익숙하기까지 밤도 새보고 많은 자료를 찾아보고 공식 홈페이지를 수십번 들어가보고 등의 고생의 결과인 것같다. 그리고 팀원들과 코드리뷰를 통해 많이 배운거 같다. 그리고 사수분께서 전반적으로 개발자의 자세라던가 프론트엔드 개발자로써 참고해야할 것들 즉, 현직이 아니면 들어볼 수 없었던 것들을 경험할 수 있게 되어 정말 좋았다.

좋은 점이 대부분이나 아쉬운 점을 굳이 하나 꼽자면 리액트네이티브에 대한 자료등이 많치 않아 원하는 자료를 찾는데 시간이 오래 걸렸다는 점?

위코드에서 처럼 끝나고보니 크로커스에너지에서의 기업협업을 통해 나도 모르는 사이에 어제보다 나은 나를 볼 수 있어서 좋았다.

구현한 앱 어플리케이션
https://youtu.be/RsrgZiakiUs