팀 프로젝트 3주차

zizi·2022년 12월 6일

6주포트폴리오 CouchCoding 카우치코딩 협업프로젝트

팀프로젝트

목록 보기

3/7

202211~12

이번주는 본격적으로 깃 협업하는 방법과 타입스크립트, 리덕스 툴킷, 카카오맵 API 사용법에 대해서 공부를 했다.

첫번째 수업

git flow: 브랜치를 만드는 전략

개발 환경을 독립적으로 만들기 위해 사용, 추적이 쉬움, 배포 및 CI/CD 연동

main, develop , feature/{티켓이름} 으로 브랜치 기본 구성

main: release 버전, 여기서 직접 개발하지 않음 (배포용)

develop: 여기서 직접 개발하고 어느정도 완성되면 main으로 머지

feature: 보통 칸반보드 이슈 하나 // 넘버 or 제목을 넣어줌 → develop으로 pull request

커밋은 작은 수정이 있을때 마다 백업 느낌으로 꼭 하기
-이유: 나중에 지우거나 날려도 복구할 수 있기 때문
-git reflog: 깃을 삭제해도 숨겨진 history 상에서 보여줌
-git reset —hard 커밋아이디 : git 되돌릴 수 있음

소스트리 사용해보기

커밋 메시지 컨벤션 같이 정해서 사용하기

두번째 수업

목요일 수업 때는 프론트 / 백으로 나눠서 멘토링을 했는데 협업을 하면서 계속 생기는 eslint와 prettier 설정에 대해서 다시 한번 공부했고, 카카오맵 api를 공부하면서 궁금했던 점에 대해서 이야기를 나누었다.
* 피드백
-카카오맵 서치 구현시 카카오 맵 내의 검색 라이브러리 이용
-react-script-hook 사용하여 카카오맵 지도 로드
-에러: 타입 에러가 많아서 잘 안되더라도 일단 작동하는 걸 보는 것이 중요, 에러핸들링 처리

결정된 점

~~react-script-hook~~ -> 보류
카카오맵 서치 - MapContainer에서 데이터 받아오기 / 키워드 검색 완료시 dispatch로 정보 받아 리덕스에 저장 => Map에서 useSelector로 mapData 받아오기
카카오맵 경고 문구 문제 없음!
카카오맵 키워드서치, 카테고리 서치(옵션값 사용)
https://apis.map.kakao.com/web/documentation/#services_Places

더 공부해야할 점

카카오맵 서치 활용 및 마커 이미지
git branch 활용(같은 브랜치로 페어코딩 하다보니 계속 충돌 발생)

느낀 점

협업은 처음이다보니 함수 네이밍부터 하나하나 다 맞춰가야할 게 많다는 것을 느꼈다. 페어코딩을 처음 해봤는데 어려운 점이 많지만 배울 점도 많아서 많은 도움이 될 것 같다.
깃 브랜치 사용이 아직 많이 미숙하고 어렵게만 느껴지는데 아직 해결되지 않는 오류가 있어서 이후에 진행을 하기로 했다. 코드를 더 잘 짜는 걸 고민해보고 더 적극적으로 해보자 !

* 카카오맵 GeoLocation로 접속 위치 / 내 위치 찾기 구현

useEffect(() => {
    if (navigator.geolocation) {
      // GeoLocation을 이용해서 접속 위치를 얻어옵니다
      navigator.geolocation.getCurrentPosition(
        function (position) {
          const lat = position.coords.latitude // 위도
          const lng = position.coords.longitude // 경도

          const center = new kakao.maps.LatLng(lat, lng)
          setMapValue({ level: 3, lat, lng })
          drawMap(center)
        },
        function () {
          const center = new kakao.maps.LatLng(mapValue.lat, mapValue.lng)
          drawMap(center)
        }
      )
    }
  }, [])

https://apis.map.kakao.com/web/sample/geolocationMarker/