[SidePJ] airdnd 3부 - 회고와 마무리

주말동안 코드리뷰 받은걸 고치며 월요일 한주 시작 !

 

📌 연속클릭 방지하기 

현재 airdnd의 달력 화살표를 누르면 다른 달로 넘어가는데, 여기서 사용자가 연속으로 클릭을 하게 되면 이벤트가 꼬일 수 있어 preventClick이라는 함수로 방지를 해놓았다.

 

 

변경 전

 const preventClick = () => {
    setTimeout(() => {
      setDisabled(false);
    }, 200);
    
 
const handleClick = () => {
    if (disabled) return;
    setDisabled(true);
    
    preventClick();

클릭을 누르면 disabled를 true로 바꿔 preventClick이 다 동작하는 2초동안 클릭이 불가했다가 

2초 후에는 disabled = false로 바꿔 클릭이 가능하게 하는 방식이었다.

배웠었지만 잠시 잊었던 비동기 제어 = 시간 기반의 변경은 시간에 관련될때만 사용하고 그 외에는 사이드 이펙트를 줄일 수 잇는 promise와 async를 사용하자!

 

 

변경 후

Promise

 const preventClick = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(false);
      }, 200);
    });
  };
  
const handleLeftClick = async () => {
  
  preventClick().then((res)=>setDisabled(res))

preventClick이 실행된 후(then) 그 결과를 resolve로 받아 setDisabled를 해준다

 

 

async  await

  const preventClick = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(false);
      }, 200);
    });
  };
  
   const handleLeftClick = async () => {
   
    if (disabled) return;
    setDisabled(true);

    const boolean = await preventClick();
    setDisabled(boolean);

hadleClick 함수는 비동기이고  preventClick 함수가 실행되는걸 기다렸다가 setDisabled를 실행한다.

 

 

비동기를 동기적으로 보여지기 때문에 순서가 보이는 async await 을 사용하기로 결론!

 

 

참고(https://benjaminwoojang.medium.com/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC%EB%A5%BC-%EC%9C%84%ED%95%9C-promise%EC%99%80-async-function-9b9913adb52)

 

 

 

setTimeout보다 비동기

반복되는 상수는 변수로 지정하여 사용하기 

 

---

📌 카카오 map API React 에서 사용하기 

카카오 맵 API 연결을 해보았다.

현재 나는 React 에서 jsx 방식으로 함수형 Component 를 렌더링하고 있다.

json data에 들어있는 여러개의 숙소 위치 정보를 marker로 나타내는게 최종 목표!!!

 

index.html (App불러오는 곳)

 <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인의App키&libraries=services"
    ></script>

RoomMap (지도 component)

/*global kakao*/
const RoomMap = ({ roomData }) => {

  const placeArray = roomData
    ? roomData.accommodationList.map((v) => [v.latitude, v.longitude])
    : [[0, 0]];

  useEffect(() => {

    const container = document.getElementById('myMap');    
    const options = {
      center: new kakao.maps.LatLng(37.49091340540493, 127.03337782299037),
      level: 6,
      mapTypeId: kakao.maps.MapTypeId.ROADMAP,
    };
    
    const map = new kakao.maps.Map(container, options);

	//marker만드는 함수 생성
    function displayMarker(place) {
      let marker = new kakao.maps.Marker({
        map: map,
        position: new kakao.maps.LatLng(place[0], place[1]),
      });
    }
    placeArray.map((loc) => displayMarker(loc));
  }, [placeArray]);

  return <MapContainer id="myMap"></MapContainer>;
};

//styled-components
const MapContainer = styled.div`
  width: 90%;
  height: 100vh;
  position: sticky;
  top: 0;
`;

export default RoomMap;

 

삽질했던 부분 

 

1) AppKey 발급 시 React는 도메인을 등록해야한다.!!!!!!

(이걸 등록하지 않으면 

kakao를 찾지 못해 undefined가 뜨고 -> " can't map in undefined maps  ...."  라는 오류가  뜨게 된다 .. 

 

2) marker여러개 띄우기

marker는 분명히 displayMarker라는 함수를 만들어 제대로 실행했는데 왜 안됐냐면, 

바로 mock데이터의 지도 데이터의 위치가 전국구로 되어 있었기 때문이다..^^ 

코드를 보면 level6로 지도 정도를 설정해놓았는데 그 곳에는 한군데 (center)밖에 없기 때문에 보이지 않는다

->(이걸로 하루죙일 고생함..^^)_

 

 

그래도 카카오맵을 써본 경험치 획득 ++!!

 

[참고](https://gingerkang.tistory.com/65)

 

 + customOverlay

import React, { useEffect, useMemo } from 'react';
import styled from 'styled-components';


/*global kakao*/
const RoomMap = ({ roomData }) => {

  useEffect(() => {
    const container = document.getElementById('myMap');
    const options = {
      center: new kakao.maps.LatLng(37.49091340540493, 127.03337782299037),
      level: 6,
      mapTypeId: kakao.maps.MapTypeId.ROADMAP,
    };
    const map = new kakao.maps.Map(container, options);

    const displayMarker = (place) => {
      const content = `<div class=marker>₩ ${getRegex(place[2])}</div>`;
      new kakao.maps.CustomOverlay({
        map: map,
        position: new kakao.maps.LatLng(place[0], place[1]),
        content: content,
        yAnchor: 1,
      });
    };
    placeArray.map((loc) => displayMarker(loc));
  }, [placeArray]);
  //palceArray 는 map 돌릴 지도 데이터

  return <MapContainer id="myMap"></MapContainer>;
};

const MapContainer = styled.div`
  width: 90%;
  height: 100vh;
  position: sticky;
  top: 0;
  .marker {
    padding: 4px 12px;
    background-color: ${({ theme }) => theme.colors.white};
    color: ${({ theme }) => theme.colors.gray2};
    box-shadow: 0px 0px 4px rgba(204, 204, 204, 0.5),
      0px 2px 4px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(4px);
    font-weight: 600;
    font-size: ${({ theme }) => theme.fontSizes.XS};
    border-radius: 0.5rem;
    :hover {
      color: ${({ theme }) => theme.colors.magenta};
      background-color: ${({ theme }) => theme.colors.gray6};
    }
  }
`;

export default RoomMap;

cutomOverlay 를  만들어  기본 파란색 marker 대신에 내가 원하는  marker로 표시했다.

content 에 템플릿  리터럴로 marker해줄 대상을 넣어주었고 class이름을 주어 styled-components 에서 스타일을 지정했다. 

[참고](https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/ )

 

---

📌이벤트 제어를 이용한 modal OFF 

지난 번에는 modal OFF 시 useRef를 이용했었는데  참고(https://rrecoder.tistory.com/141?category=950210)

이번에는 modal을 div로 감싸며 클릭 이벤트 시 이벤트 버블링을 제어하는 방법으로 modal 창 외 클릭시 닫기를 구현했다.

이번에도 제니와 풀리지 않는 문제를 단순히 넘기지 않고 개념을 공부하고 탐구해보며 내놓은결론이라 매우 뿌듯하고 재밌었다.

 

결론적으로는 모달창 외  영역 닫기를 하는 방법을 두가지로 정리했다 .

window.addEventListener를 사용하는 useRef :  https://rrecoder.tistory.com/141

[SidePJ] airdnd 1부 - 프로젝트 시작 !

closest 와 className을 사용하는 :   https://rrecoder.tistory.com/146

[SidePJ] React 모달 영역 밖 클릭시 닫기

 

---

📌useMemo를 이용한 최적화

변경 전 코드로 구현시에 React 경고 메세지가 계속 떴었다.

"palceArray는 매번 재렌더링 된다는 말, 즉 useMemo를 사용해라"

 

 

 

<RoomMap.jsx> 변경 전 

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


const RoomMap = ({ roomData }) => {
 
  const placeArray = roomData
    ? roomData.accommodationList.map((v) => [v.latitude, v.longitude])
    : [[0, 0]];

  useEffect(() => {
    const container = document.getElementById('myMap');
   
    placeArray.map((loc) => displayMarker(loc));
  }, [placeArray]);

  return <MapContainer id="myMap"></MapContainer>;
};

<RoomMap.jsx> 변경 후 

import React, { useEffect, useMemo } from 'react';
import styled from 'styled-components';

const RoomMap = ({ roomData }) => {
  const placeArray = useMemo(
    () =>
      roomData
        ? roomData.accommodationList.map((v) => [v.latitude,v.longitude,])
        : [[0, 0]],
    [roomData]
  );

  useEffect(() => {
    const container = document.getElementById('myMap');
   
    //중략...
    
    placeArray.map((loc) => displayMarker(loc));
  }, [placeArray]);

  return <MapContainer id="myMap"></MapContainer>;
};



export default RoomMap;

RoomMap 안에서 자체 생성하는 변수는 useEffect의 의존성 배열에 넣는 의미가 없다

 placeArray는 <RoomMap> 컴포넌트가 재렌더링 될때마다 다시 생성되기 때문에 (새 메모리 주소에 할당) 무조건 useEffect 가 실행되게 된다. 

 

그렇다면 ? useMemo를 써보자 

RoomMap안에서 생성되는 변수 placeArray를 useMemo로 감싸고 useMemo의 의존성 배열에 roomData를 넣어 

roomData가 변하지 않으면 해당값은 (placeArray) 굳이 재렌더링 하지 않기 때문에 의미없는 렌더링을 방지하게 된다!!! 

 

😮useEffect의 의존성 배열에 들어가는 건?

props로 전달받은 값 or Hook으로 관리되는 상태값 , 렌더링 되면서 변하는 값

---

🥰 마무리 

그 외 OAuth 구현도 진행하고 3주간의 프로젝트를 마무리하게 되었다.

이번프로젝트는 공부와 구현이 너무 조화로웠어서 행복했다. 프로젝트하면서 잘한점과 아쉬운점을 적으며 마무리 합니다.

 

❤️ 잘한 점

1)  구현에만 치중하지 않고 막히는 부분이 있을 때 학습하며 구현한것

 : useMemo의 사용이나 , modal창 종료를 구현할 때 단순히 구현이 되게 급하게 진행하지 않고, Jenny와 열띤 토론을 통해 이벤트 버블링에대해서도 공부하고 차분하게 고쳐나갔다. 너무 좋았다.

 

2) 리액트 콘솔짱이 깔끔해!

리액트 콘솔창의 모든 경고사항을말끔히 해결했다 . (선언하고 안쓴것, 불필요한 렌더링에 관한 사항 등등 ) 

 

3) 노션에 기획서 정리해서 발표하는 방식

정리병이 심해서 이번에 노션에 정리해서 발표해보았는데 너무 좋았다.. 최고

가장 좋았던 점은, 기획서의  상세 기능을 빠르고 상세하게 자랑할 수 있다는점. 내가 고생한 부분을 빠뜨리지 않고 자랑할 수 있는게 얼마나 큰 행복인가~~~😌

 

💙 아쉬운점 

1) 코드 짜기 전 좋은 코드를 위한 규칙을 이야기 해보지 않은 것 

프로젝트 후반부에 가서 리팩토링하면서 많이 수정했지만  좋은 코드를 위한 고민을 정리해보지 못한것이 아쉽다.

좋은 코드를 위해 노력했던 점도 정리해서 다음 프로젝트  혹은 다른 팀원과의 상황에 적용해보며 차곡차곡 좋코(?)능력을쌓고싶다.

 

2) 신기술 도입에 겁먹었던 점

타입스크립트와 리코일을 적용하지 못한점이 계속계속 한으로 남는다. 다음 프로젝트 때에는 신기술에 부딪히고 깨져 볼것이다. 

 

이번 프로젝트를 함께해준 Dong과 Jenny에게도 감사의 말을 전하며 마무리합니다.  만나서 반가웠고 또봅시다~

 

 

 

 

🐾 이번 프로젝트를 통해 배운 좋은 코드를 향한 한걸음

 

1. Component의 속성에는 매직넘버,스트링이 들어가지 않는다.

: 작은 부분이라 상관 없을 것이라 생각했지만  이런 작은 것들이 코드의 가독성을 떨어뜨린다.

 

2 지금 바로 사용하지 않을 대상은 미리 만들지 말자.

import {useEffect , useRef... } 처럼 사용하지 않을 것은 처음부터 쓰지 않는 습관!

 

3.  함수나 변수로 미리 만들어, 연산을 인라인에 두지 않는다.

1.번과 비슷한 맥락이지만 , 자꾸만 Component 렌더링 부분에 연산을 두는 버릇이 있었다.

가독성이 현저히 떨어지니 필수적이지 않으면 미리 만들어서 가져오자.

 

4. 렌더링 시 삼항연산자보단 && 사용

삼항연산자는 코드가 한줄일 경우에 사용하고 그 이상이 된다면 조건문으로 빼는 것이 가독성에 오히려 좋다.

어떤 조건일때만 렌더링한다? -> && 연산자 사용으로 처리 

 

5. 변수명은 첫 순간 고민하자

일단 되자라는 마인드로 만든 변수명은 나중에 잊기 쉽상! 

처음만들 때부터 고민하자 . 같은 레벨(?)에서 비슷한 용도로 사용되는 변수명들에게 일정한 규칙을 부여하는 것도 나름의 방법

 

6. 함수는 하나의 기능만

함수에 조건 or type이 달려 다른 기능을 수행하게 하지 말고

여러개의 함수가 생기더라고 하나의 기능을 하는 심플한 함수가 심플한 코드를 만든다.

 

7. 필요하지 않은 기능을 미리 구현하지 말자

지나치게 미래 지향적인 코드는 코드의 복잡성을 증가시킬 뿐이다 . 

나중에 쓸것같은데? 하는 건 미리 만들지 말고 쓸 때 만들자.