💬 Portfolio
사이드프로젝트, 스터디모임 매칭 플랫폼 토티 개발기
date
Aug 29, 2022
slug
totee
author
status
Public
tags
React
Recoil
React-query
summary
사이드 프로젝트, 스터디 모임 구성원을 매칭하는 플랫폼 토티 개발
type
Post
thumbnail
category
💬 Portfolio
updatedAt
Apr 12, 2023 12:57 PM
🔗 Link
Source
Web
✍️ 요약
사이드 프로젝트, 스터디 모임 구성원을 매칭하는 플랫폼
- 사용 대상
- 스터디 혹은 사이드프로젝트를 만들거나 참여하고 싶은 사람
- 문제 의식
- 스터디나 사이드프로젝트에 참여하고 싶은 사람은 모임 정보를 찾기 힘들고, 프로젝트의 주최자는 함께하는 사람을 찾기 힘든 미스매치를 해결하기 위한 플랫폼
- 제공 서비스
- 프로젝트 개설 등록을 통한 프로젝트 인원 모집
- 프로젝트나 스터디의 정보를 보고 참여 가능
🛠 사용 기술 및 라이브러리
- React
- Typescript
- Recoil
- Sass
- React-query
🖥 담당한 기능 (Front-End)
- 소셜로그인 기능 개발
- 소셜로그인 기능 개발을 통한 카카오와 구글의 access token와 백엔드에서 제공하는 JWT토큰을 활용한 로컬스토리지와 Recoil을 활용한 유저데이터 및 로그인 유지 기능 개발
- 로그인 전 후 헤더 변경 기능 개발
- 상세페이지 개발
- React-query를 활용한 useQuery 데이터 페칭 구조 설계 및 데이터 업데이트시 refatch할 수 있도록 useQuery내의 refetch 활용
- 모임 개설 페이지 개발
- React-quill 라이브러리 활용을 통해 에디터 기능 개발
- 등록하기 버튼 클릭시 관련 정보를 백엔드에 보내서 해당 행사에 대한 정보를 저장하는 기능 개발
- Sweet-alert 라이브러리를 활용하여 비로그인, 정보미입력시 예외처리 alert 설계
💡 성장한 부분
- 실질적으로 백엔드와의 협업을 처음 경험해보면서 Postman을 활용한 통신 테스트 등 Restful API에 대한 이해를 갖게 되었고, 백엔드와의 데이터 통신을 하면서 비동기적인 처리를 어떻게 하면 좋을지 고민이 깊어졌습니다.
- React-quill 라이브러리를 활용하면서 라이브러리에 대한 이해와 활용하는 법에 대해서 알게 되었습니다. Sass를 활용하여 효율적인 스타일링 코드를 짜기 위한 고민이 깊어졌습니다.