회사명: Quantuam AI

총 인원: Front-end 3명(2명:인턴, 1명:정직원), Back-end 3명(정직원)

총 기간: 2021.11.26 ~ 2021.12.24

기술 스택

• HTML/CSS
• JS
• React.js
• React Native Web
• Styled-Component
• Trello, Git, Slack
• Library: rechart.js, progressbar

본문으로 들어가기 앞서(회사의 상황과 플랫폼 선정의 중요성)

기업협업을 가기전 대표님의 배려로 코드를 주말간 미리 볼 수 있었다. 처음에 설명 들었던 것은 React Native를 쓴다는 것이었고 그렇기에 지원했다. 하지만, 막상 코드를 보니 React Native가 아닌 React Native Web이었다. 비슷해보이지만 차이점은 분명하다(자세한 설명은 아래부분)
회사에서는 지금까지 6개월동안 한것을 당시 필자인 나에게 인수인계 받았을때 상황은 엉망진창 그 자체였다. 기본적인 컨벤션도 하나도 없고 컴포넌트 폴더가 있긴했지만 컴포넌트 기능들을 하지 못하는 코드들이 대다수였다. 제일 심각한 점은, 이 회사에서는 Application만 출시한다는 것이다. 이 말은 즉, "React Native Web"으로 할 이유가 1도 없었다는 것이다. 엉망진창 그 자체였다고 말한 제일 큰 이유는 바로 React Native Web은 기본적으로 React Native로 코딩을 하는것이 원칙인데 어디는 React.js로 또 어디는 React Native로 코딩을해서 각종 버그와 충돌이 이루 말할 수가 없었다. 결국 회사에서는 1차 출시가 코앞인 상황이여서 급한대로 일부분을 제외하고는 React.js로 코딩을 수정하였다. 여기서 가슴속 깊이 느낀점이 있다. 바로, 플랫폼 선정의 중요성이다. 회사 사정상 필자가 인턴하러 가기전까진 Front-end 정직원 분이 한 분도 없이 Back-end 3분으로 구성 되었고 6개월동안 인턴분들 또는 외주를 통해 지금까지 진행되어왔다. 그라다보니, 기존에 작업하신 분들이 다음분들을 배려한 코드도 아닐뿐더라 인수인계도 제대로 되자않아 많은 손을 거쳐 마지막으로 필자에게 왔을때는 도자히 손을 댈 수가 없는 상황이 이르렀다. 회사에내에 Front-end부분에 지식을 가지고있는 분이 없다보니 정확한 이유,근꺼가 부족한 상태에서 React Native 또는 Flutter가 아닌 React Native Wev이라는 생소한 플랫폼을 선정한것 같다. 개인적으로 플랫폼 선정을 할때 중요하게 생각하는 점들은 아래와 같다.

1.회사의 방형성에 맞는 플랫폼 선정
2. Ecosystem
3. 유지/보수

React Native Web이란?

간략학게 말하자면, 기존 Reacct Native로는 App만 만들 수 있었다면, React Native Web 플랫폼으로는 Web과 App을 동시에 개발 할 수 있는 엄ㅊ청난 장점을 가지고 있다. 즉, 하나의 코드로 모든 플랫폼을 개발 할 수 있다. 그래서 기본적으로 React Native 언어로 코딩을 하는것이 원칙이며 React Native적으로 구현 할 수 없는것이나 힘든점은 React.js로 보완하는 것이다.

p.s) React Native와 React Native Web의 차이점 그리고 왜 React Native Web을 아직 사용하면 좋지않은지는 아래의 링크를 확인바란다.
<추후 링크 올릴 예정>

한 달간 맡은 업무

비즈니스 관리 페이지를 맡았다. 해당 페이지에는 프로모션 관리, 고객 분석, 평가관리, 고객 알림, 구독 관리, 매장 정보 관리가 있으며 필자가 주로 맡은 부분은 고객분석, 평가관리이다. 하지만, 중간 중간 회사에서 중요하게 먼저 처리할 부분이 생긴다면 이것 먼저 우선순위를 두고 업무에 임했다.

• 평가괸리
  

이 페이즈는 비교적 어려운 부분이 없었다. Back-end에서 점수를 보내주면 Front에서 보여주고 제일 점수가 낮은 부분만 검은색깔 처리와 사진은 투명도가 낮게 설정하는것. 그 외 나머지것들은 모두 빨간색ㅊ처리.

• 고객군분석
  
  
  
  

이 파트에서 중점적으로 염두했던 부분은

1. BarChart 와 LineChart
2. Progress Bar
3. Back-end에서 자료를 어떻게 가져올 것이냐.(Back-end와 소통)

이 부분을 기능적으로 구현할때 해당 Library의 공식문서와 StackOverflow에 질문도 엄청 많이 했던거 같다. 이 부분을 대략 1주일간 진행했던거 같은데 개인적으로 개발자로서 실력 향상하는데에 도움이 많이 됐다.
이 중에 제일 힘들었던 부분은 바로 3번째인 "Back-end와 소통" 이었다. 아무래도 프로젝트 한 경험이 부족하다보니 어떤식으로 데이터를 받아와야 또는 Back쪽에서 어떤식으로 해야 데이터 처릭가 편한지에 관한 지식이 부족했던거같다. 예를들어, Back-end쪽에서 Data를 Array로 보내줬지만, Front쪽에선 보내주신 Data를 Object적으로 처리해야 자율자재로 쓸 수 있는데 처음부터 이런 논의가 없었던점이 너무 아쉬웠다. 어떤분들은 "아니 그럼 Front에서 Back이 보내준 거를 Object화 하면 되는것 아니냐?"라고 생각하실분이 있을텐데 필자도 그렇게 생각해서 많은 도전을 해봤지만 생각처럼 쉽지 않았다. 이 부분은 추후 글을 따로 올릴 예정이다.

이 외 업무

자잘자잘한 QA업무들이 대부분 이었지만, 필자가 여기서 이 회사에서 인턴생활 하면서 주로 했던 부분은 "Refactoring" 이었다. 앞서 말한거와 같이, React Native Web적으로 코딩을 하지않고 여기저기 React Native와 React.js를 섞어놔서 프로필 -> 비즈니스 관리 -> 이하 해당 페이지 로 넘어가는 과정 코딩에서 코딩이 어느 페이지는 Webview로 어느 페이지는 React Native로 코딩이 되있어 아래와 같은 문제점들이 있었다.

1. HeaderImage가 보이지 않는 버그
2. 페이지 연결은 어디는 React Native적으로 어디는 React.js
3. Props로 넘길 수 없음
4. Console을 어떻게 찍어보는지

1,2번 문제들이 결국 3,4번으로 이어지는데, 코드를 짬뽐을 하다보니 대표적인 예로 가게 id값을 넘겨줘야 하는데 불가능 했다. 그래서 결국, 모든 코드들을 React.js 바꾸는 대대적인 작업을 했다. (위에 언급했다 싶이 코드를 공유하고 싶지만 회사 규정상 못하는 점 죄송하다)
제일 심각한 점은 React Native Web에서 Console을 어떻게 확인 할 수 있는지었다. 한 달내내 온 갖 방법들을 시도 했지만 확인 할 수 없었다. 하지만 다행히도 React에서는 콘솔이 확인가능했다.

인턴하면서 느낀점

1. "소통"의 중요성
2. "플랫폼"선정의 중요성

첫 회사에서 진행된 미팅에서 React Native가 아닌 React Native Web 플랫폼을 사용한다는 것을 확인하고 필자도 모르는 사이에 자기 자신에게 "아 Web이랑 App이랑 동시에 출시하는 구나"라고 생각하게 되버렸다. 3일동안 작업을 한 후에 팀장님과 이약기 해본 결과 이 회사는 App만 출시한다는 것을 알게됐다. 늘 자기자신에게 이유와 근거가 중요하고 세상에는 당연하다는 것이 없다고 생각했지만 이런 실수를 범했다. 다시 한번 소통의 중요성을 깨닫게 된 좋은 경험이었다.
마지막에 인턴이 끝날때 즈음 회사에 Front 정직원 한 분이 채용됐다. 이 분과 소통을 한 결과 6개월동안 한것들을 모두 다 갈아엎고 React Native로 하기로 결정했다. 솔직하게 6개월동안 들인 시간과 돈이 너무나 아까웠다. 물론, 개인적으로는 많은 도움이 됐지만 회사는??