한달동안 눈물을 삼키며 나 자신의 한계와 벽에 부딪치면서..우당탕탕 진행된 프로젝트이다. 나 너무 멍청했다는걸 다시한번 알게되었고, 공부해야할 부분도 명확히 알게 되었다.
23년 8월 7일 ~ 9월 1일까지 진행된 프로젝트이다.
- 캘린더 기반의 정보공유 사이트
주제 및 기획의도?!
캘린더를 이용하여 날짜를 공유 및 추가하는 기능, 사용자들이 궁금해할만한 정보와 유사한 사이트가 별로 없는것을 타켓으로 잡았다.
이렇게 우리 사이트의 서비스 방향성!!이라고 할 수 있다.
우리팀원은 총 6명이고
- front 4명
- back 2명 으로 진행되었다.
내가 맡은 포지션은 front부분이고 그 중에서 로그인, 회원가입, 마이페이지, 마이캘린더 페이지 부분이다.
주로 유저와 관련된 페이지부분이 많았다.
이 페이지를 하고싶었던 이유는 웹 개발의 중요한 부분이며
모든 사이트를 가보면 회원가입 및 로그인 기능이 필수로 들어가 있는 경우가 대부분이다.
또한 서버와의 통신을 통해 데이터를 주고 받을 수 있으며, 토큰을 사용하여 인증 및 권한 관리를 구현할 수 있어서다!!
뿐만 아니라 사용자 경험을 향상시키기 위해 직관적인 UI/UX를 제공하여 보다 사용자에게 더 쉬운 접근성을 제공하고자 했다.
🤭 아래 사진들은 내가 구현한 페이지들의 캡쳐본을 넣어..보았다 ㅎ
1. 로그인 페이지
- 원래는 id, pw, button box뿐이였다.. 구조적으로도 너무 밋밋해서 다시 바꿨다.
- react-cookie를 이용하여 토큰을 사용
- 로그인 성공시 access_token으로 모든 페이지에 접근 가능하게 함
- 일치하는 유저 없을 시 alert창을 통해 사용자에게 알려줌
- 로그아웃 시, api delete 호출하여 쿠키에 저장된 토큰 삭제하여 안전하게 로그아웃!
2. 회원가입 페이지
- react - hook - form을 사용하여 handleSubmit함수이용, register이용, validation 체크 통해 유효하지 않는 값에 대해 에러메세지 노출
- 비동기 처리 위해서 axios사용, api post로 서버와 통신하여 중복된 데이터 값이 있는지 확인후 사용자에게 알려줌
- 성공시 홈화면으로 이동
- 실패시 alert창으로 '회원가입 실패'알려주기
3. 마이페이지
- 회원가입과 유사하게 코드가 진행됨
- react - hook - form을 사용하여 handleSubmit함수이용, register이용, validation 체크 통해 유효하지 않는 값에 대해 에러메세지 노출
- 비동기 처리 axios 사용/ api get을 통해 서버와 통신 후 사용자의 토큰정보에 대한 정보 가져오기
- 가져온 데이터는 form요소 안에 채워지고 ID, Name은 변경 불가능하게 고정!
- 그 외 사용자 정보는 수정가능하며 validation을 통해 유효하지 않는 값에 대해 에러메세지 노출
- 비밀번호만 변경 시, 모달창을 통해 api put으로 연결하여 비밀번호변경함
- 그 외 사용자 정보 변경은 하단의 수정하기 버튼의 api put 연결하여 서버와 소통
4. 내캘린더 페이지
- react-calendar 라이브러리 사용하여 커스텀 진행
- useQuery이용하여 서버로부터 공연 데이터 조회해옴
- 받아온 데이터의 날짜가 있으면 리액트 캘린더에 점 찍어주기
- api-get으로 저장된 공연 디데일 데이터 받아오고 오른쪽 화면에 뿌려주기
- 공연마다 메모기능 추가(추가, 삭제)
- api post로 서버로 데이터 보내기
- api get으로 저장된 메모 리스트 호출
- api delete로 메모 삭제
🧐 받아온 데이터 중에서 해당하는 날짜를 선택하고 저장된 공연 중에서 해당 공연에 메모를 추가하는 코드이다!
처음에는 유저 id로 접근했는데! 알고 보니 캘린더 마다의 id가 존재했었다!!
백과의 소통도 정말 중요하다는걸 알게되었다..시간 아까비.. for문을 돌려서 캘린더 id수 만큼 돌리고 메모 리스트를 불러왔다.
이렇게 만들어졌다.
리액트를 처음 사용하여 미숙한 점이 너무 너무 많았다.
props를 넘겨주는 것도 너무 헷갈렷을 뿐더러,
컴포넌트 구조 짜는것도 생각보다 머리가 아팠다.
그리고 가장 후회한 것은 useMutation을 사용하지 못 했다는점?!
지금 코드로 메모를 추가하거나 삭제하면 즉각적으로 화면이 새로고침되어서 나오지 않는다..
내가 강제로 리프레쉬를 통해서..이걸 안하려고 리액트를 사용하는건데!!!!!!
코드가 이미 많이 진행된 상태에서 mutation을 사용을 해보려고 했는데 에러가 무수히 발생..하여
이번 프로젝트에선 사용하지 않았다..
분명 넘겨주는 데이터들이 꼬여있어서 발생한거같다.
다음 프로젝트때는 꼭 useMutation을 사용해서 데이터 생성, 삭제, 업데이트를 관리해야겠다고 느꼈다.
그리고 토큰은 simple JWT를 사용했는데
어찌어찌 access_token은 사용하고 있으나! 이 access_token이 만료되면 refresh_tokend으로 갱신을 해줘야하는 것을 알고 있는데!
이론상으로는 이해하는데 코드로 구현하기가 어려웠다.
이 프로젝트에서 가장 아쉬운 부분이였다.. 토큰 관리를 제대로 못한 점!!!!! ㅠㅠ
다시 토큰공부를 시작해보고 다음 프로젝트에는 토큰을 사용한다면 꼭 성공해보려고 한다!!
두서없이 적었다..마치 내머리속같다.. 혼란 그잡채..😞
화이팅하자!!!
로고만들기도 생각보다 너무 재밌었따!!!! 😚
