본문 바로가기
프론트엔드

[비전공자 개발자되기] 제로베이스 프론트엔드 스쿨 5개월 차 후기

by 인수수 2022. 6. 30.

과제 말고 우리끼리 하는 팀 프로젝트

리액트 재탕

 저번 과제 프로젝트에서 우리 팀은 리액트를 사용했다. 이번에는 뷰를 사용할 수도 있었는데 프로젝트에 왜 리액트를 사용했냐고 물어보신다면, 아무래도 많은 기업들에서 리액트를 사용하고 있어서가 가장 컸다. 코딩 부트캠프이다 보니 취업이 우선이고, 취업에는 기업이 요구하는 조건을 만족시키는 것이 중요하니까 말이다. 그리고 여러 가지 언어를 아는 것도 중요하지만 한 가지 언어를 제대로 알고 있어야 한다는 생각도 있어서 이번 프로젝트에도 리액트를 사용하게 되었다.

 다만 저번 프로젝트와 다르게 사용한건, 타입 스크립트를 사용했다는 것이다. 저번 글에서 밝혔다시피 나는 제로베이스 스쿨 우수 수강생으로 뽑혀서 강사님과 함께하는 라이브 세션을 진행할 수 있었다. 그 라이브 세션 때 강사님이 타입 스크립트, tailwind css를 이용해 보는 것이 어떻겠냐고 하셔서 그렇게 프로젝트를 하기로 했다. 사실 리액트를 이용하려던 게 배웠던걸 숙달해나가는 과정이고 싶었던 바람도 있었다. 하나 이번에도 새로운 것을 접목시켜서 배우면서 즉각적으로 프로젝트로 보여야 하는 셈이 되었다. 좀 어려웠지만.. 그래도 그냥 자바스크립트랑 엄청 다른 게 아니어서 그럭저럭 쓸만했다. (사실 아직도 오류에서 버벅거리고 있다..ㅎ)

 

팀 프로젝트 주제 선정

 프로젝트 주제를 선정하는 데에는 조장의 덕이 컸다. 오픈 API가 있어야 뭔가를 만들 수 있었기 때문에 그 오픈 API를 찾는게 중요했다. 첫 회의 때 조장이 오픈 API주소와 함께 주변인의 불편 사항도 말해주었다. 그 불편사항을 개선할 수 있는 '영화 검색 사이트'를 만드는 것을 제의했다. 나를 포함 나머지 팀원들은 좋은 생각이라며 그 주제로 진행하기로 하였다. 하지만 프로젝트를 진행하려면 일단 디자인이 나와야 프로젝트를 진행할 수 있었다. 내 전공이 웹 디자인은 아니지만 어쨌든 디자인계열이기 때문에 내가 디자인을 해보겠다고 했다. 일주일의 기간이 주어지고 그때 동안 회의에서 나온 페이지들을 디자인해야 했다.

피그마에 옮겨놓은 레퍼런스

 핀터레스트에서 참고할 이미지들을 피그마로 옮겨놓고 조금씩 참고하며 페이지를 디자인했다. 디자인은 무엇을 디자인을 하던지 진행과정이 비슷하기 때문에 이런 것들은 도움이 되어서 내 전공에 조금 고마웠다.

팀프로젝트 와이어프레임

 내가 일주일간 만든 와이어프레임이다. 진짜 웹디자인하는 사람이 보면 디자인적으로 많이 떨어질지 모르겠지만.. 나는 그럭저럭 나쁘지는 않게 만들었다고 생각했다. 이 와이어프레임을 팀원들에게 보여줬을 때 팀원들의 반응이 너무 좋아서 당황했다. 너무 신기하다며 언제 이렇게 만들었냐고 칭찬해주는데 너무 고마웠다. 

부끄러우니 이미지를 작게 하겠다.

++얼마 전에 발견한 건데 강사님이 코드 리뷰를 해주시면서 나에 대한 칭찬을 해주셨다 ㅜㅜㅜ 프론트엔드를 하면 내 전공이 완전 무쓸모는 아니겠구나라는 생각에 한번 더 안심을 하게 된 계기이다.

 

파이어 베이스가 뭐죠..?

파이어베이스 홈페이지 캡처

 파이어 베이스는 구글에서 운영하는 백엔드?? 역할을 하는 개발 플랫폼이다. 자세히는 모르겠는데 이 플랫폼을 이용하여 우리가 만든 사이트의 사용자 정보나 API에서 가져온 정보들을 관리할 수 있다. 사실 나는 위에 웹 사이트 디자인하느라 타입 스크립트 배우는 게 조금 늦어져서 개발하는 것을 버벅거리고 있었다. 거기다가 내가 만들어야 하는 페이지에 파이어 베이스를 이용해야 한다는 사실을 알았을 때 조금 버거웠다. 하지만 계속 팀원들에게만 기댈 수 없어서 유튜브를 찾아보며, 팀원들을 코드를 참고해가며 어떻게 어떻게 구현은 해냈다.

더티 코드

 너무 구현에만 중점을 둔 나머지 내가 봐도 내 코드 페이지가 너무 더러웠다. 길이도 길고, 뭐 하나 찾으려면 여러 번 스크롤해야 했다. 다른 팀원들의 페이지를 볼 때마다 현타가 왔다. 결국 회의 때 팀원들에게 도움을 요청했다. 어떻게 하면 저렇게 깔끔하게 코드를 쓸 수 있냐, 내 코드가 너무 더러워서 나도 보기 싫다. 이런 식으로 말했더니, 나와 공통된 데이터를 쓰는 팀원이 redux-thunk를 이용해서 데이터를 깔끔하게 정리해주었다. 그 덕분에 나도 훨씬 줄어든 코드로 나름 깔끔하게 코드를 수정할 수 있었다.

 진짜 리액트에 엄청 많은 라이브러리가 있는데, (이 생태계 때문에 리액트를 사용한 거긴 하다..) 알아야 잘 쓸 수 있을 것 같다.. 공부할 게 넘쳐나서 조금 힘들지만, 그래도 꾸준히 배우고 익혀야겠다!!

 

5개월 차의 결론 

 저번 글에서 팀 프로젝트 말고 개인 프로젝트도 진행하겠다고 다짐했는데.. 결국 실천을 못했다.. 예상보다 더 많이 일어나는 오류를 수정하느라(내가 제대로 익히지 못한 채로 프로젝트를 진행하려니 오류가 많이 났다 ㅜ) 시간이 많이 지연되어서 벌써 6월이 다 지나갔다.. 다음 달이면 제로베이스 프론트엔드 스쿨도 끝이 난다. 한 달 남았는데 남은 기간 동안에는 제대로 익히지 못했던 부분까지 꼼꼼히 익혀서 취업을 준비해야겠다.

 

이 글은 소정의 대가를 받고 작성됨