프로그래머스 1차 프로젝트

프로그래머스 첫 팀프로젝트는 바닐라js만을 이용해 노션 클론닝을 하는 것이다. 4일 동안 요구 사항을 구현하고 시간이 남으면 추가 기능을 구현하는 것이 프로젝트의 목표였다.

사전 회의 📝

프로젝트 시작이 월요일이라 우리는 금요일 WTL이 끝난 후에 미리 프로젝트 요구사항을 분석하고 UI와 기능을 어떻게 구현해 낼지 결정했다. 우리가 해야할 구현 사항은 사이드바, 에디터 페이지, 라우팅, 자동저장 기능 이렇게 4가지로 기본 기능을 구현하기로 했고 시간이 남는다면 브레드크럼, 사이드바 접고 펴기, 사이드바에 애니메이션 적용과 같은 것들을 하기로 했다. 나는 라우팅 작업을 맡게 되었다.

사전 작업

우리는 UI를 작업하기 위해 Figma를 사용했다. 우리가 직접 디자인을 해야하나 고민하다가 무표 템플릿이 있다는 것을 보고 우리 팀 작업 공간에 노션 무료 템플릿을 가져와 색상값 분석, 폰트 크기 및 스타일 분석, 레이아웃 분석, 컴포넌트 분석해 피그마에 코멘트를 달았다. 그리고 컨벤션 동일화시키는 작업을 진행했다. EsLint(air-bnb), Prettier, 카멜케이스 작성, Angular.js 커밋 메세지 이렇게 컨벤션을 맞추었다.

프로젝트 시작 👨🏻‍💻

팀장님을 제외한 팀원들의 프로젝트 경험이 거의 없어 우리는 먼저 우리가 구현해야할 기능을 공부하기로 했다. 나 또한 리액트를 가지고 교회 출석부를 만든 것이 전부여서 express를 가지고 라우팅 하는 것에 잘 모르고 있는 상태였고 라우팅 작업이 가장 먼저 되어야 팀원들이 원활하게 진행할 수 았다. 그래서 팀원들의 노력이 무산될까 하는 걱정이 가득해 더 책임감을 가지고 했다.

고난을 마주하다 😭

그래서 라우팅 그거 어떻게 하는데 🤨🤨

강사님이 직접 작성 하신 코드들을 참고하라고 프로젝트 시작 전 주에 알려주셔서 자료를 참고해 프로젝트를 진행하면 되겠다는 생각에 걱정이 조금은 줄어들었다. 하지만 방심은 금물이란걸 잊지 말아야했다. 팀장님이 기본 폴더구조와 레이아웃을 잡고 깃허브에 올려주셔서 pull을 받고 진행할려고 했다. 코드를 보는데 이해하기 힘들었고 어떻게 라우팅을 해야할지 막막했다… 서버를 구축하는 것에 거의 6시간을 썼다. 다행히 npm start를 하게 되면 local 환경에서 index.html을 제공하는데 까지는 성공했다…! 다음은 작업 페이지를 만들때, 리스트를 클릭했을때 해당 id 값을 가지는 페이지로 이동시켜줘야 하는데 막막 그 자체였다. 그래서 난 강사님께 도움을 요청했고 잘 해결 할 수 있었다…ㅎㅎ 근데 페이지를 새로 고침 하면 현재 페이지가 아닌 계속 index.html을 제공하는 문제를 발견했다. 한 2시간을 고민하다가 현재 path를 받아와서 id 값을 할당해 id 값에 맞는 페이지를 제공하는 해결책을 찾을 수 있었다.

데이터 가져오기 ☁

라우팅을 다 마치고 다른 팀원들의 작업들을 도와주기로 했다. editor에서 내용을 동적으로 생성해야 하는 기능을 작업해야 했다. 그래서 데이터를 가져오는 getDocument 함수는 작성되었지만 어떻게 적용해야 할지 몰랐다. app.js 에서 Editor를 생성할때 getDocument를 인자로 넘겨주기도 했고 여러 삽질과 추적을 통해 6시간만에 데이터 가져오기를 성공했다. Editor의 내용을 렌더링하는 함수 안에 const data = await getDocument(id) 만 작성하면 됐다. 안도는 되었지만 조금 억울했다

git 충돌 💥

프로그래머스에서 제공하는 저장소에 각 팀의 브랜치들을 생성하고 우리가 작업한 코드들을 우리팀 브랜치에 push를 해서 작업을 해야했다. 다들 git에 익숙하지 않아서 걱정을 안고 시작했다. 하지만 난 다행히 교회 출석부 프로젝트를 진행하면서 나름 다양한 충동들을 만나봤기에 이것만큼은 자신이 있었다. 최대한의 충돌을 피하기 위해 git 전략을 구성하고 헷갈린다면 무조건 팀원에게 도움을 요청하자고 정했다. 먼저 우리 팀 브랜치를 main 브랜치로 두고 각자 branch를 생성후에 main(우리팀 브랜치) 최신화 후에 main에서 merge하는 방식으로 진행하기로 했다. rebase를 하고 싶었으나 git이 처음인 팀원들이 있어 혼동이 있을거 같아 merge로 하는 것을 선택했다. 충돌의 대부분은 git pull을 통해 최신화를 먼저 하지 않고 main 브랜치에서 작업을 했을때이다. 이럴때는 git stash로 작업한 것들을 두었다가 git pull main 후에 git merge (작업 브랜치) 하면 해결할 수 있었다. 즉 git pull을 생활하자! 팀원들이 충돌을 마주하면 “죄송한데 이것 좀 봐주실 수 있을까요”라는 말과 함께 나를 불러주었는데 난 오히려 한번 더 배울 수 있고 설명해 줄 수 있다는 점에 좋았다.

추가 기능 구현

다행히 프로젝트 마감까지 6시간이 남았다. 발표 자료도 준비해야 했지만 난 하위페이지를 이동하는 버튼을 시간 내에 작업할 수 있다는 생각이 들어서 해보기로 했다. editor에서 가져온 데이터에 하위 페이지에 대한 데이터도 같이 있기에 나는 하위 페이지 데이터를 가지고 버튼을 렌더링 하기로 했다. 근데 백틱 안에서 순회문을 돌릴려면 map을 사용해야 한다는 것을 이번 프로젝트를 준비하면서 알았다.그래서 map 메서드를 가지고 버튼 렌더링, 하위 페이지 이동 까지는 성공했지만 버튼들 사이에 ,(쉼표) 텍스트가 같이 붙여져서 나오는 에러를 만났다. 찾아보니 map은 반환할때 array의 형태로 반환을 하고 배열을 문자열로 처리하면 쉼표가 자동으로 삽입된다는 것이다. 그래서 join을 함께 사용해 에러를 해결할 수 있었다.

마침 🎬

프로젝트 제출까지 다 마추었고 팀 발표가 남았다. 다른 팀들의 결과물들을 보니 우리보다 다 잘했다고 생각이 들고 내 실력이 좀 더 좋았다라면 시간 낭비 없이 팀원들을 도와 좋은 결과물이 나오지 않았을까 생각된다. 팀 발표가 끝난후에 1시간 정도 팀원들과 얘기할 수 있는 시간이 있었다. 평소 같았으면 다들 마이크를 끄고 개인 공부하기 바쁠텐데 이번에는 평소 묵혀둔 얘기들을 했다. 서로 이제 정 붙였는데 떨어지게 되어서 모두 아쉬워했다… 정말 우리 팀원들 항상 열심히 이어서 최고였습니다~~~ 이번 첫 프로젝트를 통해 목표한 것들이 있었다. 1. 배워서 남주기, 2. 서버와의 통신 이해하기, 3. 클린 코드 작성, 4. 많은 에러 경험하기 중에 1,4번은 달성한것 같고 2,3번은 달성하지는 못했던것 같다. 그래서 다음 프로젝트에서는 달성하지 못한 목표들을 이루었음 좋겠고 기간이 정해진 프로젝트를 진행하다 보니 시간내에 구현해내야 한다는 압박감이 있었지만 오히려 더 집중할 수 있는 기회가 되었던것 같다. 다음 프로젝트에서는 좀 많이 성장한 상태로 프로젝트 진행을 했으면 좋겠다.