[SeSAC] 웹 풀스택 과정_프로젝트_새싹 커뮤니티 웹사이트 만들기(1)

MVC 구조와 Sequelize 까지 학습 한 후에 진행한 팀프로젝트에 대한 회고록 입니다.

 

 1. 기간 : 9/4 ~ 9/22

 

 

2. 팀 구성 및 사용 기술

- 프론트 2명 

CSS / Js / EJS / BootStrap

- 백엔드 3명

Nodejs / Express / MySQL / ORM(Sequelize)

 

3. 주제 선정

 - 주제 선정은 팀별로 진행하며 자유 주제 입니다.

 - 저희팀은 새싹(청년취업 사관학교)의 다양한 과정을 학습하고 있는 사람들이 이용할 수 있도록

   질문과 답변 위주의 게시판 형식의 웹사이트를 만들기로 했습니다.

 

 

4. 설계 단계 ( ~ 9/7)

4-1.

개발에 들어가기 전 팀 회의를 통해 프로젝트 컨셉에 따라 필요한 기능들을 표로 정리 했습니다.

 

 

4-2.

ERD(Entity Relationship Diagram) 만들기.

데이터베이스 구조를 한눈에 알아볼 수 있는 다이어그램인 ERD 만들기에 도전 했습니다.

 

질문에 답변이 달리고 답변에 질문이 달리는 2뎁스의 대댓글과 같은 기능을 구현하기위한 테이블을 설계하고자 했습니다.

 

DB테이블 구조를 만드는걸 너무 어렵게 생각해서 개인적으론 굉장히 헤맸습니다.

어서 코딩단계로 넘어가야 한다고 생각했기때문에 한참 어떡하지 고민하다가 워크벤치에

있는 기능을 활용해서 간단히 기본키와 외래키를 가지고 관계를 설정 한 후에 ERD를 만들었습니다.

 

이땐 몰랐습니다. 급하게 설계를 하고 넘어간 부분때문에 이후에 계속해서 자잘한 변경사항들이 많이

생기게 된다는것을..

ER다이어그램 (ERD)

 

 

4-3.

와이어 프레임 만들기.

웹사이트의 전체적인 페이지 구조를 아주 간략하게 알아볼 수 있는 와이어 프레임 만들기!

 

저는 프로토 타입이란 말을 더 자주 들어봤는데 와이어 프레임과 프로토 타입 모두

건축에서 설계도면과 유사하다고 합니다. 그중에서도 프로토 타입이 조금더 실제

완성품에 가까운 설계도면 입니다.

 

와이어프레임 제작은 프론트엔트 파트에서 진행했습니다. (이것도 이후 개발하며

컨셉 변경에 따른 잦은 변화가 있었습니다..)

 

와이어 프레임

 

5. 깃 협업

깃 협업에 대해서는 팀별 깃 레포지토리를 파기 전에 션 리더님의 교육이 있었습니다.

이때 팀원들과 Git으로 협업하기 위한 몇가지 규칙들에 대해 알려주셨습니다.

 

 

1. 브런치

 - 최종 코드는 develop --> main 브런치로 병합.(이때도 PR)

 - PR을 통과한 코드만 develop 브런치로 코드를 병합한다.

 

PR은 Pull Request의 약자로, 코드의 변경사항을 코드 저장소에 적용 시켜달라고

보내는 요청 입니다. 우리 팀은 각자 작업한 내용을 develop 브런치에 올리기 위해 PR을

보내고 팀원들의 승인이 있을때만 반영(즉, Merge[병합]) 되도록 했습니다.

 

 

 

2. 커밋 컨벤션

 - 어떤 작업을 했느냐에 따라 커밋 메세지의 포맷과 형식을 달리하고 그것을 정의하는것

 - 저희팀은 최대한 간단하게 형식을 정했습니다.

1. 타입 설정
- `feat` : 새로운 기능 추가
- `fix` : 버그 수정
- `docs` : 문서 수정
- `style` : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
- `refactor` : 코드 리펙토링
- `test` : 테스트 코드, 리펙토링 테스트 코드 추가
- `chore` : 빌드 업무 수정, 패키지 매니저 수정


2. 실제 커밋할때는 아래 포맷으로

"타입 : 이러쿵 저러쿵
설명 : 이러쿵 저러쿵"

 

3. 지키면 좋을 규칙

 - 작업 브런치를 3일 이상 머지하지 않고 사용하지 말 것

 - pull 선행을 잊지 말 것

 - commit을 너무 긴 텀을 두고 하지 말 것

 - 깃허브 UI 에서 파일과 파일 내용을 수정하지 말 것

 

 

 

 

다음 글에 이어서 적겠습니다.