6월에 엘리스 AI트랙 5기에 참여한 게 엊그제 같은데 벌써 10월이다.
프론트엔드 개발자라는 목표를 가지고 지금보다 부족한 실력 상태에서 시작하여 4개월이 흐른 지금, 나는 얼마나 성장했을까. 꽤 많은것을 배운 느낌인데 아직 내것이라는 감각은 확신할 수 없다. 그렇지만 이제는 내가 원하는 부분이 있다면 미약하게나마 구현할 수 있게 성장한 것 같다. 동시에 목표와 현재 실력의 간격을 확인할 수 있게 되었다.
오늘은 엘리스 2차 프로젝트를 회고해볼까 한다.
1. 엘리스 AI트랙 5기, 두번째 프로젝트의 시작.
1차 프로젝트와 데이터 분석까지 완료된 상황에서 진행된 이번 2차 프로젝트.
3주간 진행되는 2차 프로젝트는 1차와 많이 다르게 진행되었다.
우선 1차 프로젝트와는 달리 스켈레톤 코드가 주어지지 않았고 처음의 기획부터 배포까지 한 팀에서 진행해야 했다. 본격적인 개발에 앞서 환경이라는 주제가 주어졌고 걸맞는 구체적인 솔루션과 기획이 이뤄져야 했으며 데이터분석에 있어서는 어떤 데이터를 쓸 것이고 결과를 도출할 것인지 방향성을 정하는 것도 포함이었다.
1차 회의때는 간단하게 인사를 나누고 포지션과 규칙을 설정했다. 이번 프로젝트에서 나는 Front end 포지션에 팀장을 맡게 되었다.
02. 프로젝트 소개
이번에 진행된 프로젝트는 환경이라는 주제로 우리나라에 위치한 여러 국립공원 중 산을 중심으로 환경 정화와 등산을 도모하는 클린 하이킹 서비스이다. 공공데이터포털의 국립공원 관련 데이터셋을 기반으로 전국의 국립공원 지정 산의 연간 쓰레기량을 측정하였다. 이를 통해 쓰레기량을 시각적으로 한눈에 보여지게 그래프화 함으로써 환경정화에 대한 심각성을 알리고 다양한 정보와 커뮤니티를 제공함으로써 환경 정화를 도모하는 것이 서비스의 목적이었다.
Clean-hikers repo (Github)
GitHub - euion/clean-hikers: 국립공원을 중심으로 환경을 개선할 수 있는 등산 커뮤니티
국립공원을 중심으로 환경을 개선할 수 있는 등산 커뮤니티 . Contribute to euion/clean-hikers development by creating an account on GitHub.
github.com
- 기간: 2022. 10. 03. ~ 2022. 10. 21.
- 개발 인원: 6명( FE 4명, BE 2명)
- 기술스택 : REACT, Antd, node.js, MongoDB, VM
03. 프로젝트 진행
프로젝트를 진행하면서 여러 어려움이 있었지만, 크게 어려움을 느낀 부분은 새로운 기술스택의 도입과 팀원 및 일정관리였다. 특히 이번에 CSS 프레임워크로 Antd를 처음 사용하게 되어 큰 어려움이 있었다. 그러나 이를 해결해가는 과정 하나하나가 나에게 새로운 가르침을 주었다. 이번 단락에서는 내가 작업했던 내역 위주로 기술해볼까 한다.
- 1) Ant design의 사용
이번 프로젝트에서 사용한 CSS 프레임워크 Antd는 styled-component에서 사용하려면 그 컴포넌트 자체를 변경하는 방식으로 적용되었기에 이를 적응하는데 큰 어려움이 있었다. 부트스트랩과 CSS코딩만 해본 터라 그 방식을 익히는것이 꽤 힘들었다. 그래도 Ant design에서 제공하는 여러 컴포넌트는 깔끔하고 눈에 편한 디자인으로 되어 있어 결과물을 완성한 이후에는 만족감이 들었던 부분이다.
-2) 병합 및 브런치 관리
팀장이 병합관리를 맡아서 진행하는 게 훨씬 수월할 것 같아 내가 병합을 맡았다. 다년간의 병합 경험으로 이제 병합에 대한 거부감이 사라진 터였다. 병합 관리는 틈틈히 해둔덕에 그렇게 엄청난 충돌은 없었다. 그리고 무엇보다 터미널 위주로 작업을 하던 내게 git graph Extension 은 혁신이었다... 아직 터미널이 좀 더 편해서 터미널과 곁들여서 사용했다. 그런데 브런치마다 진행속도가 달라 병합하니 이전에 했던 작업이 덮어씌워져서 했던 작업을 다시해야 하는 일도 있었다. 깃 로그 다 확인해서 겨우 해결했던 경험이 있다.
- 3) 데이터 분석과 React 폴더구조 초기세팅
초기 React 폴더구조를 세팅하였다. 대표적으로 src 폴더에 page 폴더, component 폴더, 그리고 공통 요소가 적용되는 common폴더로 나누었다. 폴더구조 세팅은 라우터 관리에도 용이하게 작용하였다.
그리고 데이터 분석이 가미된 프로젝트이기에 데이터 분석을 위한 환경 세팅을 진행했다. 각자 데이터분석 자료를 수집했고 그 중 양질의 자료를 취합하여 데이터 분석 자료로 사용하였다. 우리팀의 경우 원활한 데이터 분석을 위해여 주피터 노트북을 사용했다. 하지만 주피터 노트북은 VS code 기반의 IDE를 사용하는 우리팀의 작업에 번거로움을 줄것 같았고 VS Code에서 주피터노트북을 사용할 수 있도록 환경세팅을 하였다.
환경 세팅은 어렵지 않았지만 .csv자료를 불러오는 작업에 계속 문제가 생겼다. 한글로된 CSV 파일이었는데 여러 방법을 써봐도 도저히 해결되지 않았다.
결국 데이터분석 코치님께 여쭤보아서 해결하였다. 이유를 모르겠지만, csv파일의 자체의 문제였다는 피드백을 받았다. 이건 해결루트를 포스팅 해볼 예정.
-4) React 상의 커뮤니티 CRUD & 댓글 Create, Delete 작업 + Pagination
내가 주요 작업했던 커뮤니티 CRUD 와 댓글 Create, Delete 작업.
커뮤니티 CRUD 와 댓글 Create, Delete 작업뿐 아니라 DB와 연동하여 닉네임과 유저의 글 목록을 불러왔고 이를 페이지네이션 작업 하였다. 추가 기능으로 moment.js를 활용하여 글 작성 시간 기점으로 포스팅 시간도 체크해주었다. 맵은 카카오맵을 활용하였고 위치 값을 들고와서 게시글마다 다르게 띄워주는 작업도 수행되었다.
Ant design 으로 작업해보니...
나에게 어려움을 주었던 Ant design과 React CRUD의 콜라보... Ant design은 깔끔하고 예쁜데 편하다는 느낌은 주지 않았다. 일단 공통 컴포넌트에 효과를 넣는다고 공통적으로 적용되는것이 아니었고 세부 요소 하나하나 적용해주어야 하는 번거로움은 작업속도를 더디게 만들었다. 그리고 왜 그런지 모르겠지만 수정폼에서 props가 반영이 안되었다. Props는 넘어왔는데, 새로고침을 하면 빈값으로 넘어갔다. 스택오버플로우에도 찾아보고 했는데 해결되지 않았고 팀원분께서 도와주셔서 해결되었다. 이일을 통해 나의 미숙함을 많이 느낄수 있었다.
04. 마무리
1차 프로젝트에 이어 또 팀장으로서 팀을 이끌었다.
프로젝트가 끝난 지금 느낀바가 있다. 졸업 전시부터 1차,2차 프로젝트까지 팀장을 맡았기에 익숙해져 있었다고 생각했는데 아니었다. 팀을 이끌면서 팀장의 일이 결코 쉬운 것이 아님을 다시 깨닫게 되었다. 원활한 개발을 위해서는 팀원들과의 잦은 커뮤니케이션이 이루어져야 하고, 함께 같이 세운 규칙을 주기적으로 환기시켜 주는 것도 팀장의 필수적인 일인 것 같다.
무엇보다 실력적인 부족함이 많이 확인되었던 이번 프로젝트인만큼 다음 프로젝트에서는 성장한 실력으로 임하고 싶다