GitHub Link
https://github.com/wecode-bootcamp-korea/36-2nd-5MILLION-frontend
영상 Link
👉 화면을 클릭하면 영상으로 이동합니다.
👉 프로젝트 발표 ppt
프로젝트 소개
참고 사이트
- ONE MILLION (대한민국 최대규모의 댄스 아카데미) https://www.1milliondance.com
프로젝트 기간
- 22.08.29 ~ 22.09.08
팀원 소개
- FrontEnd 3명 BackEnd 2명
FE : 김준호 (메인 페이지, Instructor 페이지, Instructor Detail 페이지) / 송경용 (사이드바, 소셜 로그인 페이지) / 이주영 (NAV바, 스케줄 예약 페이지)
BE : 이솔 (instructors 조회 API, instructors 상세 조회 API) / 이지현 (social login API, schedule 조회 API, class 예약/취소 API, myAccount 조회 API)기술 스택
- FE :
- BE :
협업 도구
- Gather
- Notion
👉 5MILLION 노션 페이지 바로가기
구현한 파트
Side 바 : SideBar.js
소셜 로그인 : SignIn.js
> 소셜 로그인 파트
- REST-API를 활용한 카카오 로그인 기능
- 카카오 OAuth 서버로부터 access_token 요청하기 카카오 OAuth 서버에서 로그인 인증을 완료하면, OAuth 서버에서 인증 코드(authorization_code)를 반환
- 서버에 access_token을 사용하여 인증 요청
fetch함수를 사용하여 서버에 인증 요청을 보내고, authorization 헤더에 Bearer ${TOKEN}을 포함. 이렇게 함으로써, 서버에서는 access_token을 사용하여 인증 요청을 보낸 것이라는 것을 알 수 있음.
- 인증 요청 성공 시 로컬 스토리지에 토큰 저장
localStorage.setItem으로 서버에서 반환한 access_token을 로컬 스토리지에 저장 이후에는 로그인된 사용자의 정보를 가져옴
- 카카오 OAuth 서버로부터 access_token 요청하기 카카오 OAuth 서버에서 로그인 인증을 완료하면, OAuth 서버에서 인증 코드(authorization_code)를 반환
> Sidebar 구현
- react-router-dom 패키지에서
Link컴포넌트를 이용해 원하는 메뉴(URL)로 이동 - useEffect를 사용해 사이드바 외부를 클릭해도 사이드바가 접히게 구현
- MenuBar 를 클릭할 때마다 isOpen 상태 값을 현재 상태와 반대로 바꾸며 열림 / 닫힘 전환
- HandleModalClose 라는 함수를 만들어 window 객체의 클릭 이벤트를 리스닝
- 창이 열려있는 상태에서 마우스 클릭이 발생하면 이벤트 객체가 HandleModalClose 함수에 전달되고, 클릭된 요소가 SideBar 모달 밖인 경우에는 setOpen(false)와 setShowMode(”menu”)를 호출하여 SideBar 모달 창을 닫음
프로젝트 회고
good
initiative (진취성)
이번 프로젝트를 회상하면 기술적인 부분의 성장, 아쉬웠던 부분들 이전에 참 재미있게 자발적으로 참여했던 즐거운 시간이라는 생각이 먼저 든다. 팀원들 모두 자발적으로 자정이 넘는 늦은 시간까지 개발에 몰두했고, 더 완성도 있는 페이지를 만들기 위해 프론트와 백이 대략적인 서로의 흐름과 블로커를 공유했다. 이 과정에서 정해진 기간안에 과제를 끝내야 하기 때문이 아니라 내가 지금 하고있는 개발이라는게 너무 재밌어서 능동적으로 프로젝트에 참여하게 되었고 빠져들었던거 같다. 1차때는 프로젝트의 결과물을 보고 뿌듯함을 느꼈다면 이번 2차에서는 그 결과물로 가는 과정을 온전히 즐기고 받아들인거 같아서 뿌듯했다.
teamwork (협동심)
아침에 스탠드업 미팅 말고도 저녁에 다시 다같이 모여 블로커 공유 뿐 아니라 그 블로커를 함께 해결해 가는 시간을 가졌다. 내가 맡은 부분의 내가 짠 코드로 끝나는 것이 아닌 다른 팀원들의 코드도 함께 공부하고 블로커를 같이 고민하며 다른 파트에 대한 이해도를 높일 수 있었고, 단순히 내가 맡은 파트만 이해하는 프로젝트가 아닌 우리팀의 프로젝트를 이해하게 됐다. 내 코드 뿐 아니라 다른 팀원들의 코드도 열심히 이해하려는 모습이 너무 좋았고 앞으로의 팀프로젝트 마음가짐에 긍정적으로 작용할 것 같다.
problem
engrossed in layout (우선순위 결정)
기능구현 이전에 레이아웃에 시간을 너무 쓴것. 이번에 스스로 느낀 가장 큰 문제점이었다. 사실 1차 프로젝트에서는 맡은 부분이 비교적 간단한 기능이어서 UI구현에 꽤 많은 시간을 할애해도 정해진 양을 끝낼 수 있었다. 하지만 2차에서는 더 많은 부분과 기능을 맡았음에도 불구하고 1차때와 마찬가지로 레이아웃 만들고 다듬는 작업에 많은 시간을 썼다. 결과적으로 기능구현이 계획보다 늦은 시간에 시작되었고 다행히 주어진 파트를 다 끝낼 수 있었지만, 추가적으로 다른 기능도 구현해볼 수 있는 시간은 부족했다. 우선순위를 기능적인 면에 두었으면 추가기능도 구현하지 않았을까 하는 아쉬움이 남는다.
끝내며
이번 2차 프로젝트는 이 영상 하나로 설명된다. 😊
(계속된 오류속 드디어 성공한 소셜로그인 feat.제일신난 본인)
<div class="video-container">
<video autoplay muted controls src="https://file.miricanvas.com/user_video/2022/09/08/03/10/ktjapvcv0uuo91e9/IMG_2754.mp4" width="340" height="600"></video>
</div>글 작성할땐 동영상 정상적으로 나오는데 왜 작성하고 나니까 재생이 안되지..?
