[패스트캠퍼스 프론트엔드 데브캠프 1기_미니 프로젝트] (mbt)idle이 만든 사내 인트라넷 cubeIT 토이 프로젝트 회고

안녕하세요, 여러분! 드디어 패스트캠퍼스 데브캠프 프론트엔드 코스의 토이 프로젝트 1이 끝났어요. 정신없이 달려온 4주... 아니, 리팩토링 기간까지 하면 5주 동안의 여정을 돌아보려고 해요. 지금 생각해보면 이번 프로젝트가 제가 겪었던 것들 중에 진짜 재미있게 끝난 프로젝트 중 하나가 될 것 같아요!

 

 

우리 프로젝트는요...

 

• 기간: 2024년 6월 10일 ~ 7월 19일
• 인원: 4명의 열정 넘치는 팀원들!
• 주제: 사내 인트라넷 서비스
• 협업 도구: Notion, Slack
• 기술 스택: HTML, CSS, JavaScript, SQLite3

 

 

 

프로젝트 과정: 웃음과 눈물의 6주

1. 팀 빌딩: 아이스브레이킹의 힘!

프로젝트 시작하기 전에 아이스브레이킹을 했어요. 전에 테오 스프린트에서 배운 걸 써먹었죠. 덕분에 팀원들이랑 친해진 것 같아요! (제 생각만...?) 

 

그리고 다들 "개인정보 보호"랑 "편한 UX"에 관심 있더라고요.

 

 

 

2. 와이어 프레임 짜기

기능들을 파악하기 위해서 모든 사람에게 와이어 프레임을 짜게 시켜보려고 했는데 예상과 다르게 와이어프레임에 대해서 어려워 하셔서 내가 설명을 잘 못했구나 생각이 들었다. 그치만... "다은"님이 너무 꼼꼼하게 스토리보드를 작성해주셔서 오른쪽에 있는 와이어 프레임이 볼품이 없어 졌다고 해야 할까나...오른쪽은 내가 만듬.
내가 페이지 단위때문에 한정적으로 생각한거 아닐까 생각이 많이 들었다. 다양하게 기획하신 다은님을 보면서 많이 배움!

와이어 프레임 보면서 토이프로젝트1에서 요구한 필수 기능이 빠진거 없는지 확인했다. 빠진 기능이 있으면 메모지로 붙혀가면서 추가해 나아갔다. 아이스브레이킹을 할때 "개인정보"에 대한 이야기를 많이 했는데 프로필 페이지 만들면서 관리자한테 보여야 하는 프로필 정보 내용들, 사용자한테 보여야 하는 프로필 정보 내용들을 정리했다.

 

 

3.  와이어 프레임 작성한걸 보면서 기능명세서 작성!

이걸 작성하고나서 아쉬웠던 것은.. api문서랑 같이 만들면 좋겠다는 생각이 들었다. 후반에 데이터베이스 수없이 바뀌고 api명세서가 없으니깐 혼돈의 카오스였다. 분명히 기획때 열심히 했는데 필요한 문서들이 이렇게 많다니 많은 걸 깨달았다.

 

 

4. 디자인

"갓다은"님이 짱짱하게 피그마로 디자인 해주셨다... 그녀는 신이야....다른페이지를 더 많이 디자인 했는데 확대해서 보면 더 이쁘다(팔불출)

 

 

5. 퍼블리싱

토이프로젝트1 스케줄에서 퍼블리싱 시간을 따로 주셨다. 처음이신 분들도 계셔서 기능을 다 제외하고 퍼블리싱에 필요한것만 css 하자는 이야기가 나와서 따로 레포파서 여기에는 퍼블리싱만 진행했다. 이때는 행복했다.

 

 

 

6. 개발 시작:  자 이제 기능 들어가봐야지.

필자는 범죄와의 전쟁 안봄

 

이제부터 진짜 시작이었다.

첫시작부터 eslint, prettier, stylelint를 환경설정해야되고 pr템플릿도 만들어야하고 이슈 템플릿도 만들어야 하고 라우팅도 해야되고, layout컴포넌트도 만들어야 하고 등등 진짜 할일 투성이었음.

 

프로젝트 진도가 어느정도인지 파악이 잘 안되니깐 다은님이 깃허브 이슈에 마일스톤이라는 기능이 있는데 기간 설정해서 진행속도가 몇프로인지 확인해주는 기능이다. 너무 잘파악이 될것 같아서 내가 이슈를 쫙만들어서 마일스톤에 적용시켰다.

 

7. 와 PR이 너무 많아.

혹시 다들 PR 지옥에 빠져보신적 있으신가요.. 저는... 빠져봤습니다...

4명이 있는데 1분은 개발을 처음 하신 분이고 2분은 개발을 해보셨던 분인데... 2분(갓다은, 갓해석)이 동시에 PR 날라오면 그거 읽느라 오래 걸리더라구요..

 

이게 고민이이어서 멘토님에게 질문으로도 남김

질문이
"PR 코드 리뷰를 하면서 많은 시간을 소비하는데, 이 과정을 더 효율적으로 진행할 수 있는 방법을 알고 계시다면 공유해주실 수 있나요?"

 

답변을 아래 처럼 주셨다...

 

답변으로 이렇게 받아서 나의 고민이 풀리는 느낌이었다. 그치만 질문했던 이 시점은 토이프로젝트1 발표날 4일전이었다.  토이프로젝트 1에 적용을 못해서 아쉽지만 토이프로젝트 2들어가면 시간 정해놓고 PR보고.. PR의 단위를 쪼개셔 올리기 마음을 먹기로 했다. PR 단위 쪼개는거 화이팅!

 

 

8. 다른일 하다가 기능 못만든 사람 어떤데

나는 환경세팅, 피그마로 공통 컴포넌트 설정, 다른사람 PR 보다가 내가 담당한 역할도 못하고 1주일 남았던 시점이었음.

게다가 알바에서 안좋은 사건도 겪기도 하고(알바 그만둠)
목도 심하게 부어서 병원데도 다녀와야했던 주간이었음. 몸도 마음도 힘들었던 시점이었음.

그치만 아.. 빨리 해야겠다는 생각이 들어서... 4시간만 자면서 코딩했다. 근데... 자스 클래스로 만들어져있어서 코드를 구조를 파악하느라 힘들었다. 이거 나만 이해 못하는건가 싶었는데 갓다은, 갓해석님한테 물어보니 자스 클래스가 어렵다고 하셨다...

겨우겨우 휴가/ 근무 페이지 퍼블리싱하고 모달 열고 닫는건 해석님이 붙혀주시고 휴가필터링은 다은님이 붙혀주셨다.

정말 감사했습니다... 두번 다시 이러지 말아야지

 

 

9. 발표 준비: 팀원들의 숨은 재능 발견!

내가 너무 바빠서 난아님한테 리드미와 발표자료 부탁해드렸는데 피그마로 엄청 대단한걸 만드심... PPT인데 드래그도 되고 스크롤링도 되어서 진짜 짱 신기했음.
그리고 난아님도 개발을 처음 시작하기 시작하셨지만, 옆에서 점점 실력이 느는 모습을 보면서 뿌듯했다... 난아님이!! 공지사항 페이지 퍼블리싱 했대요!!!!!!(동네방네 소문내기)

10. 리팩토링: 마지막 불꽃

리팩토링 주간에는 멘토님의 코드 리뷰를 받으면서 우리가 어떤 부분이 부족했는지 확인할 수 있었던 기간이었다. 그리고 기능을 다 하지 못했던 필자로써... 캘린더 컴포넌트 붙히면서 휴가신청기능을 매끄럽게 만들어보겟다며.... 6일정도 고생했다... 나는 이거 띡하면 띡 만드는줄 알았음ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

휴가신청 모달	반차신청 모달

 

티스토리가 영상이 짧게 끊겨서 나오는데 이것도 폼이라서 유효성 체크를 해줘야 한다. 그래서 어떻게 해줄까 하다가 focus가 생각이 나서 그걸로 빈값이예요! 얼른 작성하세요 표현을 해주고 싶었다.

티스토리가 영상이 짧게 끊겨서 나오는데 휴가리스트 실시간으로 업데이트하는걸 보여주고 싶었다. 바닐라자바스크립트에서 SPA방식으로 만든다는게 쉽지 않았다... 늘 새로고침해야 휴가리스트가 떴다.... 그치만 그걸 고침...

 

11. 자 이제 후기 써야지

패스트캠퍼스 데브캠프 프론트엔드코스 토이프로젝트1가 끝났다. 내가 겪었던 프로젝트 중에서 진짜 재미있게 끝났던 걸로 기억하는 프로젝트 중 하나가 될것 같다. 

 

슬랙 짤방 보면서 엄청 짱웃었음. 내가 ㅋㅋㅋㅋㅋ가 길면 실제로 웃는 웃음임. 아 너무 웃겨서 미쳐버리는 줄 알았다.

 

그래도 크게 싸우지 않고 서로 의견을 양보하면서 프로젝트 진행하는 좋았고 

내가 팀원들이랑 회고하면서 배웠던 점 적는데...

위에 처럼 적다가 팀원분들에게 물음표를 얻었던 사건이 이었다.ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 사실... 경쟁관계보다 서비스가 잘 나와야 하는 욕심은 큰것 같다.

 

12. 후회 되었던 점...

- 디테일한 부분에서 의견공유가 어렵다는 걸 느꼈다. 다른 사람한테 코드를 보고 어떤 방식으로 짰어요? 물어봐야 하는데 다들 바빠서 눈치보여서 이야기를 못했던 것 같다. 앞으로 잘 물어봐야겠다느 생각이 들었다. 멘토님도 바빠도 꼭 물어보라고 하셨음.

- 일정 관리를 잘 못했던 점
- PR을 너무 사랑한 점
- 건강관리가 잘 안 되었던 점
- 중간중간에 공부를 못한 점

 

 

 

아쉬운거 투성이 인데 토이프로젝트 2에서는 더 개선된 나 자신을 보고 싶다.
아듀! (mbt)idle!