colleful / client

전북대학교 과팅 매칭 플랫폼

🌈 Colleful

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

🌴 브랜치 전략

• Git-flow 사용

🚀 colleful 앱 시연 영상

• 시연 순서 :
  회원가입 -> 로그인 -> 팀생성 -> 팀초대 -> 로그아웃 -> 팀을 구성하기 위해 초대를 보낸 계정으로 로그인 -> 초대 수락 -> 팀 상태 변경(준비 완료) -> 상대 팀(여자)을 만들기 위해 다른 계정으로 로그인 -> 팀 생성 -> 팀 상태 변경(준비 완료) -> 필터 및 검색 기능 -> 매칭 보내기 -> 보낸 매칭 목록, 받은 매칭 목록 -> 보낸 매칭을 수락하기 위해 남자팀 리더 계정으로 로그인 -> 매칭 수락 (팀 상태 :준비 완료 -> 매칭 완료) -> 팀 상태 변경 (매칭 종료) -> 닉네임 변경 -> 비밀번호 변경 -> 팀 삭제 -> 회원 탈퇴 -> 이메일 인증으로 비밀번호 찾기 -> 자동 로그인

🛠 리팩토링

• 리액트는 View를 중점적으로 다루는 라이브러리이기 때문에 컴포넌트 안에는 View에 대한 책임만 갖도록 View에 관련된 로직만 넣었습니다.

• 이렇게 네트워크 통신하는 것을 따로 만들어서 컴포넌트 안에 의존성 주입을 해주었습니다.

• 의존성 주입을 통해 객체의 생성과 사용의 관심을 분리하여 가독성과 코드 재사용을 높혔습니다.

• 컴포넌트를 한 폴더 안에 View만 집중하는 컴포넌트와 style만 집중하는 컴포넌트로 분리하여 코드량이 분산되었고 원하는 코드를 바로 찾을 수 있어 가독성이 좋아졌고 유지보수에 용이해졌습니다.

  CSS

  • 모두 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)	채팅목록(매칭 완료)

받은 초대목록	받은 초대목록

보낸 초대목록	보낸 초대목록

받은 매칭목록	받은 매칭목록

보낸 매칭목록	보낸 매칭목록

👩🏻‍💻 기타

• Colleful server repo
• API.md

client's Issues

emotion.js 적용

inline style -> css-in-js (object style)로 리팩토링

redux toolkit으로 리팩토링

개발모드 버벅거림, 동기화 불일치

• React Native Debugger가 느린이유, onPress와 setInterval등 지연 버그가 생기는이유
• 디바이스와 로컬 시간 동기화 이슈

타입스크립트 적용

비밀번호 찾기

로그인 페이지에 비밀번호 찾기, 비밀번호 변경 추가

• 시나리오

로그인 페이지에서 비밀번호 찾기 버튼을 누르면 모달창이 띄워짐
=> 모달창에 찾을 이메일을 입력
=> 이메일로 인증번호 보냄
=> client에서 인증번호 맞으면 비밀번호 변경 모달창을 띄워줌

성능 최적화

• 함수 useCallback으로 감싸기
• 강제 리렌더링 최소화 (구조 문제)
• useEffect 뒷정리함수 써서 메모리누수 막기

npm autolink 문제

Environment

• npm version: 6.13.4
• react-native-cli version: 2.0.1
• react-native version: 0.63.2
• Platform tested: Android

현재 안전하게 토큰을 저장하기 위해 키체인을 사용하려 했음
사용하기 위해선 npm >= 0.60 부턴 오토링크가 필요함
오토링크 메뉴얼에서 하라는대로 했는데 빌드 문제인지 왜 인지 모르겠음

현재는 react-native에서 지원하는 곧 사라질 AsyncStorage를 쓰는중

import {AsyncStorage} from 'react-native'; //곧 사라짐. 임시방편으로 쓰는중
import AsyncStorage from '@react-native-community/async-storage'; //안전하지않아서 안쓸거임
import * as Keychain from 'react-native-keychain';  //오토링크문제 해결되면 적용

Warning: AsyncStorage has been extracted from react-native core and will be removed in a future release. 
It can now be installed and imported from '@react-native-community/async-storage' instead of 'react-native'
See https://github.com/react-native-community/async-storage

사라지기 전에 해결해야 함. 아니면 리덕스에 저장해야될듯 ( ※ 수정 : 리덕스에 저장하면 쓸모없는게 새로고침하면 없어짐. 잘못된 생각 )

TextInput issue (validation, design)

1. 간단하게 모든 textInput의 onChange에서 space key 입력 못하게 하기 (필요없음) 12/24

const onChangeCode = (e) => {
    const { text } = e.nativeEvent;
    dispatch(
      changeField({
        form: 'register',
        key: 'code',
        value: text.replace(/(\s*)/g, "")
      })
    )
  }

2. TextInput에 정규식 넣어서 유효성 검사 (react-hook-form 사용해서 해결) 12/24

• 이메일필드에는 @과 . 이 들어가야함
• 모든 필드는 채워져야함
• 닉네임은 최대 10글자
• 비밀번호와 비밀번호 확인필드 값이 같은지 등

3. textInput custom design 알아보기 (필요한 부분은 AntDesign 사용할 예정) 12/24