엘리스 SW 엔지니어 트랙에서 7주간의 수업을 듣고 드디어 첫번째 프로젝트를 하게 되었다!
그동안 배운 HTML, CSS, JavsScript, TypeScript, Node.js, MongoDB, 등등 다양한 지식들을 직접 사용해보며
실력을 성장시킬 수 있는 기회인 것이다.
다만, 이번 프로젝트에서는 바닐라 자바스크립트 풀스택 프로젝트로 진행되며
이후에 있을 두번째 프로젝트에서부터 타입스크립트와 리액트 등을 사용하여 진행한다고 한다!
총 2주 동안(2022.10.31 ~ 2022.11.12) 쇼핑몰 만들기를 하게 되는데,
대부분의 가이드라인은 엘리스에서 제시해주었기에 가이드라인에 따라 코드를 작성하게 되었다.
처음 풀스택 프로젝트에 임하기 때문에 무엇부터 시작해야 하는지, 세팅과 각종 준비는 어떻게 해야하는지에 대해 막막하고 두려웠는데
엘리스에서 잘 준비해주신덕에 걱정을 덜고 프로젝트를 시작할 수 있게 되었다! 또한, 오피스아워 시간에 현업 프론트엔드/백엔드 코치님들에게 프로젝트에 관련하여 코칭받으며 진행할 수 있기 때문에 마음이 한결 편해졌다.
이번 프로젝트를 통해 배우고 다음번 프로젝트에서는 스스로 시작부터 잘 해낼 수 있을 것 같다.
2022.10.29 (토) ~ 2022.10.30 (일)
엘리스에서는 미리 원하는 포지션 (프론트엔드/백엔드) 에 대한 수요를 조사하였고, 배정해준 팀에 배정되었다.
나는 프론트 포지션에 지원 하였으며 우리 팀원들은 프론트엔드 3명, 백엔드 2명으로 구성되었다.
각자 원하는 포지션이 3:2로 구성되어 따로 포지션 결정에 대한 논의는 필요 없었다.
디스코드로 팀의 팀원들과 알아가고 팀 페이지를 노션에 작성하며 워밍업 시간을 가졌다.
한명도 빠짐없이 아이디어를 적극적으로 제시하고 수용하는 기분좋은 팀 분위기가 흐뭇했다.😊
GitLab이라는 처음보는 깃 관리 시스템을 사용하게 되었는데, 깃허브와 비슷하면서도 달라서 미리 실습했다.
팀원 모두가 프로젝트 안내사항을 정독하고 프로젝트 일정 관리를 위한 Jira, 이슈 관리를 위한 paddlet 에 대해 살펴보고 오기로 하였다.
또한, paddlet 에 주말 동안 어떤 내용에 대해 회의할 것인지 작성해오기로 했다.
2022.10.31 (월)
[ 엘리스 프로젝트 소개 ]
오늘은 오전 10시부터 12시까지 엘리스에서 프로젝트에 대한 소개를 하며 질의응답 시간을 가졌다.
[ 프로젝트 1일차 회의 ]
점심 이후에 13시 30분 부터 오후 6시까지 쉬는시간 제외 4시간 20분 동안 회의를 진행했다.(굉장히 힘들었다..😥)
지난 주말에 팀원들끼리 온라인 박물관을 만들어서 티켓을 구매하면 URI를 제공하여 전시회 페이지로 이동하여 감상할 수 있게끔 하자는 계획을 했었으나, 안타깝게도 전형적인 쇼핑몰의 형태(구매와 가입, 배송을 포함한)를 필수적으로 구현해야한다는 지시사항에 의해 계획을 수정할 수 밖에 없었다.
여러가지 논의가 오간끝에 개발자 굿즈를 판매하는 쇼핑몰 구현을 하기로 합의되었다.
개발자 굿즈란, 각종 개발언어나 프레임워크의 로고 스티커나 키링, 개발언어와 관련된 머그컵이나 티셔츠 등의 제품이다.
개발자 굿즈 쇼핑몰은 https://marpple.shop/kr/yalco?page=4 을 참고하여 진행될 예정이다.
해당 사이트의 이미지를 사용한다면 더욱 빠르고 효율적인 개발 일정 진행이 가능할것 같아 팀원 중 한명이 직접 해당 업체에 유선으로 연락 후 이메일을 보내어 사용 동의를 받았다! 시원시원한 일처리와 적극성, 추진력이 대단하면서도 본받고 싶었다.
개발자 굿즈 쇼핑몰, 이하 개굿은 본격적인 프로젝트 개발 진행에 앞서 주말동안 작성한 paddlet을 바탕으로 회의를 진행하였고 팀원이 노션에 결정된 사안을 정리하여 작성하였다.
▲ Paddlet으로 회의 진행
- 사용 프로그램
노션, Jira, Paddlet, GitLab 등 많은 프로그램을 사용하게 되는것이 모두에게 득보단 실이 크다는 판단하에 최대한 한 프로그램에서 진행할 수 있도록 노션과 Paddlet은 스크럼 회의 시에만, 개발에서는 GitLab만을 사용하기로 결정했다.
GitLab의 경우 Jira와 중복되는 기능, Paddlet의 기능을 issue의 board에서 확인할 수 있기에 결정했다.
디자인 툴의 경우 figjam을 이용하여 간단하게 레이아웃만 잡기로 했다.
다만, 회의 이후에 피그마를 사용해보니 피그잼보다 훨씬 편리하고 다양한 기능을 제공하여 본격적인 ui를 디자인해보며 피그마를 사용하는게 나을지 개인적인 고민의 시간을 가졌다. 🤔
- 협업 시간
기존 엘리스 수업 프로그램 진행시에 오전 10시부터 오후 6시까지가 수업일정으로 잡혀있기에, 그 시간대 안에서 언제든 개발하고 회의하여도 좋지만 보다 명확한 커뮤니케이션과 개발 진행을 위해 팀원들 모두가 반드시 연락하고 프로젝트에 집중해야 하는 "코어 시간"을 정하기로 했다.
오전에는 스크럼 회의가 있고 오후 8시 부터는 우리 팀의 오피스 아워가 있기 때문에 월 ~ 토 오후 1시부터 오후 6시까지를 코어 시간으로 지정하고 해당 시간에는 반드시 소통하고 개발하기로 정했다. 만약 해당 시간에 부득이하게 참여가 어려울 경우 미리 고지해 주기로 하였다!
- 프로젝트 주제 / 기능 / 페르소나
프로젝트 주제 같은 경우 이미 배송이 가능한 물품을 판매하는 쇼핑몰, 그 중에서도 개굿으로 진행하기로 했기 때문에 주제에 대한 수정은 없었다. 다만, 기능의 경우 팀원들이 하나씩 생각해서 작성하였는데 이미 엘리스에서 가이드 해준 필수 구현 기능을 확인해보니 거의 유사했기에 엘리스에서 제공해준 구현 기능을 목표로 하기로 했다.
페르소나의 경우 이번 프로젝트에서 페르소나라는 개념에 대해 처음 알게 되었는데, 간략히 말하자면 제공할 서비스를 이용할 가상의 인물을 설정하는 것이 페르소나 설정이다.
따라서 우리는 개발자 굿즈를 구매할만한 가공의 인물을 구성하여 간략한 시나리오를 첨가한 페르소나를 설정했다.
“오프라인에서 개발자 굿즈를 안팔아서 구매하려고요”
이름 : 윤익수 (파평윤씨, Yun Ik-Su)
나이 : 28세
직업 : 개발자
거주 : 서울
캐릭터 : 찐 개발자
▲ 개굿의 페르소나
윤익수(UNIX...🤣)라는 페르소나를 설정함으로써 보다 명확하게 주제에 와닿았고, 구현해야할 기능에 대한 생각이 정리되었다.
- 프론트엔드 / 백엔드 고려사항
DB, API 명세, CSS 프레임워크 등에 관하여 논의하였고 수업에서 배운대로 MongoDB를 사용하며 API 명세 작성은 추후 노션에서 작성하기로 하였다. CSS 프레임워크로는 Tailwind를 사용하기로 했다.
사실, CSS 프레임워크에 대해서는 생각을 않고 있었던 것이 이전에 부트스트랩과 bulma에 대해 엘리스에서 실습하면서 물론 클래스 선언 만으로 세련된 ui를 불러올 수 있어 시간이 절약되고 사용하기 편리한것은 사실이나,
원하는 쇼핑몰의 형태가 구체적일 경우에 커스터마이징이 필요할 것이고 그렇다면 오히려 프레임워크 사용이 불편하게 되지 않을까 싶었던 마음도 있었다.
다만, 처음 사용해보는 프레임워크 이기도 하고 프로젝트에서 CSS 프레임워크를 사용해본적이 없기에 경험으로 삼고자 흔쾌히 합의했다.
- 커밋 메시지 컨벤션 / 코딩 컨벤션
우선 커밋 메시지의 경우 맨 앞에 들어올 단어만 지정하면 되기에 쉽게 정할수 있었다.
feat: 새로운 기능 추가fix: 버그 수정template: (htmls,css,js) 관련 파일 추가docs: 문서 수정style: 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우refactor: 코드 리펙토링test: 테스트 코드, 리펙토링 테스트 코드 추가chore: 빌드 업무 수정, 패키지 매니저 수정
commit -m “feat : 로그인 API CRUD 추가”
commit -m “fix : 로그인 API create 기존유저 검사하도록 수정”
commit -m “docs : readme.md 수정”
commit -m “style: 회원가입 API 코드 포맷 수정”
commit -m “refactor : 회원가입 API 리팩토링 적용”
commit -m “test : 테스트 코드 추가”처음으로 프로젝트에서 컨벤션을 정하는 회의를 진행했기에, 사실 아는게 많지 않았다. 그렇지만 회의를 하면서 camelCase, PascalCase, snake_case에 대해 알게 되었다. 용어만 생소했지 사실 코딩을 하면서 나도모르게 적용했던 컨벤션들이였다.
프론트엔드 css에서 클래스 명에 대한 컨벤션은 userOwnCategories__category__delBtn__icon의 형태로 camelCase와 언더스코어 두 개를 이용한 형태를 채택하였다.
이상으로 기나긴 회의를 마쳤다!
[ 오피스아워 ]
회의 이후 저녁을 먹고 8시에 백엔드 이슈(월/수/금 배정) 에 대해 코치님과 오피스아워를 가졌다.
하지만 오늘은 프로젝트 전반에 대한 내용들을 미리 정하고 합의하는 시간을 가졌기에 본격적인 개발에는 착수하지 않았고,
특히 백엔드 이슈라고 할것은 발생하지 않았기에 오늘 회의에서 의논한 내용과 사용하는 툴에 대한 컨펌을 받는것으로 정리하고 오피스아워를 진행했다.
대부분 답변 내용은 코치님 본인은 현업에서 이렇게까지 자세하고 많은 컨벤션과 툴에 대한 정리에 대해 회의하지 않으며,
이 부분들에 대해서는 팀원이 모두 합의했다면 계속 진행해도 괜찮을 것으로 보인다고 하셨다.
코드 컨벤션도 마찬가지로 너무 상세하게 지정하지 않아도 괜찮을것으로 보셨다.
이러한 이야기들을 듣고나니 오늘 진이 빠지게 회의했던 것이 현업에서는 하지 않을수 있다는게 신기하기도 했고
이미 구축된 체계에 의해 진행되는 경우가 많아서인지 호기심이 들기도 했다.
[1일차 끝]
1시간 가량 오피스아워를 마치고 오늘의 프로젝트 일정을 마무리 하였다.
하루 동안 엄청 많은 것들을 정리하고 회의하였던 경험은 정말 처음이였고, 이 경험을 통해 앞으로 있을 어떤 프로젝트에서도 자신감있게 회의를 진행해 나갈 수 있을 것 같다.
내일부터는 본격적인 개발에 들어가기 때문에 포스팅은 여기서 마쳐야 겠다.
