해피포 : 반려동물 통합 커뮤니티 서비스
링크
테스트 아이디 / 비밀번호: happypaw@gmail.com / happypawpw1. 프로젝트 소개
•
반려 동물의 정보를 공유하는 커뮤니티를 구축합니다.•
원하는 물품을 판매하거나 구매하는 서비스를 제공합니다.•
사용자들 끼리 팔로우 기능을 통해 서로의 소식을 공유할 수 있습니다.•
글과 사진을 함께 업로드하여 반려 동물들의 일상을 자랑하고 공유할 수 있습니다.•
다른 사용자들의 글에 ‘좋아요’를 누르고 댓글을 작성할 수 있어요.•
지도 기능을 통해 내 주변의 반려 동물 카페, 병원, 호텔을 찾을 수 있어요.2. 우리는 이런 사람입니다(궁서체)
선글라스 컨벤션…. 멘토님도 컨벤션 안지키시는건 못참기
여러분과 친해지고싶어요!! 물거나 해치치 않아요 맞활로우 부타캐요~
물거나 해치치 않아요 맞활로우 부타캐요~ 3. Step By Step (woo baby~)
3-1. 역할 분담
3-2. 협업 방식
6월 2일 회의록
•
가장 어려울 것으로 예상되는 회원가입과 로그인을 2명씩 나누어서 작업 후 코드를 작성하는데 조금 익숙해진 다음 프로젝트 진행하기로 결정
•
각자 작성한 회원가입과 로그인 코드를 병합하는 과정에서 어려움을 느꼈고, 코드의 질과 일의 효율성이 떨어진다고 판단하여 같은 곳을 여러명이서 작성하는 방식에서 각자 페이지를 가져가는 방식으로 변경
•
공통으로 사용하거나 재사용될 요소는 프로젝트를 진행하면서 논의하기로 함
(논의가 길어지면 마감일에 차질이 빚어질 것으로 예상했습니다)
•
커밋, 코드 컨벤션은 허들이 높지 않은 최소한의 것으로만 가져가기로 결정
•
GitHub 이슈에 필수 기능을 모두 등록하고 각자 트래킹을 해가며 할 일 겹치지 않게 나누고 화/목 정기 회의시간에 추가되어야 할 기능과 공통으로 사용할 컴포넌트를 누구 것을 사용할 것인지에 대해 논의
•
디자인보다 기능구현(과제)에 초점을 두고 기능을 먼저 다 구현한 다음 여유가 있는 경우 디자인을 입히고 그 다음 강냥공냥냥 서비스 관련 기능을 추가적으로 넣기로 결정
•
감귤마켓 디자인으로 공통, 도전 기능을 모두 구현한 다음 디자인을 적용
•
공유하고 싶은 문제가 있는 경우 이슈로 작성하여 공유하고 작업한 이력 남기기
•
GitHub Project Board를 이용한 전체 진도 상황 공유
•
다른 팀원 코드의 BUG 찾는 경우 이슈 작성 후 Assignees 지정
•
Common 컴포넌트 폴더를 따로 관리하여 코드 재사용율 높이기
•
페이지의 디자인의 일관성과 쉬운 유지보수를 위해 ThemeProvider를 사용
const colors = {
primary: '#374259',
secondary: '#b1b5bb',
third: '#F2D8D8',
gray: '#dbdbdb',
bgGray: '#f2f2f2',
txtColor: '#767676',
warning: '#FD7A6E',
white: '#fff',
};
const theme = { colors };
export default theme;
JavaScript
복사
3-3. Tech Stack
3-4. 컨벤션
3-4-1. 커밋 메세지
•
fix: 올바르지 않은 동작을 고친 경우
•
feat: 새로운 기능을 추가한 경우
•
refactor: 내부 로직은 변경하지 않고 코드를 개선한 경우
•
style: 코드 개선과 상관없이 사소하게 코드를 수정한 경우
•
design: 사용자 UI를 추가, 수정한 경우 (마크업, 퍼블리싱 작업)
•
add: 폴더, 파일 등을 추가한 경우
•
move: 폴더, 파일, 코드 등의 위치를 이동한 경우
•
rename: 폴더명, 파일명 등을 수정한 경우
•
remove: 폴더, 파일, 코드 등을 삭제한 경우
•
assets: 에셋을 추가, 수정한 경우
•
docs: 문서를 추가, 수정한 경우
•
chore: 위의 모든 경우에 포함되지 않는 기타 수정사항
3-4-2. Code 컨벤션
•
타입은 종류 중 하나만 선택하며, 영어 소문자로 시작한다.
•
주제는 한글로 간단명료하게 작성한다.
•
주제의 마지막 문자로 .(마침표)를 사용하지 않는다.
•
주제는 '-다', '-음'과 같은 어미로 끝내지 않고, 과거형을 사용하지 않는다.
◦
올바르지 않은 예) feat: 카카오 로그인 연동 기능을 추가했다 (#3), feat: 카카오 로그인 연동 기능을 추가함 (#3)
◦
옳은 예) feat: 카카오 로그인 연동 기능 추가 (#3)
•
주제는 소스 코드를 보지 않고도 변경 사항이 무엇인지 알 수 있도록 작성해야 한다.
◦
올바르지 않은 예) design: CSS 조정 (#4)
◦
옳은 예) design: text box와 layout frame 사이에 left padding 추가 (#4)
•
커밋 메시지는 제삼자가 봤을 때 무엇을 했는지 파악할 수 있게 자세히 작성한다.
•
커밋 메시지는 어떻게 보단 무엇과 왜를 설명한다.
•
한 커밋에는 한 가지 기능만 담는다.
◦
예) 화면 개발의 경우 : 컴포넌트 단위로 커밋
◦
예2) 기능 개발의 경우 : 각 기능 단위로 커밋
3-5. 폴더구조
4. Feel our codes
4-1. 미정
•
Top button 구현
구현 ◦
화면의 스크롤을 내리다가 페이지 최상단으로 이동하게 해주는 기능
코드설명
•
사용자 Search 기능
기능 ◦
팔로우가 있는 경우는 홈 피드의 header 상단부분, 팔로우가 없는 경우는 홈 화면의 검색 버튼을 누르면 사용자를 찾아주고 클릭하면 해당 사용자 프로필로 이동합니다.
코드설명
4-2. 상용로그인 기능 구현
•
댓글 작성 및 리스트
•
프로필 게시글 리스트
•
이미지 업로드 및 삭제
•
API 요청 분리
◦
중복되는 API 요청들을 유틸 함수 파일로 분리하여 관리합니다.
◦
개별 components > 카테고리별 api > request.js 의 구조를 가집니다. components들은 api를 import하고, 각 api는 request를 품고 있습니다.
코드설명
4-3. 현빈
•
이메일로 회원가입
•
댓글 삭제, 신고하기 기능
•
게시글 삭제, 신고 기능
•
상품 등록, 수정
•
게시글 모달 구현
코드설명
•
회원가입
코드설명
4-4. 지윤
•
Custom Hook
코드설명
5. Few days later…. (Stop Think! Just React!)
•
전국동물보호센터정보표준데이터(공공데이터) 활용하기
•
SEO를 고려한 코드작성
◦
meta tag 작성
◦
og tag 작성
◦
이미지 최적화
•
시맨틱 태그로 변경하기
◦
페이지에 제목태그 넣고 a11y로 hidden 처리하기
◦
article, section 구분해서 통일성 있게 작성하기
•
공통 컴포넌트 활용하기
◦
색상 코드 theme으로 변경
◦
공통 컴포넌트에 있는 태그로 다 변경하기
•
프로젝트 readme 작성
◦
테스트 계정 새로 만들기 (clean한 계정으로)
◦
gif 파일 해상도가 높은 것으로 변경하기
