요-서바라는 나만의 포토스팟을 공유하고 소통 할 수 있는 웹서비스입니다.
현재 위치를 기반으로 주변에 있는 사진 남기기 좋은 장소를 찾을 수 있고, 나만의 인생샷도 공유할 수 있습니다.
|
|
|---|---|
|
|
- 카카오 소셜로그인
- 카카오 지도를 이용한 지도 페이지에서 게시물 위치 조회
- 클릭한 게시물의 위치로 게시물 스크롤 및 핀 이동 (이미지 추가 예정)
- 무한스크롤을 통한 이미지 분할 로딩
무한스크롤적용
무한스크롤을 통해 이미지 로딩을 조절하고 사용자가 간편하게 사진 위주로 훑어 볼 수 있도록 제작했어요.카카오 소셜로그인
사용자 편의성를 고려하여 카카오 소셜로그인을 도입했어요.카카오 맵sdk 활용
카카오 맵이 국내 사용자에게 구글맵보다 적합하다고 판단했고, 카카오 로그인과 같은 API KEY로 함께 관리하기 위해 선택했어요.Redux-toolkit을 이용한 상태관리
지도 페이지는 위치를 기준으로 데이터를 받아오고 무한 스크롤 페이지는 최신 순으로 데이터를 받아오기 때문에 각각 나누어서 전역상태관리를 했어요. 각각의 페이지에서 게시물의 수정 및 삭제가 일어나는 경우 두 페이지에 모두 적용 시키기위해 전역 저장소를 통해 상태를 관리했어요.모달 렌더링 문제
기존에 모달창을 공용컴포넌트로 만들 때 모달을 열고 닫는 state와 css의 display속성을 사용하여 구현했었습니다. 하지만 현재 프로젝트에서 모달창을 게시물의 상세정보를 보여주는 용도로 사용하며 모달 내부에 게시물 정보, 게시물에 대한 댓글 등의 정보가 들어가면서 문제가 발생했습니다. 여러개의 게시물을 렌더링하며 화면에 보이진 않지만 모달 컴포넌트도 여러번 렌더링될뿐더러 모달 안에 들어가는 children컴포넌트의 상태도 초기화가 되지않는 문제가 생겼습니다.
앞서 말씀드린 문제를 해결하기위해 모달을 열고 닫는 방식을 수정했습니다. 기존의 CSS를 활용한 방식에서 모달의 생성여부를 정하는 state를 통해 조건부 렌더링을 하면서 유저가 게시물의 미리보기를 클릭하는 등의 액션이 일어났을 경우에만 모달이 렌더링 되도록 수정했습니다.조건부 렌더링을 통해 불필요한 렌더링을 줄이고 children 컴포넌트의 상태값이 리액트이 생명주기를 따라 모달이 닫히면 초기화 되도록 만들었습니다.
useEffect가 두 번 실행되는 경우
특정 상황에서만 작동되어야하는특정 상황에서만 작동되어야하는 useEffect hook이 두번 작동하는 상황이었습니다. console.log를 찍어가며 서버로부터 요청한 데이터가 잘 들어왔는지 확인하던 중 게시물 데이터가 같은 부분에서 2번 출력된것을 볼 수 있었습니다. 오른쪽 예시 코드처럼 dispatch는 최초 렌더링 때와 page가 변할 때만 작동해야하는데 dispatch된 데이터를 출력해보면 page의 변화가 없는데도 2번씩 출력이 되는 현상이었습니다. 이를 해결하기 위해 검색을 하던 중 index.js의 react strict mode가 개발환경에서의 문제발생을 감지하기위해 두번 렌더링을 진행한다는것을 알게되었고 해당 기능을 종료하면 다시 원하는 대로 특정 조건에서만 dispatch를 실행했습니다.
상세페이지 UI 수정
사진 위주의 서비스기 때문에 사진이 차지하는 비율을 늘렸습니다.
로그인 여부에 따른 댓글 유효성 검사 수정
로그인하지 않은 사용자에게는 댓글 작성 버튼을 숨기고 input을 비활성화 시켜 비회원의 댓글 작성을 차단했습니다.
게시물 삭제 redux 적용
기존에는 게시물 삭제 후 강제 새로고침을 통해 서버로부터 게시물을 갱신했습니다. 수정 후에는 게시물 삭제 시 새로고침하지 않아도 삭제된 내용이 바로 적용 되도록 상태 처리했습니다.
코드컨벤션
- 컴포넌트 : PascalCase
- 함수 : camelCase
- 변수 : camelCase
- 폴더명 : 소문자
깃플로우
- 각자 작업할 브랜치 생성
- dev 브랜치 생성
- 이상없으면 main 병합
| 이석준 | 이예찬 | 서정희 |
|---|---|---|
 |
 |
 |
| Seokjun7074 지도 페이지, 게시글 작성 및 수정, 사용자 페이지, 리팩토링 |
yc8569 무한스크롤 페이지, 상세 페이지 |
jinaSE0 소셜로그인 |