[Refactor] HI-FI 프로젝트

🔨로케이션등록 Refactoring

util 함수: 객체형 return시키기

//Before
 const dongName = (region: string) => region.split(" ").reverse()[0];
 const cityName = (region: string) => region.split(" ").reverse()[1];

• 기능은 함수인데 이름이 함수처럼 느껴지지 않는다는 의견
• 동일한 코드의 중복

//After
export const getLocationName = (location: string) => {
  const parseLocation = location.split(" ").reverse();
  return { cityName: parseLocation[1], dongName: parseLocation[0] };
};

• const { cityName, dongName } = getLocationName(location);로 사용
• 하나의 util함수로 사용

컴포넌트 분리

• 하나의 컴포넌트에서 위치정보 등록을 받음
• 위치 검색결과가 바뀔 때 마다 기존의 선택결과까지 리렌더링되는 상황
• 리렌더링을 막기 위해 모듈분리하였음

//Before
RegisterLocation
 ∟ index.tsx
 ∟ RegisterLocation.tsx

//After
RegisterLocation
 ∟ index.tsx
 ∟ LocationClickResult.tsx
 ∟ LocationSearchResult.tsx
 ∟ LocationInput.tsx
 ∟ RegisterLocation.tsx

상수관리

• kakaoAPI로 보내는 주소는 Util/API에서 관리

const API = {
	//...생략
  userLocation(locationInput: string) {
    return `http://dapi.kakao.com/v2/local/search/address.json?query=${locationInput}`;
  }

• locationInput 은 HIFI 전용 Key인데, 이것을 현재는 Util/constants에서 관리하두록 했음
  그치만 보안을 생각하면 나중에는 .env파일에서 관리해야하지 않을까 싶음