Portfolio

1. 기술 스택 선정

1.1 styled components vs emotion

emotion은 CSS Prop을 사용할 수 있다는 특징이 있는데 이번 프로젝트에서 사용할 필요성은 없는 것 같음. 상태에 따라 다른 스타일을 적용할 때는 css 변수를 사용하지 않아도 일반 prop으로 state값을 넘겨 충분히 해결이 가능하다고 결론을 내림. styled components와 emotion에 대한 뚜렷한 장/단점을 구별하기 어렵기 때문에 그 동안의 경험을 기준으로 선택하기로 결정함. styled components 사용을 결정.

1.2 yarn vs npm

처음 yarn이 등장했을때는 npm보다 성능이 좋다는 이야기가 있었지만 npm도 이제는 많이 개선되어 yarn과 npm의 성능차이가 거의 나지 않기 때문에 더 익숙한 패키지 매니저를 사용하기로 결정함. yarn을 사용 하기로 함.

1.3 상태 관리

프로젝트의 규모, 컴포넌트의 구조 측면에서 크게 복잡하지 않을 것으로 예상되고 전역 상태 관리에 필요한 내용들은 크게 로그인 인증, 알림 정도가 필요할 것으로 현재 예상됨. 따라서 context API를 통해 전역 상태를 관리하고 프로젝트 진행 중 상황이 변경된다면 그때 새로운 전역 상태 관리 방법을 고려해 보기로 함.

1.4 React query

라이브러리를 사용하면 React query를 사용하지 않는 것이 더 좋다는 내용을 확인함. 추후 필요성이 느껴지면 그때 고민해도 늦지 않을 것 같음.

2. 기능별 역할 분배

2.1 역할 분배 방법

기본 요구 사항 14개를 기준으로 우선순위를 정해 역할을 분배할지, 컴포넌트 구조를 대략적으로 정하고 기능 단위로 분배하는 것이 더 좋은 방법일지에 대한 고민이 있었음. 하지만 전체적인 흐름과 효율적인 측면을 고려했을 때 기능별로 역할을 분배하는 것이 더 효율적일 것이라고 결론 내림.

2.2 기본 요구 사항

사용자는 회원가입과 로그인을 할 수 있습니다.

사용자는 채널에 올라온 글을 볼 수 있습니다.

사용자는 가입자 목록을 볼 수 있습니다.

사용자는 가입자를 이름으로 검색을 할 수 있습니다.

사용자는 가입자의 정보를 볼 수 있습니다.

사용자는 포스트 혹은 가입자를 검색할 수 있습니다.

인증된 사용자는 자신의 정보를 변경할 수 있습니다.

인증된 사용자는 채널에 올라온 글을 볼 수 있습니다.

인증된 사용자는 채널에 포스트를 남길 수 있습니다.

인증된 사용자는 포스트를 좋아요 할 수 있습니다.

인증된 사용자는 포스트에 댓글을 남길 수 있습니다.

인증된 사용자는 자신의 알림 목록을 확인 할 수 있습니다.

SPA 형태로 만들어주세요.

엉뚱한 페이지에 접속하면 404 페이지를 보여주세요.

2.3 기능별 분류 및 역할 분배

회원가입, 로그인: 박민형

검색 및 보기: 우대현

사용자 정보 CRUD: 유지영

포스트 CRUD: 안재관

좋아요 및 댓글 CRUD: 조예지

알림: 박민형

3. 주제 선정

3.1 후보 및 설명

방탈출 후기 공유

유지영: 방탈출 카페의 솔직한 후기를 찾기가 어렵고 생각보다 예약 시스템이 취약하게 되어 있어 방탈출 후기 공유를 할 수 있는 공간을 만들면 좋겠다고 생각했습니다.

전시회 후기 공유..

유지영: 예상외로 미술관이나 전시회를 하는 곳들이 많이 있지만 대중들에게 홍보가 덜 되고 있다고 생각합니다. 전시회 후기 공유를 통해 이런것들이 많이 노출된다면 긍정적인 영향이 있을 것이라고 생각했습니다.

동네 동아리/소모임 모집

유지영: 개발자가 되겠다고 생각하기 전부터 생각했던 것으로 지역 사회 구성원들 사이의 모임을 갖을 수 있는 공간이 생각보다 부족하기 때문에 이를 활성화시킬 수 있는 웹이 있었으면 좋겠다는 생각이 들었습니다.

그림공유

유지영: 핀터레스트와 비슷하다는 느낌이 있지만 그림을 공유할 수 있는 공간이 있으면 좋겠다는 생각을 했습니다.

지역별 푸드트럭 운영 여부 실시간 공유

우대현: 예상외로 푸드트럭이 지역별로 많이 존재하지만 정확한 운영시간, 장소에 대한 정보가 부족하다고 생각했고 지역별로 푸드트럭의 현재 운영 여부를 공유할 수 있는 공간이 생겼으면 좋겠다고 생각했습니다.

개발자 사이드 프로젝트 주제 검색 및 공유

우대현: 개발자들의 사이드 프로젝트 주제 선정에 대한 어려움과 이와 관련된 정보들이 부족하다고 생각했고 유저들의 정보 입력을 통제하여 이를 수치화하여 시각적으로 노출시켜 UI적으로도 보여줄게 많다고 생각했습니다.

반려 동물 관련 커뮤니티, 서비스

조예지: 유뷰트, sns를 보면 사람이 주체이지만 애완동물이 주체가 되는 sns를 만들어보면 좋을 것 같다는 생각을 했습니다. 추가적으로 강아지 게시물에는 강아지가 실제로 말을 하는 재미적인 요소를 추가하면 좋을 것 같고 지역 커뮤니티의 모임, 희귀 동물을 사육하는 사람들 사이의 정보 공유, 성장 과정 공유와 같은 컨텐츠를 다룬다면 반려동물을 키우는 인구가 많이지고 있기 때문에 많은 이용자들이 있을 것이라고 생각했습니다.

우리 동네 개모임, 반려인들 모여라

반려 동물 친구 사귀기, 같이 산책하기

반려 동물 케어 다이어리 작성

취준생 경험 공유

유지영: 사회 초년생 또는 취업을 준비하는 사람들이 취업 관련 정보를 정하기가 쉽지가 않다고 생각했습니다. 이와 관련해서 면접 후기, 채용 정보와 같은 상세한 정보와 취업 준비 과정들을 공유할 수 있는 공간이 있으면 좋겠다는 생각이 들었습니다.

오늘의 기분 상태를 나타내는 아이콘을 클릭하면 그에 따른 영화 추천

박민형: OTT 서비스를 통해 영화를 시청하고자 할 때 여러 주제들을 통해 안내를 해주지만 선택하는 것이 생각보다 시간이 많이 걸리고 어렵다는 생각이들었습니다. 그래서 감정을 표현하는 이모티콘을 선택하면 그에 어울리는 영화를 추천해주고 간단한 설문조사를 진행하여 설문조사를 토대로 영화 추천하는 것이 있으면 좋겠다는 생각이 들었습니다. 이와 더불어 영화를 보며 간단하게 즐길 수 있는 먹거리를 추천해주는 것까지 이뤄지면 좋겠다고 생각했습니다.

앨범자켓 그리기/만들기 및 공유하기

안재관: 요즘에는 아이돌 팬덤이 두껍기 때문에 앨범자켓에 대한 관심도 많다고 생각합니다. 따라서 앨범자켓을 직접 그리거나 만들어보고 이를 공유할 수 있는 공간이 있으면 좋겠다고 생각했습니다.

사진 보정/수정 요청

안재관: 요즘에는 거의 대부분의 사람들이 사진을 찍고 공유합니다. 또 그와 더불어 사진을 수정하는 경우도 굉장히 많이 있습니다. 하지만 생각보다 사진을 보정하거나 수정하는일이 쉽지 않기 때문에 해당 사진들을 공유하고 이를 보정하고 수정하는 작업을 잘 할 수 있는 사람들의 도움을 받고 또 도움을 주는 공간이 있으면 좋겠다고 생각했습니다.

공유되는 TODO

안재관: 요즘에는 많은 사람들이 다이어리와 할 일을 작성합니다. 하지만 혼자서 한 계획은 쉽게 무너질 수 있기 때문에 이를 여러 사람들과 공유하여 동기부여를 얻을 수 있는 공간이 있으면 좋겠다고 생각했습니다. 단 할 일에 대한 완료 버튼과 내용 수정은 본인만 할 수 있지만 열람은 누구나 가능하게 만들어 놓는 것이 좋다고 생각합니다.

상담 공간(회의 진행 중 나온 아이디어)

조예지: 현대에는 사람들이 선택해야 할 일들이 많고 그와 더불어 많은 고민을 안고 이를 공유할 공간이 많이 부족하다고 생각합니다. 따라서 오픈된 SNS가 아닌 폐쇄적인 SNS를 만들어 고민을 말하고 위로와 상담을 받을 수 있는 공간을 만들면 좋겠다는 생각을 했습니다.

3.2 주제 선정 투표

안재관: 취준생 경험 공유, 반려 동물 관련 커뮤니티 및 서비스

우대현: 반려 동물 관련 커뮤니티 및 서비스, 동네 동아리 및 소모임 모집

유지영: 반려 동물 관련 커뮤니티 및 서비스 , 오늘의 기분 상태를 나타내는 아이콘을 클릭하면 그에 따른 영화 추천

박민형: 개발자 사이드 프로젝트 주제 검색 및 공유, 오늘의 기분 상태를 나타내는 아이콘을 클릭하면 그에 따른 영화 추천

조예지: 오늘의 기분 상태를 나타내는 아이콘을 클릭하면 그에 따른 영화 추천

3.3 투표 결과

오늘의 기분 상태를 나타내는 아이콘을 클릭하면 그에 따른 영화 추천과 회의 진행 중 새롭게 나온 아이디어인 사람들이 고민을 공유하고 상담을 할 수 있는 상담 공간 만들기 두 가지로 의견을 좁혔고 재투표 결과 특정 주제를 정하여 사람들이 고민과 이야기를 공유하고 상담 받을 수 있는 상담 공간 만들기 를 프로젝트 주제로 결정

4. 우리 팀 개발 문화

4.1 개인 일일 회고

하루에 겪었던 어려움과 이에 대한 해결 방안을 각자 기록하여 팀원들과 경험을 공유하는 시간을 갖으면 좋을 것 같음. 또 프로젝트 진행 과정들을 기록하는 것이 굉장히 의미가 있는 것이라고 생각하여 개인 일일 회고를 작성하기로 결정함. 주 1회 경험을 공유하기 때문에 일일 회고는 간략하게 작성해도 충분할 것 같음.

4.2 회고 공유 및 기술 공유 규칙

주: 2회

시간: 1시간

요일: 화요일, 금요일

회고 공유 1회, 기술 공유 1회

4.3 일일 스크럼

하루에 한 번만 진행

단, 즉각적으로 공유를 해야 하는 내용은 자유롭게 질문

4.4 칸반 보드 작성

전체적인 흐름을 파악할 수 있기 때문에 작성하는 것이 좋다고 생각함

작성 공간: Github

4.5 분위기

프로젝트 진행 중 궁금한 점이 생기면 언제든지 편안하게 물어볼 수 있는 분위기를 만들자

궁금한 점은 최대한 기록을 남기기 위해 slack을 통해 진행하자

프로젝트 진행 과정에서 의견 차이가 있는 경우에는 바로 의견을 공유하여 이야기 하자

5. 프로젝트 진행 일정

9일 기획서 작성 및 제출

13일 팀원들간의 중간점검

16일 중간 점검 진행(기본적인 기능 구현은 이뤄진 상태면 좋을 것 같음)

16일~19일 디자인 작업

19일 프로젝트 작업의 90% 이상은 끝난 상태

20일 최종 점검 및 배포

6. 코드 리뷰 및 반영

2인 Approve → PR → merge

PR 템플릿 만들기

PR 템플릿 예시


## 📘 작업 유형

- 신규 기능 추가
- 스타일 속성 변경

<br/>

## 📑 작업리스트

> 작업한 목록

- 주문하기 페이지 생성 및 라우터 설정
- 입력폼 생성을 위해 `react hook form` 사용
- 메인페이지, about페이지 내 스타일 속성 변경

<br />

## 🚧 특이 사항

> PR을 읽을 때 살펴볼 사항

7. Github 관리

깃 플로우 활용

Main branch, Dev branch, Feature branch로 구분하여 관리

서로 작업을 하기 전 어떤 작업을 할 지 공유

작업이 끝난 경우에도 공유

8. Commit Convention

Angular JS Commit Convention

Commit Emoji 활용

9. 기타 회의 내용

내일 회의를 통해 기획서 작성

2023/01/05(목)