23.04.11 프론트 보안!, kakamap 사용!

  지금 교회 홈페이지를 제작 중에 있다. 우선 나는 프론트 공부를 하고 있는 취준생이다!! 그래서 서버를 구성하진 못하고 프론트만 구성하고 DB는 firebase와 JDK로 소통하면서 DB를 쌓고 받을 계획이며 배포 또한 firebase로 이미 했다.

  오늘은 kakao map 오픈 api를 이용해 교회의 약도와 마크 클릭 시 자동으로 kakao map을 띄우고 교회를 검색해 더욱 사용자가 찾아오기 편하게 만들었다. 그런데 문제점이 한데 보였다.

---

 

 

문제점!

• index.html에 라이브러리를 호출 시 key가 보인다는 것이다.

  이것을 어떻게든 해결해보려고 찾아보았지만 딱히 수가 안 보였다. 전에 공부할 때 .env를 사용해 키 값들을 감추었던 것이 기억이 나서 gpt를 활용해 어떻게든 해보려고 했지만 이미 .env는 보안을 위한 것이며 서버와 소통해 값을 들고 오는 방식으로 보안하는 형태이다. 만약 프론트에서 억지로 접근해 값을 들고 온다고 해고 결국 웹에서 header 부분에 다 공개가 되기 때문에 아무 소용이 없었다. ㅜㅜ

 

• 보안에 대한 고민!!

  왜 프론트가 보안이 약한지 서버를 왜 구축하는지 더욱 알 것 같았다. 지금은 취업도 못하고 있는 상황이지만 추후에 취업을 하고 조금이라도 나에게 여유가 생기면 node.js를 공부해 서버도 만들어야겠다.(아... 클라드 ㅜㅜ)라고 생각을 했다. 그래서 생각을 한 것은 프론트에서도 더욱 보안을 강화할 수 있는 라이브러리가 나왔으면 좋겠다는 생각도 했다.(개발 공부를 시작한 지 얼마 안 돼서 잘 모르고 있을 수도 있음.)

---

 

 

그래도 뿌듯!!

• 고생은 했지만 kakao map을 사용함

  전에 부트캠프에서 2주간 JS를 공부하고 프론트로 프로젝트를 진행했는데 그때는 이런 부분들이 진짜 막막하고 못하겠었는데 어떻게든 해결해 보려고 노력하는 나의 모습과 2시간 안에 코드를 다 구성한 나를 보고 뿌듯하긴 했다.

---

 

 

앞으로 할 것!!

1. firebase에 사진만 저장할 DB 구축하기
2. 교회 소개 페이지 완성
3. 알고리즘 풀기
4. 듣다가 멈춘 강의들 마져 듣기!!

---

마무리!!

  kakao map 사용하는 방법을 간단하게 설명할까 한다. 공식 문서만 보면 할 수 있는 부분들이긴 하다 하지만 react로 사용했을 때 예시는 없다. https://apis.map.kakao.com/web/guide/ 

 

  기본적으로 실행 순서를 가상 DOM이 생성 후 실행되게 useEffect 안에 코드를 구성했다.

  그 후 기능적 추가로 확대, 축소 컨트롤러, 마크, 마크 위 글 상자, 클릭 시 이벤트로 kakao map으로 이동 및 자동 검색이다. 코드로 남기겠다~~

 

import { useEffect } from 'react';
import styled from 'styled-components';

declare global { //타입 선언
  interface Window {
    kakao: any;
  }
}

const { kakao } = window; //window 객체에서 kakao라는 속성을 추출

function SketchMap() {
  useEffect(() => {
    const mapPosition = new kakao.maps.LatLng(35.41155, 129.1747); //좌표
  
    const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
    const options = { //지도를 생성할 때 필요한 기본 옵션
        center: mapPosition, //지도의 중심좌표.
        level: 2, //지도의 레벨(확대, 축소 정도)
    };
    const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴

    const marker = new kakao.maps.Marker({ //지도 마크 생성
      map: map,
      position: mapPosition,
    });

    const zoomControl = new kakao.maps.ZoomControl(); //확대 축소 컨트롤
      map.addControl(zoomControl, window.kakao.maps.ControlPosition.BOTTOMRIGHT); // 제어 UI의 위치 설정

    const customOverlay = new kakao.maps.CustomOverlay({ // 커스텀 오버레이 생성
      map: map,
      content: `
      <div style="position:relative;">
        <div style="background-color:white; padding:5px; border-radius:5px; text-align:center; font-size:20px; font-weight: 900; border: 2px solid gray; border-radius: 10px;">열방교회</div>
        <div 
          style="position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); width:0;
          height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:10px solid gray;"
        >
        </div>
      </div>
    `, // 오버레이에 표시할 내용 (HTML 형식)
      position: mapPosition, // 오버레이의 위치
      xAnchor: 0.5, // 오버레이의 가로 위치 설정
      yAnchor: 2.5, // 오버레이의 세로 위치 설정
    });

    const handleMarkerClick = () => { //클릭 시 page url 반환
      window.open(`https://map.kakao.com/link/search/경남 양산시 삼호동부6길 18`);
    };

    // 마커 클릭 시 이벤트 처리
    kakao.maps.event.addListener(marker, 'click', handleMarkerClick);

    // 클린업 함수를 활용하여 이벤트 리스너 제거
    return () => {
      kakao.maps.event.removeListener(marker, 'click', handleMarkerClick);
    };

  }, []);
  
  return (
      <SketchMapBox>
        <Title>찾아오는 길</Title>
        <Map id="map"></Map>
        <TextBox>
          <div>주   소: 경남 양산시 삼호동부6길 18 (2층)</div>
          <div>전화번호: 055-365-1080 / 010-4314-6007</div>
          <div>(마크를 누르면 길 찾기도 가능합니다.)</div>
        </TextBox>
      </SketchMapBox>
    );
  }

export default SketchMap;

const SketchMapBox = styled.div`
`

const Title = styled.h3`
  margin: 20px 0;
  margin-left: 30px;
  font-weight: 900;
`;

const Map = styled.div`
  width: 80%;
  height: 400px;
  margin: 10px auto;
  border: 2px solid gray;
  border-radius: 15px;
`;

const TextBox = styled.div`
  margin-top: 20px;
  margin: 10px 0;
  div {
    margin: 5px 0;
    font-size: 18px;
    font-weight: 900;
    text-align: center;
  }
`;