(6주차 ~ 7주차)

리액트 심화과정 이후 회고

리액트 심화 과정 이후 새벽 3시 4시가 디폴트 취침시간이 될 정도의 바쁜 일정으로 그동안 일일, 주간 회고를 작성하지 못한 점을 깊이 반성하며, 늦게나마 한달가량 있었던 일들과 느낀점을 정리해보려 한다.

재정비 주간

개인 재정비 VS 미니 팀 프로젝트 선택 이유

클론코딩과 실전프로젝트에 돌입하기 이전 워밍업 과정으로 재정비 시간을 가지게 되었다. 개인별로 그간 배운 내용을 정리하는 선택과 팀별로 새로운 미니프로젝트를 진행하며 감을 잡는 선택이 있었는데, 리액트를 배운지 2주밖에 되지 않던 차였기에 생각보다 고민을 많이 했었다. 새로 프로젝트를 진행하기에는 나 자신이 스스로 리액트를 너무 얕게 알고 있다는 생각이 커서 혼자 공부를 해봐야하지 않을까라는 생각이 컸는데, 결과적으로는 프로젝트로 방향을 잡게 되었다. 그렇게 결정한 이유는 크게 두가지였다.

첫 번째, 나의 얕은 지식과 이해도가 단 1주일만에 내가 기대하는 만큼 놀랍게 성장하지 못할 것이라는 객관적인 현실이었다. 나는 생각보다 나 자신에 관한 평가가 관대하지 못한 편이기 때문에, 1주일을 투자해도 이후의 나의 실력이 나의 기대를 충족시키지 못할 가능성이 크다는 점이었다. 또한 내가 경험한 리액트와 프론트 개발의 세계는 너무도 방대했기에 1주일만에 무언가 터득하길 기대한다는 것은 자만과도 같다는 결론을 내렸다.

두 번째, 팀프로젝트로 얻게 될 경험의 가치가 더 클것이라는 판단이었다. 혼자 공부하는 경험은 결국 항해 과정이 끝난 이후 끝없이 하게 될 일이었고, 팀으로 움직이는 경험은 모든 환경과 사람이 갖추어진 지금이 아니면 경험자체를 할 기회가 적다는 점이었다. 또한 배워야 할 것을 배워야할 시기에 배우지 못한다면, 이후에 만나게 될 팀원들에게 피해를 줄 수 있기때문에 팀 프로젝트로 배워야 할 것을 배우는 것이 더 중요하다는 결론을 내리게 되었다.

미니 팀 프로젝트로 얻게 된 것

1. git 분산 버전 관리 입문 : 좋은 팀장님을 만나서 git branch 사용법을 익힐 기회를 얻게 되었다. 이전까지만해도 레포지토리가 뭔지, 브랜치를 판다는 것이 뭔지, 릴리즈 브랜치, 디벨롭 브랜치, 피처브랜치 들어본적도 사용해볼 생각도 해보지 못한 세계였다. 물론 개인 깃에서 레포를 파고 풀, 푸시, 가끔은 머지를 할 일도 있었지만 어디가서 깃을 써봤다고 말하기도 힘든 수준이었다고 생각한다. 하지만 이때를 시점으로 깃과 관련된 이슈들을 구글링하여 적용하는 법이나, pr을 날리고 conflict를 해결해 나가는 과정, 최대한 안전하게 브랜치를 다루는 법까지 git 사용에 관하여 많이 발전할 수 있었다. 이후 클론코딩에서 만나게 된 팀원들에게 브랜치 사용을 가르쳐 주고 있는 스스로를 발견하면서 보람을 느꼈던 경험이 인상적이다.

2. axios 사용 : 주특기가 나누어진 이후 처음으로 서버와 통신을 하는 경험을 했고, 이때 우리 서비스의 api에 요청을 하고 서버와 통신하는 방법으로 axios를 사용하게 되었다. 이전에 프로미스의 개념을 공부한 적은 있지만 비동기 처리에 관한 개념이나 공부가 부족했기에 처음 접했던 axios에 관한 느낌을 잡는 것이 초반에는 참 까다로웠다. 그래서 미니 프로젝트의 스콥을 대폭 축소하여 기본 CRUD를 axios를 활용하여 서버와 자유롭게 소통하는 것을 목표로 잡고 진행하게 되었다. 이 시기에는 인터셉터를 활용한다던가, 모듈화를 진행할 수준도 되지 못했었지만 Mock api, postman 등을 사용해보고 서버와 통신하고 의사소통을 하는 법을 배워서 의미있었다.

3. 백엔드와 소통하기

   • 나의 현 주소를 솔직하게 이야기하는 법: 처음 협업을 하면서 가장 당황스럽고 어려웠던 부분이 바로 소통이었다. 주특기가 나뉜지 고작 2주라고 생각했는데, 그 사이에 프론트와 백엔드의 갭이 엄청 벌어져있었다. 서로가 사용하는 용어들을 이해하는 것도 어려웠고 특히 그 동안 파이어베이스로 서버리스 개발을 했기에 어떤 부분을 프론트가 맡아서하고 어떤부분까지는 서버에서 해줘야하는지 판단하기 힘들었다. 그래서 첫 회의가 끝날 무렵, 서버가 나누어진 현 상황에서 우리가 무엇을 모르고, 무엇을 못하고 어디까지는 해줄 수 있는지 조차 감이 오지않아서 의견을 내거나 요구사항을 수락하는 것마저 어려움이 있다고 솔직하게 이야기하게 되었다. 덕분에 서버분들과 빠르게 스콥과 목표를 수정할 수 있게 되었고, 작은 것부터 더 나아간 목표를 달성하는 방향으로 가닥을 잡을 수 있었다.
   • api 네이밍과 CORS 이슈 : 서버와 작업하면서 소소하게 에러가 가장 많이 났던 부분이 바로, 변수명이었다. 처음 잡아둔 api 설계 내용과 달라진 부분이 생겼을 때, api문서가 바로바로 업데이트가 되지 않거나 서로 변경사항을 제때 알리지 않아서 생긴 버그들을 잡는 것에 시간을 많이 써버렸던 점이 아쉬웠다. 또한 cors로 서버분들이 애를 먹으셨는데 그 대안으로 처음에 프론트쪽에서 프록시를 써서 우회하는 방법을 사용했다가 서버와 함께 작업하는 환경에서는 사용하면 안되는 방법이라는 것을 알게되어 한 동안 해당 문제로 서버와 다양한 실험 끝에 서버에서 해당 설정을 열어주는 것으로 방법을 찾았던 기억이 있다.

클론코딩

첫 팀장 경험

항해를 시작하고 7주만에 처음으로 팀장을 하게 되었다. 팀원으로서 분위기를 띄우고 의견을 조율하는 일에는 최적화가 되어있다고 자부하지만, 팀장은 너무 다른 문제였기에 긴장을 참 많이했던 기억이있다. 게다가 함께하게 된 팀원분들이 함께 프로젝트를 진행하기엔 쉽지 않은 부분이 있었기에 난감한 상황을 참 많이 겪었다.

첫 난관 - 클론 코딩할 주제 정하기

• 문제 해결 과정

1. 작은 목표 세우기
   우리 팀의 구성은 프로젝트 경험이 있는 서버 한 분과 아직은 개발이 낯선 서버 한 분, css를 겨우 다룰 수 있는 정도의 프론트 한 분, 그리고 나였다. 처음 상황을 파악하고 개발 스콥이 커지면 아무것도 성취하지 못하고 한 주를 날려버릴 수 있겠다는 판단이 선 뒤 남들이 보기엔 작고 미미해도 각자가 이번 프로젝트를 통해 이루고 싶은 목표를 설정하게 했다. 이 후 이미지를 다뤄보고 싶다는 서버의 의견과 소셜 로그인을 구현해 보고싶었던 나의 의견이 반영되어 tenor 라는 해외 gif 사이트를 정하게 되었다.

2. 각자의 능력 파악하기
   이후 개발 스콥을 정하기 위해 최소한의 목표를 제외 후 각자가 할 수 있고 할 수 없는 것들을 파악하여 각자 맡을 파트를 분배한 뒤 목표 달성 이후 추가 될 기능으로 검색과 이미지 업로드 기능을 넣었고, 수정과 삭제 기능은 과감히 제외 시키는 결정을 하게 되었다.

두번째 난관 - 실력을 떠나 포기하지 않고 함께 프로젝트 완수하기

• 문제의 발단
  나와 함께 하게된 분께서 git add, log, commit 등 모르는 것이 너무 많은 상태이셨고, 리액트의 부모 자식 개념, state, props, redux 등의 개념도 잘 잡히지 않은 상태였다. 처음에는 참 당황스러웠던 것 같다. 협업을 하려면 git을 사용해야 했는데 항해를 시작한지 두달이 다 되어가는 시점에서 아무것도 모른다는 태도로 계시니 어디에서부터 알려드려야 하는 지 난감했었다. 그럼에도 내가 조금도 나은 것이 없다는 마음으로 지금껏 나를 도와주셨던 많은 분들을 떠올리며 정말 성심성의껏 가르쳐드렸던 것 같다. 또한 가르치며 배운다는 것이 얼마나 효과적인 학습방법인지도 알기에 이참에 나 역시 개념을 잡자고 다짐하며 마음을 다잡았었다.

• 해결 과정

1. git 설명 : 우선 협업을 가능하게 하려면 당장 시급한 git 사용법을 알려드려야 했기에 git branch를 나누는 이유와 목적을 설명드리고 명령어들과 이슈를 다는 방법 등을 앞으로 우리가 git을 사용할 방식과 flow에 따라 구조화 하여 알려드렸다. 이후 따라 생기는 문제와 질문들은 구글링을 통해 스스로 해결해 보실 수 있도록 키워드를 안내해드렸다.

2. 작업 파트 분배 : 리액트에 관한 이해도가 강의 내용의 대부분을 따라오지 못하는 상황인 것으로 판단 되어 작업 파트 분배를 기본 적인 뷰를 만들어 보는 것으로 잡아드렸고, 이후 모듈 작성하는 법과 axios를 공부해보고 적용해보는 방향으로 가닥을 잡아나갔다. 그럼에도 pr 이후 merge 하여 적용할 수 있는 코드들이 많지 않았고 기본적인 css로 뷰를 잡거나 styled commponent에서의 props 개념을 활용하는 것이 자유롭지 못해 상당 부분을 저 혼자 감당해야하는 상황이 많이 생겼다.

3. 양보와 희생 : 솔직한 심정으로 정신적으로 많이 힘들었다. 주변에 조언을 듣고 면담을 하기도 했는데 단순히 누군가 실력이 부족하니 싫다는 부정적인 감정때문이 아니었다. 처음 팀장을 맡았고 실력을 떠나 열심히 하는 분이라면 끝까지 함께 얻어가는 것이 있고 결과를 내는 팀을 만들고 싶었기 때문이었다. 어떻게 하면 그 목표에 다다를 수 있을지 고민이 많았고, 그 결론으로 나의 욕심을 조금 버리자는 것이었다. 누군가는 그 사람을 포기하고 혼자 잘해서 혼자 이루고 싶었던 목표까지 성취해내면 그만이라는 조언을 하기도 했었다. 하지만 나는 그것이 앞으로 내가 지향해야할 태도는 절대 아닐 것 이라는 생각이었고, 내가 조금 느려지고 힘이 들어도 지금의 내가 상대방을 도와 조금의 성장이라도 이루어 낸다면 그 다음에 그 분과 협력할 누군가까지 내가 도와줄 수 있는게 아닐까, 그 사람이 다시 내가 된다면 미래의 나를 위한 일이기도 하다는 생각을 했다. 더 나아가 앞으로 그분과 협업하게 될 수 많은 사람의 시간을 아끼는 일에 내가 기여한 택이 되니 지금 나의 희생이 더욱 빛날 것이라 생각했다.

   그래서 매일 진도 체크를 하며 코드를 설명해 드리거나 찾아볼 내용을 정해드리고 본인이 할 수 있겠다고 하는 부분의 스콥을 다시 정해드리고, 내가 처음 욕심내었던 클론코딩의 뷰나 기능은 잠시 내려두고 그 분도 우리 프로젝트에서 기여했다는 성취감을 얻어가실 수 있도록 최대한 스스로 해볼 수 있게 도와드렸다.

• 결과

1. 목표 MVP 기능 달성 : 처음 시도했던 소셜로그인 기능을 서버와 함께 합을 맞추는 부분에 있어서도 순탄하지 않았지만 관련 정보를 찾아 정리해드리며 성공적으로 구현하게 되었으며, 제목을 기준으로 이미지를 검색하는 기능과 업로드까지 구현해 낼 수 있었다.

2. 반응형 뷰 : 처음 반응형을 뷰와 모달을 만들때는 막막함이 컸었는데, 이 프로젝트를 진행하면서 rem을 사용하는 것과 미디어 쿼리, display를 적절하게 사용하여 반응형을 만들어 내는 것에 성공한 것 같아 뿌듯했다.

3. 훈훈한 팀 분위기 : 처음에는 사실 걱정이 많았고 서버와 프론트 간의 소통도 쉽지 않았지만 서로 양보하고 희생했던 덕분에 목표했던 기능 구현에 성공하면서 마무리가 정말 훈훈했었다. 걱정했던 분들도 다들 뿌듯해하시고 뭔가 우리가 해냈다는 성취감을 얻어가셨는지 마지막에 서로 감사인사를 전하고 격려하시는 모습이 보기 매우 좋았다. 이 부분이 이번 프로젝트에서의 가장 큰 성취가 아닐까 생각한다.

2주간 얻은 것

협업 === 의사소통

협업은 시작도 끝도 의사소통이라는 것을 절감했다. 그것은 주특기를 떠나 매우 중요한 부분이었다. 심지어 문제를 해결하기 위해 다른 팀이나 튜터분들께 조언을 얻는 과정도 모두 의사소통이었다. 이로서 왜 회사에서 의사소통을 그렇게 중요한 덕목, 인재상으로 보는지 알 수 있는 부분이었다. 의사소통이 되지 않았을 때 허비되는 시간과 노력이 엄청났고, 그로인한 감정 소모도 만만하게 볼 것이 아니었다. 또한 협업을 한다고 한 이상 절대 혼자 잘해서 혼자 잘나서 해결되는 것은 없다는 것이었다. 개인의 실력향상은 디폴트로 가져가야하는 것이지 프로젝트에서 한마디로 혼자 캐리한다고 능사가 아니라는 점이다.