๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐Ÿฟ Project

[SidePJ] airdnd 1๋ถ€ - ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ !

by Tamii 2021. 5. 28.
๋ฐ˜์‘ํ˜•

์ด๋ฒˆ์ฃผ ํ”„๋กœ์ ํŠธ๋Š” 3์ฃผ๊ฐ„  ๐Ÿ˜ŽJenny ๐ŸงDong ๊ณผ ํ•จ๊ป˜ํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค

์ฒซ๋‚ ์€ ์—ญ์‹œ BE,FE ์™€ ์ปจ๋ฒค์…˜๊ณผ git repository๊ด€๋ฆฌ ๋“ฑ์„ ์ •ํ•˜๊ณ  

Jenny์™€๋Š” Component๊ตฌ์กฐ๋ฅผ ์งฐ๋‹ค.

 

 

โฌ‡๏ธ Component๊ตฌ์กฐ ์„ค๊ณ„๋„

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

 

Flowchart Maker & Online Diagram Software

Flowchart Maker and Online Diagram Software diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPM

app.diagrams.net

์ผ๋‹จ ๋‹น์žฅ ๊ตฌํ˜„ํ•  ํŽ˜์ด์ง€๋Š” ๋ผ์šฐํ„ฐ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 ๋ Œ๋”๋ง ๋ถ€๋ถ„์— ์—ฐ์‚ฐ์„ ๋‘๋Š” ๋ฒ„๋ฆ‡์ด ์žˆ์—ˆ๋‹ค.

๊ฐ€๋…์„ฑ์ด ํ˜„์ €ํžˆ ๋–จ์–ด์ง€๋‹ˆ ํ•„์ˆ˜์ ์ด์ง€ ์•Š์œผ๋ฉด ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด์„œ ๊ฐ€์ ธ์˜ค์ž.

 

๋Œ“๊ธ€