[클라우딩 어플리케이션 엔지니어링 TIL] 240304 - 모바일 반응형 적용하기

Intro

---

오늘은 프론트엔드에서 중시하고 있는 반응형 웹에 대해 학습했다.

 

 

 

오늘 학습한 내용

---

반응형 웹 소개

반응형 웹은 하나의 웹 사이트로 PC, 모바일, 테블릿 등 기기 종류에 따라 최적의 사용자 경험을 제공하는 웹 디자인 접근 방식이다.

 

공간의 한계 극복하기

• 스크롤 확장 (수직, 수평 스크롤)
• 많은 양의 정보를 보여주기 위한 방안들 (아코디언 등)

위와 같이, 디바이스에 대응하기 위한 여러 방안들이 제시되고 있다.

 

반응형 웹 종류

• Mostly Fluid Layout Pattern (유동형 패턴: 화면 크기에 따라 컨텐츠의 배치가 자동으로 조정)
• Layout Shifter Layout Pattern (화면 크기에 따라 레이아웃을 변화시킴)

 

반응형 웹의 발전도 프론트엔드의 발전

: 반응형 웹을 구현하기 위해 기본적인 viewport, 미디어 쿼리 등 CSS 만으로 충분히 구현할 수 있으나 다양한 환경의 디바이스, 사용자 환경에 따라 화면을 보여주기 위해 React.js 등의 프론트엔드 기술을 활용하면 더 다이나믹하게 구현할 수 있다.

 

 

 

 

---

비디오 에디터에 반응형 적용하기

디바이스와 기종 체크하기!

• 디바이스

import React, { useState, useLayoutEffect } from 'react';

const useDeviceType = () => {
  const [deviceType, setDeviceType] = useState('pc');

  let screenWidth = window.innerWidth;
  const updateDeviceType = () => {
    screenWidth = window.innerWidth;

    if (screenWidth <= 768) setDeviceType('mobile');
    if (screenWidth > 768 && screenWidth <= 1024) setDeviceType('tablet');
    if (screenWidth > 1024) setDeviceType('pc');
  };

  useLayoutEffect(() => {
    updateDeviceType();
    window.addEventListener('resize', updateDeviceType);

    return () => {
      window.removeEventListener('resize', updateDeviceType);
    };
  }, [deviceType]);

  return deviceType;
};

export default useDeviceType;

 

⚠️ useLayoutEffect는 많이 사용하면 성능이 떨어지기 때문에 한 번만 사용하도록 한다.

 

• 기종

import React from 'react';

const useUserAgent = () => {
  let userAgent = navigator.userAgent;
  return userAgent;
};

export default useUserAgent;

 

웹 API 중 하나인 Navigator는 현재 브라우저의 상태와 정보를 알려준다.

userAgent는 현재 브라우저의 이름, 버전 및 운영 체제에 대한 정보를 가지고 있다.

 

 

 

 

 

 

마무리

---

스마트폰이 발달하고 대부분의 사용자들이 PC보다 모바일 환경에서 웹을 접속하는 경향이 높아지면서, 반응형이란 기술이 생기고 프론트엔드 기술이 발전하는 계기가 된 것 같다. 이러한 기술이 앞으로도 더 발전할 것이라 생각하고 프론트엔드 직업을 갖는 것에 자부심이 생기는 것 같다.