기업협업(Groo) 및 Wecode 회고록

협업 기간 🗓 : 2022.06.20(화) ~ 2022.07.14(목)

팀 구성 및 기술 스택 ⚙️

• FrontEnd : React, React-Native, style-sheet
  • 안성주
  • 최현민
  • 정재성
  • 김정준

---

🌈 초심을 잃지않는 개발자

1, 2차 프로젝트가 마무리된 후 그루우 라는 기업에서 한달동안 프론트엔드 개발자로써 실무 경험을 할 수 있는 귀중한 시간을 가지게 되었다. 그루우는 '오늘도 식물을 죽였어요'라는 슬로건으로 식물을 어떻게 관리하면 되는지에 대한 전반적인 방안을 제시해주며 식물을 키우는 사람들과 소통할 수 있는 커뮤니티 서비스를 제공하는 어플리케이션 기반의 기업이다. 프론트엔드 개발자로써 첫 실무 경험이기 때문에 많이 떨리기도하고 설레임을 가득 안고 첫 출근을 했던 것 같다. 나는 윈도우 유저로 리액트 네이티브라는 새로운 프레임워크에 맞서서 모든 기초세팅에 대한 오류를 이겨내려고 하였으나 ios 개발은 불가능하다는 소리를 듣고 첫 맥북을 구매하게 되는 잊을 수 없는 시기이기도 하다. 기업협업 기간동안 수많은 이슈들을 만나면서 멘탈적으로도 많이 힘들기도 하였고 새로운 것을 접한다는 경험이 재밌기도 하고 점차 내가 가고자하는 개발자로써 성장하고 있구나 라는 생각을 해보기도 한 시간이였다.

기업협업 기간동안 어떤 어려움을 만났고 어떤 결과물이 나왔는지 한번 알아보자!!

 

기업협업 진행 테스크 💻

1주차

기초세팅

👉 첫 주차에는 리액트 네이티브를 설치하고 그루우 코드를 git clone을 통하여 시뮬레이터와 애뮬레이터를 동작시키는 것이 목표였다. 많은 분들이 윈도우로 리액트 네이티브를 실행시키는 것을 추천하지 않았다. 설령 안드로이드 애뮬레이터가 정상 작동하더라도 ios 개발은 할 수 없기 때문에 처음부터 큰 난관을 부딪힌 것이다. 처음에는 윈도우로 어떻게서든 해결하겠다는 마음으로 정말 많은 에러들을 만나면서 안드로이드 애뮬레이터 작동을 성공시켰지만 ios 시뮬레이터는 시도조차 못해본다는 생각에 맥북을 결국 사기로 마음을 먹었다...!

윈도우로 이미 수많은 에러를 만났던 터라 새 맥북으로 리액트 네이티브 기초세팅은 크게 시간이 걸리지는 않았던 것 같다. 기초세팅이 끝난 후 다음 주에 해결할 테스크에 관련하여 코드를 살펴보는 시간을 가졌다.

 

팀원 모두 맥북유저가 되었다!

2주차

실제 발생하고 있는 이슈 해결

👉 안드로이드 애뮬레이터에서는 기본 프로필 사진 변경이 가능한데 실제 안드로이드 디바이스에서는 기본 프로필 사진 변경이 되지 않는 이슈가 2주차의 테스크였다. 나도 정말 묻고 싶었다. 왜?? 왜 안될까??????????????????? 그럼 테스트는 어디서 해야하는 걸까???????

안드로이드 스튜디오에서 직접 나의 디바이스와 연결하여 구동하고 코드를 파악하며 수정해나가면서 테스트를 해보았다.

우선 프로필 사진 변경 관련된 어떠한 함수가 라이브에서 제대로 작동하지 않는다는 것을 찾아보았다. 기본 프로필 사진을 파일시스템을 활용하여 임시 디렉토리에 미리 다운받고 그 파일을 다시 꺼내서 기본 프로필 사진을 설정하는 방식으로 진행되었다. 따라서 그에 관련해서 안드로이드는 라이브로 적용이 제대로 되지 않고 있는 것이라고 유추하였고 코드를 계속해서 수정해가면서 테스트를 진행하였다. 리액트 네이티브는 같은 이슈와 관련해서 자료들이 많지않아 검색을 통하여 알아내는 것은 한계가 있었고 결국 그동안 알아냈던 것 까지만 정리하여 전달하고 다음 테스크를 받았다.

기초세팅부터 난관에 봉착하였는데 또 다른 큰 난관에 부딪히니깐 처음으로 멘탈적으로 많이 힘들었다. '열정으로 해결하자'라는 나를 뒤돌아 보았을 때 초심을 잃은 것 같아서 계속해서 초심을 리마인드면서 출근했던 시기였던것 같다. 처음으로 이러한 감정을 느꼈으며 앞으로 어떠한 개발자가 되고싶은가에 대해서 더 많이 생각해볼 수 있는 시간을 가졌다.

 

할 수 있다고 생각하면 이룰 수 있는 세상!!

3주차~4주차

AI 식물 진단을 위한 UI 구성 및 모듈화 작업

👉 3주차 테스크로 UI kit를 구성하는 것이였다. 피그마를 활용하여 새로운 서비스 기획에 대하여 설명을 들었고 팀원들간 작업 분배가 마친 후 UI 작업을 진행하였다. 연결성 있는 코드를 위해 최대한 기업에서 사용하고 있는 컨벤션이나 코드 방식을 먼저 파악했었다. 또한 최대한의 가독성을 위해서 컴포넌트나 변수이름을 많이 고민했던 것 같다. 기업협업이 끝나면 누가 나의 코드를 수정하거나 재사용할텐데 쉽게 알아볼수 있게 작성하고 구현하자라는 생각을 끊임없이 하면서 작업에 임했던 것 같다.

발생하였던 이슈?? UI를 구성하다보니 각 단어를 띄워서 가운데 정렬로 표현하는 작업이 필요하였는데 문제는 ios와 android의 가운데 정렬하여 각 단어가 이동하는 방식이 다르다는 것이다. 각 단어를 띄우기 위해서 letterspacing 속성을 사용하였는데 ios는 가운데 정렬한 상태에서 letterspacing 속성을 사용하면 제일 오른쪽 단어 기준으로 왼쪽으로 움직이게 되고 android는 중간 단어 기준으로 양쪽으로 정상적으로 벌어지는 것이다. 그래서 platform 라이브러리를 통하여 ios면 padding값을 줘서 android와 동일하게 보이게끔 구현하였다. 하지만 사수분께서 분기문을 사용할때에는 확실한 기준 또는 정말 최후로 사용해야 한다고 말씀해주셨다. 그래서 다른 방법을 고민하던 중 각 단어에 빈 컴포넌트를 넣어서 공간을 띄우는 퓨어?한 방법을 사용하여 해결하였다.

 

최상위 컴포넌트

위 사진은 최종 최상위 컴포넌트의 코드이다. UI 재사용성을 고려하여 다음 사진과 같이 UI를 구성하는 텍스트를 props로 내려주어 언제든 개발자가 꺼내서 수정이 가능하게 구성하였다.

3~4주차에는 UI 작업을 진행하면서 리액트 네이티브에 대한 전반적인 기초 지식을 계속해서 익히며 즉시 사용해볼 수 있는 유용한 시간이였다.

기업협업 결과 시연영상 🎥

 

시연영상 1) Dobby, Naldo 제작결과물

시연영상 2) 나(George), Tim 제작 결과물

기업협업 및 Wecode를 끝마치며... 🌸

3개월간의 짧고 길었던 Wecode bootcamp 커리큘럼이 마무리 되었다. 처음에는 모든 것이 어색하였고 두려움반 설렘반으로 개발자로써의 첫 발자국을 내딛었다. 위코드를 선택하게된 첫 번째 이유 중 하나가 오프라인으로 개발 환경을 제공해 주는 것이다. 개발자 커뮤니티를 누구보다도 중요하게 생각하였기 때문이다. 항상 열정에 가득넘치는 동료들과 프로젝트를 하면서 많은 영감과 에너지를 받을 수 있었고 함께 고민하며 문제를 해결해 나가는 과정에서 스스로 성장하고 있구나 라는 생각을 많이 가졌다. 물론 문제를 항상 손쉽게 해결한 적은 없다. 매번 복잡한 문제에 마주하였으며 멘탈적으로 힘들고 지치기도 하였는데 그럴때 마다 주변 팀원들을 통해서 힘을 얻을 수 있었고 나 역시 팀원들에게 영감을 주었다고 생각한다. 이런 것이 팀 시너지라고 생각하며 개발자에 있어서 아주 중요한 포인트를 배웠다는 점에서 위코드를 선택하게 된 것에 대하여 내심 자랑스러웠다.

기업협업 기간동안에는 소통과 어떤 개발자로 성장하고 싶은가에 대해서 다시 한번 깊이 생각해볼 수 있었다. 매번 소통이 중요하다라고 언급하였지만 실무를 하기 전까지 나는 개발 소통이 무엇인지, 어떠한 부문에서 소통이 필요한지에 대하여 부족하다는 것을 느꼈고 단점을 보완해 내가 꿈꾸는 개발자로 한걸음 다가갈 수 있게끔 끊임없는 노력이 필요하다 라는 것을 깨달은 시간이였다.

 

 

33기 동기 여러분 끝까지 포기하지말고 새로운 시작에 앞서서 화이팅하시기 바랍니다!!!