목차
- 서비스 소개
- 서비스 이름의 의미와 이유:
- 서비스 의미
- 기획 의도
- 고민을 털어놓을 곳 없는 아버지들의 소통, 즐김의 장.
- 기술 스팩
- 사용한 기술들 + 이유
- 언어: TS: 많은 곳에서 사용하고 있기도 하고 팀원들의 TS사용 경험이 적었기 때문에 공부겸.
- 라이브러리
- react,
- reacRouter: react, reactRouter를 조금이라도 경험해본 팀원들이 더 많았기 때문에 react로 결정함. 기간이 길지 않았기 때문에 조금이라도 익숙한 기술들을 사용하는것도 중요했음.
- react-icon: 아이콘을 위해서 사용했음. 아이콘을 사용할 때 전체 아이콘을 불러오지 않고
- react-query
- react-hook-form
- styledComponent: emotion과 비교했었는데 유의미한 차이를 찾지못함. 역시나 다뤄본 경험이 있는 styledComponent로 결정.
- eslint, prettier: 이미 해당 조합을 쓰고 있었고 바꿀 필요성을 느끼지 못함
- axios: 레퍼런스도 많고 interceptor가 필요한 상황이면 아직까진 axios 외엔 대안이 별로 없더라구요.
- contextAPI: 전역에서 보관할 자료가 많지 않고 프로젝트의 크기가 크지 않음을 고려하여 contextAPI를 사용하기로 함.
- netlify: 팀원들의 사용경험이 있기 때문에 빠르게 배포가 가능할 것으로 판단하여 사용함.
- 리엑트 쿼리: 채널목록, 유저데이터, 로그인 데이터처럼 변동이 많지 않은 데이터들은 반복적인 요청을 하지 않도록 했습니다.
- 페이지별 소개
- 전체적인 기능:
- 로딩을 통하여 사용자에게 로딩중임을 알려줌.
- 에러 발생시 에러바운더리를 통하여 에러 컴포넌트로 이동함.
- 페이지네이션 적용(페이지가 바뀌면 상단으로 스크롤 이동)
- 회원가입
- 회원가입 시 이메일 중복 체크 & 이메일 형식 체크
- 회원가입 시 닉네임 중복 체크
- 회원가입 시 입력조건(email, fullName, password, password 일치여부) check
- 로그인, 로그아웃
- 로그인 시 이메일 형식 체크
- 비밀번호 7글자 이상으로 제한
- 로그아웃 버튼 누르면 정상적으로 로그아웃
- 포스트
- 작성:
- 이미지 미리보기.
- 작성 중인 내용 이어서 작성가능.
- 수정:
- 이미지도 수정가능.
- 유저 정보
- 정보 수정
- 프로필 사진 수정가능
- 배경 사진 수정가능
- 비밀번호 변경 가능
- 닉네임 변경 가능
- 알림 기능
- 알림 누르면 해당 사항으로 이동가능
- 알림 갱신 버튼을 통해 알림을 갱신 할 수 있음
- 알림 종류에 따라서 다른 UI를 볼 수 있음.
- 나아갈 방향
- 코드 리팩터링을 통한 최적화, 파일 구조 정리를 통한 API 호출 최소화
- 서스팬스 적용
- 감사합니당