이번 글에서는 위의 기능을 저는 어떻게 개발했는지 얘기해보겠습니다.

먼저 다음의 두가지에 대해 생각해 볼 필요가 있었습니다.

• 화면의 위치를 어떻게 구할 것인가?
• 지정된 위치로 어떻게 스크롤을 할 것인가?

1.화면의 위치를 어떻게 구할 것인가?

페이지가 시작하는 가장 상단 부분에서 현재 보여질 화면이 시작하는 부분까지의 거리를 구해야 했습니다. 글 하단의 참고자료를 통해서 offsetTop을 사용해서 원하는 거리를 구할 수 있는 것을 알게 되었습니다.

Main.tsx

...

function Main() {
    const [sectionHeight, setSectionHeight] = useState<number[]>([]); 

      ...

    setSectionHieght(
        sectionRef.map((ref) => {
            if (ref.current) {
                return ref.current.offsetTop;
            }

            return 0;
        })  
    )

    ...

    return (
        ...

          <section ref={sectionRef[0]}>
              ...
        </section>
          <section ref={sectionRef[1]}>
              ...
        </section>

          ...
    )
}

...

2.지정된 위치로 어떻게 스크롤을 할 것인가?

scrollTo 메소드를 사용하면 옵션 값으로 들어온 top 값만큼 스크롤을 이동시킬 수 있습니다.

ScrollNav.tsx

...

interface ScrollNavProps {
    sectionHeight: number[]; 
}

function ScrollNav(props: ScrollNavProps) {
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault();

    window.scrollTo({
      top: props.sectionHeight[
          Number(e.currentTarget.getAttribute('data-index'))  
      ],
      behavior: 'smooth'
    });
  };

  return (
      ...

    <li>
      <a href="" data-index={0} onClick={handleClick}>
          section1
      </a>
    </li>
    <li>
      <a href="" data-index={1} onClick={handleClick}>
          section2
      </a>
    </li>

    ...
  )
}

...

브라우저에서는 다음과 같이 보여집니다.

참고자료

https://ko.javascript.info/size-and-scroll

이번 글에서는 위와 같은 배너를 제가 어떻게 개발했는지 얘기해볼게요.

먼저 다음의 다섯가지에 대해 생각해 볼 필요가 있었습니다.

• 여러개의 배너 이미지를 어떻게 일렬로 위치시킬 것인가?
• 일렬로 위치시킨 배너를 어떻게 일부만 노출시킬 것인가?
• 배너 이미지를 어떻게 이동시킬 것인가?
• 마지막 배너 이미지와 첫번째 배너 이미지를 어떻게 연결할 것인가?
• 이전 배너 이미지 일부와 다음 배너 이미지 일부를 어떻게 노출시킬 것인가?

1. 여러개의 배너 이미지를 어떻게 일렬로 위치시킬 것인가?

배너 이미지를 감싸는 부모 엘리먼트에 'display: flex'와 'width: fit-content'를 사용했습니다. 그리고 배너 이미지에 해당하는 엘리먼트에 동일한 width 값을 주었습니다.

2. 일렬로 위치시킨 배너를 어떻게 일부만 노출시킬 것인가?

1번에서 'display: flex'를 적용한 엘리먼트(배너 이미지를 감싸는 부모 엘리먼트)의 부모 엘리먼트에 'overflow-x: hidden'을 사용했습니다.

3. 배너 이미지를 어떻게 이동시킬 것인가?

배너 이미지를 감싸고 있는 부모 엘리먼트에 'transform: translateX(-1 * (100 / 배너 이미지 개수 * 현재 노출시킬 배너 이미지 인덱스) %)' 와 'transition: 0.5s'를 사용해서 배너가 좌측에서 우측으로 이동하는 것처럼 보이게 했습니다.

4. 마지막 배너 이미지와 첫번째 배너 이미지를 어떻게 연결할 것인가?

위의 화면 처럼 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 2번이 노출되고 1번 이미지와 같은 상황이 발생하지 않기 위해서 첫번째 배너 이미지와 마지막 배너 이미지가 연결된 것처럼 만들어야 합니다. 이를 위해서 마지막 배너 이미지 다음에 첫번째 배너 이미지를 추가해주고 첫번째 배너 이미지 이전에 마지막 배너 이미지를 추가했습니다. 배너가 우측으로 이동할 때 인덱스 번호가 4인 이미지의 노출시간이 지나면 인덱스 번호 1번인 이미지를 노출시킵니다. 이 때 transition을 0s로 변경해서 사용자에게 3번 이미지와 2번 이미지가 노출되지 않도록 했습니다. 그 다음 transition을 다시 0.5s로 변경하고 배너 이미지 노출시간을 0으로 변경해서 인덱스 번호가 2번인 이미지로 곧 바로 이동하게 했습니다. 사용자가 버튼을 눌러서 배너가 좌측으로 이동할 때는 인덱스 번호가 0인 이미지의 노출시간이 지나면 인덱스 번호 3번 이미지를 노출시킵니다. 이 때도 transition을 0s로 변경해서 사용자에게 1번 이미지와 2번 이미지가 노출되지 않도록 했습니다. 그 다음 transition을 다시 0.5s로 변경하고 배너 이미지 노출시간을 0으로 변경해서 인덱스 번호가 2번인 이미지로 곧 바로 이동하게 했습니다. 이 때 주의할 점은 인덱스 번호 1번인 이미지와 인덱스 번호 3번인 이미지를 노출시킬 때 이미지의 이동 방향을 구분하고 있어야 배너가 좌측으로 이동할 때와 우측으로 이동할 때의 이미지 노출 시간과 transition 값을 변경해서 배너가 정상적으로 작동할 수 있습니다.

5.이전 배너 이미지 일부와 다음 배너 이미지 일부를 어떻게 노출시킬 것인가?

배너 이미지를 감싸고 있는 부모 엘리먼트의 'transform'을 ' translateX(-1 * ((100 / 배너 이미지 개수) * 0.9 + (100 / 배너 이미지 개수) * 현재 노출시킬 배너 이미지 인덱스) %)' 로 변경해서 이전 배너 이미지 일부와 다음 배너 이미지 일부가 노출되도록 했습니다. 그리고 인덱스 번호 0번인 이미지가 노출될 때와 인덱스 번호 4번인 이미지가 노출될 때 이전 배너 이미지 일부와 다음 배너 이미지 일부가 노출될 수 있도록 맨 앞과 맨 뒤에 배너 이미지를 추가했습니다.

브라우저에서는 다음과 같이 보여집니다.

평소처럼 웹 서비스를 이용하는데 문득 '메인 페이지의 배너는 어떻게 개발하는 걸까' 궁금증이 들었어요.

이번 글에서는 제가 배너를 개발한 방식에 대해 얘기해볼게요.

배너를 개발하기 위해서 먼저 다음 두가지에 대해 생각해볼 필요가 있었습니다.

• 여러개의 배너 이미지 중 어떻게 하나의 배너 이미지만 노출시킬 것인가?
• 배너 이미지를 자동으로 변경하려면 어떻게 해야 하는가?

1. 여러개의 배너 이미지 중 어떻게 하나의 배너 이미지만 노출시킬 것인가?

이를 위해서 'position: absolute'를 사용해서 배너 이미지들을 같은 지점에 위치시켰습니다. 그리고 'display: none', 'display: block'을 사용해서 하나의 배너 이미지만 노출시키고 다른 배너 이미지들은 노출되지 않도록 했습니다.

Banner.tsx

...

const bannerImage = ['https://.../1.jpg', 'https://.../2.jpg', 'https://.../3.jpg']; // 이미지 url을 갖고있는 배열

const [bannerIndex, setBannerIndex] = useState<number>(0); //화면에 보여지는 배너 이미지의 인덱스를 갖는 state

...

{bannerImage.map((image, index) => {
    return (
    <div
        className={`banner__image${
            bannerIndex === index ? " active" : ""
        }`}
        key={index}
    >
        <a href="" style={{ background: `url(${image})` }}></a>
    </div>      
    );
})}

...

}

Banner.scss

...

 .banner__image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    animation: bannerOpacity 0.7s;

    a {
      display: block;
      height: 100%;
    }

    .active {
      display: block;
      }
  }

  @keyframes bannerOpacity {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
...

사용자에게 노출시킬 배너 이미지를 정하기 위해서 bannerIndex라는 state를 사용했습니다. 배너 이미지의 index가 bannerIndex와 동일할 경우 className에 active를 추가해서 'display: block'이 적용되도록 했습니다.

2. 배너 이미지를 자동으로 변경하려면 어떻게 해야 하는가?

배너 이미지를 자동으로 변경하기 위해서 setInterval을 사용했습니다.

주의할 점은 react에서는 setInterval을 다음과 같은 코드만으로 사용할 경우

setInterval(() => setBannerIndex((bannerIndex + 1) % bannerImage.length), 3000);

랜더링이 될 때 마다 새로운 interval이 생성되기 때문에 문제가 발생합니다. 그래서 unmount가 될 때 clearInterval을 호출해서 현재 실행 중인 interval을 제거해야 합니다. 이를 위해서 useEffect를 사용했습니다.

useEffect(() => {
    const id = setInterval(() => setBannerIndex((bannerIndex + 1) % bannerImage.length), 3000)

    return () => clearInterval(id);
}, [bannerIndex]);

브라우저에서는 다음과 같이 보여집니다.

전체 코드는 다음과 같습니다. Banner.tsx

import * as React from "react";
import { useState, useEffect } from "react";
import "../styles/Banner.scss";

function Banner() {
  const bannerImage = [
    "https://edit-edition.com/images/m-1.jpg",
    "https://edit-edition.com/web/upload/NNEditor/20211110/03_shop1_201805.jpg",
    "https://edit-edition.com/web/upload/NNEditor/20211110/12_shop1_201806.jpg",
  ];

  const [bannerIndex, setBannerIndex] = useState<number>(0);
  const [bannerChangeFlag, setBannerChangeFlag] = useState<boolean>(true);

  const handleLeftBtnClick = (e: React.MouseEvent) => {
    setBannerIndex(
      bannerIndex === 0
        ? bannerImage.length - 1
        : (bannerIndex - 1) % bannerImage.length,
    );
  };

  const handleRightBtnClick = (e: React.MouseEvent) => {
    setBannerIndex((bannerIndex + 1) % bannerImage.length);
  };

  const handleDotClick = (e: React.MouseEvent) => {
    const index = e.currentTarget.getAttribute("data-index");

    setBannerIndex(index ? Number(index) : 0);
  };

  const handleMouseEnter = (e: React.MouseEvent) => {
    setBannerChangeFlag(false);
  };

  const handleMouseLeave = (e: React.MouseEvent) => {
    setBannerChangeFlag(true);
  };

  useEffect(() => {
    let id: NodeJS.Timer;
    if (bannerChangeFlag) {
      id = setInterval(
        () => setBannerIndex((bannerIndex + 1) % bannerImage.length),
        3000,
      );
      }

    return () => clearInterval(id);
  }, [bannerIndex, bannerChangeFlag]);

  return (
    <div className="banner">
      {bannerImage.map((image, index) => {
        return (
          <div
            className={`banner__image${
              bannerIndex === index ? " active" : ""
            }`}
            key={index}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            <a href="" style={{ background: `url(${image})` }}></a>
          </div>
        );
      })}
      <div className="banner__leftBtn" onClick={handleLeftBtnClick}></div>
      <div className="banner__rightBtn" onClick={handleRightBtnClick}></div>
      <ul className="banner__dots">
        {bannerImage.map((image, index) => {
          return (
            <li key={index}>
              <button
                className={bannerIndex === index ? "active" : undefined}
                data-index={index}
                onClick={handleDotClick}
              ></button>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

export default Banner;

Banner.scss

.banner {
  position: relative;
  height: 300px;
  min-width: 1200px;
  padding-left: 70px;

  .banner__image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    animation: bannerOpacity 0.7s;

    a {
      display: block;
      height: 100%;
    }
  }

  .active {
    display: block;
  }

  .banner__leftBtn {
    position: absolute;
    top: 135px;
    left: 150px;
    cursor: pointer;
  }

  .banner__leftBtn:after {
    content: "";
    width: 20px;
    height: 20px;
    border-top: 5px solid #d7d7d7;
    border-right: 5px solid #d7d7d7;
    display: inline-block;
    transform: rotate(225deg);
    transition: 0.2s;
  }

  .banner__leftBtn:hover:after {
    border-top: 5px solid #000;
    border-right: 5px solid #000;
  }

  .banner__rightBtn {
    position: absolute;
    top: 135px;
    right: 80px;
    cursor: pointer;
  }

  .banner__rightBtn:after {
    content: "";
    width: 20px;
    height: 20px;
    border-top: 5px solid #d7d7d7;
    border-right: 5px solid #d7d7d7;
    display: inline-block;
    transform: rotate(45deg);
    transition: 0.2s;
  }

  .banner__rightBtn:hover:after {
    border-top: 5px solid #000;
    border-right: 5px solid #000;
  }

  .banner__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    text-align: center;
    padding-left: 70px;

    li {
      display: inline-block;
      margin: 0px 3px;

      button {
        height: 16px;
        border-radius: 8px;
        cursor: pointer;
        background-color: #d7d7d7;
        border-color: #d7d7d7;
      }

      .active {
        background-color: #000;
        border-color: #000;
      }
    }
  }
}

@keyframes bannerOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

이번 글에서는 위의 궁금증에 대한 대답을 간략하게 다뤄볼게요

함수형 컴포넌트를 개발할 때 다음과 같이 코드를 작성할 수 있습니다.

    function Login() {
        return (
            <> .... </>  
        )
    }

    const Login = () => {
         return (
            <> .... </>  
        )
    }

함수 선언식과 타입을 지정하지 않은 함수 표현식은 JSX.Element를 반환하는 함수를 타입으로 갖게 됩니다.

함수 표현식은 다음과 같이 React.FC 타입을 선언할 수도 있습니다.

   const Login:React.FC = () => {
         return (
            <> .... </>
        )
   }

JSX.Element, JSX.Element가 상속받는 React.ReactElement, React.FC는 다음과 같이 정의되어 있습니다.

• JSX.Element

declare global {
    namespace JSX {
       interface Element extends React.ReactElement<any, any> {}

• React.ReactElement

interface ReactElement<P = any, T extends string |
    JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
   props: P;
   key: Key | null;
}

• React.FC

type FC<P = {}> = FunctionComponent<P>;

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;

   ...

}

여기서 주목할 점은 JSX.Element가 상속받는 React.ReactElement와 FunctionComponent에 공통으로 들어있는 props 속성입니다.

ReactElement는 컴포넌트가 선언될 때의 props interface를 그대로 사용하고, FunctionComponent는 컴포넌트가 선언될 때의 props interface를 PropsWithChildren으로 감싸고 있는 것을 확인할 수 있습니다.


PropsWithChildren은 다음과 같이 정의되어 있습니다.

• PropsWithChildren

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };

FunctionComponent가 PropsWithChildren을 통해서 props interface에 개발자가 정한 속성 외에 children 속성을 추가하는 것을 확인할 수 있습니다.

위의 내용을 확인할 간단한 React 코드입니다.

Main.tsx

...

import { default as FunctionalComponent } from './FunctionalComponent';
import { default as ChildComponent } from './ChildComponent';

function Main() {
  return <FunctionalComponent>{ChildComponent}</FunctionalComponent>
}

FunctionalComponent.tsx

...

interface FunctionalComponentProps {
    ... 
}

function FunctionalComponent(props: FunctionalComponentProps) {
  return  (
      ...
  );
}

FunctionalComponent.tsx (React.FC Type)

...

interface FunctionalComponentProps {
     ...
}

const FunctionalComponent: React.FC<FunctionalComponentProps> = (props) => {
  return (
      ...  
  );
};

이번 글에서는 팝업을 어떤 식으로 개발하는지 알아볼게요

팝업을 개발하려면 먼저 다음 두가지에 대해 알고 있어야 합니다.

Cookie

• Cookie는 브라우저에 저장되는 데이터입니다.
• 이름, 값, 도메인, 경로, 만료일에 대한 정보를 갖고있습니다.
• 만료일이 지나면 자동으로 삭제됩니다.
• 팝업의 오늘 그만 보기 기능을 구현하는데 사용합니다.
  • 사용자가 버튼을 눌렀을 때 쿠키를 생성합니다.
  • 해당 페이지를 다시 방문했을 때 쿠키가 존재하는지를 확인하고, 쿠키가 없을 경우에 팝업을 노출시키는 방식으로 개발할 수 있습니다.
    

Dimmed

• 팝업을 강조하기 위해서 팝업 외 다른 부분에 반투명 음영을 넣는 것을 딤드라고 합니다.
• 팝업 외 다른 요소들보다 상위에 위치해야 하므로 z-index 속성을 사용합니다.
• 불투명도를 설정해야 하므로 opacity 속성을 사용합니다.

  {
  z-index: 3000;
  opacity: 0.5;
  ...
  }

React를 사용한 간단한 팝업 코드입니다.

  import * as React from "react";
  import { useCookies } from "react-cookie";
  import { default as Popup } from "../components/Popup";

  function Main() {
    const [cookies, setCookie] = useCookies(["nonePopup"]);

    return (
      <div
        className="main"
        style={{
          backgroundImage: "url(https://edit-edition.com/images/mainbanner.jpg)",
          width: "100%",
          height: "100%",
        }}
      >
        {cookies.nonePopup ? null : <Popup setCookie={setCookie}></Popup>}
      </div>
    );
}

export default Main;

  import * as React from "react";
  import { useState } from "react";
  import "../styles/Popup.scss";

  interface PopupProps {
    setCookie: (
      name: "nonePopup",
      value: any,
      options?: CookieSetOptions | undefined,
    ) => void;
  }

  function Popup(props: PopupProps) {
    const [isVisible, setIsVisible] = useState<boolean>(true);

    const handleRightBtnClick = () => {
      setIsVisible(false);
    };

    const handleLeftBtnClick = () => {
      const expires = new Date();
      expires.setDate(expires.getDate() + 1);

      props.setCookie("nonePopup", true, { expires });
    };

    return (
      <>
        {isVisible ? (
          <div className="popup">
            <div className="popup__dimmed"></div>
            <div className="popup__modal">
              <div className="modal__content">
                <p>내용</p>
              </div>
              <div className="modal__bottom">
                <div className="bottom__left-btn" onClick={handleLeftBtnClick}>
                  <p>오늘 그만 보기</p>
                </div>
                <div className="bottom__right-btn" onClick={handleRightBtnClick}>
                  <p>닫기</p>
                </div>
              </div>
            </div>
          </div>
        ) : null}
      </>
    );
  }

  export default Popup;

  .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3500;

    .popup__dimmed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      opacity: 0.5;
    }

    .popup__modal {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 450px;
      border: solid 1px;
      border-radius: 20px;
      background-color: #fff;

      .modal__content {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 410px;
      }

      .modal__bottom {
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        height: 40px;
        border-top: solid 1px;
        color: #000;
        cursor: pointer;

        .bottom__left-btn {
          border-right: solid 1px;
          border-bottom-left-radius: 20px;
          width: 150px;
        }

        .bottom__right-btn {
          border-left: solid 1px;
          border-bottom-right-radius: 20px;
          width: 150px;
        }

        .bottom__left-btn p,
        .bottom__right-btn p {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        }
      }
    }
  }

  p {
    font-weight: bold;
    font-size: 15px;
  }

브라우저에서는 다음과 같이 보여집니다.

• 팝업이 노출됐을 때 화면

• 팝업이 닫혔을 때 화면

• 오늘 그만 보기 버튼을 눌렀을 때 생성된 쿠키