Colleful은 React Native로 개발한 Restful API 기반 앱이다.
전북대학교 과팅 매칭 플랫폼 Colleful의 client repository.
College와 Colorful의 합성어로, 다채로운 대학 생활을 제공해 주겠다는 의미이다.
- Android (Samsung Galaxy S7)
- 크로스 플랫폼 앱 : React Native (함수 컴포넌트 기반)
- 페이지 라우터 : React-navigation-v5
- CSS : emotion.js
- 상태관리 및 미들웨어 : Redux, Redux-saga
- AJAX 요청 : Axios, SWR
- 협업 : Github, Slack
- 시연 순서 :
회원가입 -> 로그인 -> 팀생성 -> 팀초대 -> 로그아웃 -> 팀을 구성하기 위해 초대를 보낸 계정으로 로그인 -> 초대 수락 -> 팀 상태 변경(준비 완료) -> 상대 팀(여자)을 만들기 위해 다른 계정으로 로그인 -> 팀 생성 -> 팀 상태 변경(준비 완료) -> 필터 및 검색 기능 -> 매칭 보내기 -> 보낸 매칭 목록, 받은 매칭 목록 -> 보낸 매칭을 수락하기 위해 남자팀 리더 계정으로 로그인 -> 매칭 수락 (팀 상태 :준비 완료 -> 매칭 완료) -> 팀 상태 변경 (매칭 종료) -> 닉네임 변경 -> 비밀번호 변경 -> 팀 삭제 -> 회원 탈퇴 -> 이메일 인증으로 비밀번호 찾기 -> 자동 로그인
-
리액트는 View를 중점적으로 다루는 라이브러리이기 때문에 컴포넌트 안에는 View에 대한 책임만 갖도록 View에 관련된 로직만 넣었습니다.
-
이렇게 네트워크 통신하는 것을 따로 만들어서 컴포넌트 안에 의존성 주입을 해주었습니다.
-
의존성 주입을 통해 객체의 생성과 사용의 관심을 분리하여 가독성과 코드 재사용을 높혔습니다.
-
컴포넌트를 한 폴더 안에 View만 집중하는 컴포넌트와 style만 집중하는 컴포넌트로 분리하여 코드량이 분산되었고 원하는 코드를 바로 찾을 수 있어 가독성이 좋아졌고 유지보수에 용이해졌습니다.
- 모두 styled-components로 작성
- 네이밍은 모두 CamelCase로 작성
- 네이밍 컨벤션으로는 독립적인 컴포넌트 스타일이면 S,
- 재사용 될 스타일이면
assets/css/commons.js사용, 별칭은 P,
- 받은매칭목록, 보낸초대목록 등 목록 레이아웃은
assets/css/InvitationMatchingListLayout.js 사용, 별칭은 L
- 독립적인 컴포넌트 스타일은 엘리먼트 속성을 쉽게 파악할 수 있는 이름으로 통일
- Wrapper는 컴포넌트를 감싸는 영역, WrapperInner는 컴포넌트 영역을 표시할 때, Container는 엘리먼트들을 감싸는 영역을 나타냄
- 모듈을 감쌀땐 Styled[모듈이름]으로 통일
- CSS 속성 기술 순서는 NHN 코딩컨벤션을 따름
출처 : https://nuli.navercorp.com/data/convention/NHN_Coding_Conventions_for_Markup_Languages.pdf
| 비밀번호 찾기/변경 |
이메일 인증 성공후 비밀번호 변경 |
변경 성공 |
 |
 |
 |
| 팀 매칭 전 유저정보 보기 (이미지) |
팀 매칭 전 유저정보 보기 (자기소개) |
매칭 신청 |
 |
 |
 |
| 마이페이지 |
계정 (본인 인증) |
계정(회원정보 수정, 로그아웃, 회원탈퇴) |
 |
 |
 |
| 팀 상태변경(매칭 완료) |
팀 상태변경(멤버 구성중) |
팀 상태변경(준비 완료) |
 |
 |
 |
| 채팅목록(매칭 x) |
채팅목록(매칭 완료) |
 |
 |
| 받은 초대목록 |
받은 초대목록 |
 |
 |
| 보낸 초대목록 |
보낸 초대목록 |
 |
 |
| 받은 매칭목록 |
받은 매칭목록 |
 |
 |
| 보낸 매칭목록 |
보낸 매칭목록 |
 |
 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent