오늘은 진행하였던 프로젝트 중 필자가 맡은 부분 + a 예상 질문에 대해 정리해보고자한다.
필자가 여태까지 진행하였던 개인 + 그룹 프로젝트 중 가장 쓸만한 것들로만 가져와봤다.
- 근육 마을 : 사용자의 운동 내용을 기록하고 관리하는 프로젝트
- 칠리칠리 소품랜드 : 지도 API를 활용하여 전국의 소품샵을 소개하는 프로젝트
- 포켓몬 도감 플러스 : 포켓몬에 대한 세부정보를 보여주는 프로젝트
- 메디헬프 (Medihelp) : 복약 관리 및 건강 정보를 공유하는 디지털 헬스케어 프로젝트
이 총 4가지 프로젝트가 설명하기에 가장 용이할 거 같아 각각에 대해 정리해보려한다.
1. 프로젝트
- 프로젝트 명 : 근육 마을 (Muscle Village)
- 소개
- 한 줄 정리 : 웨이트 진행 상황과 도전 과제를 게시판 형태로 공유합니다.
- 내용 : 운동, 특히 웨이트 트레이닝에 관련된 정보를 공유하는 커뮤니티입니다.
게시물 작성시 게시판 형식으로 인기글, 최신 글을 메인페이지에서 확인 가능합니다
조회수와 좋아요 기능으로 작성자-독자 간 소통이 가능합니다.
마이페이지에서 본인이 작성한 글 목록 확인, 수정, 삭제가 가능합니다.
기존에 작성해둔 벨로그가 있기 때문에 #34 ~ #36를
참고하여 작성한다.
1. 로그인 / 회원가입 기능
깃허브 OAuth 로그인과 이메일/비밀번호 기반 로그인 방식을 사용하여 제작하였다.
SignInBtn 컴포넌트는 깃허브 로그인 버튼으로, 클릭 시 supabase.auth.signInWithOAuth() 메서드를 사용해 깃허브로 로그인하도록 설정하였다.
LogIn 컴포넌트는 이메일과 비밀번호로 로그인할 수 있으며, 로그인 성공 시 홈페이지로 이동하도록 하였다.
SignUp 컴포넌트는 이메일/비밀번호 회원가입을 수행하고, 입력 유효성 검사를 진행하여 문제가 있으면 에러 메시지를 출력한다.
2. 상태관리 (authSlice.js)
사용자의 로그인 상태를 전역에서 관리하기 위해 Redux를 사용하였다.
로그인된 사용자의 정보를 signedInUser 상태로 관리하며, 로그인/로그아웃 시 setUser 액션으로 상태를 업데이트한다.
(Redux에서 직접 정의한 액션들)
Redux Toolkit의 createSlice를 사용하여 간결하게 slice를 구성하였고, configStore.js에서 auth 리듀서를 통합하여 전역에서 접근할 수 있게 하였다.
(slice를 구성했다 = 특정 기능이나 상태를 관리하는 하나의 작은 모듈을 생성했다.)
Redux Toolkit의 createSlice 기능을 사용.
- Redux 사용 이유
전역 접근성 : 전역 상태 저장소를 통해 로그인 상태를 앱 전체에서 쉽게 접근 가능. 컴포넌트 간에 상태를 전파할 필요 없이 전역으로 공유.
일관성 : 로그인/로그아웃과 같은 작업에서 상태가 일관되게 관리. = 상태가 중앙에서 관리.
디버깅 : Redux DevTools를 이용하여 상태 변경 흐름을 시각적으로 확인가능. = 디버깅과 개발이 용이.
- 다른 상태 관리법은?
Context API : (추후 프로젝트에서 사용하기 때문에 후에 구체적으로 작성하도록 하겠다)
리액트 자체의 Context API도 전역 상태 관리를 제공. 앱 규모가 작거나 자주 변하지 않는 사애에 제격.
Recoil, Zustand : 리덕스보다 간단하면서도 유연한 전역 상태 관리 라이브러리 ( 이또한 추후에 사용하여 구체적으로 설명하겠다.)
3. 스타일링
스타일은 Tailwind CSS를 사용하여 주었다.
4. 페이지 컴포넌트
로그인 페이지와 회원가입 페이지로 나누어 페이지 컴포넌트로 구성하였다. 이후 프로젝트에선 대부분 app 컴포넌트를 사용한다. (아마도 app 컴포넌트를 선호하지만 해당 주차 과제의 조건 중 페이지 컴포넌트로 분리해서 사용하는 게 조건이었던 걸로 기억한다.)
버튼 컴포넌트는 SignInBtn와 SignOutBtn 컴포넌트는 각각 깃허브 OAuth 로그인 및 로그아웃을 처리하고, 재사용 가능하도록 설계하였다.
