로컬푸드 주문 페이지 제작 프로젝트

🔎프로젝트 소개

• 참조 사이트 : 미래식당
• 프로젝트 기간 : 2022/08/29 ~ 2022/09/08
• 팀원 : Front-end : 4명 / Back-end : 2명
• github 주소 : Front-end / Back-end
• 사용된 기술 (front) : CSS, SASS, Javascript, React
• 협업 Tool : Notion, Slack, Zep, Zoom, Trello, Postman, Dbdiagram

Trello

프로젝트 시연 영상

 

프로젝트에서 맡은 역할

• 헤더, 카테고리, 메인 페이지 서브 캐러셀 UI 구현
• 위 기능의 동작에 필요한 API

 

💡회고

들어가며

 팀 레포에 리드미 작성을 마지막으로 1차 프로젝트가 완전히 끝났다. 첫 프로젝트였지만 계획했던 완성도는 거의 달성하고 마무리된 것 같아서 결과물도 마음에 들었다. 사실 프로젝트 중 겪은 오류나 배운 점들을 생각하면 중간중간 TIL도 썼어야 했는데 그러지 못한 점이 아쉬운 부분으로 남아있다. 그동안 미뤄왔던 정리도 하고 부족한 부분을 짚고 가기 위해 회고를 써본다.

 

리펙토링

 처음 해보는 기능들을 구현해보는 경험도 좋았지만 코드를 깔끔하게 만들려고 했던 노력들이 가장 기억에 남는다. 제대로 동작하게 하는 것도 중요하지만 내가 만든 코드를 다른 팀원이 써야 할 때 가독성이 좋고 추가, 수정하기 편하도록 만들고 싶었다. 처음부터 컴포넌트로 나누고 JSX 문법으로 쓰기에는 아직 미숙했기 때문에 자바스크립트 문법으로 우선 동작하게 만든 다음, 리펙토링 하는 과정을 거쳤다.

 

 내가 만든 코드뿐만 아니라 다른 분의 코드를 수정해야 할 일도 있었는데, 이때 실력이 부족함을 많이 느꼈다. 기본적으로 로직과 구조를 이해하는 데 한참 걸리고, 어떻게 분해해야 기존의 동작 방식을 해치지 않을지 고민하는데 시간을 많이 할애해야 했다. 그래도 어려워하는 팀원의 코드를 리펙토링 하고 문제 해결에 도움을 주면서 공부도 되고 팀에 기여할 수 있는 기분 좋은 경험이었다.

 

 프로젝트가 끝난 후엔 다른 팀의 코드를 열어보며 로직을 이해해보는 시간을 많이 가졌다. 이해 가지 않는 부분은 그 부분을 담당했던 분께 직접 연락해 설명을 부탁드렸는데 다들 적극적으로 도와주셨다. 기회가 된다면 다음 프로젝트에 써보려고 마음에 드는 로직들을 따로 메모해두기도 했다. 틈틈이 이런 과정을 통해 코드 이해력도 높이고 새로운 로직들도 배울 수 있는 시간을 가지면 좋겠다 생각한다.

컨벤션 / 초기 계획

 팀원들이 공통적으로 아쉬워했던 부분 중 하나이다. 시작하자마자 프로젝트 기간과 목표를 고려해 세운 계획은 당시 정할 수 있는 최선이었다 생각한다. 하지만 큰 틀부터 하나씩 설계한 게 아니라 당장 보이는 기능들의 구현에 힘을 쏟았고, 이는 시간 분배의 효율성을 떨어트려 마지막엔 어떤 기능을 포기할지에 대한 내용이 미팅의 주요 내용이 되었다. 

 

 컨벤션 역시 마찬가지였다. 공통적으로 지켜줘야 할 사항의 규칙이 정해져 있지 않아 생기는 문제는 각자 맡은 작업을 해결 후 원격 저장소에 붙이게 될 때 알게 됐다. 폰트, 특정 컬러 등 공통적으로 쓰게 될 스타일을 매번 각각 설정해 쓰고 있다던지 전역에 css를 뿌리거나 폴더 정리 등등 크고 작은 문제들을 겪게 됐다. 그래서 원격에 붙이자마자 반나절 정도는 팀원들끼리 컨벤션을 재설정하고 꼬인 부분의 교통정리에 힘을 쏟았다.

 

 위와 같은 문제를 해결하기 위해 잦은 미팅이 있었음에도 팀원들이 모두 참석해 해결점을 모색했기 때문에 금방 해결할 수 있었다. 다음 프로젝트부터는 큰 틀부터 세부 기능까지 쭉 훑어보고 우선순위를 기준으로 작업 단위를 쪼개서 어디에 힘을 주고 뺄지를 정해서 시작하고 싶다. 물론 실제로 코딩을 시작해봐야 알게 되는 부분도 있을 것이고, 계획과 달리 우선순위가 변경될 수도 있다. 때문에 팀원들과 현재 어떤 작업을 어디까지 진행했는지, 계획과 다른 점은 어떤 부분인지 피드백과 소통이 상당히 중요하다고 생각한다.

 

마치며

 내용이 길어질 것 같아 새로 배운 코드들은 따로 포스팅해볼 생각이다. 그 외에 라이브러리나 외부 API를 써봤던 것 역시 새로운 경험이었는데 커스텀해 사용하기 위해서는 공부가 더 필요해 보인다.

 

 약 2주간 능력 내에서 최대한 수행했다고 생각하지만 역량 부족에 대한 아쉬움은 쉽게 넘겨지지가 않는다. 시간을 어떻게 분배해야 할지, 어떤 방법이 효율적 일지, 무엇이 부족한지 등등 기간 내에 다 소화시키지 못할 정도로 많은 것들을 배우게 됐다. 다음 프로젝트에는 미흡한 부분들을 채워서 조금 더 효율적으로 작업해보고 싶은 바람이다.