프론트엔드 개발자가 되겠다는 마음하나 갖고, 위코드에 입성한지 4주일이 지났다.
HTML CSS 그리고 JS로 2주간의 프리코스를 끝낸 후에, 2주간 리액트 수업을 들었다. 리액트는 내 생각보다 복잡했고, 이 라이브러리를 잘 할수록 할것이 많아질 것 같다는 느낌이 직관적으로 들었다.
그 후, 1차 프로젝트 시기가 도래했다!
1차 프로젝트의 목표는 바로 쓰레드 따라하기!
잠깐! 쓰레드가 무엇인지 모르는 분들을 위해 설명하나 들어가겠다.
쓰레드는 메타(구 페이스북)이 최근 만든, 트위터와 유사한 서비스이다.
기존 인스타와는 다르게, 친구가 아니어도 보인다는 점이 나에게는 좋았다.
특히 로그인, 회원가입, 글쓰기 과정에서 백엔드와 협업하는 과정이 나에겐 신나는 일이었다.
데이터 분석가 코스에서도 느꼈지만, PM을 하면 가장 큰 성장을 하는 것을 느꼈기 때문에, PM을 자진했다. 사실 팀 내에 퍼블리싱 작업을 오래하신 분이 계셔서 쫄았는데, 다행히 PM을 양보해주셨다.
본격적인 업무는 오늘부터 시작했다. 프론트 , 백엔드로 나뉘어서 작업을 진행했다.
사실 나는 깃 레포지토리, 초기세팅은 처음이라 조금 버벅였던 것 같다. create-react-app 명령어 자체가 작동이 안되어서, 리액트를 삭제하고 다시 깔기도 하면서 차근차근 해결해갔다.
초기 설정에서 가장 까다로웠던 부분은 바로 개발을 도와주는 다양한 문서를 제대로된 곳에 저장하는 일이었다.
그림과 같이 기존에는 사용하지 않았던, .prettierrc .eslintrc등을 통해서 협업을 위한 기준을 마련했다.
그 이후로는 같은 프론트엔드 개발자분과 함께 작업을 진행했다.
기존에 리액트로 예습했던 페이지들은 한 페이지에 모든 요소를 다 그려줬다. 이번에는 컴포넌트 단위로 나누는게 어떴냐고 하셔서, 나도 좋다고 했다.
(지옥 시작.. 이었다.)
컴포넌트 단위로 쪼개는 것은 굉장히 수고롭지만 차후를 위한 효과적인 작업이기도 하다.
윗 사진 처럼, input요소는 여러군데에서 쓰일 수 있기 때문에 input을 컴포넌트로 만든다면, 수정 사항이 생길경우 한번에 관리할 수 있기 때문에 효과적이다.
내가 맡은 부분은 바로 input부분이기에 작업에 착수했다. 그리고 나는 고통의 3시간을 보내고 말았다..!
그도 그럴 것이 input과 관련된 활동이 많기 때문에 props로 넘겨줄 것들이 한 두개가 아니었던 것이다..!
보라! 이 무지막지한 props의 양을..!
이 코드를 들고 현업 프론트엔드 개발자님에게 다가가서 여쭤보니까, 많은게 정상이라고 한다.. 정말 다행이었다.
input.js 같은 경우에는 다양한 상호작용이 있는 만큼, 삼항연산자를 줘서 경우를 분류해놨다. 이 과정에서 괴랄한 props를 쓰고 있는 내가 재밌었다.
내일은 또 다른 컴포넌트를 만들고, 이 번주에는 프로젝트를 마무리할 것이다. 오늘 잠시 큰 벽에 도달한 듯 했지만, 이겨냈다. 이걸로 포기할 내가 아니잖아? 그지? 박살내보러가자!
