중간점검
월요일 현재까지 프론트와 백의 진행상황을 팀원들과 공유했다. 팀으로 프로젝트를 진행하고 있지만 아직 서버와 통신하는 코드를 구현하지 않았던터라 진행상황을 공유하고 앞으로의 일정을 맞춰볼 필요성이 있다고 판단하여 진행했다.
프론트 엔드
진행상황
- 메인 페이지 UI구현
- 네비바 구현
- 키워드 검색 기능 구현(이 위치에서 다시 검색 / 내 위치로 이동/ 기존 검색결과 마커 제거)
- 검색된 편의점 리스트 뷰 UI 구현
협의사항
- map, mapContainer 안에 있는 keyword(검색어) - 이름 모두 변경해야할듯
- 검색 위치가 제대로 안 잡힘 ⇒ search(’’) 함수로 변경
- 내 위치로 이동 오류
→ 서치 옵션값이 문제인 듯 // keyword search / category search 나누기
- styles 폴더 나누기
백 엔드
진행상황
- Qoddi 배포 성공
- API - stores 부분 완료
- Firebase 연습 중
협의사항
- 리뷰 조회 요청할때 페이지, 사이즈 지정해서 요청하기
- 리뷰 저장할때 키워드 내용에 오류가 있으면 적용되지 않도록 협의
git-flow 브랜치 분기 실수
아직 프론트엔드는 팀원끼리 코드 스타일과 자세한 파일구조를 맞추지 않았다.
그래서 가장 먼저 시작한 티켓의 브랜치 (feature/7-map-component)에서 페어 코딩으로 작업을 계속 같이했다.
그러다보니 해당 브랜치에서 너무 많은 작업을 이미 진행을 해버렸고 다른 티켓에 있는 내용까지 해버리는 사태가 발생했다..
멘토님과 팀원과 상의하여 적당한 선에서 코드를 짤라서 현 브랜치(feature/7-map-component)의 내용을 Develop브랜치로 Pull Request를 보냈고 멘토님께 리뷰를 받은 후 머지를 하여 많은 브랜치를 분기한 상태이다.
소스트리 다시 사용
아... 필자는 현재 window유저이다.
window에 Ubuntu로 리눅스를 깔아서 사용하고 있다.
이 부분이 소스트리를 사용하는데 아주 큰 장애물이 될 줄 몰랐다.....
어찌저찌 Ubuntu에 있는 현 프로젝트의 깃과 연결은 했지만~
window에서 소스트리로 커밋을하고 remote 레포지토리에 push를 하기 위해서는 보안키다 필요하다.
Git 서버 - SSH 공개키 만들기 ~ SourceTree 연결 https://maeryo88.tistory.com/293
위 글을 읽고 ssh 공개키를 만들고 git과 소스트리에 공개키를 저장하여 겨우 push를 가능하게 만들었다.
제발 이제는 소스트리에 문제가 없길...
로그인
카우치 코딩 프로젝트의 일정에서 가장 많은 시간이 필요하다고 판단되는 부분이 로그인이었다.
단순이 email , password를 이용한 로그인을 구현하는 것이 아닌 OAuth를 이용한 로그인을 구현하는 것이기에 OAuth의 기본 로직을 이해하지 못하면 쉽게 접근하기 힘든 구현이다.
멘토링 시간에 우선 멘토님과 로그인관련 로직을 배웠고 firebase를 이용 간단한게 google로부터 accessToken을 받아와 우리 서버와 통신하는 부분을 구현했다.
onAuthStateChanged
프론트에서 firebase를 이용하여 OAuth 로그인을 구현할 때 많이 사용되는 함수이다.
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
// User is signed in, see docs for a list of available properties
// https://firebase.google.com/docs/reference/js/firebase.User
const uid = user.uid;
// ...
} else {
// User is signed out
// ...
}
});웹 페이지에서 유저가 로그인 햇는지 안했는지 관찰하며 해당 페이지에서 로그인한 유저가 로그아웃을 하지 않았다면 계속해서 로그인 상태를 유지 해주는 기능을 제공한다.
본 프로젝트에서는 onAuthStateChanged함수를 app.tsx에서 useEffect에 넣어서 유저의 상태를 관리하는 것으로 했다.
들어온 유저 값은 redux-toolkit의 createAsyncThunk로 서버와 비동기 상태를 다뤘고 현재 서버와 통신하는 동안에는 loading 값을 받아와 loading UI를 넣었다.
할 일
팀원들끼리 다음주 월요일에 할 일을 정했다.
- 명훈 - 리뷰 작성 UI 티켓 , overlay, infoWindo 구현 부분 공부
- 도경 - 리뷰 등록 버그 수정, 리뷰 수정/삭제기능 구현 후 Pull Request
- 예지 - 필터링뷰 UI 티켓, 지도 부분, 복습(thunk)
메인페이지와 로그인 파트까지 나름 잘 구현이 되어서 다행이다.
앞으로 상세페이지와 작성페이지의 UI를 우선 구현하고 기능들의 디테일을 가져가면 빨리 프로젝트의 ver1을 만들 수 있을 것 같다.
만들고 난후에 추가적인 취업!을 위한 작업을 좀 더 할 수 있기를 바란다.
