[대나무숲] 2. 부트스트랩 템플릿 / API 설계 / 협업 규칙

부트스트랩 템플릿

• 빠른 작업을 위해 부트스트랩 템플릿을 사용하기로 결정하였다.
• 익명고민상담소의 소소하면서도 친근한 분위기와 딱 맞는 테마를 팀원분이 찾아주셨다.
• 기초가 될 레이아웃은 템플릿, 디자인적인 요소는 테마에서!

Bootswatch Sketchy

 

---

 

API 설계

대나무숲 API 설계

 

---

 

기초 뼈대 HTML 작업

• 팀원분들이 편하게 작업하실 수 있도록 기초 뼈대를 만들었다.
• 와이어프레임을 기준으로 부트스트랩 요소들을 조합하고, 테스트까지 완료!
• 완성본은 팀원분들과 Github을 이용하여 공유하였다.

 

Python Flask 폴더 구조

• static/assets → 프로젝트에 사용할 리소스(css, img, js, vendor)
• static/dist → 가져다 쓸 부트스트랩 템플릿(.gitignore에 추가)
• templates → HTML 파일

 

HTML, CSS, JS 공용 파일 규칙

• <header> 와 <footer>는 고정, <main> 만 변경하여 사용
• 추가할 CSS, JS는 해당 폴더에 각자 생성하여 사용
• 우리가 사용할 부트스트랩 테마의 폰트가 영문이기 때문에 눈누에서 적당한 한글 폰트를 찾아 적용 → 교보손글씨

@font-face {
    font-family: 'KyoboHand';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

# 사용 예시
* {
		font-family: 'KyoboHand';
}

 

테스트 메인 페이지

테스트 메인 페이지

 

---

 

협업 규칙

• 부딪힘 없는 협업을 위해 팀 안에서 협업 규칙을 만들었다.

 

Pull Request → Code Review → Merge

• 기간은 짧지만, 팀원이 2명뿐이라 서로 최대한 얻어가는 것이 많도록 코드 리뷰를 하기로 하였다.
• 다른 사람에게 설명하기 위해서는 스스로 짜고 있는 코드가 어떤 흐름으로 연결되는지 명확해야 할 것이다.
• 회의 중 코드를 설명하고 이해하는 것이 가장 베스트이나, 깃헙 내에서만 코드 리뷰를 진행해야 하는 경우 주석, PR 메시지를 이용하여 본인의 코드 흐름을 최대한 상세하게 설명한다.
• 팀원의 코드 리뷰가 진행되어야만 Merge 할 수 있다.

 

역할 분담

• 팀원분은 메인 페이지와 고민글 작성하기 페이지
  • 최신순, 댓글순, 조회순으로 출력
  • 입력받은 데이터 DB에 저장
• 나는 고민글 상세 조회 페이지
  • 글 상세 조회
  • 비밀번호 일치 확인 후 글 수정, 삭제
  • 댓글 작성, 조회, 수정, 삭제

 

DB 공유

• 각자 기능 개발에 앞서 한 사람의 DB를 공유하기로 결정하였다.
• MongoDB Atlas에서 팀원을 공유 유저로 설정하면 공유 유저는 브라우저에서 해당 DB내의 생성, 상세 조회, 수정, 삭제가 가능하다.