🔗 토이프로젝트I
토이프로젝트I은 5주동안 진행되었고 이후 1주 동안의 리팩토링 기간이 포함되어 있었다. 이 블로그는 이번주 리팩토링 기간동안 멘토님께 얻었던 코드리뷰, 피드백과 이것을 반영하여 개선했던 점 그리고 프로젝트를 참여하면서 느꼈던 점들에 대한 기록이다.
🔗 리팩토링
💡 멘토링 & 코드리뷰
1. 폴더구조 변경
우리 팀은 깃을 활용한 협업 프로젝트였기때문에 최대한 충돌을 방지하고자 같은 파일에서 동시에 작업하는 것을 피하기 위해 일단 자신이 맡은 페이지의 폴더를 생성하여 그 내부에서 작업을 하자는 의견이 나왔고 초반부터 그대로 진행되다보니 컴포넌트와 모듈, 페이지 등이 분리되어있지 않았다.😅
멘토님께서 어떤 내용의 폴더가 있는 건지 안내도 없고, 파악하기 어렵기때문에 비슷한 성격의 폴더끼리 묶어서 관리하고, 폴더 이름형식을 통일하고, 서로 다른 내용의 작업물은 같은 폴더에서 분리하는 것이 좋다라는 말씀을 해주셨다.
예상했던 피드백이였기때문에 부끄럽기도 하였다.....🥲
(모든 image파일도 하나의 images폴더에 위치하고 있었음.....)
2. 변수명/함수명 규칙 통일하기
프로젝트 내부에서 카멜 케이스와 로우 케이스, 위의 폴더구조 사진에도 있던 케밥 케이스까지 다양한 이름들이 섞여서 사용되고 있었다!!!😱
이름 형식이 섞이면 코드 가독성도 나빠지고 파일이나 경로에 접근할 때도 어려움이 발생 할 수 있기때문에 규칙을 정하여 통일하는 것이 좋을 것 같다는 피드백을 해주셨다.
팀원들 모두가 각자 맡은 바를 해내기 위해 PR을 체크할 때 서로의 오타와 변수명, 함수명을 꼼꼼히 체크하지 못한 점도 있었고 막상 코드구현을 할때 명확한 이름을 생각해내지 못하고 일단 선언하느라 급급하여 이름에 대한 중요함을 놓치고 있었던 것 같다.
코드를 낭독할 때 변수명과 함수명을 보고 그것이 나타내는 것을 쉽고 빠르게 파악 할 수 있기때문에 구현된 코드를 쉽게 나타내는 이름으로 설정하는 것도 매우 중요하다!!!
3. 예외 처리 간결하게 줄여보기
값을 탐색할 때 옵셔널 체이닝을 사용하면 중복된 예외처리를 줄이고 더 깔끔하게 조건을 파악할 수 있기때문에 활용해보는 것을 추천하셨다.
옵셔널 체이닝 연산자 "?."는 객체 내의 key에 접근할 때 그 참조가 유효한지 아닌지 직접 명시하지 않고도 접근할 수 있는 연산자로 if문을 줄여주는 큰 장점이 있다.
문법적인 면에서 정말 좋은 정보를 얻은 것 같아 앞으로도 많이 사용해야겠다는 생각을 했다.
💡 개선한 사항
폴더 구조 변경
src하위 폴더로 components폴더와 pages, utils 폴더를 생성하여 각 파일들을 같은 내용의 폴더로 정리하고 image파일들도 같은 페이지에서 쓰이는 파일들끼리 폴더를 생성하여 변경했다.
폴더 구조를 변경하니 당연히 위와 같은 에러가 떴고 (ㅋㅋㅋ) 각 파일들의 경로를 모두 수정해야하는 번거로움도 겪었다. 다음 프로젝트부터는 처음 계획단계에서 폴더구조에 대한 규칙을 꼭꼭 정하고 시작해야겠다는 생각을 했다.
코드 정리
studentList()함수는 하나의 함수 내부에서 json데이터를 가져오고, 로딩애니메이션을 종료하고, 수강생데이터만 추출하여 UI를 생성하고 생성된 UI 내부 버튼에 이벤트도 추가되고 있다.
멘토님께서 알려주신 예시대로 위의 코드를 순서별, 기능별로 나눠서 정리하였다. 코드를 알아보기 쉽게 정리할 수 있었고 각각의 함수를 재사용 할 수도 있었다.
🔗 토이프로젝트I을 마치며
💡 좋았던 점
길다면 길고 짧다면 짧았던 토이프로젝트I을 통해 다양한 면에서 많은 것을 시도해보고 경험 할 수 있었다.
- 라우팅을 적용하여 SPA 웹페이지도 만들어보기
- DOM을 잡아 동적으로 기능을 구현하기
- 사용해보지 못했던 라이브러리 (chart.js & express-fileupload) 사용하여 UI와 기능구현
- SQLite3를 사용하여 database 구축 및 연동
- express를 사용하여 서버를 구축하고 axios를 사용하여 비동기 통신으로 API호출
- git flow 전략을 활용한 git 협업
- 개발할 플렛폼에 대한 기획, 설계 과정과 개발에 관한 컨벤션 정하기
💡 아쉬운 점
다양한 HTTP메서드 사용
5주 중에 첫 주는 기획하고 설계하는 기간이라 개발을 진행한 기간은 4주정도이다. 4주 동안 수강생 인트라넷을 개발하면서 제일 많은 시간이 소비된 부분은 사용자용과 관리자용으로 구분된 페이지의 UI를 만드는 부분이었고 개인적으로 제일 큰 관심사였던 서버 구축은 팀원들과의 소통에서 우선적으로 프론트엔드 먼저 구현하자는 의견이 나오게되어 나중으로 미뤄졌다. CRUD의 기본적인 HTTP메소드 get, put, post, delete 등 다양하게 사용해보고싶었지만 get과 post만 사용해본 것이 아쉬웠다.
배포
토이프로젝트I에서 배포는 필수 요구사항이 아닌 선택 요구사항이었다. 우리팀은 여유가 되면 배포까지 계획하고 있었으나 여유가 되지않아 배포를 포기하고 테스트면에서 오류를 찾아 개선하고 발표를 더 꼼꼼히 준비하는 것을 선택하였다. 배포에 호기심이 많았던 나는 많이 아쉬웠지만 자료를 더 많이 찾아보고 다음 프로젝트때는 꼭 배포를 해보겠다고 다짐했다.😎
💡 배운 점
데브캠프 수강생분들에게 많은 것을 공유받고 배운 것 같다.
팀원
자기소개 이후 팀원 모두가 비전공자임을 깨닳은 순간, 다들 많은 걱정과 두려움을 안고 프로젝트를 시작했던 것 같다. 나는 기능 구현과 서버 구축에 관심이 많았던 거에 반대로 디자인에는 관심이 덜 했는데 팀원분들 모두가 디자인 구현에 있어서 훌륭한 면이 있었다. 덕분에 CSS 공부도 되었고 색상과 위치 등 디자인 면에서 꼼꼼하게 봐야하는 눈을 더 크게 뜬 것 같다.
타 팀원
발표회 때 다른 팀들의 프로젝트 결과물을 보면서 멘토님께 피드백 받았던 폴더구조 계획과 프로젝트 설정(eslint, prettier), 커밋 컨벤션, 스타일 컨벤션 등 기초 계획을 탄탄히 하신 것 같아 초기 기획과 설계 단계의 중요성을 다시 한 번 깨닫게되었다.
