"회고"

한 달간의 인턴기록.

기업선정

5월 18일, 기업신청 리스트가 발표됐다.
총 13개 기업 중 1지망부터 3지망까지 기업을 선택할 수 있었다.
보통은 1지망으로 선택한 기업 중 결정된다고 말씀해주셨고, 1지망 5곳, 2지망 5곳, 3지망 3곳을 적었다.

다음날 오후 17시 매칭결과가 발표됐다. 다행히 1지망으로 썼던 기업 중 flutter를 주 개발스택으로 사용하는 '넵튠클라우드'에 갈 수 있었다. 심지어 백엔드 2명 프론트 2명이 함께 가다니(!) 다양한 경험을 해볼 수 있다는 생각에 신나있던 것도 잠시, 리스트발표를 잘못 본 것이었다. 프론트 단 2명, 나와 효정님이었다.

같이 가는 동기 효정님.
평소 내가 긍정적이진 않지만, 순간 머릿 속을 스친 문장은 '오히려 좋아'였다.
당시엔 막연히 밝은 성격에 효정님과 갈 수 있다는 생각에 '오히려 좋아' 였다면, 지금은 짝 프로그래밍을 하며 어깨너머로 상대방이 개발할 때 접근방식을 배울 수 있었다는게 가장 큰 수확이다.

넵튠클라우드

넵튠클라우드를 한 문장으로 간단히 소개하자면 다음과 같다.

벙커트레이딩용 Chat 기반 SaaS 플랫폼을 개발하는 회사.

개발자는 총 4명, 시작한지 얼마안된 초반 스타트업이었지만 다양한 협업툴 및 기업문화를 배울 수 있었다.

애자일

부트캠프에 참여하기 전 소프트웨어 장인정신이라는 책을 읽었다.(아니 읽고있다.) 여기서 설명하던 애자일은 경험해보지 않았을 땐 '단순 빠르게 업무를 처리하는 것' 이라고 생각했고 정확히 이해하지 못했다.(그래서 사실 두 번째 읽는 중이다.)

하지만 회사에서 생활해보며 경험한 애자일은 '단순빠르게'라고 생각한 내 자신을 부끄럽게 할 만큼, 체계적이며 빠른 결정이 이루어지는 방법론이었다.

부트캠프에서 사용했던 트렐로보다 조금 더 기업적인 느낌을 풍기는 Jira는 그 전 스프린트미팅과 비교해서 팀이 얼만큼 업무를 더 효과적으로 진행했는지 그때그때 바로 확인할 수 있는 지표였다. 또 무분별한 야근이 아닌, 업무 진행상황을 확인하며 유연하게 강도를 조절할 수 있다는 점이 마냥 신기하고 새로웠다.

PM님은 효정님과 나를 디자이너 미팅, 개발자 미팅 등 모든 미팅에 참여할 기회를 주셨다.
'아 디자이너는 이렇게 figma를 통해 시안을 잡아주는구나', '와 figma가 이런 기능도 되는구나' 등, 접하지 못한 새로운 것을 경험하는 기분은 항상 짜릿하다.

회고

그 중 내가 가장 좋아하는 시간은, 2주에 한번 카페에서 진행하는 회고시간이었다. 이전 직장에서도 경험했지만, 일을 하다보면 말이 없어진다. 소통의 부재가 깊어지면 서로간의 생각을 공유하기는 더 어려워진다. 그래서 이를 해결하기위해 '기존방법'이라고 칭하는 회식이 존재하는 것 같다.

하지만 넵튠클라우드에서 한 달간 단 한번도 술자리를 가진 적이없다. 술을 좋아하지 않는 나에게는 그리고, 직원들의 생각이 궁금한 나에게는 더할 나위없이 행복한 시간이 회고시간이었다.

사실 회고 때 말을 많이하진 않았다.(마지막날 PM님이 말할 기회를 주셔서 조금 길게 말했다. ㅎㅅㅎ) 하지만 듣고만 있어도 이들의 열정을 느낄 수 있었고, 이 열정은 나에게 더 나은 개발자가 되고싶다는 동기(動機)로 채워졌다.

figma

당시 디자인 시안을 구할 수 없어서 다른사진으로 대체.

디자이너분이 작업하는 figma를 공유해주셔서 Nav bar 레이아웃을 잡았다. 단순 figma에서 잡아주는 CSS를 그대로 복붙하면 되는 줄 알고 금방 끝나겠네 했던 내 생각은 산산이 부셔졌다.

Nav bar 레이아웃을 잡는데 생각한 것보다 훨씬 시간이 오래걸렸다. 갑자기 효정님의 말이 떠오른다.

"근휘님 레이아웃 쉽지않네요."

---

개발

개발에 관한 이야기를 본격적으로 적어보려고 한다.
참고로 우리 만든 데스크톱 버전 채팅 시스템은 여기서 확인할 수 있다.

Version

시작부터 순탄치 않았다. getStream API를 이용해서 Demo version을 clone하고 서로 채팅을 할 수 있도록 만들어보라는 CTO님의 제안에 그날부터 작업을 시작했다.

이상하게 에러가 계속 발생했다. 만들어진 것을 단순 clone해서 JWT token을 발급받고 서로 채팅만 하는게 다인 기능을 구현하는데도 이렇게 어려워도 되나 싶을 정도로 에러가 떴다.

문제는 node, npm version 차이 때문이었다. 효정님과 나의 node, npm version이 달랐고 version을 변경하기 위해 n이라는 것을 사용했다. 당시 새로운 경험이었어서, 간단히 TIL에 기록해놓은건 여기서 확인할 수 있다.

그래서 npm과 node, 그리고 react version 등을 README에 정리해놓았다.

프로젝트 시작

4월 28일 PM님 효정님 나 3명이서 미팅을 가졌다. 일주일 동안 할 과업을 Jira를 통해서 작성하고 일주일 뒤에 업무한 내용에 대해서 이야기해보고 속도를 조정해보자는 말씀을 하셨다.

문서화에 대해서도 설명해주셨는데, PR날리듯이 특별한 이슈가 아니더라도 공유하고 싶은 내용을 적으면 된다고 말씀해주셨다.

효정님께서 firebase를 통해서 로그인기능을 구현하고 싶어하시는 것 같아서 하시면 될 것 같다는 말씀을 드렸다. 나 역시 해보고 싶던 일이었지만, 언젠가는 하게 될 일을 조금 미뤄둔다는 생각으로 양보했다. 그리고 그 양보한 시간에 나는 다른 업무를 진행하면 된다고 생각했다. 2월에 읽었던 책 중에서 기억나는 문구가 떠올랐다.

"쓸모없는 공부는 없다."

양보한 시간에 나는 Nav bar의 레이아웃을 잡고 해당 Nav bar를 클릭했을 때 id값을 읽어서 className을 조건문으로 변경시켜주는 기능을 구현했다.

전체적인 레이아웃을 얼추 잡았을 때 PM님께서 무심코 "잘하셨네요 근휘님"이라는 말씀을 해주셨는데, 나 혼자 다한게 아니라서 부끄럽기도 했지만 기분이 좋았다.

그리고 참고로 수료 후 사이드프로젝트에서 효정님께 양보했던 기능(소셜미디어로그인)을 구현할 기회가 생겼다 :) 물론 사이드프로젝트에는 효정님도 함께하신다. 😃

발상의 전환

기업협업은 기존의 문제해결방식을 완전히 깨트리는 '발상의 전환'이었다.
기존의 1차 2차 프로젝트는 참고할 만한 자료가 velog tistory 등 마음만 먹으면 얼마든지 찾을 수 있었다.

필요한 자료를 다시 찾아야하는 것 만큼 시간 아까운 일이 없다고 생각하는 나는, 평소 Notion에 내용을 저장해둔다.
하지만 기업협업 Chating에는 그 흔한 velog, tistory 글이 없다. 그나마 firebase 내용정도.

모든 해결방법은 "공식문서"에 있다는 것을 실감했다.

Luis

이상하게 또 하나의 문제가 발생했다. 채팅을 서로 주고 받는 것도 가능한데, 채팅을 한번 보내면 같은 글의 내용이 한번 중복되어 보내져서 두개의 글이 한번에 올라가는 현상이 발생했다.

평소 CTO님과 PM님께선 질문을 많이해도 좋다는 말씀을 해주셨는데, 이건 어떻게 질문을 해야할지 조차 감을 잡지 못했다.

stream의 직원 이름이다. 이 사람에게만 질문을 정말 많이 보냈는데, 친절히 답장해주었다. 🙏

결국, stream에 문의메일을 보내보기로했다. 답변기간은 3일정도 걸리려나 했지만, 5분만에 답장이왔다.
몇번의 메일을 주고받은 뒤 문제를 해결할 수 있었다.

문제는 react 18버전 때문이었다. getStream은 18버전이 아직 호환되지 않는 상태였다.
그래서 React로 17버전으로 다운시킨 후 두 번 중복되어서 채팅메세지가 전달되는 것을 해결할 수 있었다.

최근 18버전도 호환가능하다는 메일이 왔다!

핵심 트러블 슈팅과 짝 프로그래밍

가장 힘들었던 트러블 슈팅을 뽑으라면 주저하지않고 ChatList에서 Search 기능을 구현하는 것이었다. Demo version에서는 search 기능이 빨간박스처럼 하나의 창으로 띄워져서 그 안에서 검색결과가 filter되어 출력됐다.

하지만 PM님이 원하시는 방향은 파란박스안에서 자체적으로 filter되어 결과값이 렌더링되길 원하셨다.

이 기능을 구현하기 위해 2주라는 시간을 허비했다. 간단한 코드 한 줄이었지만, 당시에는 효정님과 데이터의 깊숙한 곳까지 파고들어서 아이디 값을 state에 담고, 어떻게 해서든 기능을 구현해보려고 했다.

결국 구현을 했지만, 잃은게 더 많았다. 기존에 잘 동작하던 chatting 생성기능과 in-chat안에서 채팅하는 기능 모두 에러가 발생했다.

하지만 배운게 없는 건 아니었다. 이 과정에서 하나의 노트북으로 두 명이 생각한 바를 서로 이야기하며 "짝 프로그래밍"을 실천했다. 효정님의 문제 접근방식에 대해서 배울 수 있던 시간이었다.

실제로 효정님은 무턱대고 코드를 치는게 아니라 공책에 적거나, 말로 계속 되뇌며, 하나씩 순차적으로 접근해보는 모습이 인상깊었다.

지하철에서 실마리를 풀다.

퇴근시간 18시, 역삼에서 선릉 위워크로 19시까지 다시 출근했다. 그리고 23시까지 효정님과 문제를 해결하기 위해 집요하게 달려들었다.

사진은 회사 퇴근 전 카톡 '내게쓰기'로 보내놓은 공식문서 내용이다. 위워크를 퇴근하던 23시 지하철에서 공식문서 내용을 읽어보며 번뜻 머릿속에 아이디어가 스쳐갔다.

query를 filter에 넣어주면 되는거 아닌가?

집에가서 query를 이용해 filter에 적용시켜보았다.

const filters = { members: { $in: [query] } };

당시의 코드, 한 줄로 문제를 해결할 수 있었다.
너무 기뻐서 새벽에 바로 영상찍어서 효정님께 보냈다.

그외 트러블 슈팅

search 기능을 구현하고 난 후, getStream을 어떻게 이용해야하는지 완전히 감을 익혔다. 특히 효정님은 무서운속도로 업무를 진행하셨다. 막판 스퍼트가 엄청났다;

그 외 몇 가지 이슈가 더 있었다.

1. query를 이용해서 filter에 적용한 후 event가 발생할 때마다 모두 서버로 통신을 날려서 결국 429 에러가 뜨고 다운되어버리는 현상이 발생했다.

   • 해결방법으로는 debounce를 걸어서 해결했다.

   • debounce에 useMemo로 감싸서 렌더링 성능을 최적화 해보려고 시도했는데, 결과적으론 삭제했다. 이 블로그 글을 읽고 난 후, 생각이 바뀌었다. 성능차이는 거의 없으나, 코드만 더 지저분해졌다는 생각이 들었다.

2. 가장 최근 메세지가 chatlist창에 뜨도록 구현
   
   빨간박스안에 chatlist들 중 두 번째 줄은 가장 최신 메세지를 띄우도록 구현했다.
   렌더링 성능을 최적화해보고 싶어서 다음과 같은 시도를 했다.

• console창으로 렌더링 될 때 console이 몇 번뜨는지를 확인하며 진행했다.
• useCallback으로 감싸준 뒤 렌더링 6번씩 반복되던게 3번으로 줄일 수 있었다.
• 특히 ?연산자를 알게 된 것도 큰 수확이다. async와 await도 어느정도 감을 잡을 수 있었다.

3. 채팅창 생성시 type 오류 발생

• 채팅창 생성버튼의 위치를 조정해주고, icon을 수정하는 과정에서 onClick event에 CreateType을 props로 내려주지 않았다는 것을 알게됐다.
• type을 설정해주니 정상적으로 잘 동작했다.

4. emoji piker가 동작하지 않음
   <ImageDropzone>안으로 <EmojiPicker>를 넣어주니 정상적으로 동작했다.
   <ImageDropzone>은 useContext 같은 개념이었다.

5. 프로필 image 설정하는 과정에서 무한렌더링 발생

• firebase에서는 일일 할당량이 존재하는데, 무한렌더링이 동작하는 부분을 주석처리 한다는 것을 깜빡하고 밤새도록 켜놓은 결과 일일 할당량이 초과해버렸다.

• 온전히 내 잘못이었고, 이틀 뒤 발표인데 효정님께 엄청엄청 죄송했다.

• 결국 내 google 아이디로 firebase와 firestore를 다시 만들어서 빠르게 대처했다.

  이외에도 모두 적지 못할 만큼 많은 이슈들이 있었음 !!!
  rebase하는 과정에서 스타일 깨져버림(ㅠㅠ),
  중괄호 소괄호 착각해서 return 넣어주지 않음 등등

느낀 점

항상 마지막 마무리는 어렵다. 무슨말을 적어야할까?
발표까지 잘 마무리하고 벌써 이 주라는 시간이 흘렀다. 발표를 하고 난 후 그간 피로가 몰려왔다. 효정님과 10시에 지하철에서 바로 인사하고 집에가서 뻗어버렸다.

못다한 이야기를 조금 풀어보자면,

문화

먼저 스타트업에서 기업문화를 접할 수 있었던게 좋았다. 주니어개발자(너무 감사한 🙏)분은 모르는게 생기면 바로바로 CTO님께 여쭤보고 문제를 해결하는 모습을 봤다.

모르는게 생겨서 끙끙앓는 것보다 빨리 해결하고 다른 일에 집중할 수 있는 유연함이 부러웠다.

책임감

유연한 스타트업이지만, 주어진 유연한 만큼 책임감이 따른다는 생각을 했다. 자유가 주어지는 만큼 업무에 있어서 빈틈이 없어야한다는 점을 배운 시간이었다.

디자이너분과 협업

figma를 이용해서 디자이너분이 잡아주신 레이아웃을 구현해봤다는 경험을 얻었다.

• figma에서 잡아주는 스타일을 최대한 따라가되, 무조건적일 필요는 없다는 생각을 했다.

• 추후 확장성을 고려해서 고정값(height, width)이 주어져있다면 지워버리는 과감함도 필요했다.

• 고정값을 그대로 적용하지 않고 calc()를 이용해서 비율(%)로 적용해보려는 시도를 했다.

채워야할 부분

채워야할 부분이 명확히 그려졌다. 특히 커뮤니케이션에서는 당시 상대방의 생각을 물어보기 보단, 에러코드를 보여주며 어떻게 해결할 수 있는 명확한 해결방법을 물어봐야한다는 점을 알게됐다.

그리고 조금 부끄러운 이야기지만, 영어가 발목을 잡았다. 넵튠클라우드에는 네덜란드 AI개발자분이 계시는데, 영어를 못해서 친해질 기회가 없었다. AI는 나도 관심있는 분야이고 물어보고 싶은게 많았는데 준비되어 있지않으면 기회를 놓친다는 것을 실감했다. 🥲

좋은 인연

1차 프로젝트 발표 전 날 버스를 놓쳐서 심야버스를 탄 적이있다. 근데 다음 정거장에서 낯익은 얼굴의 남자가 내 옆자리로 왔다. 동기분이였다.

집에가는 50분정도의 시간, 90%는 개발이야기만 한 거 같다. 개발이라는 분야에 뛰어들고, 점차 개발자들을 알게되면서 개발이야기를 할 곳이 많아진다.

비전공자 출신인 내가 누군가에게 나의 개발성향 및 관점에 대해서 말할 수 있다는 것. 그리고 새로운 기술 분야에 대해서 이야기하고 몰랐던 부분을 알아가는 기분은 '기쁘다.'라는 표현을 넘어서 '황홀하다'라고 표현하고 싶다.

오랫동안 고민했고, 하고 싶었던 일을 하고 있다.
계속. 꾸준히. 개발 하고싶다-