방탈출 후기 웹사이트를 만들게 된 계기
항해에서 하는 첫 백과 프론트의 협업이라서 규모를 작게 하여 연결시키는것을 중점으로 하기로 했다
기획을 할때 만들어야 할것을 단계별로 나누어 프로젝트를 업그레이드 하기로 했다
그래서 처음 작게 만들만하고 흥미가 있는 주제로 CRUD가 다 들어간 사이트를 만들기를 원했는데
방탈출을 좋아하여 방탈출을 별점을 매기고 후기를 남겨 서로의 경험을 공유할 수 있는 웹사이트를 만들기로 하였다
프로젝트 개요
백과 프론트의 협업을 중심으로 기획한 단계별로 방탈출 후기 웹페이지 구현
프로젝트 일정
| 일정 | 내용 |
| 7.14 | 프로젝트 기획, 와이어 프레임 설계, api 설계, 개발환경 세팅 |
| 7.15 ~ 7.16 | 1단계 기능 구현, 프론트-백 연결 |
| 7.17 ~ 7.18 | 2단계 기능구현, https 프론트-백 연결 |
| 7.19 | 3단계 기능구현 |
| 7.20 | UX 테스트, UX개선, 발표 |
개발환경 세팅
https://github.com/hyeon12/escapediary-FE
GitHub - hyeon12/escapediary-FE: 항해 프론트엔드 - 백엔드 협업 프로젝트
항해 프론트엔드 - 백엔드 협업 프로젝트. Contribute to hyeon12/escapediary-FE development by creating an account on GitHub.
github.com
git repositories를 파서 규리님이 fork해가서 pr하기로 했다
프로젝트 내용
프로젝트 설명
방탈출을 좋아하는 사람들을 위한 방탈출 후기 웹사이트를 제작
방탈출을 좋아하는 사람들끼리 방탈출에 대한 후기를 남기고 평점을 매겨 방탈출을 추천하고 의견을 나눌 수 있음
주요특징
- ⭐ 방탈출 평가를 한눈에
- 방탈출을 잘 모르는 사람도 한눈에 볼수 있는 별 평점
- 😊 부담없이 웹사이트 방문
- 로그인을 하지 않아도 게시물 조회가 가능
- 🚫 분탕러는 출입 금지!
- 로그인을 한 사람만 게시물 작성 가능
- 👮 게시물 보호
- 자신이 작성한 게시물만 삭제, 수정 가능
- 👁🗨 언제 어디서나 웹사이트에서 확인 가능
- 테스크탑, 태블릿, 스마트폰 반응형 구현
나의 담당 업무
- 반응형 UI제작
- 메인 페이지
- 상세페이지
- 로그인 화면
- 회원가입 화면
- 프론트 기능 구현
- 게시물 전체 조회
- 게시물 상세 조회
- 게시물 작성
- 게시물 삭제
- 유저 조회
- 로그인
- 로그아웃
- 페이지네이션
- 백엔드와 협업(커뮤니케이션)
- 문서작업
후기
트러블 슈팅
- 반응형
- 반응형에 도전해보았는데 제대로 넣어보는 것이 처음이라 rem과 media query를 구현했지만 중간 중간 원하지 않는 결과가 나왔다 중간 점검때 보통 %, vw, vh를 적절히 사용해야 한다고 말씀해 주셔서 피드백에 따라 %, vw, vh, rem, media query를 적절히 사용하여 더 나은 반응현 UI로 만들었다
- 서버연결 CORS
- 첫 서버 연결을 하니 CORS에러가 나왔다 저번에 공부했던 내용이라 아는 오류라서 서버분들과 커뮤니케이션을 해서 금방 해결했다
- 로그인 쿠키
- 로그인기능을 구현하는데 서버에서 헤더에 쿠키를 잘 보내주었다고 뜨는데 회원가입을 해야만 사용할수 있는 기능들을 사용하지 못하는 문제가 생겼다 쿠키 스토리지를 확인해봐도 쿠키가 저장되 있는 모습을 볼 수 없어서 웹에 쿠키를 실제로 가지고 있는지 확인할 수 없었다. 쿠키에 토큰을 확인해야 하는 기능에 { withCredentials: true }를 넣어 쿠키를 확인하도록 하고 서버와 함께 오류 메세지를 확인해 보면서 에러를 해결했다
- 로그인 한 유저 조회
- 쿠키를 프론트쪽에서 확인할 수가 없어 유저가 현재 로그인 상태인 것을 알려면 반복적으로 페이지마다 유저가 로그인한 상태인지 서버에서 확인해야만 했다 그래서 전역 상태 관리를 해줄 redux를 이용해 한번 유저가 로그인 했을 경우 redux에 유저 정보를 넣어놓아 redux에 유저정보가 있을 경우 유저가 로그인 했다고 판단 로그인한 상태에 UI를 보여주었다
- 새로고침 할 경우 Redux 초기화
- 로그인 한 상태에서 새로고침 할 경우 redux store 데이터가 초기화되는 문제가 있었다. 리덕스 애플리케이션 상태를 로컬 스토리지에 저장하는 redux-persist 라이브러리를 사용하여 해당 문제를 해결할 수 있었다
아쉬웠던 점과 느낀점
아쉬웠던 점
프로젝트를 완성하고 나니 시간이 부족해서 구현하지 못한 기능들이 아쉬웠다 단계별로 나누어 1단계에 게시물 조회와 게시물 작성을 하고 2단계에 로그인 기능 3단계에 로그인한 유저 게시물 작성, 게시물 작성자일 경우 게시물 수정과 삭제 4단계에 댓글기능 5단계에 검색기능을 계획했는데 로그인 기능을 구현하는데 애를 먹어 시간을 많이 사용했다 최대한 3단계까지 구현을 하고 싶어 밤을 새면서 완성을 했지만 시간이 더 있었더라면 UX 테스트도 더 자세히 해보아 더 개선할 수 있었을텐데 생각이 들었다 코드 리팩토링도 해서 코드를 좀더 깔끔하게 만들고 싶었다
느낀 점
프로젝트를 하면서 팀원분들과 커뮤니케이션을 많이 했는데도 중간에 api가 약간 다른 문제가 있었다 처음에 프로젝트 크기를 크게 잡아서 그것을 줄여 처음 초기 기획을 만든건데 그러면서 처음 커뮤니케이션했던 내용이 섞여 프론트가 생각한 api와 백이 생각한 api가 다른 것이다 다행히 금방 찾아서 소통을 해서 금방해결했지만 백과 프론트과 협업하여 좋은 프로젝트를 만들기 위해서는 처음 기획을 세세하고 자세하게 하고 계속해서 소통을 해서 서로 확인해야 한다는 것을 깨닫게 되었다 이번에 UX 테스트를 하면서 몇가지 추가하였는데 로그인을 한 유저가 페이지 내에서 로그인 화면을 갈수는 없으나 주소창에 억지로 입력하면 들어갈 수 있는 것을 확인하여 로그인했다면 억지로 로그인을 했을때 경고창을 띠어주고 메인화면에 보내는 것이나 게시물 작성에 경우 글자수가 제한되어 있어 유저에게 글자수가 보이게 하고 제한된 글자수를 넘겼을 경우 빨간색으로 보이게 하는 것 어떻게 보면 단순한 것인데 이런 세세한 점을 개선하니 훨씬 좋은 UX가 되어 자그마한것도 넘기지 않고 UX를 개선시키는 것이 중요하는 점을 느끼게 되었다
댓글