항해 10주차 실전프로젝트 (4)

프로젝트가 사실상 거의다 끝났다.

앞으로 기능 한두개만 추가하고 런칭을 할 것이다.

 

이번주는 디자인 시안이 올 때 CSS작업을하고, 기능은 별로 추가할 것이 없었다.

그래서 중간중간 CSS작업을 살펴보며 필요없는 코드가 없는지 살펴보았다.

 

이번 디자인 시안을 적용할 때 서버에서 넘어온 캠핑장의 주요시설 문자열에따라 아이콘을 알맞게 설정해야했다.

어짜피 주요시설 문구들은 정해져있기 때문에 하드코딩으로 문자열을 포함한 배열을 만들고,

동일한 순서로 이미지를 배열화했다.

그리고 서버에서 넘어온 문자열을 하드코딩된 문자열배열에서 index값을 찾아

이미지 배열에서 동일한 index를 img태그의 src에 담으려고했지만, 코딩에서의 실수인지 src값 안에

{imgname: base64/png/~~~} 이런식으로 객체형식으로 들어가서 src가 잘 작동하지 않았다...

.

객체형식에서 밸류값을 뽑아 src에 적용시키려했지만 각 아이콘마다의 키값이 달라 적용시킬수 없었다.

다른 방법이 없을까 하다가 유진님께서 알려주신 Map을 사용했다.

 

이미지의 문자열, 이미지값을 new Map으로 만들고, Map.get()으로 src에 넣어 밸류값을 넣었다.

  let srcs = new Map([
    ['전기', electricIcon],
    ['인터넷', internetIcon],
    ['화장실', toiletIcon],
    ['샤워실', showerroomIcon],
    ['온수사용', hotwaterAvailableIcon],
    ['개수대', sinkIcon],
    ['매점', storeIcon],
    ['화로/바베큐', barbecueIcon],
    ['공용주차장', parkinglotIcon],
    ['까페', cafeIcon],
  ]);
  
  return (
    <Amenity>
      <Icon src={srcs.get(amenity)} alt="" />
      {amenity}
    </Amenity>
  );

잘 작동되었다.

혼자 뭐가 문제지하면서 고민하고 이것저것 시동했는데도 안돼서 도움을 요청했는데 잘했다고 생각한다.

쉬운것이었는데 생각보다 오래걸렸다 ㅠㅠ

 

 

타입스크립트를 사용하면서 타입을 지정하느라 오래걸리고 헷갈리는것이 단점이라고 생각했다.

역시 카카오 지도 api를 사용하여 그것이 또 드러났다.

 

서버에서 보내주는 캠핑장의 주소값을 kakao로보내 해당 주소의 위도, 경도를 받아와서

사용자위치의 위도, 경도와 해당 캠핑장의 위도, 경도로 카카오 길찾기로 리다이렉트를 시키는 기능을 만들었다.

 

그 중 캠핑장의 위도, 경도를 바꾸는 함수를 쉽게 사용하기위해 js파일로 만들어서 사용했는데,

타입스크립트를 사용하는 프로젝트이다보니 ts파일로 바꿔야할 것 같아서 바꿔보았다.

import React from 'react';

export const campGeocoder = (
  address: string,
  setterlat: React.SetStateAction<any>,
  setterlng: React.SetStateAction<any>,
) => {
  // 주소-좌표 변환 객체를 생성합니다
  const geocoder = new window.kakao.maps.services.Geocoder();

  // 주소로 좌표를 검색합니다
  geocoder.addressSearch(address, function (result: any, status: any) {
    // 정상적으로 검색이 완료됐으면
    if (status === window.kakao.maps.services.Status.OK) {
      // const coordinate = { lat: result[0].x, lng: result[0].y };
      setterlat(result[0].y);
      setterlng(result[0].x);
    }
  });
};

일단 인자값의 address, setterlat, setterlng의 타입은 잘 지정했지만, 카카오에서 보내주는 result와 status의 타입은 어떻게 지정해야 할 지 몰라서 any로 지정했다.

console.log를 찍어보면서 해야하나 싶었는데,  이 날 편두통이 너무 심하고 허리가 너무아파서 any로 지정하고 일찍 쉬러갔다.

 

아마 월요일부터는 이메일 인증번호를 사용하여 회원가입 시 인증하도록하고 비밀번호를 재설정하는 기능도 만들것이고,

오픈맵 api, 공공데이터를 크롤링해서 백엔드에서 보내주는 데이터를 카카오 맵 검색기능(키워드)에 적용시킬 것 같다.

 

거의다 끝나간다. 처음엔 프론트 한명도 나가서 너무 막막했는데, 거의 다 해낸것 같아 너무 좋다.

프론트가 두명인데 스코프가 너무 큰 것이 아닐까 라고 생각도했지만, 생각보다 잘 되어서 적당했던 것 같다.

 

다음주 빠르게 런칭하고 구글애널리틱스도 적용시켜 데이터분리도해보고, 피드백도 받아서 문제를 해결해보고싶다.