1. 미니프로젝트
스파르타코딩클럽이 주관하는 내일배움캠프에서 9월 한 달간의 사전캠프가 끝이 나고, 본 캠프가 정식으로 시작되었다, 배정된 조를 필두로 시작하자마자 사전캠프에서 배웠던 내용을 기반으로 팀원들을 소개할 수 있는 웹페이지를 구현하는 미니프로젝트가 시작 되었다.
어색한 프로젝트 과정과 와이어프레임과 같은 생소한 단어들로 가득한 상태로 프로젝트를 과연 잘 진행할 수 있을까 하는 생각이 들었지만 일단 부딪히고 결단력 있게 나가야 진행이 된다는 생각과 함께 내 의견을 가감없이 드러냈고 팀원들과 좋은 아이디어와 의견들이 오갔다.
먼저 팀원들과 원할한 소통과 회의록등 기록을 하기 위해서 협업 하기 위한 툴로Notion을 이용했다.
각자의 정보를 알 수 있는 소개 페이지를 만들고, 회의록을 만들며, 래퍼런스, 알림판, 와이어프레임 등 필요해 보이는 탭들을 나누고 여러가지 정보들을 팀원들과 다 같이 채워 넣다 보니 그럴싸한 협업 페이지가 완성 되었다.
2. 계획하기
팀원과 의견을 나누던 중 모두가 열정이 보통이 아니었으며, 정말 "배웠던" 내용에만 치중하여 프로젝트를 진행하는 것 이상으로의 목표로 비전공자 첫 프로젝트라기엔 조금 어려워 보이는 게시판 기능을 무작정 만들어 보고싶었고 팀원 모두 동의 했다.
커리큘럼에서 볼 수 있는 방법으로 와이어프레임을 만들어 프로젝트의 밑그림을 그린다는 생각으로 우리가 만들게 될 홈페이지의 뼈대와 각 기능에 대해서 간략하게 표현할 수 있도록 스케치 했다.
개발자들은 알고 보니
figma라는 툴로 와이어프레임을 짠다고 나중에는 알게 되었지만 그런 것 을 잘 모르던 우리 팀은google docs를 이용하여 잘 만들어 보았다.
참조 -> FIGMA 사용법에 대한 페이지
웹페이지를 만들기 전 팀원들과 페이지에 구현해야 할 만한 것들을 계획표에 하나하나 적다보니 그 양이 실로 어마어마 했다,,,ㅋㅋㅋ겨우 게시판 기능, 팀 소개하는 사진과 글 몇자 있는게 전부인 페이지 하나에 이렇게나 많은 기능을 구현해야 한다고?????....
일주일이라는 시간이 갑자기 적게 느껴졌다.
와...끝나고 보니까 저렇게나 많았는지 정말 대견스럽다... 참고로 저것 보다 더 많았다.
API 설계도
데이터베이스 구조
게시판을 만드려고 막상 생각 해 보니 구조가 너무 복잡해 보였다...
개발의 기본은 검색이라고 배웠다. 참조하기 좋은 블로그는 많았고 그 중 가장 도움이 됐던 블로그에서 얻은 게시판 구조를 참조했다.
이 래퍼런스를 바탕으로 우리 웹페이지의 게시판 구조도 만들었다.
참조 블로그 -> 감사합니다 기본 뼈대를 만들 게 해 주셔서..
3. git
그건 그렇고 협업을 위해 결국 프로젝트 파일들을 서로 공유해가며 분할도 하고 병합도 해야 할 텐데 듣자하니 ALzip으로 공유한다는 말도 들어 보았다..
하지만 개발에 아무리 처음 발을 들여도 그렇게 하는 것 보다는 git을 하루 빨리 터득하고 사용하면서 그때그때 만나는 에러들과 맞부딪히며 사용하기로 했다.
git은 간단하게
git init
git remote add origin 주소창에_나오는_깃_주소.git
git branch -m *브랜치 생성
git checkout -b 이름 ( 브랜치 만들고 체크아웃까지 동시에 이루어짐) (main)에서 (설정한 이름)으로 바뀜
git add . (. 이 all 을 의미함)
git commit -m "메세지"
git push origin (이름)- 팀장이 레포지를 만들고
- 팀원이 팀장의
git주소에 연결하고 - 각 팀원의 브랜치를 생성한다.
와 같은 구성으로 깃에 대해서 얕은 이해를 바탕으로 깃허브를 사용하기 시작했고, 중간 중간 오류가 뜨는 것은 에러문을 팀원들끼리 공유해가며 해결했다.
결과로 push 하기 전 pull 을 해야 한다던지, pull하기 전에 commit을 해야한다던지.
병합하는 과정에 충돌이 나면 충돌난 코드를 팀원들과 같이 리뷰해가며 수동삭제를 해 준다던지.. 등 이젠 깃을 사용하여 협업하는데 있어서 기본적은 능력은 충분히 가질 수 있었다고 생각하며
git 사용을 꺼려하지 않고 처음부터 부딪혀 가며 배운 덕분에 쉽고 빠르게 배울 수 있었던 것 같다.
이렇게 브랜치도 다 만들었고,,
430개의 commit과 140번의 merge로 만든 일주일짜리 프로젝트가 되었다
4. 개발하기
처음엔 껍데기부터 만들자고 html과 css로 먼저 구현하기 위해서 각각 맡은 부분을 나누었다.
그 중 나는 홈페이지를 관통하여 핵심적 역할을 한다는 nav바를 구현해보고 싶었고 역할은 분배 받았다.
html과 css는 이해보다는 눈에 보이는 것이 다라서 사실 모르는 건 구글링을 통해서 알 수 있고 적절한 배치와 컨셉을 위해 디자인에 살짝 더 고민을 많이 했다.
그렇게 팀원이 맡은 부분을 git으로 합치고 나니 그럴싸한 홈페이지가 만들어 졌다.
html과 css을 이용해서 나타낼 수 있는 홈페이지의 기본 뼈대는 하루이틀안에 모두 완성이 되었고 순조로웠다.
게시판을 구현하기 전까진..
게시판 구현을 위해서 먼저 DB를 처리해줄 수 있는 서버가 필요했고, 그것을 동작하게 해 줄 Javascript가 본격적으로 필요했다. (하지만 javascript를 아무도 할 줄 몰랐다..)
하지만 우리에겐 구글링이 있었으며 또, 내배캠 안의 다른조에는 우리들을 도와줄 고수분들이 무척 많았다.
몰라서 못하는거보다 물어보는게 낫기에 가감없이 질문을 했고, 도움을 받을 수 있어 그때그때를 뚫고 나아갔다!
그렇게 보통 아닌 미친열정으로 가득찬 우리 팀원들과 밤샘 코딩을 하며 새벽엔 소소하게 이야기도 나누고 더욱 가까워 질 수 있었다.
4일간 밤샘코딩한 기억이 나의 개발자의 첫 프로젝트 경험으로써 가장 흥분되고 즐거웠던 것 같았다.
그렇게 만든 홈페이지는 발표를 위해 시연 동영상을 찍어야 했고, 11일 발표를 위해 발표를 위한 대본을 준비했다.
발표영상
-> 먹고하조 웹페이지!
✨선 PULL 후 PUSH✨