


![Hover](https://miro.medium.com/v2/resize:fit:1400/1*jNq5tta4ofDzmI7ARPUIWA.gif)

"호버"에 대해 이야기해봐요! 아니, 드론으로 하는 것이 아니에요. 호버 이벤트는 버튼, 시각적 요소 및 툴팁을 작동시킵니다.

호버 효과는 정적인 객체를 활기차게 만들고 상호작용 경험을 만들어 사용자 인터페이스를 개선합니다.

버튼에 피드백을 제공하거나 카드에 추가 세부 정보를 표시하는 경우, 모든 웹 개발자에게 호버 이벤트를 알고 있는 것이 중요합니다.


<div class="content-ad"></div>

이 게시물에서는 React의 hover 이벤트를 살펴보겠습니다. 기본 인라인 핸들러에서 고급 사용자 지정 훅까지 모두 다룰 것입니다.

React에 익숙한 새내기든 전문가든 모두에게 도움이 되는 내용이 있을 것입니다. 또한, 중간에 재미를 느낄 수도 있을지도 모릅니다.

시작해보죠!

# Hover 이벤트의 기본들

<div class="content-ad"></div>

## 호버 이벤트 이해하기

호버 이벤트는 클릭 없이 반응을 제공하여 등을 쓰다듬는 것과 유사합니다. 마우스가 요소 위에 올라가면 이벤트를 트리거하여 사용자 경험을 향상시키는 데 도움이 됩니다.

호버 효과는 UI의 불꽃놀이와 같습니다; 직관적이지만 매력적입니다.

## 전통적 방식 대 React 접근법

<div class="content-ad"></div>

과거에는 CSS (:hover) 또는 JavaScript (안녕, jQuery!)을 사용하여 호버 효과를 다루었습니다. 하지만 React에서는 어떻게 처리할까요? React는 조금 다르게 처리하고 싶어합니다.

React에서는 컴포넌트 내에서 직접 호버 이벤트를 처리할 수 있어 기본적인 것을 넘어서 더 다이나믹하고 상호작용을 위한 작업을 할 수 있습니다.

# 인라인 이벤트 핸들러를 사용한 호버 이벤트 처리

## 기본 예제

<div class="content-ad"></div>

기초부터 시작해봐요. React의 인라인 이벤트 핸들러는 마우스 호버 효과의 "Hello World"와 유사합니다.

다음은 onMouseEnter 및 onMouseLeave 이벤트를 사용한 기본 예제입니다:

```js
import React from 'react';

// HoverButton이라는 함수형 컴포넌트 정의
function HoverButton() {
  return (
    // 버튼 요소 렌더링
    <button
      // 마우스가 버튼에 들어왔을 때 콘솔에 메시지 기록
      onMouseEnter={() => console.log('Hovering!')}
      // 마우스가 버튼을 떠났을 때 다른 메시지 기록
      onMouseLeave={() => console.log('Left the hover!')}
    >
      Hover Over Me!
    </button>
  );
}

// 다른 파일에서 가져와서 사용할 수 있도록 HoverButton 컴포넌트 내보내기
export default HoverButton;
```

## 코드 설명

<div class="content-ad"></div>

- onMouseEnter: 마우스가 요소 안으로 들어갈 때 트리거됩니다.
- onMouseLeave: 마우스가 요소를 벗어날 때 트리거됩니다.

쉽죠? 실제 동작을 보기 위해 이 라이브 데모를 확인해보세요!

# CSS-in-JS 라이브러리로 호버 이벤트 다루기

## Styled-components와 Emotion

<div class="content-ad"></div>

내부에서 모든 것을 처리하는 것을 좋아하는 사람들을 위해, styled-components나 Emotion과 같은 CSS-in-JS 라이브러리를 사용하면 JavaScript 파일에서 hover 이벤트를 처리할 수 있습니다. 이것은 마치 케이크를 먹으면서도 스타일링을 할 수 있는 것과 같아요.

```js
// styled-components 라이브러리를 불러옵니다
import styled from 'styled-components';

// 기본 스타일 및 hover 스타일이 있는 styled 버튼 컴포넌트를 생성합니다
const HoverButton = styled.button`
  background-color: lightblue; // 기본 배경색
  color: black; // 기본 텍스트 색상

  // hover 스타일을 정의합니다
  &:hover {
    background-color: darkblue; // 호버 시 배경색
    color: white; // 호버 시 텍스트 색상
  }
`;

// 주 앱 컴포넌트
function App() {
  // hover 효과가 있는 HoverButton 컴포넌트를 렌더링합니다
  return <HoverButton>Hover Over Me!</HoverButton>;
}

// App 컴포넌트를 기본 내보내기로 내보냅니다
export default App;
```

## 장점

CSS-in-JS를 사용하면 스타일을 컴포넌트에 스코프로 제한할 수 있을 뿐만 아니라 (우연한 전역 스타일 사고 없음!), React의 컴포넌트 기반 아키텍처와 원활하게 통합됩니다.

<div class="content-ad"></div>

# 호버 효과를 관리하는 데 상태를 사용하기

## 상태 관리

여기서 React가 빛을 발합니다 — 상태를 사용하여 호버 효과를 제어합니다. useState 훅을 사용하면 호버 상태에 따라 동적으로 스타일을 추가, 제거 또는 변경할 수 있습니다.

## 훅 동작

<div class="content-ad"></div>

```js
import React, { useState } from 'react';

function HoverCard() {
  // 카드에 호버 중인지 추적하는 상태 변수 'isHovered'를 선언합니다.
  const [isHovered, setIsHovered] = useState(false);

  return (
    <div
      // div 요소에 인라인 스타일을 적용합니다. 'isHovered' 상태에 따라 배경색을 변경합니다.
      style={{
        padding: '20px',
        backgroundColor: isHovered ? 'yellow' : 'lightgray',
        cursor: 'pointer', // 상호작용을 나타내기 위해 포인터 커서를 추가합니다.
        borderRadius: '8px', // 더 부드러운 외관을 위해 소규모 테두리 반지름을 추가합니다.
        transition: 'background-color 0.3s ease', // 배경색이 변경될 때 부드러운 전환을 적용합니다.
      }}
      // 마우스가 div 영역에 들어왔을 때의 이벤트 핸들러입니다. 'isHovered'를 true로 설정합니다.
      onMouseEnter={() => setIsHovered(true)}
      // 마우스가 div 영역을 벗어났을 때의 이벤트 핸들러입니다. 'isHovered'를 false로 설정합니다.
      onMouseLeave={() => setIsHovered(false)}
    >
      Hover Over This Card!
    </div>
  );
}

export default HoverCard;
```

## Best Practices

- 상호작용을 실제로 향상시키는 경우에만 상태 관리를 유지하세요.
- CSS만으로 처리 가능한 순수한 시각적 효과에 상태를 사용하지 마세요.

# React Hooks를 사용한 호버 처리


<div class="content-ad"></div>

## 사용자 지정 훅

상태에서 멈추지 마세요! 코드를 재사용 가능하고 깨끗하게 만들기 위해 호버 이벤트를 처리하는 사용자 지정 훅을 작성하세요.

## 재사용 가능한 코드

```js
import { useState } from 'react'; // 리액트에서 useState 훅을 가져오기

// 호버 상태를 처리하는 사용자 지정 훅
function useHover() {
  // 요소가 호버 상태인지 추적하는 상태
  const [hovered, setHovered] = useState(false);

  // 마우스 진입 이벤트를 처리하는 함수
  const onMouseEnter = () => setHovered(true);

  // 마우스 떠남 이벤트를 처리하는 함수
  const onMouseLeave = () => setHovered(false);

  // 상태 및 이벤트 핸들러 반환
  return { hovered, onMouseEnter, onMouseLeave };
}

// 사용자 지정 useHover 훅을 사용하는 컴포넌트
function HoverBox() {
  // useHover 훅에서 반환된 값을 구조분해 할당
  const { hovered, onMouseEnter, onMouseLeave } = useHover();

  return (
    <div
      // 호버 박스에 대한 인라인 스타일링
      style={{
        padding: '20px',
        backgroundColor: hovered ? 'green' : 'red', // 호버 상태인 경우 초록색, 그렇지 않으면 빨간색
      }}
      onMouseEnter={onMouseEnter} // 마우스 진입 시 호버 상태를 true로 설정
      onMouseLeave={onMouseLeave} // 마우스 떠날 때 호버 상태를 false로 설정
    >
      이 상자 위로 호버하세요!
    </div>
  );
}

export default HoverBox; // HoverBox 컴포넌트를 기본으로 내보내기
```

<div class="content-ad"></div>

## 고급 예시

사용자 정의 훅은 중첩된 호버 효과, 툴팁, 심지어 애니메이션과 같이 복잡한 상호작용을 처리할 수 있어요.

하늘의 한계가 없어요!

# Ref를 사용하여 직접 DOM 조작하기

<div class="content-ad"></div>

## 호버 처리에서 Ref 사용

가끔은 DOM과 가까이서 작업해야 할 때가 있습니다. 이때 ref가 필요합니다. useRef 훅을 사용하면 DOM 요소를 직접 조작할 수 있습니다. 상태만으로는 처리할 수 없는 상황에 완벽하게 적합합니다.

## 장단점

- 장점: DOM에 직접 액세스할 수 있어 재렌더링이 필요하지 않습니다.
- 단점: React의 선언적 특성을 우회하므로 조심해서 사용해야 합니다!

<div class="content-ad"></div>

```js
import React, { useRef } from 'react';

const HoverWithRef = () => {
  // Div 엘리먼트에 연결할 ref 생성
  const divRef = useRef(null);

  // Div에 마우스가 진입했을 때 처리하는 함수
  const handleMouseEnter = () => {
    // 마우스가 진입했을 때 div의 배경색을 변경
    divRef.current.style.backgroundColor = 'lightcoral';
  };

  // Div에서 마우스가 빠져나갈 때 처리하는 함수
  const handleMouseLeave = () => {
    // 마우스가 빠져나갈 때 div의 배경색을 원래대로 되돌림
    divRef.current.style.backgroundColor = 'lightgrey';
  };

  return (
    <div
      ref={divRef} // Div 엘리먼트에 ref 연결
      onMouseEnter={handleMouseEnter} // 마우스 진입 이벤트 핸들러 설정
      onMouseLeave={handleMouseLeave} // 마우스 빠져나감 이벤트 핸들러 설정
      style={{
        padding: '20px', // Div 내부에 간격을 추가
        borderRadius: '10px', // Div의 모서리를 둥글게 처리
        backgroundColor: 'lightgrey' // 초기 배경색 설정
      }}
    >
      이 Div 위로 마우스를 가져가 보세요!
    </div>
  );
};

export default HoverWithRef;
```

위 예시에서는 useRef를 사용하여 호버 이벤트가 발생할 때 DOM을 직접 조작하는 방법을 보여주고 있습니다. 이 접근 방식은 주로 서드 파티 라이브러리와 함께 작업하거나 상태만으로 간단히 처리하기 어려운 복잡한 애니메이션을 트리거해야 할 때 특히 유용합니다.

그러나 기억하세요! 큰 권한을 가졌다면 큰 책임을 져야 합니다. ref를 잘 관리하세요!

# 함수형 컴포넌트와 클래스 컴포넌트에서 호버 이벤트 처리하기


<div class="content-ad"></div>

## 기능 컴포넌트

현대적인 React는 기능 컴포넌트와 훅에 관한 것입니다. 기능 컴포넌트에서 호버 이벤트를 다루는 것은 간단하며, 코드를 깔끔하고 간결하게 유지하려면 useState와 useRef와 같은 훅을 활용합니다.

```js
import React, { useState } from 'react'; // 리액트에서 React 및 useState를 가져옵니다

// FunctionalHover라는 기능 컴포넌트를 정의합니다
const FunctionalHover = () => {
  // 'false'가 기본 값인 'hovered' 상태 변수를 선언합니다
  const [hovered, setHovered] = useState(false);

  // 컴포넌트는 호버 시 배경색을 변경하는 div를 반환합니다
  return (
    <div
      onMouseEnter={() => setHovered(true)} // 마우스가 div에 들어가면 'true'로 hovered를 설정합니다
      onMouseLeave={() => setHovered(false)} // 마우스가 div를 떠나면 'false'로 hovered를 설정합니다
      style={{
        backgroundColor: hovered ? 'lightblue' : 'lightgray', // 호버 상태에 따른 조건부 스타일링
        padding: '20px',
        borderRadius: '5px',
        transition: 'background-color 0.3s ease', // 배경색에 대한 부드러운 전환 효과
      }}
    >
      I'm a functional component!
    </div>
  );
};

// FunctionalHover 컴포넌트를 기본 내보내기로 내보냅니다
export default FunctionalHover;
```

## 클래스 컴포넌트

<div class="content-ad"></div>

레거시 코드를 유지 보수하는 경우에는 아직 클래스 컴포넌트를 다루고 있을 수 있습니다. 클래스 컴포넌트에서는 마우스 호버 이벤트를 동일한 이벤트 핸들러를 사용하여 처리할 수 있지만, 상태 관리 방법이 약간 다릅니다.

```js
import React, { Component } from 'react';

// ClassHover라는 클래스 컴포넌트 정의
class ClassHover extends Component {
  // 생성자에서 상태 초기화
  constructor(props) {
    super(props);
    this.state = { hovered: false }; // 'hovered' 상태를 기본적으로 false로 설정
  }

  // 마우스 진입 이벤트를 처리하는 메서드
  handleMouseEnter = () => {
    this.setState({ hovered: true }); // 마우스가 들어오면 'hovered' 상태를 true로 설정
  };

  // 마우스 떠남 이벤트를 처리하는 메서드
  handleMouseLeave = () => {
    this.setState({ hovered: false }); // 마우스가 나가면 'hovered' 상태를 false로 설정
  };

  // 컴포넌트를 표시하는 렌더 메서드
  render() {
    return (
      <div
        onMouseEnter={this.handleMouseEnter} // 마우스 진입 이벤트 핸들러를 연결
        onMouseLeave={this.handleMouseLeave} // 마우스 떠남 이벤트 핸들러를 연결
        style={{
          backgroundColor: this.state.hovered ? 'lightblue' : 'lightgray', // 'hovered' 상태에 따라 배경색 변경
          padding: '20px', // div에 padding 추가
          borderRadius: '5px', // div 모서리를 둥글게 처리
        }}
      >
        I'm a class component!
      </div>
    );
  }
}

// ClassHover 컴포넌트를 내부 앱의 다른 부분에서 사용할 수 있도록 내보냄
export default ClassHover;
```

함수형 컴포넌트가 React의 미래이며 코드를 더 쉽게 읽고 유지할 수 있지만, 레거시 프로젝트에서는 클래스 컴포넌트가 여전히 중요합니다.

두 방식 모두 유효하지만 새롭게 시작하는 경우 함수형 컴포넌트와 훅을 사용하는 것이 좋습니다.

<div class="content-ad"></div>

# 마무리 말씀

오늘은 hover 이벤트의 기본부터 사용자 정의 후크, 상태 관리, 그리고 직접 DOM 조작을 활용한 고급 기술까지 많은 내용을 다뤘어요.

함수형 컴포넌트, 클래스 컴포넌트 또는 둘 다 사용 중이더라도, 이제는 전문가처럼 hover 이벤트를 다룰 수 있는 도구를 가졌어요.

그리고, 만약 hover 이벤트 해킹이나 공포 이야기가 있다면, 아래 댓글에 남겨주세요! 여러분의 이야기를 들어보고 싶어요!

<div class="content-ad"></div>


![How to Create Dynamic Hover Effects in React - Step-by-Step Guide](/assets/img/2024-09-10-HowtoCreateDynamicHoverEffectsinReactStep-by-StepGuide_0.png)


React에서 동적 호버 효과를 만드는 방법




![CSS Image](/assets/img/2024-09-10-Top5CSSFeaturesYoureNotUsingButShouldBe_0.png)

CSS는 웹 사이트를 디자인하는 데 도움이 되는 도구입니다.

많은 개발자들이 CSS의 기본을 알고 있지만, 작업 시간을 절약하고 코드를 개선할 수 있는 특별한 기능과 숨겨진 보석들이 있습니다.

여기에는 당신이 사용하지 않을 수도 있는 5가지 CSS 기능이 나와 있습니다, 하지만 확실히 사용해야 할 것들입니다!


<div class="content-ad"></div>

# 1. 측면 비율

첫 번째로, 요소의 측면 비율을 정의하는 한 줄입니다. 이를 통해 설정된 너비에 대응하여 높이를 자동으로 조절할 수 있습니다(또는 그 반대로).

```js
.box {
  width: 90%;
  aspect-ratio: 16/9;
}
```

# 2. 강조 색상

<div class="content-ad"></div>

이 CSS 규칙은 링크 및 버튼과 같은 상호 작용 요소에 일관된 강조 색상을 적용합니다.

이것은 이 색상을 사용할 때마다 각 요소를 개별적으로 스타일링할 필요가 없어 사이트 전체적으로 일관성을 유지할 수 있게 해줍니다.

```js
body {
  accent-color: green;
}
```

# 3. 스무스 스크롤

<div class="content-ad"></div>

CSS 중에서 제가 가장 좋아하는 기능 중 하나에요.

이 기능은 페이지 전체에 대해 부드러운 스크롤을 활성화시켜 주는데, 앵커 링크로 이동할 때 사용자 경험을 향상시키죠.

아래 내용을 확인해보세요:

```js
html {
    scroll-behavior: smooth;
}
```

<div class="content-ad"></div>

# 4. 논리적 속성

margin-left, margin-right, margin-top 및 margin-bottom을 계속 사용에 지쳤나요?

대신 이렇게 해보세요!

```js
.box {
  margin-block: 5px 10px;    /* 5px 상단 여백, 10px 하단 여백 */
  margin-inline: 20px 30px;  /* 20px 왼쪽 여백, 30px 오른쪽 여백 */
}
```

<div class="content-ad"></div>

동일한 방법은 패딩에도 적용됩니다.

```js
.box {
  padding-block: 10px 20px; /* 위/아래 10px, 왼쪽 20px */
  padding-inline: 15px 25px; /* 왼쪽 15px, 오른쪽 25px */
}
```

이러한 속성들은 텍스트 방향(예: 왼쪽에서 오른쪽 또는 오른쪽에서 왼쪽)에 따라 자동으로 조정되어 코드가 보기 좋고 짧고 유연하며 국제화에 친화적이게 됩니다.

# 5. CSS 변수

<div class="content-ad"></div>

CSS 변수, 또는 사용자 정의 속성이라고도 하는 것은 스타일 시트 전체에서 사용할 수 있는 재사용 가능한 값(색상, 글꼴, 크기 등)을 정의할 수 있게 해줍니다.

이를 통해 일관성을 유지하고 프로젝트 크기가 큰 경우에 필요할 때 값들을 쉽게 업데이트할 수 있습니다.

```js
:root {
  --main-color: #3498db;
  --padding-size: 20px;
}

.box {
  background-color: var(--main-color);
  padding: var(--padding-size);
}
```

여기서 --main-color 또는 --padding-size를 한 곳에서 변경하면 이 변수를 사용하는 모든 요소가 일괄적으로 업데이트되어 사이트 전체에 적용됩니다.

<div class="content-ad"></div>

이러한 기능들은 실용적인 CSS의 본질을 담고 있어서, 일반적인 레이아웃 및 스타일링 문제에 대한 해결책을 최소한의 코드로 제공합니다. 이러한 코드를 매일의 작업 흐름에 통합하여, 웹 프로젝트의 미학과 기능성을 효율적이고 효과적으로 향상시킬 수 있습니다.

코딩을 즐기세요!

개발자 대부분 사용하지 않지만 반드시 사용해야하는 5가지 CSS 기능 



# 모든 질문에 기본적으로 "아니오"입니다. 그러나 여기 계신 여러분은 왜 그렇게 생각하는지 읽고 사용하는 레이아웃 시스템에 대해 더 많이 알게 되어 더 나은 결정을 내릴 수 있습니다. 여러분과 다른 개발자들의 이익을 위해요!

요즘으로 계속해서 깨어나 있게 만드는 것은 3000년 전 우리의 뇌가 집단적으로 변화했고, 내 안의 목소리와 감정을 외부에서 오는 것이 아닌 우리 것으로 고려하기 시작했다는 주장입니다. 특히 다음 질문들이 제게 계속해서 깨어나 있게 만듭니다:
- 우리 뇌의 다음 발전 점프는 언제 일어날까요?
- 그것을 막는 요인이 무엇인가요?
- 다음 단계는 무엇일까요?

이렇게 많은 과학적 장난감을 가진 종족은 좀 더 발전되어야 한다고 생각하지 않으세요?

<div class="content-ad"></div>

그러나 우리가 여기에 모인 이유는 그것이 아닙니다. 그리드 및 플렉스박스 레이아웃에 대해 이야기해보겠습니다. 우리는 지금 개발을 건너뛰지 않고도 이러한 것들을 사용할 수 있어요 :)

이 기사는 중간(Medium)에서 나를 팔로우하는 18,000명의 사람들 덕분에 제공되었습니다.

프론트엔드 개발에 익숙한 사람들은 CSS를 사용하여 레이아웃을 정렬할 수 있는 가능성에 대해 매우 익숙할 것입니다. 대부분의 개발자들은 2024년에는 플렉스박스와 그리드에 대해서도 알고 있어야 할 것입니다.

그래서 당연한 주제일 줄 알았기 때문에 꽤 의아했습니다. 하지만 보이는 대로 그렇지 않은 것 같습니다. 먼저 프론트엔드 전문가들이 기본적으로 레이아웃에 그리드를 사용해야 한다는 내용의 비디오를 보았을 때 의심을 품게 되었습니다. 그래서 온라인 자료를 확인했더니 그 주제에 관한 오래된 오류가 포함된 기사들이 있었습니다.

<div class="content-ad"></div>

제가 의견을 내릴 때 생각하는 것은 명확하지 않다는 점과 온라인에서 flexbox와 그리드에 대한 많은 FUD(인식을 혼란스럽게 만드는 정보)가 있다는 점입니다. 그래서 저는 여러분에게 언제 어떤 것을 사용해야 하는지 알려주기 위해 이 글을 쓰기로 결심했습니다.

저는 많은 해동동안 프론트엔드 개발자로 일해온 경험이 있기 때문에 그 주제에 대해 어느 정도 경험이 있습니다. 많은 고수준 상업 프로젝트에 참여해본 경험이 있습니다. 아름다운 것들을 보았고 아무도 보지 말아야 할 것들도 보았습니다 ☺

기본적으로 flexbox를 사용해야 합니다.

그럼, 이 주제에 대해 조금 더 자세히 알아보겠습니다. 저는 flexbox와 그리드에 대해 전체 튜토리얼을 작성하고 싶지 않습니다. 왜냐하면 이미 많은 정보가 있기 때문입니다. 그래서 이 글에서는 간단한 소개만을 다룰 예정입니다.

<div class="content-ad"></div>

여기 요소 사이의 간격이 있는 플렉스박스가 있습니다:

![image](/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_0.png)

요소 사이에 10px 간격이 있는 것을 확인할 수 있습니다. 이것은 플렉스박스로 구현되었습니다.

또한 요소를 왼쪽과 오른쪽으로 정렬할 수 있습니다.

<div class="content-ad"></div>


![image](/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_1.png)

And even align stuff vertically:

![image](/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_2.png)

You can also have a two-dimensional layout:


<div class="content-ad"></div>

<img src="/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_3.png" />

"flex-wrap"라는 속성을 사용하여 작업이 완료되었습니다. "wrap"으로 설정하면 컨테이너에 맞지 않는 항목을 새 줄로 랩합니다.

레이아웃이 작동하는 방식을 제어하기 위해 여러 가지 속성이 있습니다.

Flexbox로 모든 레이아웃을 쉽게 만들 수 있습니다.

<div class="content-ad"></div>

이것이 당신이 만드는 모든 디자인에 기본값이어야 하는 이유입니다.

그러니까 언제 그리드를 사용해야 할까요?

그리드는 표와 같은 레이아웃에 사용해야 하지만, 몇 가지 특정한 경우에만 사용해야 합니다.

그 측면을 더 자세히 살펴보겠습니다.

<div class="content-ad"></div>

여기 그리드가 있어요:

![그리드](/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_4.png)

"fr"은 요소가 어떤 부분을 차지해야 하는지를 설명하는 특별한 단위예요. 이 경우에는 첫 번째 열과 두 번째 열이 각각 1분의 공간을 차지해야 한다고 말해요. 따라서 두 열은 사용 가능한 공간을 동일한 부분으로 차지하게 돼요. 행도 마찬가지에요.

이 디자인에서 익숙한 점이 보이시나요?

<div class="content-ad"></div>

여기 힌트가 있어요:


![table hint](/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_5.png)


맞아요, 스프레드시트와 비슷해 보여요. 스프레드시트에 특이한 점은 고정된 크기의 행과 열의 세트라는 거예요.

A1 셀의 너비를 늘리려면 A2 셀의 너비도 함께 늘려야 해요. B1 셀의 높이를 변경하면 C2에도 영향을 미치게 돼요.

<div class="content-ad"></div>

이것이 표와 CSS 그리드 레이아웃이 무엇인지에 대해 거의 설명한 것입니다. 향후 참조를 위해 이 기능을 "셀 크기 잠금"이라고 지정해 보겠습니다(이 용어는 크기를 변경할 수 없다는 의미가 아니라 변경할 수 있다는 의미입니다. 셀이 서로 영향을 주기 때문에 "잠겨 있다"는 의미입니다).

셀의 폭과 높이를 고정하려는 경우에만 그리드를 사용해야 합니다. 여기서 고정이라 함은 내용에 따라 고정되거나 CSS로 하드 코딩된 것을 의미합니다.

따라서 그리드는 테이블과 같은 것에만 사용되어야 하지만 좁은 경우에만 해당됩니다.

이것은 꽤 흥미롭습니다. 머릿속에 먼저 떠오를 수 있는 것은 실제로 테이블에 그리드를 사용하는 것이겠지만, 그 경우에는 table 태그를 사용해야 합니다.

<div class="content-ad"></div>

테이블 태그를 Markdown 형식으로 변경하세요.

<div class="content-ad"></div>


![이미지](/assets/img/2024-09-10-ShouldCSSGridBeYourDefaultChoiceOverFlexboxIn2024_6.png)

부트스트랩 그리드 시스템은 셀 크기 잠금의 제약을 벗어납니다. 이 방법으로 CSS 그리드 레이아웃보다 더 유연하며, 개발자들이 디자인을 구현하는 데 필수적으로 여겼습니다.

CSS 그리드와 플렉스박스는 브라우저에 나중에 구현되었는데, 그리드는 셀 크기 잠금에 있어 더 보수적이며, 플렉스박스는 그 제한이 없습니다.

이 정보를 토대로 플렉스박스 또는 그리드를 선택할 수 있어야합니다. 여기서 주목해야 할 중요한 점은, 플렉스박스 또는 그리드로 모든 것을 할 수 있다는 점 때문에 성장할 수 있는 기회가 있다는 것입니다. 아무것도 너를 막지 않기 때문에요.


<div class="content-ad"></div>

그런데 몇 가지 신호가 있습니다.

먼저, 무엇을 사용하든 쉽게 작성하고 읽고 변경 및 유지보수할 수 있어야합니다.

그러니까 그리드로 노력하는 느낌이 들면, 해당 경우에는 플렉스박스가 더 나을 수도 있고 그 반대도 마찬가지입니다.

그리고 두 가지를 지적하고 싶은데, 첫 번째로: 사람들은 대부분 자신이 아는 것을 사용합니다. 그러니까 두 가지 레이아웃 스타일을 모두 배워, 둘 다 사용할 자격이 있는 것 같은 느낌을 가지는 것이 좋습니다.

<div class="content-ad"></div>

또 하나 흥미로운 사실은 우리가 디자인에서 패턴을 발견하는 경향이 있다는 것입니다. 실제로 존재하지 않더라도 테이블과 비슷한 디자인을 볼 수 있다는 것을 의미합니다. 혹은 테이블과 비슷한 디자인이 있더라도, 정보를 놓치고 그리드 디자인에서 급속하게 변할 수 있다는 점입니다.

CSS 그리드 레이아웃의 경우, 디자이너가 와서 물체를 왼쪽과 오른쪽으로 움직이도록 요청하면서 셀 크기 잠금을 해제해야 할 경우, CSS 그리드 레이아웃을 사용하기 힘들어질 수 있습니다. 

그러니 한 번 살펴보고, 디자인의 일부는 영원히 그리드로 유지되어야만 다른 사람이나 자신을 해치지 않도록 하세요.

요약하자면:

<div class="content-ad"></div>

- 기본적으로 Flexbox 레이아웃을 사용하세요.
- 테이블 형식의 경우 table 태그를 사용하세요.
- 테이블은 아니지만 테이블 같이 보이고 셀 크기가 영원히 고정될 때는 CSS Grid 레이아웃을 사용하세요.

그 주제에 대해서 명확하게 설명되었으면 좋겠어요. 더 궁금한 점이 있으면 질문을 댓글로 남겨주세요!

저의 온라인 활동을 지원하고 싶다면 멋진 프로그래밍 덱과 데스크 매트를 확인해보세요! 프론트엔드 개발, 소프트웨어 엔지니어링, 과학, 오픈 소스에 대해 더 알고 싶다면 구독, 팔로우, 공유, 좋아요, 박수 부탁드립니다! 여러분의 지원이 더 많은 것을 이룰 수 있게 해줍니다. 감사합니다!

감사합니다!

2024년에 Flexbox 대신 CSS Grid를 기본 선택해야 할까요



CSS Grid은 웹 레이아웃을 만드는 방법을 혁신적으로 바꿨어요. 페이지의 요소들을 배치하는 데 제어력과 유연성을 제공하여, 복잡한 대시보드나 간단한 블로그 레이아웃을 만들 때 도움이 돼요. CSS Grid를 사용하면 시각적으로 멋지고 기능적인 디자인을 만들 수 있어요. 여기 10가지의 CSS Grid 레이아웃 팁을 소개할게요. 이렇게 하면 디자인을 변화시키고 프론트엔드 스킬을 향상시킬 수 있어요.

![CSS Grid Layout Tricks](/assets/img/2024-09-10-10CSSGridLayoutTricksThatWillTransformYourDesigns_0.png)

# 1. 반응형 그리드 만들기

CSS Grid의 가장 강력한 기능 중 하나는 최소한의 노력으로 반응형 레이아웃을 만들 수 있는 것이에요. 그리드의 열의 수를 정의하고 컨테이너의 크기에 따라 자동으로 조절되도록 할 수 있어요.

<div class="content-ad"></div>


.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}


## 변화를 가져오는 이유

- 자동응답 : 그리드는 화면 크기에 맞게 조정되어 다양한 기기에서 일관된 모양을 유지합니다.
- 효율성 : 다양한 화면 크기를 처리하기 위한 복잡한 미디어 쿼리가 필요없습니다.

# 2. 그리드를 사용한 요소의 레이어링


<div class="content-ad"></div>

CSS Grid을 사용하면 position: absolute;를 사용하는 것과 비슷하게 요소를 서로 겹쳐 놓을 수 있지만 정렬과 간격에 대해 더 많은 제어가 가능합니다.

```js
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.grid-item {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
}
```

## 왜 혁신적인가요?

- 창의적 자유: 이미지 위에 텍스트 오버레이와 같은 복잡하고 시각적으로 매력적인 레이아웃이 가능합니다.
- 정확성: 겹쳐진 요소의 위치와 정렬에 대해 보다 더 많은 제어를 할 수 있습니다.

<div class="content-ad"></div>

# 3. 유연한 크기 조정을 위한 분수 단위(fr) 사용

CSS 그리드에서의 fr 단위는 사용 가능한 공간의 일부를 나타냅니다. 이 단위는 사용 가능한 공간에 따라 열이 자동으로 조정되는 유연한 레이아웃을 만드는 데 매우 유용합니다.

```js
.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
```

## 왜 혁신적인가요?

<div class="content-ad"></div>

- 유연한 레이아웃: 사용 가능한 공간에 따라 성장하거나 축소하는 열을 쉽게 생성할 수 있습니다.
- 간편한 크기 조정: 원하는 레이아웃 비율을 얻기 위한 복잡한 계산이 필요하지 않습니다.

## 4. Justify 및 Align 속성을 사용하여 항목 정렬하기

CSS Grid를 사용하면 justify-items, align-items, justify-content 및 align-content 속성을 사용하여 그리드 항목의 정렬을 정확하게 제어할 수 있습니다.

```js
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  height: 300px;
}

.grid-item {
  background-color: #ff6f61;
  padding: 20px;
  color: white;
}
```

<div class="content-ad"></div>

## 왜 변화를 가져오는가

- 정밀도: 그리드 내에서 항목을 정확히 원하는 위치에 맞춥니다.
- 다재다능성: 최소한의 코드로 균형 잡힌 미학적으로 매력적인 레이아웃을 만듭니다.

# 5. 복잡한 레이아웃을 위한 그리드 템플릿 영역

그리드 템플릿 영역을 사용하면 그리드 내에서 명명된 영역을 정의하여 요소를 이러한 영역에 할당함으로써 복잡한 레이아웃을 쉽게 만들 수 있습니다.

<div class="content-ad"></div>

```css
.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}

.header { grid-area: header; background-color: #ff6f61; }
.sidebar { grid-area: sidebar; background-color: #ff9f43; }
.main { grid-area: main; background-color: #feca57; }
.footer { grid-area: footer; background-color: #48dbfb; }
```

## 왜 이것이 혁신적인가요?

- 단숨함: 복잡한 레이아웃을 이해하고 구현하기 쉽게 만듭니다.
- 가독성: 레이아웃의 시각적 구조가 코드에서 명확합니다.

# 6. 고급 레이아웃을 위한 그리드 중첩하기


<div class="content-ad"></div>

매우 복잡하고 반응형 레이아웃을 만들기 위해 그리드 내에 그리드를 중첩할 수 있습니다. 각 중첩된 그리드는 디자인에 완전한 통제를 제공하기 위해 자체 열, 행 및 간격을 가질 수 있습니다.

```js
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}

.nested-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.grid-item, .nested-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}
```

## 변화를 가져온 이유

- 복잡한 디자인: 대시보드나 세부적인 콘텐츠 섹션에 이상적인 레이아웃을 쉽게 만들 수 있습니다.
- 유연성: 중첩된 그리드는 상위 그리드로부터 반응성을 상속받아 모든 화면 크기에 걸쳐 일관된 디자인을 보장합니다.

<div class="content-ad"></div>

# 7. 동일한 높이의 컬럼 생성하기

CSS 그리드를 사용하면 컬럼의 높이를 동일하게 만드는 것이 간단해집니다. 이러한 작업은 내용의 길이가 다양한 경우에도 쉽게 수행할 수 있습니다. 기존 CSS 방법으로는 이것을 구현하기가 어려운 경우가 많습니다.

```js
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-item {
  background-color: #6c5ce7;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
```

## 변화의 이유

<div class="content-ad"></div>

- 균일한 디자인: 모든 열이 완벽하게 정렬되어 깨끗하고 전문적인 모양을 만듭니다.
- 사용 편의성: CSS Grid를 사용하면 동일한 높이의 열을 손쉽게 구현할 수 있습니다.

# 8. minmax() 함수를 사용한 열 자동 조정

minmax() 함수를 사용하면 내용 크기에 맞게 조정되면서 최소 및 최대 크기를 유지하는 열을 만들 수 있습니다. 이는 반응형 디자인에 특히 유용합니다.

```js
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.grid-item {
  background-color: #0984e3;
  padding: 20px;
  text-align: center;
}
```

<div class="content-ad"></div>

## 왜 변화적인가요

- 반응형 디자인: 열이 컨텐츠에 맞게 자동 조정되어 다양한 디바이스에서 일관된 레이아웃을 제공합니다.
- 유연한 레이아웃: 최적의 고정 및 유동 레이아웃을 결합하여 최대의 적응성을 제공합니다.

# 9. Grid를 사용한 아이템 가운데 정렬

CSS Grid를 사용하면 추가적인 플렉스박스 트릭이나 포지셔닝 없이 아이템을 수평 및 수직으로 손쉽게 가운데 정렬할 수 있습니다.

<div class="content-ad"></div>

```js
.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.grid-item {
  background-color: #fd79a8;
  padding: 20px;
  color: white;
  text-align: center;
}
```

## 왜 이것이 변화적인가요?

- 간단함: 한 줄의 코드로 콘텐츠를 가운데 정렬합니다.
- 다양성: 단일 및 다중 항목 모두에 적용되어 콘텐츠를 가운데 정렬하는 데 사용됩니다.

# 10. 동적 콘텐츠용 암시적 그리드 사용하기

<div class="content-ad"></div>

암시적 그리드는 그리드에 추가된 콘텐츠에 따라 필요한 행과 열을 자동으로 생성할 수 있게 해줍니다. 항목의 수가 고정되지 않거나 예측할 수 없을 때 유용합니다.

```js
.grid-container {
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  grid-auto-flow: dense;
  gap: 16px;
}

.grid-item {
  background-color: #fdcb6e;
  padding: 20px;
  text-align: center;
}
```

## 왜 이것이 혁신적인가요

- 동적 레이아웃: 이미지 갤러리나 제품 목록과 같이 콘텐츠가 동적으로 변경되는 레이아웃에 완벽합니다.
- 사용 편의성: 수동 조정이 필요하지 않고 자동으로 콘텐츠에 적응합니다.

<div class="content-ad"></div>

CSS 그리드는 웹 디자인을 위한 새로운 가능성을 열어주는 강력한 도구입니다. 이 10가지 기술을 마스터하면 시각적으로 매력적이면서도 높은 기능성과 반응성을 갖춘 레이아웃을 만들 수 있습니다. 단순한 블로그에서부터 복잡한 웹 애플리케이션까지 디자인할 때, 이러한 기술들은 CSS 그리드의 기능을 완전히 활용할 수 있도록 도와줍니다. 웹 디자인에 접근하는 방식을 변화시킬 것입니다.

더 많은 팁과 노하우를 보고 싶다면 JS Quick Tips를 확인해보세요.

저와 같은 기사를 더 많이 보고 싶다면 Medium에서 팔로우 하거나 새 이야기를 이메일로 받기 위해 구독하세요. 또한 제 리스트도 확인해볼 수 있습니다. 또는 이와 관련된 다음 기사 중 하나를 확인해보세요:

- 더 나은 성능과 유지보수를 위한 CSS 최적화를 위한 10가지 필수 팁
- 효율적인 코딩을 위한 10가지 반드시 알아야 할 JavaScript 기술
- 더 깨끗한 JavaScript 코드를 작성하는 방법: 팁, 노하우, 최상의 방법
- 코드 품질과 유지보수성을 높이기 위한 5가지 JavaScript 패턴
- 아마 사용하지 않을 수도 있는 10가지 고급 JavaScript 트릭 (하지만 사용해야 할 것들)

세련된 웹사이트를 만들어줄 CSS Grid 레이아웃 트릭



![image](/assets/img/2024-09-10-HowISaveTonsofTimewithThese10WebDevGenerators_0.png) 

보일러플레이트 코드를 수동으로 생성하고 레이아웃을 정리하고 반응형 디자인을 만들며 코드 종속성을 관리하는 것에 지쳤나요? 
웹 개발을 더 재미있게 해야 한다고 생각해 본 적이 있나요?

이 10가지 시간을 절약할 수 있는 생성기 덕분에 귀찮은 작업을 건너뛰고 실제로 멋진 웹사이트를 만드는 데 집중할 수 있습니다.

몇 번의 클릭으로 웹 개발을 더 즐겁게 즐기세요!

<div class="content-ad"></div>

# HTML5 보일러플레이트

이 도구는 즉시 사용할 수 있는 HTML5 템플릿을 제공합니다. HTML, CSS 및 JavaScript에 대한 모든 최상의 실천 방법과 최적화된 설정이 포함되어 있어서 동일한 기본 코드를 처음부터 작성할 필요가 없습니다.

👉 [HTML5 보일러플레이트](링크)

# CSS 그리드 생성기

<div class="content-ad"></div>

이 도구를 사용하여 수동 코딩 없이 복잡한 그리드 레이아웃을 시각적으로 만들 수 있습니다. 디자인을 쉽게 만들고 사용할 프로젝트에서 사용할 CSS 코드를 내보낼 수 있습니다.

👉 CSS Grid Generator

# 웹코드 도구

이 코드 생성기 컬렉션을 사용하면 그라데이션, 그림자, 애니메이션과 같은 다양한 효과에 대한 CSS, HTML 및 JavaScript 코드를 빠르게 만들 수 있습니다. 이러한 요소들을 수동으로 코딩하는 대신 필요한 코드를 몇 번의 클릭만으로 생성할 수 있습니다.

<div class="content-ad"></div>

👉 웹 코드 도구

# Canva (색상 팔레트 생성기)

이 도구를 사용하면 이미지에서 아름다운 색상 팔레트를 생성하거나 미리 제작된 팔레트를 탐색하여 생성할 수 있습니다. 웹사이트 디자인과 일치하는 조화로운 색상 스키마를 선택하는 데 완벽합니다.

👉 Canva 색상 팔레트 생성기

<div class="content-ad"></div>

# 파비콘 생성기

이 도구를 사용하여 이미지를 다양한 크기와 포맷의 파비콘으로 빠르게 변환하세요. 파비콘은 브라우저 탭, 즐겨찾기 등에 나타나는 작은 아이콘들입니다. 이 생성기를 사용하면 전문 소프트웨어나 지식이 필요하지 않고 쉽게 이러한 아이콘을 만들 수 있습니다.

👉 [파비콘 생성기](https://example.com/favicon)

# Fontjoy

<div class="content-ad"></div>

Fontjoy는 웹 디자인을 위한 완벽한 글꼴 조합을 찾아 생성하는 데 도움을 줍니다. 제목과 본문 텍스트를 위한 조화로운 글꼴 조합을 제안하여 타이포그래피가 전문적이고 세련되 보이도록 합니다.

👉 Fontjoy

# SVGOMG (SVG Optimizer)

이 도구를 사용하여 SVG 이미지의 파일 크기를 줄이고 품질을 유지할 수 있습니다. 더 작은 파일 크기는 웹사이트의 로드 시간을 단축하여 성능과 사용자 경험을 향상시킵니다.

<div class="content-ad"></div>

👉 SVGOMG

# Animista

Animista는 여러 사전 빌드된 CSS 애니메이션 중에서 선택하고 필요에 맞게 커스터마이즈할 수 있습니다. 좋아하는 애니메이션을 선택한 후에는 CSS 코드를 쉽게 내보내어 프로젝트에 통합할 수 있습니다. 이 도구를 사용하면 사이트에 동적 애니메이션을 쉽고 재미있게 추가할 수 있습니다.

👉 Animista

<div class="content-ad"></div>

# 메타 태그 생성기

이 편리한 도구로 SEO 및 소셜 미디어 공유를 위한 최적화된 메타 태그를 생성하세요. 메타 태그는 검색 엔진에서 사이트의 가시성을 향상시키고 소셜 플랫폼에서 컨텐츠를 더 많이 공유할 수 있게 돕습니다.

👉 [메타 태그 생성기](link)

# Resposively

<div class="content-ad"></div>

한 번에 여러 디바이스에서 웹사이트가 어떻게 보이는지 미리 확인할 수 있는 툴이 있어요. 실시간으로 다양한 화면 크기에서 디자인이 얼마나 잘 반응하는지 테스트하여, 사이트가 스마트폰, 태블릿, 데스크탑에서 멋지게 보이도록 보장해줍니다.

👉 Responsively

이러한 도구들은 귀찮은 작업으로부터 시간을 절약하고, 웹사이트를 멋지게 만드는데 집중할 수 있도록 도와줘요. 한번 시도해보세요. 웹 개발이 얼마나 재미있는지 알게 되어 놀라실 거예요!

웹 개발할 때 시간을 아낄 수 있는 10가지 방법들



지난 6년 동안 저는 Pantacor에서 일했습니다. 이 회사는 컨테이너 기반의 임베디드 리눅스를 위한 오픈 소스 프레임워크를 개발하는 회사입니다. 저희는 컨테이너 기반 구성 요소를 사용하여 임베디드 리눭스 솔루션을 만드는 데 중점을 두고 있습니다. 웹 개발자로, 저의 경험은 주로 웹 응용 프로그램 및 API 아키텍처 구축에 있었습니다. 대학에서부터 임베디드 시스템은 제 도구 상자의 일부가 아니었습니다. 그러나 임베디드 리눅스에 대한 웹 구성 요소를 사용한 작은 응용 프로그램을 만들어야 하는 필요성은 기존의 Rust + React 응용 프로그램 또는 셸 API와 React 조합 대신 대안으로 Go와 HTMX를 탐색하게 했습니다.

# 임베디드 리눅스 개발의 도전

임베디드 리눅스 시스템은 사용자 인터페이스와 웹 기반 응용 프로그램을 개발할 때 특별한 도전을 제공합니다. 이러한 시스템은 종종 제한된 자원 - 제한된 메모리와 처리 능력 -을 가지고 있어 효율적이고 가벼운 기술을 선택하는 것이 중요합니다.

# Golang과 HTMX 탐색하기

<div class="content-ad"></div>

Golang 또는 Go는 단순성과 효율성으로 유명한 정적 타입의 컴파일된 언어입니다. HTMX는 최신 브라우저 기능에 직접적으로 접근할 수 있게 해주는 가벼운 JavaScript 라이브러리로, 복잡한 JavaScript 프레임워크의 필요성을 줄이고 응용 프로그램을 구축하기 위한 전체 변환 및 컴파일 단계를 제거합니다.

장착된 리눅스 환경에서는 오프라인 상태에서 제공해야 하는 모든 에셋을 포함한 독립적인 응용 프로그램이 필요합니다. 즉, 장치의 핫스팟이나 이더넷을 통해 직접 연결되었을 때 서비스할 수 있는 응용 프로그램을 만들어야 합니다.

Golang과 HTMX의 조합은 장착된 리눅스 응용 프로그램에 대해 여러 가지 이점을 제공합니다:

- 자원의 효율성: Go와 HTMX는 작은 자원 소모량을 가지고 있어 자원이 제한된 임베디드 시스템에 적합합니다. 대부분의 경우, 전체 패키지 크기가 5MB를 초과하지 않는 컨테이너를 생성해야 합니다.
- 접근하기 쉬운 학습 곡선: 백엔드 및 CLI 응용 프로그램에서의 Go 경험을 고려하면, 학습 곡선은 주로 해결해야 하는 구체적인 문제에 중점을 두면 되며 언어 자체로 인한 걱정은 없습니다.
- 성능: Go의 컴파일된 특성과 HTMX의 최소한의 JavaScript 접근 방식은 효율적인 실행과 Overhead를 줄여줘서 자원이 제한된 환경에 중요합니다.
- 오프라인 기능: 응용 프로그램에 필요한 모든 에셋을 패키징하는 기능은 장착된 시스템에서의 오프라인 기능 요구와 완벽하게 일치합니다.
- 단순화된 개발 프로세스: 복잡한 빌드 프로세스를 제거하고 필요한 JavaScript의 양을 줄이면 개발 및 배포 워크플로우를 간소화할 수 있습니다.

<div class="content-ad"></div>

# 현실 세계 응용

고와 HTMX를 임베디드 리눅스 환경에서 사용하는 실용적인 이점을 보여주기 위해, Pantacor에서의 작업에서 가져온 두 가지 예시를 살펴보겠습니다:

# 1. WiFi 연결 앱

개발한 응용 프로그램 중 하나는 리눅스 장치용 WiFi 연결 도구입니다. 이 앱은 포털을 생성하여 사용자가 임베디드 리눅스 장치에 손쉽게 WiFi를 설정할 수 있게 합니다. 작동 방식은 다음과 같습니다:

<div class="content-ad"></div>

- 장치는 액세스 포인트를 만듭니다.
- 사용자가 휴대전화나 노트북을 사용하여이 액세스 포인트에 연결합니다.
- 웹 인터페이스를 통해 사용자는 집 네트워크의 WiFi 자격 증명을 제공할 수 있습니다.
- 장치는 그런 다음이 자격 증명을 사용하여 사용자의 집 네트워크에 연결합니다.

## 2. 장치 관리 앱

팬타바이저를 위한 장치 관리 애플리케이션의 또 다른 예는 다음과 같습니다. 이 웹 기반 유틸리티는 사용자가 브라우저 인터페이스를 통해 Linux 장치를 관리할 수 있도록 합니다. 기능은 다음과 같습니다:

- tarball 파일을 드래그 앤 드롭하여 새 컨테이너 설치
- 클릭 몇 번으로 컨테이너 제거
- 컨테이너 로그 읽기
- 컨테이너 구성 설정

<div class="content-ad"></div>

# Go와 HTMX 구현: 실용적인 예제

Go와 HTMX를 활용하여 간단한 WiFi 네트워크 관리 애플리케이션을 만드는 실용적인 예제를 살펴봅시다. 이 예제는 사용 가능한 네트워크 목록을 보여주고 선택한 네트워크에 연결하는 방법을 보여줍니다.

전체 예제의 소스 코드는 다음에서 확인할 수 있습니다:

https://github.com/highercomve/gohtmx

<div class="content-ad"></div>

# 서버 설정하기

먼저, Go로 작은 서버를 만들어 세 가지 엔드포인트를 갖도록 설정할 거에요:

- GET /: 애플리케이션의 index.html을 반환합니다.
- GET /networks: HTML로 네트워크 목록을 반환합니다.
- POST /networks: 선택한 네트워크를 저장하고 연결합니다.

여기에 인덱스 엔드포인트를 구현하는 방법이 있어요:

<div class="content-ad"></div>

```go
func getIndex(w http.ResponseWriter, r *http.Request, opts *servermodels.ServerOptions) {
    data := servermodels.Response{
        Code:  http.StatusOK,
        Data:  nil,
        Error: nil,
    }
    render(w, r, opts, "index.html", &data)
}
```

# Index HTML

index.html 파일은 HTMX를 사용하여 상호작용하는 인터페이스를 만듭니다:

```js
{template "layout_start"}
{define "title"}Go HTMX Example{end}
<section class="flex justify-content-center pb-2">
    <header class="col-6 text-center">
        <h1>Manage wifi networks with Golang + HTMX + nmcli</h1>
    </header>
</section>
<section class="flex justify-content-center mb-2">
    <header class="col-12 flex align-items-center justify-content-center mb-2">
        <button
            class="btn btn-primary"
            hx-get="/networks"
            hx-target="#connections-list"
            hx-swap="morph:outerHTML"
        >
            Scan Networks
            <div class="htmx-indicator spinner-grow" role="status"></div>
        </button>
    </header>
    {if notNil .Data} { block "network_list" . }{end} {else}
    <section id="connections-list">
        <div
            hx-get="/networks"
            hx-target="#connections-list"
            hx-swap="morph:outerHTML"
            hx-trigger="load"
            class="flex flex-direction-column justify-content-center align-items-center"
        >
            <div class="htmx-indicator spinner-grow" role="status"></div>
            <div class="pt-1 color-grey-300">Loading networks...</div>
        </div>
    </section>
    {end}
</section>
{template "layout_end"}
```

<div class="content-ad"></div>

# HTMX 속성 이해하기

저희 WiFi 관리 애플리케이션에서 사용하는 HTMX 속성들을 좀 더 살펴보겠습니다. 이러한 속성들은 복잡한 JavaScript 없이도 동적이고 앱과 같은 느낌을 제공하는 데 기여합니다:

- hx-get="/networks": 이 속성은 요소가 트리거될 때 HTMX에게 "/networks" 엔드포인트로 GET 요청을 보내라고 알려줍니다. "네트워크 스캔" 버튼에서는 이를 클릭하면 사용 가능한 네트워크 목록을 가져오는 것을 의미합니다.
- hx-target="#connections-list": 이것은 서버로부터의 응답이 삽입되어야하는 위치를 지정합니다. 여기서는 네트워크 목록이 "connections-list"라는 ID를 가진 요소에 배치될 것입니다.
- hx-swap="morph:outerHTML": 이것은 새 콘텐츠를 어떻게 교체할지를 결정합니다. "morph" 전략은 DOM을 지능적으로 업데이트하여 부드러운 전환을 위해 변경을 최소화합니다. "outerHTML"은 대상 요소 전체를(요소 자체 포함) 바꿈을 의미합니다.
- hx-trigger="load": 이 속성은 HTMX 요청이 언제 트리거될지를 정의합니다. "load"로 설정하면 요청은 요소가 DOM으로 로드될 때 즉시 실행됩니다. 첫 번째 네트워크 목록 div에서 사용하여 페이지가 로드될 때 네트워크를 자동으로 로드합니다.
- `div class="htmx-indicator spinner-grow" role="status"``/div`: hx-* 속성은 아니지만, 이 div는 HTMX의 로딩 인디케이터를 표시하는데 사용됩니다. "htmx-indicator" 클래스는 요청이 진행 중일 때 이 요소를 표시하고 그 외에는 숨기도록 HTMX에게 지시합니다.

이러한 HTMX 속성을 통해 우리는 최소한의 JavaScript로 반응적이고 동적인 사용자 인터페이스를 생성할 수 있습니다. 서버는 이러한 요청에 대해 HTML을 보내고, HTMX는 이를 페이지에 매끄럽게 통합합니다. 이 접근 방식은 임베디드 리눅스 환경에서 특히 유용하며, 클라이언트 측 처리를 최소화하면서도 부드러운 사용자 경험을 제공하고자 하는 경우에 특히 이점이 있습니다.

<div class="content-ad"></div>

HTMX 기능을 활용하면 임베디드 리눅스 시스템과 작업할 때 중요한 요소인 우리 애플리케이션을 가벼우며 효율적으로 유지하면서도 반응이 빠르고 현대적인 WiFi 관리 인터페이스를 만들 수 있습니다.

# 사용 가능한 네트워크 목록

GET /networks 엔드포인트는 사용 가능한 WiFi 네트워크 목록을 검색하여 표시합니다.

```js
func getNetworksList(w http.ResponseWriter, r *http.Request, opts *servermodels.ServerOptions) {
  networkmanager := nm.Init()
  conns, err := networkmanager.List()
  if err != nil {
    opts.Logger.Println(err)
    data := servermodels.Response{
      Code:  http.StatusInternalServerError,
      Data:  nil,
      Error: err,
    }
    render(w, r, opts, "error.html", &data)
    return
  }
  data := servermodels.Response{
    Code:  http.StatusOK,
    Data:  conns,
    Error: nil,
  }
  render(w, r, opts, "network_list", &data)
}
```

<div class="content-ad"></div>

네트워크 관리자(List() 함수)는 사용 가능한 WiFi 네트워크 목록을 검색하기 위해 nmcli 명령을 사용합니다:

```js
func (nm *NetworkManager) List() (conns []nmmodules.WifiConn, err error) {
  cmd := exec.Command(
    "nmcli",
    "-f",
    "ssid,mode,freq,signal,active,security",
    "device",
    "wifi",
    "list",
 )
 stdout, err := cmd.Output()
 if err != nil {
   fmt.Println("nmcli 명령 실행 중 오류 발생:", err)
   return
 }
 
 // ... (출력을 구문 분석하고 WifiConn 구조체 생성하는 코드)
 return conns, err
}
```

# 네트워크 목록 HTML

```js
{ define "network_list" } { $numOfConns := len .Data }
<section
 id="connections-list"
 class="connections flex justify-content-center col-12"
>
 <form
  class="col-6"
  hx-post="/networks"
  hx-target="body"
  hx-confirm="이 변경 사항을 적용하면 장치가 새 네트워크에 연결되고 AP가 사라집니다."
 >
  {if notNil .Error}
  <div class="alert alert-danger">{.Error}</div>
  {end}
  <div
   class="input-group mb-2 flex align-items-center justify-content-center"
  >
   <details class="custom-select">
    <summary class="radios">
     { if (eq $numOfConns 0) }
     <input type="radio" title="사용 가능한 네트워크 없음" checked />
     { else } {range $conn := .Data}
     <input
      type="radio"
      name="ssid"
      id="{$conn.ID}"
      title="{$conn.SSID} {if $conn.Active}*{end}"
      value="{$conn.SSID}"
      {if
      $conn.Active}checked{end}
     />
     { end } { end }
    </summary>
    <ul class="list">
     { if eq $numOfConns 0 }
     <li>
      <label>No networks</label>
     </li>
     { else } {range $conn := .Data}
     <li>
      <label for="{$conn.ID}">
       {block "signal" $conn.Strength}{end}
       {$conn.SSID}
       <span class="ml-05"> {$conn.Frequency} </span>
       { if $conn.Active } * { end }
      </label>
     </li>
     {end} { end }
    </ul>
   </details>
  </div>
  <div class="input-group mb-1 flex">
   <label class="input-group-text" for="password">비밀번호</label>
   <input
    name="password"
    id="password"
    type="password"
    aria-label="Password"
    class="form-control"
   />
  </div>
  <div class="input-group mb-2 flex">
   <input
    type="checkbox"
    id="show-password"
    class=""
    onclick="showPassword('password')"
   />
   <label class="input-group-text" for="show-password"
    >비밀번호 표시</label
   >
  </div>
  <script>
   function showPassword(elementID) {
    var x = document.getElementById(elementID);
    if (x.type === "password") {
     x.type = "text";
    } else {
     x.type = "password";
    }
   }
  </script>
  <div class="input-group mb-2 flex justify-content-center">
   <button class="btn btn-primary" type="submit">
    이 네트워크에 연결
    <div class="htmx-indicator spinner-grow" role="status"></div>
   </button>
  </div>
 </form>
</section>
{ end }
```

<div class="content-ad"></div>

이 HTML은 다음과 같은 인터페이스를 생성합니다:

![Interface](/assets/img/2024-09-10-GolangandHTMXcombinationforembeddedLinux_0.png)

# 네트워크에 연결하기

이 섹션에서는 nmcli를 사용하여 WiFi 네트워크에 연결하는 방법을 안내합니다. nmcli는 NetworkManager를 제어하는 명령줄 도구로, 이 프로세스는 Golang 및 HTMX 애플리케이션에 통합되어 끊김 없는 연결 경험을 제공할 것입니다.

<div class="content-ad"></div>

## POST /networks Endpoint

사용자가 목록에서 네트워크를 선택하고 암호를 제출하면 POST /networks 엔드포인트가 디바이스를 선택한 WiFi 네트워크에 연결하는 책임을 집니다. 여기에 플로우를 상세히 설명합니다:

- 사용자가 네트워크 및 암호를 제출: 사용자 인터페이스를 통해 사용자가 네트워크를 선택하고 암호를 입력할 수 있습니다.
- 폼 제출: 폼 데이터(네트워크 SSID 및 암호)가 POST를 통해 /networks 엔드포인트로 제출됩니다.
- NetworkManager CLI (nmcli) 통합: Go 애플리케이션은 선택한 WiFi 네트워크에 연결을 처리하기 위해 nmcli를 호출합니다.

네트워크 생성 방법

<div class="content-ad"></div>

```js
func handleNetworkConnection(w http.ResponseWriter, r *http.Request, opts *servermodels.ServerOptions) {
    ssid := r.FormValue("ssid")
    password := r.FormValue("password")
    networkmanager := nm.Init()

    // nmcli를 사용하여 연결하는 함수 호출
    err := networkmanager.Save(ssid, password)
    if err != nil {
        opts.Logger.Println(err)
        data := servermodels.Response{
            Code:  http.StatusOK,
            Data:  nil,
            Error: err,
        }
        render(w, r, opts, "error.html", &data)
        return
    }

    data := servermodels.Response{
        Code:  http.StatusOK,
        Data:  nil,
        Error: nil,
    }
    opts.Logger.Printf("%s에 성공적으로 연결되었습니다.\n", ssid)
    render(w, r, opts, "", &data)
}
```

저장된 연결 방법은 다음과 같습니다.

```js
func (nm *NetworkManager) Save(ssid, password string) error {
    // 네트워크에 연결하기 위해 nmcli 사용
    cmd := exec.Command("nmcli", "device", "wifi", "connect", ssid, "password", password)

    // 출력과 오류를 각각 캡처
    var stderr bytes.Buffer
    var stdout bytes.Buffer
    cmd.Stdout = &stdout
    cmd.Stderr = &stderr

    // 명령 실행
    err := cmd.Run()
    if err != nil {
        // 오류 발생 시 nmcli의 stderr를 포함한 Go 오류로 반환
        return fmt.Errorf("%s에 연결 실패: %s, nmcli 오류: %s", ssid, err.Error(), stderr.String())
    }

    // 선택적으로 stdout에서 성공 메시지 로깅
    fmt.Println("nmcli 출력:", stdout.String())

    return nil
}
```

# Docker로 응용 프로그램 묶는 방법


<div class="content-ad"></div>

앱이 작동한 후에는 도커를 사용하여 응용 프로그램을 번들로 만들 수 있고 약 3mb 크기의 컨테이너가 생기게 됩니다.

컨테이너를 생성하는 방법에 대해 자세히 설명하지는 않겠습니다. 이미 다른 글에서 그 내용을 다뤘기 때문이죠.

https://itnext.io/optimize-your-docker-containers-6255545dfa54

# 결론

<div class="content-ad"></div>

Pantacor에서는 내장형 리눅스 응용 프로그램을 개발하는 데 Go와 HTMX를 사용함으로써 개발 프로세스를 획기적으로 효율화했습니다. 이를 통해 우리는 임베디드 시스템의 독특한 도전에 부합하는 효율적이고 자체 포함형 응용 프로그램을 만들 수 있게 되었습니다. 이 접근 방식이 모든 상황에 적합하지는 않을 수 있지만, 특히 제한된 자원을 필요로 하는 장치들에 대해 사용자 친화적인 인터페이스를 제공하기 위해 우리의 도구 상자에서 강력한 도구로 입증되었습니다.

임베디드 시스템이 계속 발전하고 보급되면서, 효율적이고 가벼운 웹 기술의 필요성이 더욱 증가할 것입니다. Go와 HTMX의 결합은 임베디드 리눅스 장치를 위한 현대적인 웹 인터페이스를 구축하려는 개발자들에게 유망한 방향을 제시합니다.

Go의 효율성과 HTMX의 간단함을 활용함으로써, 우리는 임베디드 시스템의 제약 사항을 존중하면서도 반응성이 뛰어나며 기능이 풍부한 응용 프로그램을 만들 수 있습니다. 이 접근 방식은 개발을 간소화할 뿐만 아니라 응용 프로그램이 미래 요구 사항에 대응하고 유지보수하기 쉬운 것을 보장합니다.

Golang과 HTMX를 결합한 임베디드 리눅스용 도구 개발하는 방법 




![HTML5 Canvas](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_0.png)

Note: 저희가 HTML5 캔버스의 모든 학습을 활용하여 최종적으로 태양계 애니메이션을 만들어 보았습니다. 페이지 맨 끝으로 이동하여 동일한 것을 보세요... 정말 매혹적입니다.

## HTML5 Canvas란?

- 동적이고 스크립팅 가능한 2D 모양과 비트맵 이미지의 렌더링을 가능하게 하는 그래픽 요소입니다.
기본 사용 사례에는 그래픽, 게임, 시각화, 애니메이션이 포함됩니다.


<div class="content-ad"></div>

## HTML5 캔버스 설정

```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 캔버스 튜토리얼</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="400"></canvas>
    <script src="script.js"></script>
</body>
</html>
```

- `canvas`: HTML 문서 내에 캔버스 요소를 정의합니다.
- id="myCanvas": 캔버스에 JavaScript에서 참조하기 위한 식별자를 할당합니다.
- width="500": 캔버스의 너비를 설정합니다.
- height="400": 캔버스의 높이를 설정합니다.
출력 :

<img src="/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_1.png" />

<div class="content-ad"></div>

## 캔버스 API에 접근하기

```js
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
```

- document.getElementById(`myCanvas`): ID를 통해 캔버스 요소를 가져옵니다.
- canvas.getContext(`2d`): 2D 그리기 컨텍스트를 가져옵니다. 이 컨텍스트는 모양, 텍스트, 이미지 등을 그릴 때 사용됩니다.

# 기본 그리기

<div class="content-ad"></div>

## 직사각형 그리기

```js
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 150, 100);  // x, y, width, height
```

- fillStyle: 도형 내부에 사용할 색상이나 스타일을 설정합니다.
- fillRect(x, y, width, height): 지정된 너비와 높이로 위치 (x, y)에 채워진 직사각형을 그립니다.

![이미지](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_2.png)

<div class="content-ad"></div>

## 사각형 테두리 그리기:

```js
ctx.strokeStyle = 'red'; // 색상 설정
ctx.strokeRect(200, 10, 150, 100); // 사각형 테두리 그리기
```

- strokeStyle: 도형의 선에 사용할 색상이나 스타일을 설정합니다.
- strokeRect(x, y, width, height): 지정된 너비와 높이로 위치 (x, y)에 사각형 윤곽선을 그립니다.

![이미지](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_3.png)

<div class="content-ad"></div>

## 투명 사각형:

clearRect(x, y, width, height): 지정한 직사각형 영역을 지워서 투명하게 만듭니다.

```js
ctx.clearRect(20, 20, 100, 100); // 캔버스의 일부를 지웁니다
```

# 경로

<div class="content-ad"></div>

## 시작 포인트:

```js
ctx.beginPath(); // 새 경로 시작
ctx.moveTo(50, 50); // 시작 지점으로 이동
ctx.lineTo(150, 50); // (150, 50)까지 선 그리기
ctx.lineTo(100, 100); // (100, 100)까지 선 그리기
ctx.closePath(); // 경로 닫기
ctx.stroke(); // 획 적용
```

- beginPath(): 새 경로를 시작하거나 현재 경로를 재설정합니다.
- moveTo(x, y): 그리지 않고 새 위치로 펜을 이동시킵니다.
- lineTo(x, y): 현재 위치에서 지정된 좌표로 선을 그립니다.
- closePath(): 시작점으로 선을 다시 그어 경로를 닫습니다.
- stroke(): 경로의 윤곽을 그립니다.

![HTML5 Canvas Complete Tutorial](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_4.png)

<div class="content-ad"></div>

## 호와 원

```js
ctx.beginPath();
ctx.arc(200, 200, 50, 0, Math.PI * 2); // 전체 원 그리기
ctx.fillStyle = 'green';
ctx.fill(); // 원 채우기
```

arc(x, y, radius, startAngle, endAngle): 호 또는 원을 그립니다.

- x, y: 원의 중심
- radius: 원의 반지름
- startAngle, endAngle: 라디안으로 시작 각도와 끝 각도를 정의합니다.

<div class="content-ad"></div>

## 선

```js
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 200);
ctx.strokeStyle = 'purple';
ctx.stroke(); // 선 그리기
```

- moveTo(x, y): 펜을 시작점으로 이동합니다.
- lineTo(x, y): 지정된 좌표로 선을 그립니다.

![이미지](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_5.png)

<div class="content-ad"></div>

# 텍스트

## 텍스트 그리기

기본 텍스트:

```js
ctx.font = '30px Arial'; // 폰트 스타일과 크기 설정
ctx.fillText('안녕 캔버스', 50, 50); // 채워진 텍스트 그리기
ctx.strokeText('안녕 캔버스', 50, 100); // 윤곽 텍스트 그리기
```

<div class="content-ad"></div>

- 글꼴: 글꼴 크기 및 종류 설정
- fillText(text, x, y): 지정된 좌표에 채워진 텍스트를 그립니다.
- strokeText(text, x, y): 텍스트의 윤곽을 그립니다.

![이미지](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_6.png)

텍스트 속성:

```js
ctx.font = 'italic 20px Verdana'; // 글꼴 스타일과 크기
ctx.textAlign = 'center'; // 텍스트 정렬
ctx.textBaseline = 'middle'; // 텍스트 기준선
ctx.fillText('가운데 정렬', canvas.width / 2, canvas.height / 2); // 가운데 정렬된 텍스트 그리기
```

<div class="content-ad"></div>

- textAlign: 텍스트의 가로 정렬을 설정합니다.
- textBaseline: 텍스트의 세로 정렬을 설정합니다.

![image](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_7.png)

# 이미지

## 이미지 그리기

<div class="content-ad"></div>

이미지 로드 및 그리기:

```js
var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  ctx.drawImage(img, 10, 10, 200, 150); // (10,10) 위치에 너비 200, 높이 150으로 이미지 그리기
};
```

- Image(): 새 이미지 객체를 생성합니다.
- img.src: 이미지 소스 URL을 설정합니다.
- img.onload: 이미지가 완전히 로드된 후에 그려지도록 합니다.

![image](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_8.png)

<div class="content-ad"></div>

## 이미지 슬라이싱

이미지 일부를 그립니다:

```js
ctx.drawImage(img, 50, 50, 100, 100, 10, 10, 50, 50); // 소스 및 대상 사각형
```

drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight): 이미지의 일부를 그립니다.

<div class="content-ad"></div>

# 그라디언트와 패턴

## 선형 그라디언트

그라디언트 생성 및 사용:

```js
var gradient = ctx.createLinearGradient(0, 0, 200, 0); // (0,0)에서 (200,0)으로 그라디언트 생성
gradient.addColorStop(0, 'red'); // 시작 색상
gradient.addColorStop(1, 'blue'); // 끝 색상
ctx.fillStyle = gradient;
ctx.fillRect(10, 10, 200, 100); // 그라디언트로 사각형 채우기
```

<div class="content-ad"></div>

- createLinearGradient(x0, y0, x1, y1): 선형 그라데이션을 만듭니다.
- addColorStop(offset, color): 그라데이션에 대한 색상 중지점을 정의합니다.

![그림](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_9.png)

## 원형 그라데이션

그라데이션 생성 및 사용법:

<div class="content-ad"></div>

```js
var radialGradient = ctx.createRadialGradient(150, 150, 20, 150, 150, 100); // 내부와 외부 원
radialGradient.addColorStop(0, 'yellow'); // 내부 색상
radialGradient.addColorStop(1, 'green'); // 외부 색상
ctx.fillStyle = radialGradient;
ctx.fillRect(50, 50, 200, 200); // 방사형 그라데이션으로 사각형 채우기
```

- createRadialGradient(x0, y0, r0, x1, y1, r1): 방사형 그라데이션을 생성합니다.
- 태양광과 빛나는 효과를 만듭니다.
- 원형 전환에 유용합니다.

![이미지](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_10.png)

# 패턴들


<div class="content-ad"></div>

## 패턴 생성 및 사용하기:

```js
var patternImg = new Image();
patternImg.src = 'path/to/pattern.jpg';
patternImg.onload = function() {
  var pattern = ctx.createPattern(patternImg, 'repeat'); // 패턴 생성
  ctx.fillStyle = pattern;
  ctx.fillRect(10, 10, 200, 200); // 패턴으로 사각형 채우기
};
```

createPattern(image, repetition): 이미지를 사용하여 패턴 생성하기.

![HTML5 Canvas Complete Tutorial](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_11.png)

<div class="content-ad"></div>

# 변환

## 이동, 회전, 크기 조절

이동:

```js
ctx.translate(100, 100); // 원점을 (100,100)으로 이동
ctx.fillRect(0, 0, 50, 50); // 새 원점에서 사각형 그리기
ctx.translate(-100, -100); // 원점을 원래대로 이동
```

<div class="content-ad"></div>

translate(x, y): 캔버스의 원점을 새 위치로 이동합니다.

회전:

```js
ctx.translate(150, 150); // 회전 중심으로 이동
ctx.rotate(Math.PI / 4); // 45도 회전
ctx.fillRect(-50, -50, 100, 100); // 사각형 중앙에 그리기
ctx.rotate(-Math.PI / 4); // 되돌리기
ctx.translate(-150, -150); // 원점 이동
```

rotate(angle): 캔버스를 원점을 중심으로 회전시킵니다.

<div class="content-ad"></div>

이 계측 파일 형식을 Markdown 형식으로 변경해주세요.


| Scale:           |                     |
|------------------|---------------------|
| `ctx.scale(2, 2);` | // Double the size |
| `ctx.fillRect(10, 10, 50, 50);` | // Draw scaled rectangle |
| `ctx.scale(0.5, 0.5);` | // Revert scaling |


`scale(x, y)`: 지정된 배수에 따라 캔버스의 크기를 조정합니다.

# Compositing and Global Properties

<div class="content-ad"></div>

## Global Alpha

투명도 설정:

```js
ctx.globalAlpha = 0.5; // 투명도를 90%로 설정
ctx.fillStyle = 'rgba(255,0,0,1)'; // 반투명 빨간색
ctx.fillRect(10, 10, 100, 100);
```

globalAlpha: 그리기 작업의 투명도 수준을 설정합니다.

<div class="content-ad"></div>

- 투명도와 레이어링과 같은 효과를 만드는 데 유용합니다.
- 모든 모양과 텍스트에 적용할 수 있습니다.

![이미지](/assets/img/2024-09-10-HTML5CanvasCompleteTutorial_12.png)

# 전역 복합 연산

복합 모드 설정하기:

<div class="content-ad"></div>

```js
ctx.globalCompositeOperation = 'multiply'; // 블렌드 모드
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
ctx.globalCompositeOperation = 'source-over'; // 기본값으로 재설정
```

globalCompositeOperation: 중첩된 요소에 대한 합성 작업 유형을 설정합니다.

- 모양과 이미지가 함께 어떻게 혼합되는지 제어합니다.
- 창의적인 효과를 위한 다양한 블렌드 모드를 지원합니다.

# 애니메이션


<div class="content-ad"></div>

## 기본 애니메이션 루프

requestAnimationFrame을 사용합니다:

```js
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 지우기
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, Math.PI * 2);
  ctx.fillStyle = 'red';
  ctx.fill();
  requestAnimationFrame(draw); // 반복
}
draw();
```

requestAnimationFrame(callback): 애니메이션의 다음 프레임을 예약합니다.

<div class="content-ad"></div>

- 원활한 애니메이션을 만드는 효율적인 방법.
- 자동으로 디스플레이 주사율과 동기화됩니다.

## 변수를 사용한 애니메이션

원 움직임 애니메이션:

```js
var x = 50;
var y = 50;
var dx = 2;
var dy = 2;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, 30, 0, Math.PI * 2);
  ctx.fillStyle = 'blue';
  ctx.fill();
  
  x += dx;
  y += dy;
  
  if (x + 30 > canvas.width || x - 30 < 0) dx = -dx;
  if (y + 30 > canvas.height || y - 30 < 0) dy = -dy;
  
  requestAnimationFrame(animate);
}
animate();
```

<div class="content-ad"></div>

- 이동 변수 (x, y, dx, dy): 애니메이션된 객체의 위치와 속도를 제어합니다.
- 충돌 감지: 캔버스 가장자리에 도달할 때 방향을 바꿉니다.

![이미지](https://miro.medium.com/v2/resize:fit:1200/1*dnvaIFukXvAud4IQX10XgQ.gif)

# 이벤트

## 마우스 이벤트

<div class="content-ad"></div>

클릭 처리:

```js
canvas.addEventListener('click', function(event) {
  var rect = canvas.getBoundingClientRect();
  var x = event.clientX - rect.left;
  var y = event.clientY - rect.top;
  ctx.fillStyle = 'green';
  ctx.fillRect(x - 10, y - 10, 20, 20); // 클릭한 위치에 사각형 그리기
});
```

- addEventListener(`click`, callback): 마우스 클릭 이벤트를 위한 이벤트 리스너 추가
- getBoundingClientRect(): 캔버스 위치를 뷰포트를 기준으로 가져옴
- event.clientX와 event.clientY: 마우스 좌표 가져오기
- 사용자 입력에 기반한 대화형 그래픽을 구현할 수 있음
- 대화형 애플리케이션과 게임에 활용 가능

<img src="https://miro.medium.com/v2/resize:fit:1200/1*PT309xmCpa1cXjd4T3r3LQ.gif" />

<div class="content-ad"></div>

## 드래깅

드래그 앤 드롭:

```js
var isDragging = false;
var dragStartX, dragStartY;

canvas.addEventListener('mousedown', function(event) {
  isDragging = true;
  dragStartX = event.offsetX;
  dragStartY = event.offsetY;
});

canvas.addEventListener('mousemove', function(event) {
  if (isDragging) {
    var x = event.offsetX;
    var y = event.offsetY;
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 캔버스 지우기
    ctx.beginPath();
    ctx.arc(x, y, 30, 0, Math.PI * 2);
    ctx.fillStyle = 'blue';
    ctx.fill();
  }
});

canvas.addEventListener('mouseup', function() {
  isDragging = false;
});
```

- mousedown, mousemove, mouseup: 마우스 드래그 이벤트를 처리합니다.
- isDragging: 마우스가 눌렸는지 여부를 추적하는 부울 값입니다.
- 캔버스 내에서 드래그 앤 드롭 상호작용을 활성화합니다.
- 사용자가 그래픽을 조작해야 하는 응용프로그램에 유용합니다.

<div class="content-ad"></div>


![image](https://miro.medium.com/v2/resize:fit:1200/1*Sxk7VMhYvOFj6z2YuW1t4g.gif)

# Advanced Techniques

## Clipping Regions

Create Clipping Path:


<div class="content-ad"></div>

```js
ctx.beginPath();
ctx.arc(150, 150, 100, 0, Math.PI * 2);
ctx.clip(); // 클리핑 영역을 설정합니다
ctx.clearRect(0, 0, canvas.width, canvas.height); // 원 밖의 모든 것을 지웁니다
```

- clip(): 그리기 작업이 발생할 클리핑 영역을 정의합니다.
- 마스크 또는 제약된 그리기 영역을 생성하는 데 유용합니다.
- 복잡한 클리핑 모양을 지원합니다.

## 오프스크린 캔버스

성능을 위한 오프스크린 캔버스 사용:

<div class="content-ad"></div>

```js
var offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = 200;
offscreenCanvas.height = 200;
var offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCtx.fillStyle = 'yellow';
offscreenCtx.fillRect(0, 0, 200, 200);

// Draw from offscreen canvas
ctx.drawImage(offscreenCanvas, 10, 10);
```

- `document.createElement('canvas')`: 오프스크린 캔버스 요소를 생성합니다.
- `drawImage()`: 오프스크린 캔버스에서 내용을 시각적 캔버스에 그립니다.

장점:

- 성능에 영향을 미치지 않고 복잡한 그림이나 이미지 처리에 사용할 수 있습니다.
- 내용을 미리 렌더링하는 데 유용합니다.

<div class="content-ad"></div>

# 보너스 콘텐츠

지금까지 배운 모든 내용을 활용하여 특별한 그림을 그려봅시다.

![Special Drawing](https://miro.medium.com/v2/resize:fit:1200/1*mtg70LYEjjDFae5-Lf1h-Q.gif)

위 다이어그램은 HTML5를 사용하여 캔버스 위에 그려졌습니다.

<div class="content-ad"></div>

아래는 동일한 내용에 대한 코드입니다:

HTML 파일 (예: abc.html)

```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Canvas Tutorial</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>
```

연결된 JS 파일 (script.js)

```js
// 캔버스 및 컨텍스트 설정
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 속성 정의
const sun = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: 50,
    color: 'yellow'
};

const planets = [
    { distance: 80, radius: 5, color: 'gray', angle: 0, speed: 0.02 }, // 수성
    { distance: 120, radius: 10, color: 'orange', angle: 0, speed: 0.015 }, // 금성
    { distance: 180, radius: 15, color: 'blue', angle: 0, speed: 0.01 }, // 지구
    { distance: 240, radius: 12, color: 'red', angle: 0, speed: 0.008 } // 화성
];

// 백그라운드 별 정의
const stars = [];
const numStars = 200;

// 별 초기화
function initStars() {
    for (let i = 0; i < numStars; i++) {
        stars.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            size: Math.random() * 2 + 1,
            speed: Math.random() * 0.5 + 0.1
        });
    }
}

// 별 배경 그리기 함수
function drawStars() {
    ctx.fillStyle = 'white';
    stars.forEach(star => {
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.size, 0, Math.PI * 2);
        ctx.fill();
    });
}

// 별 위치 업데이트 함수
function updateStars() {
    stars.forEach(star => {
        star.y += star.speed;
        if (star.y > canvas.height) {
            star.y = 0;
            star.x = Math.random() * canvas.width;
        }
    });
}

// 태양 그리기 함수
function drawSun() {
    ctx.beginPath();
    ctx.arc(sun.x, sun.y, sun.radius, 0, Math.PI * 2);
    ctx.fillStyle = sun.color;
    ctx.fill();
}

// 행성 궤도 그리기 함수
function drawOrbit(planet) {
    ctx.beginPath();
    ctx.arc(sun.x, sun.y, planet.distance, 0, Math.PI * 2);
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 1;
    ctx.stroke();
}

// 행성 그리기 함수
function drawPlanet(planet) {
    const x = sun.x + planet.distance * Math.cos(planet.angle);
    const y = sun.y + planet.distance * Math.sin(planet.angle);
    
    ctx.beginPath();
    ctx.arc(x, y, planet.radius, 0, Math.PI * 2);
    ctx.fillStyle = planet.color;
    ctx.fill();
}

// 애니메이션 루프
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 배경 별 그리기
    drawStars();
    updateStars();
    
    drawSun();
    
    planets.forEach(planet => {
        drawOrbit(planet); // 행성 이전에 궤도 그리기
        planet.angle += planet.speed; // 각도 업데이트
        drawPlanet(planet);
    });
    
    requestAnimationFrame(animate);
}

// 별 초기화 및 애니메이션 시작
initStars();
animate();
```

<div class="content-ad"></div>

# 스택데믹 🎓

끝까지 읽어 주셔서 감사합니다. 떠나시기 전에:

- 작가를 클로밍하고 팔로우해 주시면 감사하겠습니다! 👏
- 저희를 팔로우해 주세요 X | LinkedIn | YouTube | Discord
- 다른 플랫폼에서도 저희를 만나보세요: In Plain English | CoFeed | Differ
- 스택데믹닷컴에서 더 많은 콘텐츠를 만나보세요

HTML5 Canvas 기본 기능들 정리



글래스모피즘은 상대적으로 새로운 트렌드로 떠오르고 있는 기능으로, 사이트에 신선하고 독특한 느낌을 주기 위해 새로 디자인된 웹사이트에서 자주 선호됩니다. Behance와 dribble과 같은 서비스에서 더욱 인기를 얻고 있습니다.

이 기능을 이용하면 사이트의 요소들이 투명하거나 담화된 유리처럼 보이게 할 수 있습니다. 또한 생생하거나 연한 컬러와 가벼운 테두리를 사용해 독특한 웹 디자인을 구현할 수 있습니다.

이 간결하고 통찰력있는 단계별 튜토리얼에서는 처음부터 Glassmorphism이라 불리는 유리와 같은 룩과 느낌을 어떻게 만들 수 있는지 살펴볼 것입니다. 최종 사용자 인터페이스는 아래 이미지와 같이 보일 것입니다. 또한 당신의 취향에 맞는 다른 값들로도 튜토리얼을 따라와도 괜찮습니다.

![이미지](/assets/img/2024-09-10-HowtoCreateGlassmorphismEffectusingCSSandHTML_0.png)

<div class="content-ad"></div>

계속 진행하기 전에 CSS에서 유리와 같은 느낌을 만드는 것은 실제로 HTML 요소의 다양한 층의 색상을 조작하는 것입니다. 이렇게 하면 브라우저가 렌더링할 때 눈이 그것을 다른 곳에 놓인 유리 조각으로 인식하고 텍스트가 적힌 것처럼 보입니다.

# 단계 1

우리는 일반 HTML을 사용하여 프로젝트의 뼈대를 만드는 것으로 시작합니다. 코드 스니펫에 나와 있는 대로 3개의 div를 만들 것입니다: container, card, 그리고 중첩된 콘텐츠를 위한 하나 더.

```js
<div class="container">

<div class="card">

<div class="content">

<h2>01</h2>

<h3>SERVICES</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

</p>

<a href="">Read More...</a>

</div>

</div>

</div>
```

<div class="content-ad"></div>

이 코드는 필요한 만큼 복제하여 세 가지 다른 카드를 만들 수 있습니다.

## 참고

저희 튜토리얼의 주요 내용은 HTML이 아닌 CSS에 있으므로 색상 조작에 직접 뛰어들어 봅시다.

# 단계 2

<div class="content-ad"></div>

```css
import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

*

{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'poppin', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #161623;

}
``` 

# Step 3

프로젝트에서 두 개의 원을 생성하세요.

<div class="content-ad"></div>


```js
body::before {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(#2196f3, #e91e63);

clip-path: circle(20% at 10% 10%);

}

body::after {

content: "";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(#2196f3, #e91e63);

clip-path: circle(20% at 10% 10%);

}
```

## 참고

이 원들은 앞 단계에서 볼 것과 같은 흐림 효과의 차이를 보여주기 위해 배경으로 만들어졌습니다.

위 스니펫에서 가장 중요한 점은 clip-path 속성의 사용으로 원을 생성하고, 원 함수에 전달된 백분율 값으로 위치를 조정하며, 또한 linear-gradient의 사용으로 단색보다 더 나은 유리와 같은 반사를 제공합니다.


<div class="content-ad"></div>

# 단계 4

그라디언트를 변경하고 각 원의 위치를 조절하기 위해 circle 함수를 사용하여 놀 수 있어요.

# 단계 5

컨테이너를 스타일링하여 콘텐츠를 원하는 위치로 배치하세요. 저는 아래와 같은 값들을 사용할 거에요.

<div class="content-ad"></div>


.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200%;
  flex-wrap: wrap;
  z-index: 1;
}


컨테이너 내부에 있는 카드를 스타일링해주세요. 원하는 값은 아래에 나와 있습니다. 원하시는 스타일을 얻기 위해 사용자 정의 값들을 자유롭게 사용해주세요.

## 참고

원하는 효과를 얻기 위해 box-shadow, 테두리 및 backdrop-filter를 사용해주세요. 백드롭 필터는 카드를 흐릿하게 만들어서 콘텐츠를 유리를 통해 바라보는 것처럼 보이게 합니다. 테두리는 카드를 3D 모양으로 만들어 작은 유리 조각처럼 보이게 하고, 박스 그림자는 카드를 배경으로부터 구분해 주어 그림자 효과를 줍니다. 다시 한번 말씀드리지만, 이 값들을 재미있게 조합하여 원하는 효과를 얻을 수 있습니다.


<div class="content-ad"></div>

## 참고

테두리는 카드 요소 주위가 아니라 위 및 왼쪽에만 배치됩니다.

```js
.container .card {

position: relative;

width: 280%;

height: 400%;

margin: 30px;

box-shadow: 20px 20px 50px rgba(0,0, 0, 0.5);

border-radius: 5px;

backkground: rgba(255, 255, 255, 0.1);

overflow: hidden;

display: flex;

justify-content: center;

align-items: center;

border-top: 1px solid rgba(255, 255, 255, 0.5);

border-left: 1px solid rgba(255, 255, 255, 0.5);

backdrop-filter: blur(5px);

}
```

이 시점에서 이미 유리같은 프로젝트를 만들었어야 합니다. 하지만 여기서 멈출 이유가 없습니다. 카드로 들어가서 내용을 하나씩 수정하여 더 나은 외관을 갖도록 해봅시다. 아래 코드 스니펫을 확인해보세요.

<div class="content-ad"></div>

```css
.container .card .content {
    padding: 20px;
    text-align: center;
    transition: 0.5s;
}

.container .card .content h2 {
    position: absolute;
    top: -30px;
    right: 30px;
    font-size: 6em;
    color: rgba(255, 255, 255, 0.99);
    pointer-events: none;
}

.container .card .content h3 {
    font-size: 1.8em;
    color: #fff;
    z-index: 1;
}
```

여기 있어요, 이해하셨죠?

사이트를 구축할 때 어떤 디자인 기능을 사용하더라도, 사이트에 다른 유형의 디자인 요소를 결합하여 독특하면서도 일관된 디자인을 만들 수 있습니다. 코드를 필요에 맞게 수정하여 어떻게 작동하는지 더 잘 이해하고 고유한 CSS 효과를 만들어보세요.

이 기능을 어떻게 적용했는지 저희에게 알려주세요. 마지막까지 함께해 주셔서 감사합니다. 함께 고생하셨습니다.

<div class="content-ad"></div>

# 쉽게 말해 🚀

In Plain English 커뮤니티에 참여해 주셔서 감사합니다! 떠나시기 전에:

- 작가를 클랩하고 팔로우해 주세요 👏️
- 팔로우하기: X | LinkedIn | YouTube | Discord | 뉴스레터
- 다른 플랫폼 방문하기: CoFeed | Differ
- PlainEnglish.io에서 더 많은 콘텐츠 확인하기

CSS와 HTML로 Glassmorphism 효과를 만드는 방법



웹 개발이 계속해서 진화함에 따라 우리가 사용할 수 있는 도구들은 점점 더 강력하고 전문적인 웹사이트를 만들기 위해 필수적으로 변해갑니다. HTML을 최적화하고 CSS를 세밀하게 조정하거나 JavaScript를 향상시킬 때, 적절한 도구를 사용하면 모든 차이를 만들 수 있습니다. 이 기사에서는 2024년에 HTML, CSS 및 JavaScript를 완벽하게 만들 수 있는 15가지 필수 도구를 탐색해 보겠습니다.

![이미지](/assets/img/2024-09-10-15ToolsforPerfectingYourHTMLCSSandJavaScriptin2024_0.png)

## 1. Visual Studio Code

Visual Studio Code (VS Code)는 개발자들 사이에서 가장 인기 있는 코드 편집기 중 하나로 남아 있습니다. 다양한 확장 기능을 갖추고 있어서 그것은 단순히 편집기가 아닌 완전한 개발 환경입니다.

<div class="content-ad"></div>

## 기능

- 통합 터미널: 스크립트, 명령어 및 버전 관리를 편집기 내에서 직접 실행하세요.
- 확장 기능: Prettier, ESLint, Live Server와 같은 확장 기능으로 워크플로우를 강화하세요.
- 인텔리센스: 변수 유형, 함수 정의 및 가져온 모듈을 기반으로 한 스마트 완성 기능.

## 필수 이유

- 다양성: 다양한 프로그래밍 언어와 프레임워크를 지원합니다.
- 사용자 정의: 수천 가지의 확장 기능을 사용하여 편집기를 개인의 요구에 맞게 맞춤 설정할 수 있습니다.

<div class="content-ad"></div>

# 2. Prettier

프리티어는 HTML, CSS 및 JavaScript가 일관된 스타일 규칙을 준수하도록 보장하는 주관적인 코드 포매터입니다. 자동으로 코드를 서식 지정하여 시간을 절약하고 가독성을 유지합니다.

## 특징

- 다국어 지원: HTML, CSS, JavaScript 및 기타 많은 언어와 함께 작동합니다.
- 통합: VS Code, Sublime Text, Atom을 비롯한 대부분의 편집기와 쉽게 통합됩니다.

<div class="content-ad"></div>

## 왜 필수적인가요?

- 일관성: 여러 명의 개발자가 기여하더라도 코드베이스를 일관되게 유지합니다.
- 효율성: 코드 서식을 자동화하여 시간을 절약하고 코드 작성에 집중할 수 있게 합니다.

### 3. ESLint

ESLint은 자바스크립트를 위한 강력한 린트 도구로, 코드에서 문제점을 식별하고 수정하는 데 도움을 줍니다. 코딩 표준과 최상의 실천 방법을 강요하여 버그 발생 가능성을 줄입니다.

<div class="content-ad"></div>

## 기능

- 구성 가능한 규칙: 프로젝트의 요구 사항에 맞게 린트 규칙을 사용자 정의할 수 있습니다.
- 플러그인 지원: React, TypeScript 등의 플러그인을 추가하여 ESLint의 기능을 확장할 수 있습니다.
- 자동 수정: 일반적인 문제를 자동으로 수정하여 업무 흐름을 간편화합니다.

## 꼭 필요한 이유

- 코드 품질: 오류를 조기에 발견하여 높은 코드 품질을 유지하는 데 도움이 됩니다.
- 사용자 정의: 팀에 가장 중요한 코딩 표준을 강제로 지정하기 위해 ESLint를 맞춤화할 수 있습니다.

<div class="content-ad"></div>

# 4. Sass

Sass는 변수, 중첩된 규칙 및 믹스인과 같은 강력한 기능을 추가하여 CSS를 더 유지보수하기 쉽고 쓰기 쉽게 만들어주는 CSS 전처리기입니다.

## 기능

- 변수: 색상, 폰트 및 간격과 같은 재사용 가능한 값을 저장합니다.
- 중첩: HTML 구조를 따르는 중첩된 규칙으로 CSS를 정리합니다.
- 믹스인: 스타일 시트 전체에 포함될 수 있는 재사용 가능한 CSS 청크를 생성합니다.

<div class="content-ad"></div>

## 왜 중요한가요

- 효율성: 반복을 줄이고 유지보수가 쉬운 CSS를 가능하게 합니다.
- 확장성: 특히 대규모 프로젝트에서 대규모 CSS 코드베이스를 관리하기 쉽게 만들어줍니다.

# 5. PostCSS

PostCSS는 JavaScript 플러그인을 사용하여 CSS를 변환하는 도구입니다. 벤더 접두사 추가, 이미지 삽입, CSS 최적화와 같은 작업을 자동화하는 데 사용됩니다.

<div class="content-ad"></div>

## 특징

- 플러그인: PostCSS 기능을 확장하기 위한 다양한 플러그인 생태계.
- CSSNext: 현대적인 기능과 구문을 사용하여 미래를 대비한 CSS 작성.
- 성능: 빠른 로딩 시간을 위해 CSS를 최적화합니다.

## 꼭 필요한 이유

- 자동화: 일반적인 CSS 작업을 자동화하여 수동 작업을 줄입니다.
- 최적화: CSS가 가능한 한 효율적이고 현대적인지 보장합니다.

<div class="content-ad"></div>

# 6. 웹팩

웹팩은 자바스크립트, CSS 및 기타 에셋을 작은 최적화된 번들로 컴파일하는 모듈 번들러입니다. 현대 자바스크립트 개발에 꼭 필요한 도구입니다.

## 기능

- 코드 분할: 코드를 더 작은 조각으로 나누어 필요할 때 로드할 수 있습니다.
- 로더: Sass를 CSS로 변환하는 등 번들되기 전에 파일을 전처리하기 위해 로더를 사용할 수 있습니다.
- 플러그인: 소액화 및 핫 모듈 교체와 같은 작업을 위한 플러그인으로 웹팩의 기능을 확장할 수 있습니다.

<div class="content-ad"></div>

## 필수성

- 최적화: 자산의 크기를 줄이고 로드 시간을 개선합니다.
- 유연성: 거의 모든 프론트엔드 자산을 처리할 수 있도록 구성할 수 있습니다.

### 7. Babel

Babel은 오늘날 미래 세대의 JavaScript를 사용할 수 있게 해주는 JavaScript 컴파일러입니다. ES6+ 코드를 오래된 브라우저에서 실행되는 하위 호환 버전으로 변환합니다.

<div class="content-ad"></div>

## 기능

- 프리셋: 목표 환경에 따라 코드를 자동으로 변환하는 데 프리셋을 사용하세요.
- 플러그인: 특정 변환을 위한 플러그인으로 Babel의 동작을 사용자 정의하세요.
- 폴리필: 이전 환경에서 지원되지 않는 새로운 JavaScript 기능을위한 폴리필을 자동으로 포함하세요.

## 필수성

- 미래 대비: 브라우저 지원을 걱정하지 않고 현대적인 JavaScript를 작성하세요.
- 호환성: 모든 환경에서 코드가 원활하게 실행되도록 보장합니다.

<div class="content-ad"></div>

# 8. 등대

등대는 구글의 오픈 소스 도구로, 웹 사이트의 성능, 접근성, SEO 등을 점검합니다. 사이트를 개선하는 데 도움이 되는 실행 가능한 인사이트를 제공합니다.

## 기능

- 성능 점검: 페이지 로드 시간, 자원 사용량 등에 대한 자세한 보고서를 받을 수 있습니다.
- SEO 점검: 사이트의 SEO를 분석하고 개선 사항에 대한 권장 사항을 받을 수 있습니다.
- PWA 점검: Progressive Web App 표준을 준수하는지 평가할 수 있습니다.

<div class="content-ad"></div>

## 왜 중요한가요

- 포괄적인 감사: 속도부터 접근성까지 웹사이트 성능의 모든 측면을 다룹니다.
- 실질적인 통찰: 사이트 지표를 개선하기 위한 명확한 권장 사항을 제공합니다.

# 9. Chrome DevTools

Chrome DevTools는 Google Chrome 브라우저에 직접 내장된 웹 개발자 도구 세트입니다. 이를 통해 브라우저에서 HTML, CSS 및 JavaScript를 검사하고 디버깅할 수 있습니다.  

<div class="content-ad"></div>

## 기능

- Element Inspector: DOM 및 CSS를 실시간으로 확인하고 수정할 수 있습니다.
- 콘솔: JavaScript 코드를 디버깅하고 로그 메시지를 확인할 수 있습니다.
- 네트워크 패널: 성능 병목 현상을 식별하기 위해 네트워크 요청을 분석할 수 있습니다.

## 필요한 이유

- 실시간 디버깅: 브라우저에서 사이트를 직접 확인하고 수정하여 변경 사항을 즉시 확인할 수 있습니다.
- 포괄적인 도구: 프론트엔드 개발 및 디버깅에 필요한 모든 것을 한 곳에서 제공합니다.

<div class="content-ad"></div>

# 10. PurgeCSS

PurgeCSS는 최종 스타일 시트에서 사용되지 않은 CSS를 제거하여 크기를 줄이고 로드 시간을 개선하는 도구입니다.

## 기능

- 사용자 정의 가능: 사용된 CSS를 정확하게 감지하려면 콘텐츠 파일의 경로를 정의하세요.
- 통합: Webpack, Gulp 또는 Grunt와 같은 도구를 사용하여 쉽게 빌드 프로세스에 통합할 수 있습니다.

<div class="content-ad"></div>

## 왜 필수인가요?

- 성능: 사용자가 다운로드해야하는 CSS 양을 줄여 더 빠른 페이지로드를 이끌어냅니다.
- 효율성: CSS를 유지하여 프로젝트에서 실제로 사용하는 것에 초점을 맞춥니다.

# 11. Autoprefixer

Autoprefixer는 CSS에 자동으로 벤더 접두사를 추가하여 다양한 브라우저 간의 호환성을 보장해주는 PostCSS 플러그인입니다.

<div class="content-ad"></div>

## 기능

- 자동 접두어 추가: 브라우저 지원을 기반으로 접두사를 추가하여 CSS를 최신 및 기능적으로 유지합니다.
- 구성 가능: 프로젝트 요구 사항과 일치하도록 브라우저 지원 수준을 조정할 수 있습니다.

## 중요한 이유

- 크로스 브라우저 호환성: 수동 접두어를 사용하지 않고 모든 주요 브라우저에서 CSS가 작동함을 보장합니다.
- 시간 절약: 지루한 프로세스를 자동화하여 더 중요한 작업에 집중할 수 있습니다.

<div class="content-ad"></div>

# 12. Stylelint

Stylelint은 CSS에서 오류를 피하고 일관된 규칙을 시행하는 데 도움이 되는 최신 린터입니다.

## 특징

- 구성 가능한 규칙: 자체 규칙 세트를 정의하거나 Standard 또는 Prettier와 같은 인기있는 구성을 확장할 수 있습니다.
- 통합: 편집기, CI/CD 파이프라인 및 기타 개발 도구와 완벽하게 통합됩니다.

<div class="content-ad"></div>

## 왜 필요한가요?

- 코드 품질: 제품 생산 단계에서 문제가 될 수 있는 잠재적인 오류를 찾아냅니다.
- 일관성: 프로젝트 전반에 걸쳐 일관된 스타일을 적용하여 유지 보수성을 향상시킵니다.

# 13. GitHub Copilot

GitHub Copilot는 AI 기술을 활용한 코드 완성 도구로, 타이핑하는 동안 코드 전체 줄 또는 블록을 제안하여 코드 작성 속도를 높여줍니다.

<div class="content-ad"></div>

## 특징

- 인공지능 제안: 현재 파일의 맥락을 기반으로 코드 제안 생성.
- 다국어 지원: HTML, CSS, JavaScript를 포함한 다양한 프로그래밍 언어와 작동.

## 꼭 필요한 이유

- 속도: 지능적인 제안을 통해 코딩 프로세스를 가속화합니다.
- 학습: 문제를 해결하는 새로운 방법을 발견할 수 있는 제안을 제공합니다.

<div class="content-ad"></div>

# 14. 피그마

피그마는 클라우드 기반 디자인 도구로, 사용자 인터페이스를 디자인하고 프로토타입을 만들며 팀원들과 실시간으로 협업하는 데 최적화되어 있습니다.

## 특징

- 협업 디자인: 팀원들과 동시에 실시간으로 동일한 디자인 파일에서 작업하세요.
- 프로토타이핑: 코딩하기 전에 디자인을 테스트할 대화형 프로토타입을 만드세요.
- 플러그인: 접근성 검사 및 자산 내보내기와 같은 작업을 위한 플러그인으로 피그마의 기능을 확장하세요.

<div class="content-ad"></div>

## 왜 중요한가요?

- 협업: 디자이너 및 이해관계자와 협업하기가 쉬워지는 디자인 프로세스를 간소화합니다.
- 효율성: 코드를 작성하기 전에 UI 디자인을 만들고 수정하여 비용을 줄이는 데 도움이 됩니다.

# 15. Gulp

Gulp는 파일을 최소화하거나 Sass를 컴파일하며 이미지를 최적화하는 등 개발 워크플로에서 반복적 작업을 자동화하는 작업 러너입니다.

<div class="content-ad"></div>

## 기능

- 자동화: CSS 최소화, JavaScript 변환 및 이미지 압축과 같은 작업 자동화
- 플러그인: 거의 모든 프론트엔드 작업을 처리할 수 있는 다양한 플러그인 생태계
- 스트림 기반: 빠르고 효율적인 Node.js 스트림을 사용

## 필수 이유

- 효율성: 일상적인 작업을 자동화하여 시간을 절약하고 복잡한 개발에 집중할 수 있음
- 사용자 정의 워크플로우: 프로젝트의 특정 요구 사항과 일치하는 사용자 정의 워크플로우를 쉽게 설정할 수 있음

<div class="content-ad"></div>

2024 년에는 웹 개발 환경이 이전보다 더 발전되었습니다. 적절한 도구들을 사용하면 생산성을 높이고 작업 품질에 상당한 차이를 만들 수 있습니다. HTML을 개선하거나 CSS를 완벽하게 만들거나 JavaScript를 최적화하고 있다면, 이 15가지 도구는 코드를 더 청결하고 효율적으로 유지할 수 있도록 도와줄 것입니다. 이 도구들을 워크플로에 통합시켜 미래 지향적인 방식으로 프로젝트를 수행할 수 있도록 하세요.

Visual Studio Code와 같은 코드 편집기부터 Gulp와 같은 자동화 도구까지, 각 도구는 개발 프로세스를 최적화하고 오류를 줄이며 코드의 전체 품질을 향상시키는 독특한 이점을 제공합니다. 더욱 복잡한 프로젝트를 수행하며 기술을 닦아나갈수록, 이러한 도구들은 웹 개발 여정에서 없어서는 안 되는 동반자가 될 것입니다.

더 많은 팁과 요령을 보려면 JS Quick Tips를 확인해보세요.

이와 유사한 글을 더 읽으려면 Medium에서 제 소식을 받아보거나 이메일로 구독하세요. 또는 제 목록을 확인해보세요. 또는 이와 관련된 다른 기사들을 확인해보세요.

<div class="content-ad"></div>

- CSS를 최적화하여 성능과 유지보수성을 향상시키는 10가지 필수 팁
- 효율적 코딩을 위한 반드시 알아야 할 10가지 JavaScript 트릭
- 더 깨끗한 JavaScript 코드를 작성하는 방법: 팁, 트릭 및 모범 사례
- 코드 품질과 유지보수성을 높이는 5가지 JavaScript 패턴
- 아마 사용하지 않을 수도 있는 10가지 고급 JavaScript 트릭 (하지만 사용해야 할 것)

2024년, HTML, CSS, JavaScript를 잘 활용하는 방법



웹 개발의 중요한 측면인 검색 엔진 최적화(SEO)는 내용이 검색 엔진과 궁극적으로 대상 독자에게 쉽게 발견되도록 하는 것입니다. 내용 품질은 중요하지만 HTML 구조도 검색 순위에서 사이트의 성능에 중요한 역할을 합니다. 2024년에는 SEO를 향상시켜 사이트의 가시성을 높이기 위해 HTML 구조를 최적화하는 7가지 중요한 방법이 있습니다.

![7 Ways to Optimize Your HTML Structure for Better SEO in 2024](/assets/img/2024-08-27-7WaystoOptimizeYourHTMLStructureforBetterSEOin2024_0.png)

## 1. 시멘틱 HTML 태그 사용

`header`, `nav`, `article`, `section`, `footer`와 같은 시맨틱 HTML 태그는 페이지 내 내용에 의미를 제공합니다. 이러한 태그는 검색 엔진이 웹사이트의 구조와 서로 다른 섹션의 중요성을 이해할 수 있게 돕습니다. 이는 더 나은 색인화와 랭킹을 이끌어냅니다.

<div class="content-ad"></div>

```js
<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<section>
  <article>
    <h2>Latest News</h2>
    <p>Stay updated with the latest news from our blog.</p>
  </article>
</section>

<footer>
  <p>&copy; 2024 My Website</p>
</footer>
```

## 왜 중요한가요?

- 개선된 접근성: 시멘틱 태그는 스크린 리더에게 더 나은 컨텍스트를 제공하여 접근성을 향상시킵니다.
- 더 나은 SEO: 검색 엔진은 시맨틱 태그 내의 콘텐츠를 우선하여 순위를 개선시킵니다.

# 2. 메타 태그 최적화하기


<div class="content-ad"></div>

메타 태그는 `title`, `meta description`, 그리고 `meta keywords`를 포함하여 SEO에 매우 중요합니다. `title` 태그는 검색 순위에 직접적으로 영향을 미치며, `meta description`은 검색 결과에서의 클릭 유도율에 영향을 줍니다.

```js
<head>
  <title>2024년을 위한 최고의 웹 개발 팁 10가지</title>
  <meta name="description" content="2024년을 앞서갈 웹 개발 팁을 알아보세요. 최신 트렌드, 최상의 실천 방법, 그리고 개발자를 위한 도구에 대해 배워보세요.">
  <meta name="keywords" content="웹 개발, 2024, 최상의 실천 방법, 도구, 팁">
</head>
```

## 왜 중요한가요?

- 높은 클릭 유도율: 매력적인 메타 설명은 사용자들이 검색 결과에서 당신의 링크를 클릭하도록 유도할 수 있습니다.
- 관련 키워드: 타이틀과 메타 태그에 관련 키워드를 포함시키면 해당 용어들에 대한 사이트 순위가 향상될 수 있습니다.

<div class="content-ad"></div>

# 3. 모바일 우선 디자인을 우선시하세요

데스크톱을 앞선 모바일 트래픽으로 구글과 같은 검색 엔진이 모바일 친화적인 웹사이트를 우선시합니다. 모바일 우선 디자인은 화면이 작은 기기에 최적화되어 사용자 경험을 향상시키고 SEO를 개선합니다.

```js
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

```js
/* 모바일 우선 스타일 */
body {
  font-size: 16px;
  margin: 0;
}

@media (min-width: 768px) {
  /* 태블릿 스타일 */
  body {
    font-size: 18px;
  }
}

@media (min-width: 1024px) {
  /* 데스크톱 스타일 */
  body {
    font-size: 20px;
  }
}
```

<div class="content-ad"></div>

## 왜 중요한가요

- 개선된 검색 순위: 모바일 최적화된 사이트의 순위가 상승되는 검색 엔진의 모바일 최우선 색인 기능.
- 더 나은 사용자 경험: 모바일 최우선 접근 방식은 모든 기기에서 사이트에 쉽게 접근하고 사용자 친화적인 환경을 제공합니다.

# 4. 구조화된 데이터 표시 구현

JSON-LD와 같은 구조화된 데이터 표시는 검색 엔진에게 콘텐츠에 대한 추가적인 컨텍스트를 제공합니다. 이를 통해 검색 결과에서 풍부한 스니펫을 얻어 가시성과 클릭률이 향상될 수 있습니다.

<div class="content-ad"></div>

```js
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "2024년을 위한 최고의 웹 개발 팁 10가지",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
  "datePublished": "2024-01-01",
  "image": "https://example.com/images/article.jpg",
  "description": "2024년에 앞서 나가기 위한 최고의 웹 개발 팁을 확인해보세요."
}
</script>
```

## 왜 중요한가요?

- 검색 결과 강화: 구조화된 데이터를 사용하면 별점 및 제품 정보와 같은 풍부한 스니펫을 얻을 수 있어 결과물이 더욱 돋보이게 됩니다.
- 더 나은 색인화: 검색 엔진이 내용을 더 정확하게 이해하고 색인화하는 데 도움이 됩니다.

# 5. 이미지 Alt 텍스트 최적화하기

<div class="content-ad"></div>

이미지를 사용할 때 alt 텍스트를 추가하는 것이 매우 중요합니다. 이는 웹 접근성과 SEO에 도움이 됩니다. Alt 텍스트는 이미지에 대한 대체 텍스트를 제공하여 검색 엔진이 이미지의 내용을 이해하고 사이트의 검색 가시성을 향상시킵니다.

```js
![Top 10 Web Development Tips for 2024](web-development-tips.jpg)
```

## 왜 중요한가요?

- 향상된 웹 접근성: Alt 텍스트를 통해 시각 장애가 있는 사용자도 이미지의 내용을 이해할 수 있습니다.
- 더 나은 이미지 SEO: 적절히 설명된 이미지는 이미지 검색 결과에 나타날 수 있어 사이트로의 추가 트래픽을 유도할 수 있습니다.

<div class="content-ad"></div>

# 6. 효과적으로 헤딩 태그 활용하기

검색 엔진 최적화에 있어서 헤딩 태그(`h1`부터 `h6`)를 올바르게 활용하는 것은 매우 중요합니다. 이러한 태그들은 단순히 콘텐츠를 구조화하는 것뿐만 아니라, 검색 엔진이 콘텐츠의 계층 구조와 중요성을 이해하는 데 도움이 됩니다.

```js
# 주요 주제: 2024년 웹 개발
## 소주제: 새로운 트렌드
### 소소주제: JavaScript 프레임워크
```

## 왜 중요한가?

<div class="content-ad"></div>

- 콘텐츠 구조: 제목은 페이지의 주제를 결정하는 데 사용하는 명확한 계층 구조를 만듭니다.
- SEO 순위: 제목에 키워드를 사용하면 해당 용어와 관련성을 높일 수 있습니다.

# 7. 인라인 JavaScript와 CSS 사용 최소화

인라인 JavaScript와 CSS는 빠른 스타일링과 스크립팅을 위해 유혹적일 수 있지만, SEO에 부정적인 영향을 줄 수 있습니다. HTML 파일의 크기가 증가하고 내용이 검색 엔진에 덜 접근 가능해집니다.

```js
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
```

<div class="content-ad"></div>

## 왜 중요한가요

- **성능 향상**: CSS 및 JavaScript를 HTML에서 분리하면 페이지 로드 시간이 당겨집니다.
- **좋은 색인화**: HTML 콘텐츠가 인라인 스타일과 스크립트로 혼란스럽지 않을 때, 검색 엔진이 보다 쉽게 분석할 수 있습니다.

HTML 구조를 최적화하는 것은 현대 SEO 전략의 기본 부분입니다. 이러한 모범 사례를 실행함으로써 웹사이트가 사용자 친화적이면서도 검색 엔진 친화적임을 확실히 할 수 있습니다. 2024년에도 SEO가 계속 발전함에 따라 이러한 기술을 가진 선구자가 되어 이를 통해 더 좋은 순위, 더 많은 트래픽, 그리고 궁극적으로 더 큰 온라인 성공을 얻을 수 있습니다.

더 많은 팁과 노하우를 확인하려면 JS Quick Tips를 확인하세요.

<div class="content-ad"></div>

이와 같은 더 많은 기사를 보려면 Medium에서 나를 팔로우하거나 새 이야기를 이메일로 받으세요. 나의 목록도 살펴보시는 걸 추천합니다. 또는 다음과 같은 관련 기사를 확인해 보세요:

- 더 나은 성능과 유지 관리성을 위한 CSS 최적화를 위한 필수 10가지 팁
- 효율적 코딩을 위한 꼭 알아야 할 JavaScript 트릭 10가지
- 더 깔끔한 JavaScript 코드 작성하기: 팁, 트릭 및 Best Practices
- 코드 품질과 유지 관리성 향상을 위한 5가지 JavaScript 패턴
- 아마 사용하지 않지만 사용해야 할 10가지 고급 JavaScript 트릭

Posts