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

이번주 프로젝트는 3주간  😎Jenny 🧐Dong 과 함께하게 되었다

첫날은 역시 BE,FE 와 컨벤션과 git repository관리 등을 정하고 

Jenny와는 Component구조를 짰다.

 

 

⬇️ Component구조 설계도

https://app.diagrams.net/#G13ElfK5XcWA_TtAZ3Bh6-GEVlhodBu7gh

Flowchart Maker & Online Diagram Software

일단 당장 구현할 페이지는 라우터2개로 이루어 지지만 

그 안에서 구현할 동작들이 많아서 component구조가 거대해졌다.

+ update 최종 디렉토리 상황 

 

 

 

평화로운 UI구성부터 시작!

이번프로젝트에서 배웠던 것들, 어려웠던 점들을 차근차근 기록해갈 예정입니다:)~~

 

---

📌 반응형에  CSS 

창의 크기에 따라서 CSS 가 반응하도록 구성하는 방법은 크게 2가지라 생각했다.

 

1) Width 를 % 로 조절

2) 미디어 쿼리 (Width 크기에 따라 다른 조건 지정)

 

 

평소UI 는 팀프로젝트를 하더라도 나눠서 맡기 때문에 하던 방식으로만 해서 갇히기 마련인데, 

Jenny와 함께 사소하게 안되는걸 고쳐가면서 자잘한걸 배웠다.

 

❖  Width 를 %로 조절 

const CityTour = () => {
  return (
    <CityTourDiv>
      <CityTitle>가까운 여행지 둘러보기</CityTitle>
      <CityCardFrame>
        {cityData.map((cityCard, idx) => (
          <CityCard
            key={idx}
            cityImg={cityCard.imgUrl}
            cityName={cityCard.name}
            cityDistance={cityCard.distance}
          ></CityCard>
        ))}
      </CityCardFrame>
    </CityTourDiv>
  );
};


const CityTourDiv = styled.div`
  margin: 0rem auto 5rem auto;
  width: 88.88%;
`;

const CityCardFrame = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1rem;
`;

 

전체 Width :  1440px

CityTourDiv Width:1280px

 

1280 /1440 *100% 해서 그 비율을 width로 지정했고 

width: 88.88%

height: fit-content  로 지정하여  화면 크기가 작아지면 반응하게 만들었다.

 

---

📌react modal 이외 영역을 누르면 모달창 닫기

일단 모달창을 띄우기 전 상황을 보면 ,

Search 바에 총 4개의 component( Checkin Checkout , Price, People) 이 있고 

각 component를 클릭하면 ClickReducer에서 클릭한 타입에 맞는 modal창을 내리는 구조

 

 

1️⃣ 첫 시도 - Modal 각각에 ref  연결 및 

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

const Search = () => {
//modal reducer 생성
  const isClickedReducer = (state, action) => {
    switch (action.type) {
    
      //...중략
      
       //modal 이외 영역 클릭시 전부 닫히는 action type 정함
      case 'CloseModal':
        if (
          (state.checkInOut || state.price || state.people) &&
          !modalEl.current.contains
        ) {
        }
        return {
          checkInOut: false,
          price: false,
          people: false,
        };
      default:
        return;
    }
  };
  
  //ref연결 및 click 이벤트 기능
  const modalEl = useRef();
  const [clicked, dispatch] = useReducer(isClickedReducer, {
    checkInOut: false,
    price: false,
    people: false,
  });

  const { checkInOut, price, people } = clicked;

  useEffect(() => {
    window.addEventListener('click', dispatch({ type: 'CloseModal' }));
    return () => {
      window.removeEventListener('click', dispatch({ type: 'CloseModal' }));
    };
  }, []);

  return (
    <SearchDiv>
      <SearchWrap>
        {checkInOut && <CheckModal ref={modalEl} />}
        {price && <PriceModal ref={modalEl} />}
        {people && <PeopleModal ref={modalEl} />}
      </SearchWrap>
    </SearchDiv>
  );
};

export default Search;

 

각 component에 해당하는 Modal창에 ref 연결

dispatch에 'CloseModal'추가

 

오류 이유

: Modal창이 생기는 상위 div에 ref를 걸었어야 함 

처음에 각 Modal의 상태가 false이기 때문에 ref=modalEl 가 없는 상황이 됨 

 

 

2️⃣  재 시도 - useEffect 사용 

const Search = () => {
  const modalElement = useRef();
  
  //모달 외부 click 시 구현 조건
  useEffect(() => {
        // console.log('e : ', e);
      // console.log('target :', e.target);
      // console.log('modalElement.current:', modalElement.current);
    const modalOff = (e) => {
      if (modalElement.current && !modalElement.current.contains(e.target)) {
        dispatch({ type: 'ModalOff' });
      }
    };
    document.addEventListener('mousedown', modalOff);
    return () => {
      document.removeEventListener('mousedown', modalOff);
    };
  }, [modalElement]);

  //modal click reducer 구현
  const isClickedReducer = (state, action) => {
    switch (action.type) {
    
   //...중략
   
      case 'ModalOff':
        return {
          checkInOut: false,
          price: false,
          people: false,
        };

      default:
        return;
    }
  };

  const [clicked, dispatch] = useReducer(isClickedReducer, {
    checkInOut: false,
    price: false,
    people: false,
  });

  const { checkInOut, price, people } = clicked;
  return (
    <SearchDiv>
        <ModalDiv ref={modalElement}>
          {checkInOut && <CheckModal />}
          {price && <PriceModal />}
          {people && <PeopleModal />}
        </ModalDiv>
    </SearchDiv>
  );
};

변경한 부분 

1) useRef 선언 위로 옮기기

 : 사소한 문제이긴 했지만 useEffect에서 사용하기 위해서는 선언이 먼저 되야 했음

 

2) Modal을 감싸는 상위 div 생성 (ModalDiv)

 : Modal이 생성되기 전에도 상태가 있어야 하기 대문에 div를 생성했음

 

3) modal 외부 클릭 시 조건 재설정 

useEffect(() => {
    const modalOff = (e) => {
    
      if (modalElement.current && !modalElement.current.contains(e.target)) {
        dispatch({ type: 'ModalOff' });
      }
    };
    document.addEventListener('mousedown', modalOff);
    return () => {
      document.removeEventListener('mousedown', modalOff);
    };
  }, [modalElement]);

2가지 조건을 확인하여 해당하면 modal이 닫히도록 설정했다.

1) modalElement (즉 ref로 연결한 modal component) 가 존재하는지 

2) modalElement가  방금 클릭한 요소 (e.target)을 포함하고 있지 않은지  ( 그래야 modal 외부 영역)

 

modal 은 component가 unmount 되는 주기가 많으므로 useEffect 콜백 안의 리턴을 통해 click 이벤트를 제거해야 한다.

 

😮 단!

ref를 document에 연결해 놓으니 

모든 Component 요소에 forwardRef가 붙었다.

이게 과연 맞는 일일까?

 

차차 알아가도록 하자...

 

 

 

 

 

 

 

 

 

 

 

---

📌 슬라이드 Calendar (달력) 만들기

하드코딩 해둔 날짜들 

 두달씩 슬라이드로 넘어가는 달력을 만들어야 한다!!! 

Jenny가 너무 친절하게도 슬라이드에 CSS를 예쁘게 구현해 놓았기 때문에 달력을 계산해서 넣어야 한다

 

⭐️  계획

1) createMonthArray 함수로  개당 달력 배열 생성

2) 배열을 돌며 렌더링하고 

3)  버튼을 누를때마다 year, month 의 상태가 바뀌고 리렌더링 되야 함

⬅️

대략 이런느낌의 monthArray를 만들고 

map으로 돌려 렌더링 함

 

이런식으로 라이브 쉐어로 로직을 짰다

🐾  해결의 흔적들 ..

1) 첫번째 시도 - 바닐라 JS 이용하기

const setcalendarData = (year,month) =>{
    let calHtml="";
    //오늘날 날짜 객체  / 이번달 1째날짜 / 이번달 1째요일 / 이번달 막 날짜 / 지난달 막 날짜
    const setDate = new Date(year,month-1,1);
    //이번달 1째날짜 
    const firstDay = setDate.getDate();
    //이번달 1째요일 
    const firstDayName = setDate.getDay();
    //이번달 막 날짜 
    const lastDay = new Date(year,month,0).getDate();
    //지난달 막 날짜
    const prevLastDay = new Date(year,month-1,0).getDate();
    //이번달의 일수 구하기
    let startDayCount = 1;
    let lastDayCount = 1;

    for (let i = 0; i < 6; i++) {
        for (let j = 0; j < 7; j++) {
          //이번달 시작요일 이전
          if (i == 0 && j < firstDayName) {
            calHtml +=
              `<div class='calendar__day borderHidden'>&nbsp;</div>`;
          }
          //이번달 시작 요일일 때
          else if (i == 0 && j == firstDayName) {
            if (j == 0) {

              calHtml +=
                `<div class='calendar__day horizontalGutter'><span>${startDayCount}</span><span id='${year}${month}${setFixDayCount(startDayCount++)}'></span></div>`;
            } else if (j == 6) {

이전 바닐라JS로 구현했던 calendar를 슬쩍 가져와서 사용하려 했다.

사용하지 못한 이유: 

이 형식은 calHtml에 template literal로 계속 추가해주는 방식인데

React는 jsx형태로 만들고 있었고, 상태변경에 따라 재렌더링이 반복되는 구조에서 

데이터 생성과 렌더링이 합쳐져 있는 구조는  적절하지 않았다.

 

2) 데이터 생성과 렌더링 분리

createMonthArray로 해당하는 달의 날짜를 생성하고

SingleCalendar Component로 뿌려줘야 겠다 생각!

 

createMonthArray 함수

const createMonthArray = (range) => {

  let monthArr = [];
  let weekArr = [];
  let dayCnt = 1;
 
  const today = new Date(Date.now());
  const [year, month] = [today.getFullYear(), range + today.getMonth()];
  const firstDayName = new Date(year, month - 1, 1).getDay();
  const lastDay = new Date(year, month, 0).getDate();

  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 7; j++) {
      if (weekArr.length >= 7) {
        monthArr.push(weekArr);
        weekArr = [];
      }

      if (i === 0 && j < firstDayName) weekArr.push(' ');
      
      else if (i === 0 && j >= firstDayName) {
        weekArr.push(dayCnt);
        dayCnt++;
      }

      else if (i > 0 && dayCnt <= lastDay) {
        weekArr.push(dayCnt);
        dayCnt++;
      } 
      
      else if (dayCnt > lastDay && weekArr.length > 0) weekArr.push(' ');
    }
  }

SingleCalendar

const SingleCalendar = ({ range }) => {
  const monthArr = createMonthArray(range);
  
  return (
    <SingleCalDiv>
      <thead></thead>
      <tbody>
        {monthArr?.map((week, idx) => (
          <DayTr key={idx}>
            {week?.map((day, idx) => (
              <DayTd key={idx}>{day}</DayTd>
            ))}
          </DayTr>
        ))}
      </tbody>
    </SingleCalDiv>
  );
};

이렇게  원하는 달의 데이터를 이차원배열로 만들어 놓고

SingleCalendar Component 에서는 뿌려주기만 하도록 구성했더니 성공적으로 calendar 가 완성되었다.

 

 

++ 며칠 후 추가 

 

전의 코드에서는  year (연도) , month(달) 넘어가는 부분을 고려하지 못해 2022년 5월쯤부터  계산이 잘못되었다.

 

createMonthArray 함수

const createMonthArray = (year, month) => {
  let monthArr = [];
  let weekArr = [];
  let dayCnt = 1;

  const firstDayName = new Date(year, month - 1, 1).getDay(); //6
  //이번달 마지막 날짜
  const lastDay = new Date(year, month, 0).getDate();
  // i: 1주 j:요일
  for (let i = 0; i < 7; i++) {
    for (let j = 0; j < 7; j++) {
      if (weekArr.length >= 7) {
        monthArr.push(weekArr);
        weekArr = [];
      }
      // 이번달 시작 요일 전
      if (i === 0 && j < firstDayName) weekArr.push(' ');
      //이번달 시작 요일 주
      else if (i === 0 && j >= firstDayName) {
        weekArr.push(dayCnt);
        dayCnt++;
      }
      //이번달의 마지막날, 혹은 그 이전일 때
      else if (i > 0 && dayCnt <= lastDay) {
        weekArr.push(dayCnt);
        dayCnt++;
      } else if (dayCnt > lastDay && weekArr.length > 0) weekArr.push(' ');
    }
  }
  return monthArr;
};

export default createMonthArray;

calcMonth 함수

const calcMonth = (year, mon) => {
    if (mon <= 0) {
      const count = Math.floor(Math.abs(mon / 12)) + 1;
      mon += 12 * count;
      year = year - count;
    } else if (mon >= 13) {
      const count = Math.ceil(Math.abs(mon / 12)) - 1;
      mon -= 12 * count;
      year = year + count;
    }
    return [year, mon];
  };

  const today = new Date(Date.now());
  const [year, month] = calcMonth(
    today.getFullYear(),
    today.getMonth() + 1 + range
  );
  const monthArr = createMonthArray(year, month);

따라서  Jenny가 생성해준 clacMonth에서 현재 날짜를 이용해 year,month를 계산해

 그 결과를 createMonthArray 함수가 받아서 날짜를 생성하는 방향으로 변경했다.

 

참고로 mon은  range[-1,0,1,2]와 합해진 값

range와 합한 값으로 미래의 달을 계산하기 때문에 12를 넘을때부터 나눠서 계산해야 한다.

 

 

---

📌 1차 코드리뷰 후 느낀점 

코드리뷰를 받고 해당 사항을 고치면서 느낀점은 사소하지만 신경써야 하는 부분을 자꾸 건너뛰면  복잡한 코드가 된다는 점이다.

마음으로는 좋은 코드를 작성하겠다고 하지만, 막상 코드를 짤 때는 구현이 되야 한다는 생각에 

* 변수명 고민 

* 구조분해 할당

* 모듈화 

를 고민하지 않고 거대한 몸집과 하드한 조합체가 만들어진다.

 

😮  다음 리뷰까지  신경쓸 점 

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

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

 

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

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

 

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

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

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