[재활용 프로젝트][리액트] 카카오 api 맵 코드 리뷰하면서 배운 점 정리

목차

 

내가 코드 리뷰를 받고 수정하면서 배운 점을 적어 보고자 한다.

프로젝트를 하면서 많은 것을 배우는 것 같다..

 

받은 요청 수정사항

대표 코드 리뷰1

대표 코드 리뷰 2

 

수정 사항 만들기 전에는 브랜치를 새로 파자

git branch fix-version
git add .
git commit -m "수정사항 완성 버전"

 

수정 사항 브랜치를 안만들고 수정했다가 실행이 잘 안되서 애를 먹었다..

아래 있는 깃 명령어로 되돌렸다 ㅠㅠ

git restore .  //커밋 전으로 모든 파일을 되돌림

 

.env.local

.env.local -> git에 올리게 되면 api키, 비밀번호 등 개발을 하면서 보이면 안될 것들을 숨겨줌

쓰는 방법

//.env.local 파일
REACT_APP_KAKAO_MAP_KEY = afdfaewfaffaef1123

//UseKakoaLoader.tsx 파일
import { useKakaoLoader as useKakaoLoaderOrigin } from 'react-kakao-maps-sdk';

export default function UseKakaoLoader() {
  useKakaoLoaderOrigin({
  	// as string을 안써주게 되면 타입 지정에서 오류 먹음 undefined || string 이기 떄문
    appkey: process.env.REACT_APP_KAKAO_MAP_KEY as string,
    libraries: ['clusterer', 'drawing', 'services'],
  });
}

 

삭제 함수의 리팩토링

import { DataMarkerProps } from './data';

function DeleteMarks(
  name: string,
  markers: DataMarkerProps[],
  setSelectedCategory: (markers: DataMarkerProps[]) => void,   //인수(DataMarkerProps배열) -> 반환(void)
) {
  // 원본 배열 가져옴
  setSelectedCategory(markers);
  const newMarkers: DataMarkerProps[] = markers.filter(
    (category) => category.name === name, // 일치하는 배열만 추출
  );

  // 배열 재설정
  setSelectedCategory(newMarkers);
}

export default DeleteMarks;

 

인수 전달할때 typescript로 state의 타입을 지정해 주는 부분이 특이하였다.

 

성공적으로 요구사항 반영!