

리액트 개발자로서, 처음에는 편리해 보일 수 있지만 결국 문제를 일으킬 수 있는 특정 코딩 패턴에 빠지기 쉽습니다. 이 블로그 포스트에서는 5가지 일반적인 리액트 실수를 살펴보고, 이를 피하는 방법에 대해 논의하여 코드가 효율적이고 유지보수 가능하며 확장 가능하도록 보장합니다.

### 1. Key 속성 오용

잘못된 예시:

```js
{myList.map((item, index) => <div key={index}>{item}</div>)}
```

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

리스트에서 색인을 키로 사용하면 성능 문제와 버그가 발생할 수 있으니 주의해야 해요, 특히 리스트가 변할 수 있는 경우 더욱 그렇습니다.

옳은 방법:

```js
{myList.map(item => <div key={item.id}>{item.name}</div>)}
```

데이터에서 고유 식별자인 id 필드와 같은 값을 key prop으로 사용해야 합니다.

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

### 2. State 과도한 사용

해당 실수:

```js
function MyComponent() {
  const [value, setValue] = useState(0);
  // 변화가 없음
  return <div>{value}</div>;
}
```

변화가 없는 상태도 모두 상태에 넣으면 불필요한 다시 렌더링과 복잡성을 야기할 수 있습니다.

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

올바른 방법:

```js
function MyComponent({ value }) {
  return <div>{value}</div>;
}
```

실제로 변경되는 데이터에 대해서만 상태를 사용하세요. 정적 데이터에는 프롭스나 컨텍스트를 사용하세요.

### 3. useEffect를 올바르게 활용하지 않은 경우

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

잘못된 부분:

```js
useEffect(() => {
  fetchData();
}, []);
```

useEffect에 종속성을 지정하지 않으면 예상치 못한 동작이나 무한 루프가 발생할 수 있습니다.

올바른 방법:

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

```js
useEffect(() => {
  fetchData();
}, []);
```

효과가 작동하는 시기를 제어하기 위해 항상 종속성 배열을 명시하세요.

### 4. Prop Drilling

실수:

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

```jsx
<Grandparent>
  <Parent>
    <Child prop={value} />
  </Parent>
</Grandparent>
```

여러 레이어의 컴포넌트를 통해 props를 전달하면 코드를 유지하기 어렵게 만듭니다.

올바른 방법: (Context API 예시)

```jsx
const ValueContext = React.createContext();
<ValueContext.Provider value={value}>
  <Child />
</ValueContext.Provider>

function Child() {
  const value = useContext(ValueContext);
  return <div>{value}</div>;
}
```

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

컨텍스트 API 또는 상태 관리 라이브러리를 사용하여 프롭 드릴링을 피하세요.

### 5. 구성 무시

실수:

```js
function UserProfile({ user }) {
  return (
    <div>
      <Avatar src={user.avatar} />
      <Username name={user.name} />
      {/* 더 많은 사용자 세부 정보 */}
    </div>
  );
}
```  

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

단일하고 유연한 구조로 구성 요소를 생성하는 대신에 재사용 가능한 요소를 만들어보세요.

올바른 방법:

```js
function UserProfile({ children }) {
  return <div>{children}</div>;
}

<UserProfile>
  <Avatar src={user.avatar} />
  <Username name={user.name} />
  {/* 더 많은 사용자 세부 정보 또는 다른 레이아웃 */}
</UserProfile>
```

유연성을 위해 구성 요소를 자식 또는 렌더 프롭으로 받을 수 있도록 디자인하세요.

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

이 5가지 React 코딩 실수를 이해하고 피함으로써 더 효율적이고 유지보수가 쉬우며 확장 가능한 React 애플리케이션을 작성할 수 있습니다. React 기술을 발전시키는 동안 이러한 교훈을 기억하고, 필요할 때 언제든지 이 블로그 글을 다시 확인하도록 해보세요.

결론
이러한 흔한 React 실수를 피함으로써 더 효율적이고 유지보수가 쉽고 확장 가능한 코드를 작성할 수 있습니다. 고유한 키를 사용하고, 상태를 현명하게 관리하고, useEffect를 올바르게 활용하며, 프롭 드릴링을 피하고, 유연한 UI 디자인을 위해 합성을 채용하세요. 이러한 모범 사례를 적용하면 React 애플리케이션이 더 견고하고 작업하기 쉬워질 것입니다.

피해야 할 5가지 React 실수와 그 해결 방법



## 소개

안녕하세요, 개발자 여러분! 제가 최근에 개발한 새로운 프로젝트를 소개하게 되어 기쁩니다: Flip Coin 애플리케이션입니다. 이 간단하지만 재미있는 프로젝트를 통해 전통적인 동전 던지기를 시뮬레이션할 수 있어요. 이는 의사 결정을 내릴 때나 재미를 위해 완벽한 기회가 될 거에요. 이는 HTML, CSS, JavaScript를 사용한 대화형 웹 애플리케이션을 만드는 훌륭한 예시입니다.

## 프로젝트 개요

Flip Coin은 동전 던지기를 시뮬레이션하는 웹 기반 애플리케이션입니다. 사용자들은 버튼을 클릭하여 동전을 던질 수 있으며, 결과는 화면에 표시됩니다. 이 프로젝트는 기본적인 웹 개발 기술을 보여주며, 프론트엔드 스킬을 연습할 수 있는 실용적인 방법을 제공합니다.

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

## 기능

- 동전 던지기 시뮬레이션: 버튼을 클릭하여 동전을 던져서 앞면 또는 뒷면으로 떨어지는지 확인할 수 있습니다.
- 시각적 피드백: 동전의 결과는 간단한 애니메이션과 함께 표시되어 사용자 경험을 향상시킵니다.
- 반응형 디자인: 어플리케이션은 다양한 기기에서 잘 작동하도록 설계되었습니다.

## 사용된 기술

- HTML: Flip Coin 애플리케이션의 구조를 제공합니다.
- CSS: 애플리케이션을 스타일링하고 시각적으로 매력적인 경험을 위해 애니메이션을 추가합니다.
- JavaScript: 동전 던지기 로직을 구현하고 사용자 상호작용을 처리합니다.

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

## 프로젝트 구조

프로젝트 구조에 대한 개요입니다:

```js
Flip-Coin/
├── index.html
├── style.css
└── script.js
```

- index.html: Flip Coin 애플리케이션의 HTML 구조가 포함되어 있습니다.
- style.css: 깔끔하고 상호작용적인 디자인을 위한 CSS 스타일이 포함되어 있습니다.
- script.js: 동전 던지기 로직 및 사용자 상호작용을 관리합니다.

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

## 설치

프로젝트를 시작하려면 다음 단계를 따르세요:

- 리포지토리 복제:
git clone https://github.com/abhishekgurjar-in/Flip-Coin.git
- 프로젝트 디렉토리 열기:
cd Flip-Coin
- 프로젝트 실행:
Flip Coin 애플리케이션을 사용하려면 웹 브라우저에서 index.html 파일을 엽니다.

## 사용법

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

- 웹 브라우저에서 웹 사이트를 열어주세요.
- 동전을 뒤집기 위해 "Flip Coin" 버튼을 클릭해주세요.
- 화면에서 동전이 앞면 또는 뒷면에 떨어졌는지 확인할 수 있습니다.

## 코드 설명

### HTML

index.html 파일은 Flip Coin 애플리케이션의 구조를 정의합니다. 버튼과 결과를 표시하는 영역이 포함되어 있습니다. 아래는 일부 코드입니다:

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

```js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flip Coin</title>
    <link rel="stylesheet" href="style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div id="main">
      <div id="logo_image"></div>
      <div class="container">
        <p>클릭으로 운명 뒤집기</p>
        <div class="stats">
          <p id="heads-count">앞면: 0</p>
          <p id="tails-count">뒷면: 0</p>
        </div>
        <div class="coin">
          <div class="heads">
            <img
              src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/heads.svg"
              alt="앞면"
            />
          </div>
          <div class="tails">
            <img
              src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/c82f3949ec4ba9503c875fc0fa7faa4a71053db7/Day%20%2307%20-%20Flip%20a%20Coin%20Game/tails.svg"
              alt="뒷면"
            />
          </div>
        </div>
        <div id="buttons">
          <button id="flip-button">동전 던지기</button>
          <button id="reset-button">초기화</button>
          <audio id="flip-sound">
            <source src="./assets/coin-flip-88793.mp3" type="audio/mpeg" />
            오디오 요소를 지원하지 않는 브라우저입니다.
          </audio>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>
```

### CSS

style.css 파일은 Flip Coin 애플리케이션을 스타일링하여 동전 던지기에 간단한 애니메이션을 추가합니다. 아래는 일부 주요 스타일입니다:

```js
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Rubik", sans-serif;
}

body {
  height: 100%;
  width: 100%;
  background-color: #072ac8;
}

#main {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 90vh;
}

#logo_image {
  width: 250px;
  height: 100px;
  background: url(./assets/original-68bc1d89ca3ea0450d8ca9f3a1403d42-removebg-preview.png);
  background-position: center;
  background-size: cover;
  align-items: center;
  justify-content: center;
}

.container {
  background: #a2d6f9;
  width: 700px;
  height: 500px;
  padding: 80px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 15px 30px 35px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.container p {
  text-align: center;
  font-size: 20px;
}

.stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #101020;
  font-weight: 500;
  line-height: 50px;
  font-size: 20px;
}

.coin {
  height: 150px;
  width: 150px;
  position: relative;
  margin: 50px auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.tails {
  transform: rotateX(180deg);
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.coin img {
  width: 145px;
}

heads,
.tails {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

button {
  width: 260px;
  padding: 10px 0;
  border: 2.5px solid black;
  font-size: 22px;
  border-radius: 5px;
  cursor: pointer;
}

#flip-button {
  background: #072ac8;
  color: white;
}

#flip-button:disabled {
  background-color: #e1e0ee;
  color: #101020;
  border-color: #e1e0ee;
}

#reset-button {
  background: #fff;
  color: #072ac8;
}

.footer {
  margin: 20px;
  text-align: center;
  color: white;
}

@keyframes spin-tails {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(1980deg);
  }
}

@keyframes spin-heads {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(2160deg);
  }
}
```

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

### 자바스크립트

script.js 파일에는 동전을 던지고 결과를 표시하는 논리가 포함되어 있습니다. 아래는 코드 일부입니다:

```js
let tails = 0;
let heads = 0; // 헤드 변수 정의 추가
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");
let flipSound = document.querySelector("#flip-sound");

flipBtn.addEventListener("click", () => {
    flipSound.currentTime = 0; 
    flipSound.play();

    let i = Math.floor(Math.random() * 2);
    coin.style.animation = "none";

    if (i) {
        setTimeout(() => {
            coin.style.animation = "spin-heads 3s forwards";
        }, 100);
        heads++;
    } else {
        setTimeout(() => {
            coin.style.animation = "spin-tails 3s forwards";
        }, 100);
        tails++;
    }
    setTimeout(updateStatus, 3000);
    disableButton();
});

function updateStatus() {
    document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
    document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}

function disableButton() {
    flipBtn.disabled = true;
    setTimeout(() => {
        flipBtn.disabled = false;
    }, 3000);
}

resetBtn.addEventListener("click", () => {
    coin.style.animation = "none"; // 오타 수정: "aniamtion"을 "animation"으로
    heads = 0;
    tails = 0;
    updateStatus();
});
```

## 실시간 데모

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

플립 코인 프로젝트의 라이브 데모를 확인할 수 있어요.

## 결론

플립 코인 애플리케이션을 만들면서 재미있고 교육적인 경험이었어요. 이 간단한 프로젝트는 HTML, CSS 및 JavaScript를 사용하여 상호 작용 웹 요소를 만드는 방법을 보여줍니다. 유용하게 활용하시고 즐겁게 실험해보세요. 즐거운 코딩하세요!

## 제작자

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

이 프로젝트는 실용적이고 인터랙티브한 웹 어플리케이션을 개발함으로써 내 프론트엔드 개발 스킬을 향상시키는 지속적인 여정의 일환으로 개발되었습니다.

## 작성자

- Abhishek Gurjar
GitHub 프로필
- GitHub 프로필

ReactJS로 동전 뒤집기 웹사이트 만드는 방법



![ARIA attributes](/assets/img/2024-08-26-ARIAattributesinHTMLAcomprehensiveguide_0.png)

## ARIA 속성이란 무엇인가요? 🤔

ARIA는 "Accessible Rich Internet Applications"의 약자입니다. 장애를 가진 사람들을 위해 웹 콘텐츠와 애플리케이션을 더 접근성 있게 만들기 위해 개발된 속성들의 모음입니다. 특히, ARIA 속성은 스크린 리더와 같은 보조 기술을 사용하는 사용자들의 접근성을 향상시키는 데 도움이 됩니다.

이러한 속성은 HTML 요소의 의미론적 의미를 확장하고 보조 기술에 의해 해석되는 데 필요한 추가 정보를 제공합니다. 예를 들어, 요소의 역할을 정의하거나 상태와 속성을 지정하거나 요소 간의 관계를 설정하는 데 사용할 수 있습니다.

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

### ARIA 속성은 왜 중요할까요? 🚀

상상해보세요:

ARIA 속성이 없다면, 모달 대화상자, 슬라이더 또는 동적 콘텐츠 영역과 같은 상호작용 컴포넌트는 보이지 않고 이해할 수 없는 상태로 남게 됩니다. 페이지를 사용하는 방법에 대한 혼란스러운 지시 사항만 들을 뿐이거나 아무 정보도 받지 못할 것입니다.

이는 단순히 답답한 것뿐만 아니라 중요한 온라인 제공물에서 거의 제외되는 것이기도 합니다. ARIA 속성은 보조 기술을 의존하는 사용자로서 웹사이트의 전체 기능을 경험할 수 있도록 확실하게 하는데 중요합니다. 개발자들이 복잡한 사용자 인터페이스를 설계할 수 있도록 해서 각자의 능력에 관계없이 모든 사람에게 접근 가능하고 이해하기 쉬운 환경을 제공합니다.

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

ARIA 속성은 특히 보조 기술을 활용하여 웹을 이용하는 사람들을 대상으로 합니다. 이에는 웹 사이트의 정보를 읽어 주는 스크린 리더를 사용하는 사용자와 특수한 입력 장치를 사용하는 운동 장애가 있는 사람들이 포함됩니다.

ARIA 속성을 사용하면 이러한 사용자들이 복잡한 웹 응용 프로그램을 더 잘 이해하고 상호 작용할 수 있습니다. 또한, 개발자와 디자이너들도 ARIA 속성을 사용함으로써 자신들의 응용 프로그램이 보다 많은 사람들에게 접근 가능하다는 것을 확실하게 할 수 있습니다.

## 왜 소프트웨어가 포용적이어야 할까요? 🌍

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

포괄적인 소프트웨어는 윤리적으로 바람직할 뿐만 아니라 상업적 이점도 있습니다. 가능한 한 많은 사람들이 사용할 수 있도록 소프트웨어를 설계함으로써, 광범위한 사용자층을 대상으로 접근할 수 있으며, 많은 국가에서의 법적 요구사항을 준수할 수 있습니다.

또한 포괄적인 소프트웨어는 모든 사용자를 신경 쓰는 회사임을 보여줌으로써 긍정적인 브랜드 이미지를 홍보하는 데 도움이 됩니다. 결과적으로, 이는 사용자들의 브랜드에 대한 신뢰와 충성도를 강화합니다.

<img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fPtDMLBj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_800/https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbGl0ZDhoZmVjYTI0dDVtbm9jd2x0eG15OHNnZDhqM3NsNmh0ZHRwaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/0ozmBje9bTxfPlKO7m/giphy.gif" />

## 기본 ARIA 역할 및 속성 📜

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

ARIA에는 Roles, Properties 및 States 세 가지 주요 카테고리로 나눌 수 있는 다양한 특성이 제공됩니다.

### ARIA roles 🎭

Roles는 페이지의 요소가 나타내는 것이나 하는 기능을 정의합니다. 가장 흔히 사용되는 역할 중 일부는 다음과 같습니다:

- role="button": 요소에 버튼의 역할을 할당합니다. div 또는 span을 버튼으로 사용하고 싶을 때 유용합니다.
- role="navigation": 페이지의 섹션을 탐색 영역으로 식별합니다.
- role="dialog": 사용자의 주의를 필요로 하는 모달 대화상자를 정의합니다.
- role="alert": 보조 기술에서 즉시 알려지는 경고나 중요 메시지로 요소를 표시합니다.

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

### ARIA 속성들 🏷️

속성들은 요소와 다른 요소들과의 관계에 대한 추가 정보를 제공합니다. 중요한 ARIA 속성들은 다음과 같습니다:

- aria-labelledby: 현재 요소를 라벨링하는 다른 요소를 가리킵니다. 특히 폼 요소에서 유용합니다.
- aria-describedby: aria-labelledby와 유사하지만 요소에 대해 더 구체적인 설명을 제공합니다.
- aria-controls: 현재 요소가 다른 요소와 상호 작용을 제어한다는 것을 나타냅니다. 예를 들어, 메뉴를 여는 스위치와 같은 경우입니다. 예를 들어, 메뉴가 나타나거나 숨겨지는 스위치.

### ARIA 상태들 🔄

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

인터랙티브 요소의 현재 상태를 나타내는 상태(State)는 다음과 같습니다. 예시는 다음과 같습니다:

- aria-expanded: 영역이 확장(true)되었는지 또는 축소(false)되었는지를 나타냅니다.
- aria-checked: 체크 상자나 스위치가 활성화(true), 비활성화(false)되었는지 또는 혼합 상태(mixed)인지를 나타냅니다.
- aria-hidden: 요소가 보이는지(false) 안 보이는지(true)를 점감합니다. 

## ARIA 어트리뷰트 사용의 실제 예시 🛠️

ARIA 어트리뷰트를 사용하는 실제 예시를 살펴보며 더 잘 이해해 봅시다.

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

### 사용자 정의 버튼

개발자들은 종종 div나 span 요소를 사용하여 표준 HTML 버튼과 다른 사용자 정의 버튼을 만듭니다. 이러한 사용자 정의 버튼이 스크린 리더에서도 접근할 수 있도록 하려면 ARIA 속성을 사용해야 합니다:

```js
<div role="button" aria-pressed="false" tabindex="0" onclick="toggleButton(this)">
  Click me
</div>
```

이 예제에서 role="button" 속성은 div 요소에 버튼 역할을 할당합니다. aria-pressed 속성은 버튼이 현재 눌려 있는지 여부를 나타내며, tabindex="0"은 요소를 키보드로 초점을 맞출 수 있도록 합니다.

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

### 아코디언 메뉴

아코디언 메뉴는 여러 개의 축소/확장 가능한 섹션으로 구성됩니다. 화면 리더 사용자가 이해하기 쉽도록 ARIA 속성을 사용할 수 있습니다:

```js
<div id="accordion">
  <h3 id="section1-heading">
    <button aria-expanded="false" aria-controls="section1">
      Section 1
    </button>
  </h3>
  <div id="section1" role="region" aria-labelledby="section1-heading">
    <p>첫 번째 섹션의 내용</p>
  </div>

  <h3 id="section2-heading">
    <button aria-expanded="false" aria-controls="section2">
      Section 2
    </button>
  </h3>
  <div id="section2" role="region" aria-labelledby="section2-heading">
    <p>두 번째 섹션의 내용</p>
  </div>
</div>
```

여기에 각 버튼 요소는 연관된 섹션이 열렸는지 닫혔는지를 나타내기 위해 aria-expanded 속성을 사용합니다. aria-controls 속성은 버튼과 콘텐츠 영역 간의 관계를 나타내며, role="region"은 콘텐츠를 사용자의 관심 영역으로 식별합니다.

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

### 모달 대화상자

모달 대화상자는 자주 사용되는 UI 구성 요소로, ARIA 속성을 사용하여 접근성을 확보할 수 있습니다:

```js
<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">
  <h2 id="dialog-title">확인이 필요합니다</h2>
  <p id="dialog-description">이 작업을 진행하시겠습니까?</p>
  <button onclick="closeDialog()">닫기</button>
</div>
```

이 예시에서 role="dialog"는 요소를 모달 대화상자로 식별합니다. aria-labelledby 속성은 대화상자를 제목과 연결하고, aria-describedby는 대화상자 콘텐츠의 설명을 참조합니다.

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

## ARIA 속성을 사용할 때 흔히 범하는 실수 🚨

상당한 혜택에도 불구하고, ARIA 속성을 구현할 때 개발자들이 종종 범하는 일반적인 실수가 있습니다. 이러한 실수를 피해야 접근성을 의도치 않게 저하시키지 않도록 중요합니다.

### ARIA 과도한 사용

ARIA는 필요할 때에만 사용해야 합니다. HTML 요소가 이미 의미론적으로 의미 있는 경우(예: 버튼, 내비게이션, 헤더 등)에는 ARIA를 사용하지 않아야 합니다.

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

### 상태 동기화 부족

요소의 상태(예: aria-expanded, nav, header)가 누락된 경우 ARIA를 사용하지 않아야 합니다. 사용자 입력에 의해 요소의 상태(예: aria-expanded)가 변경된 경우, 해당 ARIA 속성이 적절하게 업데이트되도록 보장해야 합니다.

### 불필요한 역할 할당

모든 요소에는 역할 할당이 필요하지 않습니다. 예를 들어, 버튼 요소에는 추가적인 role="button" 할당이 필요하지 않습니다.

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

## ARIA 사용에 대한 최상의 실천 방안 🌟

ARIA 속성을 최대한 활용하고 접근성을 극대화하기 위해 몇 가지 최상의 실천 방안을 준수해야 합니다:

### 가능한 경우에는 기본 HTML 요소 사용

기본으로 제공되는 접근성 기능을 활용할 수 있는데 ARIA가 제공하지 못할 수도 있습니다.

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

### 정기적으로 접근성 테스트를 수행하세요

스크린 리더 또는 전문 소프트웨어와 같은 도구를 사용하여 ARIA 구현이 제대로 작동하는지 확인하세요.

### ARIA 구현 사례를 문서화하세요

코드에서 ARIA 속성을 사용하는 경우, 해당 속성이 왜 사용되고 어떻게 사용되는지 문서화하여 다른 개발자가 코드를 더 잘 이해할 수 있도록 해주세요.

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

## ARIA를 사용해서는 안 되는 경우 (예시와 함께) 🚫

ARIA 속성은 강력하지만, 이미 내재된 의미와 접근성 속성을 가진 기본 HTML 요소 대신 사용해서는 안 됩니다. 예를 들어, 좋은 이유가 없다면 일반 버튼 요소 대신 role="button" 속성을 가진 div 요소를 사용해서는 안 됩니다.

버튼, 입력란, 레이블 또는 선택란과 같은 기본 HTML 요소는 이미 탁월한 접근성 지원을 제공합니다. ARIA 속성을 과도하게 사용하면 코드가 복잡해지고 유지보수가 어려워지며, 경우에 따라 잘못 구현된 경우 접근성을 더 악화시킬 수도 있습니다.

## ARIA 자가 테스트 방법 🔍

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

ARIA 속성을 테스트하는 것은 웹 애플리케이션이 완전히 접근 가능하다는 것을 보장하는 중요한 단계입니다. ARIA 속성을 테스트하기 위한 다양한 방법이 있습니다.

가장 효과적인 방법 중 하나는 NVDA(NonVisual Desktop Access)나 VoiceOver(맥)와 같은 스크린 리더를 사용하는 것입니다. 이러한 도구는 페이지의 내용을 읽어주고 ARIA 속성이 올바르게 구현되었는지 표시해줍니다. 또한, 개발자는 브라우저의 개발자 도구 내의 접근성 검사자(Accessibility Inspector)나 Axe, WAVE와 같은 전문적인 접근성 도구를 사용하여 잠재적인 문제를 식별하고 해결할 수 있습니다.

이러한 도구들을 사용한 정기적인 테스트는 접근성을 지속적으로 향상시키는 데 도움이 됩니다.

## 접근성을 중요시하는 회사들 🌟

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

일부 회사들은 모든 사람이 이용할 수 있는 진정으로 포괄적인 디지털 경험을 만들기 위해 노력하고 있습니다. 한 가지 뛰어난 예는 Microsoft입니다. 이 회사는 접근성에 강한 헌신을 지니고 있으며 장애를 가진 사람들을 지원하는 도구와 기술을 지속적으로 개발하고 있습니다. "AI for Accessibility" 프로그램과 같은 이니셔티브를 통해 Microsoft는 장애를 가진 사람들의 삶을 개선하기 위한 혁신을 촉진하고 있습니다. Microsoft의 운영 체제 및 오피스 응용 프로그램은 시각, 청각 또는 기동 장애를 가진 사람들이 생산적으로 작업할 수 있도록 포괄적인 접근성 기능을 제공합니다.

![이미지](/assets/img/2024-08-26-ARIAattributesinHTMLAcomprehensiveguide_1.png)

또 다른 예는 Apple입니다. 이 회사는 제품 개발 과정에서 항상 접근성에 주의를 기울이고 있습니다. VoiceOver와 같은 기능은 시각 장애가 있는 사용자들이 기기를 완전히 음성 제어로 작동할 수 있게 하며, 기동 장애가 있는 사용자들을 위한 다양한 사용자 정의 옵션은 산업의 표준을 제시하고 있습니다. Apple은 처음부터 포괄적인 기술을 개발하여 아무도 배제되지 않도록 합니다.

![이미지](/assets/img/2024-08-26-ARIAattributesinHTMLAcomprehensiveguide_2.png)

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

Google은 접근성을 우선시하는 회사 중 하나입니다. Google 어시스턴트와 같이 장애를 가진 사람들을 위해 최적화된 제품을 개발하고 Android 및 Chrome에 접근성 도구를 포함시킴으로써, Google은 포용이 그 제품 철학의 중요한 구성 요소라는 것을 보여줍니다.

![이미지](/assets/img/2024-08-26-ARIAattributesinHTMLAcomprehensiveguide_3.png)

이러한 기업들은 접근성을 회사의 DNA에 통합시킬 수 있는 격려적인 예시입니다. 그들은 모든 사람에게 접근 가능한 디지털 제품과 서비스를 만드는 것이 가능할뿐만 아니라 경제적으로 이익을 가져다 줄 수 있다는 것을 증명합니다.

## 결론 🎯

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

ARIA 속성은 웹 애플리케이션의 접근성을 향상시키는 강력한 도구입니다. 이를 통해 개발자들은 상호작용적이고 동적인 콘텐츠를 보조 기술을 사용하는 사용자를 포함해 모든 사용자에게 접근 가능하게 할 수 있습니다. ARIA 속성을 신중하게 구현함으로써 웹을 더 포용 가능한 공간으로 만들 수 있습니다.

ARIA 속성을 구현하는 데 도움이 필요하거나 궁금한 점이 있다면 아래 댓글 섹션을 자유롭게 사용해주세요. 함께 모든 사용자에게 더 접근 가능한 웹을 만들어봅시다!

제 글이 마음에 드신다면, 더 많은 기술 관련 내용을 보기 위해 제 블로그를 팔로우해주시면 좋을 것 같아요!

HTML에서 ARIA 속성으로 웹사이트 접근성 향상시키는 방법



## 소개

안녕하세요, 개발자 여러분! 제 새로운 프로젝트인 패스워드 생성기를 소개하게 되어 매우 기쁩니다. 이 도구는 안전하고 무작위한 패스워드를 손쉽게 생성할 수 있도록 설계되었습니다. 온라인 계정을 위한 강력한 패스워드가 필요하거나 JavaScript 기술을 연습하고 싶을 때, 이 패스워드 생성기는 여러분의 도구상자에 좋은 추가물이 될 것입니다.

## 프로젝트 개요

패스워드 생성기는 사용자가 다양한 구성으로 패스워드를 생성할 수 있는 웹 기반 응용 프로그램입니다. 패스워드 길이를 조정하고 소문자, 대문자, 숫자 및 기호와 같은 특정 문자 유형을 포함 또는 제외할 수 있습니다. 이 프로젝트는 JavaScript를 사용하여 동적 패스워드 생성기를 구축하는 방법을 소개하며, HTML과 CSS로 구축된 깔끔하고 사용자 친화적인 인터페이스가 함께 제공됩니다.

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

## 특징

- 사용자 정의 가능한 비밀번호 길이: 슬라이더를 사용하여 생성된 비밀번호의 길이를 조절할 수 있습니다.
- 문자 유형 선택: 비밀번호에 포함할 문자 유형(소문자, 대문자, 숫자, 기호)을 선택할 수 있습니다.
- 생성 및 복사: 랜덤한 비밀번호를 생성하고 쉽게 클립보드에 복사할 수 있습니다.

## 사용된 기술

- HTML: 비밀번호 생성기의 구조와 레이아웃을 제공합니다.
- CSS: 현대적이고 반응형 디자인을 보장하기 위해 인터페이스를 스타일링합니다.
- JavaScript: 사용자 상호작용 및 비밀번호 복사를 포함한 비밀번호 생성 로직을 처리합니다.

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

## 프로젝트 구조

프로젝트 구조에 대한 개요입니다:

```js
Password-Generator/
├── index.html
├── style.css
└── script.js
```

- index.html: 비밀번호 생성기에 대한 HTML 구조를 포함합니다.
- style.css: 매력적이고 반응형 디자인을 만들기 위한 CSS 스타일을 포함합니다.
- script.js: 비밀번호 생성 기능과 사용자 상호작용을 관리합니다.

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

## 설치

프로젝트를 시작하려면 다음 단계를 따르세요:

- 저장소를 복제합니다:
```bash
git clone https://github.com/abhishekgurjar-in/Password-Generator.git
```
- 프로젝트 디렉토리를 엽니다:
```bash
cd Password-Generator
```
- 프로젝트를 실행합니다:
웹 브라우저에서 index.html 파일을 열어서 Password Generator를 사용하세요.

## 사용법

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

- 웹 브라우저에서 웹 사이트를 열어주세요.
- 슬라이더를 사용하여 비밀번호 길이를 조절해주세요.
- 포함하고자 하는 문자 유형을 선택하거나 선택 해제해주세요.
- "비밀번호 생성" 버튼을 클릭하여 비밀번호를 생성해주세요.
- 복사 아이콘을 클릭하여 비밀번호를 클립 보드에 복사해주세요.

## 코드 설명

### HTML

index.html 파일은 비밀번호 생성기의 구조를 정의하며, 입력 필드, 컨트롤 및 디스플레이 영역을 포함합니다. 다음은 일부 코드 조각입니다:

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

```js
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <script src="script.js" defer></script>
    <title>Password Generator</title>
  </head>
  <body>
    <div class="container">
      <h1>Password Generator</h1>

      <div class="inputBox">
        <input type="text" class="passBox" id="passBox" disabled />
        <span class="material-icons" id="copyIcon">content_copy</span>
      </div>

      <input type="range" min="1" max="30" value="8" id="inputSlider" />

      <div class="row">
        <p>Password Length</p>
        <span id="sliderValue"></span>
      </div>

      <div class="row">
        <label for="lowercase">Include Lowercase Letters (a-z)</label>
        <input type="checkbox" name="lowercase" id="lowercase" checked/>
      </div>

      <div class="row">
        <label for="uppercase">Include Uppercase Letters (A-Z)</label>
        <input type="checkbox" name="uppercase" id="uppercase" checked/>
      </div>

      <div class="row">
        <label for="numbers">Include Numbers (0-9)</label>
        <input type="checkbox" name="numbers" id="numbers" checked/>
      </div>

      <div class="row">
        <label for="symbols">Include Symbols (@-*)</label>
        <input type="checkbox" name="symbols" id="symbols" checked/>
      </div>

      <button type="button" class="genBtn" id="genBtn">
        Generate Password
      </button>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>
```

### CSS

The style.css file styles the Password Generator, making it visually appealing and responsive. Below are some key styles:

```js
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  font-weight: 600;
  flex-direction: column;
}

.container {
  border: 0.5px solid #fff;
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  background: transparent;
  box-shadow: 8px 8px 4px #909090, 8px 8px 0px #575757;
}

.container h1 {
  font-size: 1.4rem;
  margin-block: 8px;
}

.inputBox {
  position: relative;
}

.inputBox span {
  position: absolute;
  top: 16px;
  right: 6px;
  color: #000;
  font-size: 28px;
  cursor: pointer;
  z-index: 2;
}

.passBox {
  background-color: #fff;
  border: none;
  outline: none;
  padding: 10px;
  width: 300px;
  border-radius: 4px;
  font-size: 20px;
  margin-block: 8px;
  text-overflow: ellipsis;
}

.row {
  display: flex;
  margin-block: 8px;
}

.row p, .row label {
  flex-basis: 100%;
  font-size: 18px;
}

.row input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

.genBtn {
  border: none;
  outline: none;
  background-color: #2c619e;
  padding: 12px 24px;
  color: #fff;
  font-size: 18px;
  margin-block: 8px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 4px;
}

.genBtn:hover {
  background-color: #0066ff;
}

.footer {
  color: white;
  margin-top: 150px;
  text-align: center;
}

.footer p {
  font-size: 16px;
  font-weight: 200;
}
```

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

### JavaScript

스크립트 파일인 script.js에는 비밀번호 생성 로직, 사용자 상호작용 관리 및 비밀번호를 클립보드에 복사하는 기능이 포함되어 있습니다. 아래는 코드 일부입니다:

```js
let inputSlider = document.getElementById("inputSlider");
let sliderValue = document.getElementById("sliderValue");
let passBox = document.getElementById("passBox");
let lowercase = document.getElementById("lowercase");
let uppercase = document.getElementById("uppercase");
let numbers = document.getElementById("numbers");
let symbols = document.getElementById("symbols");
let genBtn = document.getElementById("genBtn");
let copyIcon = document.getElementById("copyIcon");

// 입력 슬라이더 값 표시
sliderValue.textContent = inputSlider.value;
inputSlider.addEventListener("input", () => {
  sliderValue.textContent = inputSlider.value;
});

genBtn.addEventListener("click", () => {
  passBox.value = generatePassword();
});

let lowerChars = "abcdefghijklmnopqrstuvwxyz";
let upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let allNumbers = "0123456789";
let allSymbols = "~!@#$%^&*";

// 비밀번호 생성 함수
function generatePassword() {
  let genPassword = "";
  let allChars = "";

  allChars += lowercase.checked ? lowerChars : "";
  allChars += uppercase.checked ? upperChars : "";
  allChars += numbers.checked ? allNumbers : "";
  allChars += symbols.checked ? allSymbols : "";

  if (allChars === "") {
    return genPassword;
  }

  let i = 1;
  while (i <= inputSlider.value) {
    genPassword += allChars.charAt(Math.floor(Math.random() * allChars.length));
    i++;
  }

  return genPassword;
}

copyIcon.addEventListener("click", () => {
  if (passBox.value !== "") {
    navigator.clipboard.writeText(passBox.value);
    copyIcon.innerText = "check";
    copyIcon.title = "비밀번호가 복사되었습니다.";

    setTimeout(() => {
      copyIcon.innerHTML = "content_copy";
      copyIcon.title = "";
    }, 3000);
  }
});
```

## 실시간 데모

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

암호 생성기 프로젝트의 데모를 확인해보세요.

## 마무리

암호 생성기를 만드는 것은 나에게 즐거운 프로젝트였고 프론트엔드 개발 스킬을 적용할 수 있었습니다. 이 도구는 강력한 암호를 생성하는 데 유용하며 웹 개발 프로젝트에 좋은 추가물이 될 수 있습니다. 제가 도움이 되었듯이 여러분도 도움이 되길 바랍니다. 즐겁게 코딩해보세요!

## 크레딧

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

이 프로젝트는 제 JavaScript 기술을 향상시키고 실용적인 웹 도구를 만들기 위한 여정의 일환으로 개발되었습니다.

## 작성자

- Abhishek Gurjar
GitHub 프로필
- GitHub 프로필

HTML, CSS, JavaScript로 비밀번호 생성 웹사이트 만드는 방법



### 파이썬과 GitHub 페이지로 나만의 링크트리(LinkTree) 만들기

루카스 네베스 페레이라의 글 "Go와 GitHub Pages로 나만의 링크트리(LinkTree) 만들기"를 우연히 발견했어요. 이 글은 Go를 사용하여 LinkTree와 유사한 페이지(Taplink)를 만드는 방법에 대해 설명하고 있어요. 저는 파이썬 애호가로서 이 프로젝트를 파이썬으로 구현하기로 결정했어요. 제가 개발한 내용을 아래에서 확인해보세요.

![LinkTree with Python](/assets/img/2024-08-26-BuildyourownLinkTreeTaplinkwithPythonandGitHubPages_0.png)

### 단계 1: 프로젝트 파일 구조 준비하기

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

먼저 프로젝트를 위한 파일 구조를 만들어봅시다. GitHub Pages에 쉽게 유지보수하고 배포할 수 있도록 구성해보겠습니다.

파일 구조:


/ (루트)
|-- /docs
|   |-- index.html
|   |-- /assets
|       |-- (스타일, 스크립트, 아이콘 등)
|-- config.yml
|-- generate_site.py
|-- /themes


- /docs: 이 폴더에는 생성된 HTML 파일과 필요한 모든 에셋(이미지, 스타일, 스크립트)이 들어갑니다. 이 폴더는 GitHub Pages에 배포할 때 사용됩니다.
- config.yml: 사이트를 개인화하는 데 필요한 모든 데이터를 포함하는 구성 파일입니다.
- generate_site.py: config.yml에서 가져온 데이터를 기반으로 사이트를 생성하는 파이썬 스크립트입니다.
- /themes: 사이트를 위한 테마가 들어있는 폴더입니다. 여기서는 HTML 템플릿, 스타일, 스크립트 및 이미지가 포함된 사용자 정의 테마가 있습니다.

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

### 단계 2: 구성 파일(config.yml) 구성하기

config.yml 파일에는 사이트에 표시될 사용자 데이터 및 링크가 포함되어 있습니다. 여기에 내용이 있습니다:

```js
name: "킹 트리톤"
picture: "assets/img/picture.jpg"
bio: "프로그래머 파이썬 및 php/laravel"
meta:
  lang: "en"
  description: "프로그래머 파이썬 및 php/laravel"
  title: "킹 트리톤"
  author: "킹 트리톤"
  siteUrl: "https://king-tri-ton.github.io"
links:
  - name: "깃허브"
    url: "https://github.com/king-tri-ton"
  - name: "Dev.to"
    url: "https://dev.to/king_triton"
  - name: "Patreon"
    url: "https://www.patreon.com/king_triton"
  - name: "텔레그램"
    url: "https://t.me/king_triton"
  - name: "인스타그램"
    url: "https://www.instagram.com/king_tri_ton"
theme: "custom"
```

- name: 사이트에 표시될 사용자의 이름입니다.
- picture: 사용자 이미지의 경로입니다.
- bio: 사용자의 간단한 전기입니다.
- meta: 사이트 메타데이터 (언어, 설명, 제목, 작성자, 사이트 URL)입니다.
- links: 사이트에 표시될 링크 목록입니다. 각 항목에는 이름과 URL이 포함됩니다.
- theme: 사용할 사이트 테마입니다.

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

### 단계 3: 사이트를 생성하는 Python 스크립트 개발하기 (generate_site.py)

이제 테마 템플릿과 config.yml에서 데이터를 활용하여 HTML 파일을 생성하는 Python 스크립트를 작성할 것입니다.

```python
import os
import shutil
from jinja2 import Environment, FileSystemLoader
import yaml

# 설정 파일 로드
with open('config.yml', 'r') as config_file:
    config = yaml.safe_load(config_file)

# 출력 디렉토리 생성
output_dir = 'docs'
os.makedirs(output_dir, exist_ok=True)

# Jinja2 설정
env = Environment(loader=FileSystemLoader('themes/custom'))
template = env.get_template('index.html')

# HTML 파일 생성
output_html = template.render(config=config)
with open(os.path.join(output_dir, 'index.html'), 'w') as fh:
    fh.write(output_html)

# 에셋 폴더를 출력 디렉토리로 복사
assets_source = os.path.join('themes', config['theme'], 'assets')
assets_dest = os.path.join(output_dir, 'assets')
if os.path.exists(assets_source):
    shutil.copytree(assets_source, assets_dest, dirs_exist_ok=True)

print("사이트가 성공적으로 생성되었습니다.")
```

- 설정 로드: 스크립트는 config.yml에서 데이터를 로드합니다.
- 출력 디렉토리 생성: docs 폴더는 존재하지 않을 경우 자동으로 생성됩니다.
- Jinja2 설정: Jinja2를 사용하여 HTML 템플릿을 로드하고 내용을 렌더링합니다.
- HTML 파일 생성: 스크립트는 구성 데이터를 사용하여 index.html을 생성하고 docs 폴더에 저장합니다.
- 에셋 복사: 모든 에셋(CSS, 이미지, 스크립트)은 docs/assets 폴더로 복사됩니다.

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

### 단계 4: 테마 및 에셋 생성

이제 사이트에 사용할 테마를 만들어보세요. themes/custom/ 폴더 안에는 다음과 같은 파일이 있어야 합니다:

#### themes/custom/index.html

이 파일은 구성 파일에서 변수를 사용하여 사이트에 대한 메인 HTML 템플릿입니다.

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

```js
<!DOCTYPE html>
<html lang="{ config.meta.lang }">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{ config.meta.description }">
    <title>{ config.meta.title }</title>
    <meta name="author" content="{ config.meta.author }">
    <link rel="canonical" href="{ config.meta.siteUrl }">
    <link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
    <link rel="stylesheet" href="assets/css/styles.css">
    <meta property="og:title" content="{ config.meta.title }">
    <meta property="og:site_name" content="{ config.meta.title }">
    <meta property="og:description" content="{ config.meta.description }">
    <meta property="og:locale" content="{ config.meta.lang }">
    <meta name="twitter:title" content="{ config.meta.title }">
    <meta name="twitter:description" content="{ config.meta.description }">
</head>
<body>
    <header>
        <img src="{ config.picture }" alt="Picture" class="avatar">
        <h1>{ config.name }</h1>
        <small class="bio">{ config.bio }</small>
    </header>
    <main>
        <section class="links">
            { for link in config.links }
            <a class="link-item" href="{ link.url }" target="_blank" rel="noopener noreferrer">
                <p>{ link.name }</p>
            </a>
            { endfor }
        </section>
    </main>
    <footer>
        <small>© <span class="year"></span> { config.meta.author }</small>
    </footer>
    <script src="assets/js/script.js"></script>
</body>
</html>
```

#### themes/custom/assets/styles.css

페이지를 스타일링하는 CSS 파일입니다.

```js
/* CSS Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --max-width: 600px;
  --font-family: 'Inter', sans-serif;
  --padding: 1rem;
  --header-margin-bottom: 1rem;
  --line-height: 2;
  --font-size: 16px;

  --primary-color-light: #ffffff;
  --background-color-light: #f0f0f0;
  --text-color-light: #333;
  --link-color-light: #1a73e8;
  --bio-color-light: #666;

  --primary-color-dark: #1e1e1e;
  --background-color-dark: #121212;
  --text-color-dark: #e0e0e0;
  --link-color-dark: #8ab4f8;
  --bio-color-dark: #aaa;
}

/* Light Theme */
@media (prefers-color-scheme: light) {
  :root {
    --primary-color: var(--primary-color-light);
    --background-color: var(--background-color-light);
    --text-color: var(--text-color-light);
    --link-color: var(--link-color-light);
    --bio-color: var(--bio-color-light);
  }
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: var(--primary-color-dark);
    --background-color: var(--background-color-dark);
    --text-color: var(--text-color-dark);
    --link-color: var(--link-color-dark);
    --bio-color: var(--bio-color-dark);
  }
}

/* Global Styles */
html {
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

body {
  max-width: var(--max-width);
  min-height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--background-color);
  color: var(--text-color);
  padding: var(--padding);
}

/* Header Styles */
header {
  padding: var(--padding) 0;
  margin-bottom: var(--header-margin-bottom);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--primary-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
  font-size: 24px;
  margin-bottom: 0.5rem;
}

.bio {
  font-size: 14px;
  color: var(--bio-color);
  margin-bottom: 1rem;
}

/* Main Content Styles */
main {
  width: 100%;
  flex: 1;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
  overflow-y: auto;
  max-height: 400px;
}

.link-item {
  display: block;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--link-color);
  background: var(--primary-color);
  border-radius: 12px;
  border: 1px solid var(--link-color);
  transition: background-color 0.25s, color 0.25s;
}

.link-item:hover,
.link-item:focus {
  background-color: var(--link-color);
  color: var(--primary-color);
}

.link-item p {
  line-height: 1.5;
  font-weight: 500;
}

/* Footer Styles */
footer {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 14px;
  gap: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ScrollBar */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: transparent;
}

::-webkit-scrollbar-thumb:hover {
  background: transparent;
}
```

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

#### themes/custom/assets/js/script.js

기본 기능을 위한 JavaScript 파일입니다.

```js
console.log("스크립트 로드됨");

const yearDate = new Date().getFullYear().toString();
document.querySelector(".year").innerText = yearDate;
```

#### themes/custom/assets/img/picture.jpg

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

아바타로 사용된 사진이에요.

### 단계 5: 사이트 생성

모든 파일을 생성한 후에는 generate_site.py 스크립트를 실행하여 사이트를 생성하세요:

```js
python generate_site.py
```

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

사이트는 docs 폴더에 생성될 것입니다.

### 단계 6: GitHub Pages에 배포하기

![이미지](/assets/img/2024-08-26-BuildyourownLinkTreeTaplinkwithPythonandGitHubPages_1.png)

- GitHub에서 새 저장소를 생성합니다.
- docs 폴더를 포함한 모든 파일을 저장소에 업로드합니다.
- 저장소의 설정 섹션으로 이동합니다.
- 페이지 섹션에서 마스터 브랜치와 /docs 폴더를 소스로 선택합니다.
- 변경 사항을 저장하고 GitHub Pages가 사이트를 배포할 때까지 기다립니다.

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

이제 당신의 사이트는 https://`username`.github.io/`repository-name`/ 에서 이용 가능합니다.

그게 다에요! 이제 Python으로 만들어진 LinkTree 스타일의 사이트를 GitHub Pages에 배포하였습니다. 최종 결과물은 https://king-tri-ton.github.io/pythonpagelink/에서 확인할 수 있습니다.

파이썬과 GitHub Pages로 나만의 링크트리(Taplink) 만들기



소개: 간결한 CSS의 힘

UI 개발자로서, 항상 코드를 간소화하고 효율적이고 매력적인 디자인을 만들기 위한 방법을 찾고 있을 것입니다. CSS(Cascading Style Sheets)는 여러분의 아카데미에서의 기본적인 도구이며, 이를 숙달함으로써 여러분의 생산성과 작업 품질을 크게 향상시킬 수 있습니다. 이 블로그 글에서는 15가지 독특한 CSS 원라이너를 탐구해보겠습니다. 이것들은 여러분이 웹 페이지를 스타일링하는 방식에 혁명을 일으킬 수 있습니다.

이 간결한 CSS 요령들은 시간을 절약할 뿐만 아니라 CSS의 다재다능성과 힘을 나타내기도 합니다. 여러분이 경력있는 전문가이건 UI 개발을 시작한 지 얼마 안 된 초심자이건, 이 원라이너들은 여러분의 기술 세트에 가치를 더하고 코드를 덜 사용하여 보다 완성도 높은 반응형 디자인을 만들 수 있도록 도와줄 것입니다.

이 CSS 보석들을 살펴보고 여러분의 개발 프로세스를 어떻게 변화시킬 수 있는지 살펴봅시다!

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

#### 1. 완벽한 가운데 정렬 기술

웹 디자인에서 가장 흔한 문제 중 하나는 요소를 수평 및 수직으로 가운데 정렬하는 것입니다. 여기에 손쉽게 이를 달성하는 CSS 한 줄 코드가 있습니다:

```js
.center {
  display: grid; place-items: center;
}
```

이 간단하면서도 강력한 CSS 트릭은 CSS Grid를 사용하여 부모 컨테이너 내에서 모든 자식 요소를 가운데 정렬합니다. display: grid 속성은 그리드 컨테이너를 생성하고, place-items: center는 그리드 항목(이 경우 자식 요소)을 가로 및 세로로 가운데 정렬합니다.

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

이 방법은 컨테이너 내의 단일 요소와 여러 요소 모두에 적용할 수 있습니다. 다양한 시나리오에 대한 복잡한 가운데 정렬 코드 작성을 줄여주는 다재다능한 솔루션입니다.

#### 2. 간편한 반응형 텍스트 크기 조정

반응형 타이포그래피를 만드는 것은 도전일 수 있지만, 이 CSS 원라이너를 사용하면 매우 쉬워집니다:

```js
body {
  font-size: calc(1rem + 0.5vw);
}
```

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

calc() 함수를 재미있게 활용한 이 방법은 기본 글꼴 크기(1rem)와 뷰포트 너비에 따라 바뀌는 값(0.5vw)을 결합합니다. 뷰포트 너비가 바뀔 때마다 글꼴 크기가 자동으로 조절되어, 다양한 화면 크기에서도 텍스트가 가독성 있게 유지됩니다.

이 방식의 장점은 그 간단함과 유연성에 있습니다. 계산식의 값을 수정하여 기본 크기와 변화 비율을 손쉽게 조절할 수 있습니다.

#### 3. 커스텀 스크롤바 스타일링

스크롤바를 사용자 정의하는 것은 웹사이트 디자인에 독특한 감성을 불어넣을 수 있습니다. 이 원 라이너를 사용하면 웹킷 기반 브라우저에서 스크롤바를 스타일링할 수 있습니다:

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


```css
::-webkit-scrollbar { width: 10px; background: #f1f1f1; border-radius: 10px; }
```

이 CSS 트릭은 웹킷 브라우저(Chrome 및 Safari와 같은)에서 스크롤 막대 의사 요소를 대상으로합니다. 디자인 선호도에 맞게 너비, 배경색 및 테두리 반경을 조절할 수 있습니다. 이 방법은 모든 브라우저에서 작동하지 않겠지만, 지원하는 경우에는 좋은 향상 기능입니다.

#### 4. 텍스트 자르기 효과 생성하기

동적 콘텐츠를 다룰 때 종종 특정 길이를 초과하는 텍스트를 자르는 작업이 필요합니다. 이 CSS 한 줄로 오버플로우되는 텍스트에 생략 부호 효과(ellipsis)를 생성합니다:


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

```js
.truncate {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
```

이러한 속성 조합은 텍스트가 한 줄에 유지되도록하고(white-space: nowrap), 오버플로우를 숨기며(overflow: hidden), 잘린 텍스트 끝에 (...)(text-overflow: ellipsis)을 추가합니다.

#### 5. 전체 페이지에 대해 스무스 스크롤링 적용

스무스 스크롤링을 구현하면 웹 사이트의 사용자 경험을 크게 향상시킬 수 있습니다. 여기에 전체 페이지에 스무스 스크롤링을 활성화하는 간단한 CSS 한 줄 코드가 있습니다:

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

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

이 속성은 사용자가 페이지 내의 앵커 링크를 클릭할 때 브라우저가 갑작스럽게 이동하는 대신 대상 섹션으로 부드럽게 스크롤되도록 보장합니다. 사소한 변경이지만 귀하의 사이트의 인지 품질을 크게 향상시킬 수 있습니다.

#### 6. 반응형 정사각형 생성

반응형 레이아웃에서 아스펙트 비율을 유지하는 완벽한 정사각형 요소를 만드는 것은 까다로울 수 있습니다. 여기에는 이를 달성하기 위한 재미있는 CSS 속임수가 있습니다:

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

```css
.square {
  width: 50%; aspect-ratio: 1;
}
```

`aspect-ratio` 속성을 사용하면 요소의 높이가 항상 너비와 일치하여 완벽한 정사각형을 만듭니다. 필요에 따라 너비 퍼센트를 조정할 수 있으며, 요소는 다른 화면 크기에서도 정사각형 모양을 유지합니다.

#### 7. 사용자 정의 텍스트 선택 스타일링

선택한 텍스트의 모양을 사용자 정의하여 웹사이트에 독특한 감성을 더할 수 있습니다. 다음은 이를 위한 CSS 한 줄로 구현한 코드입니다:

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

```js
::selection { background: #ffb7b7; color: #000000; }
```

이 CSS 트릭을 사용하면 웹 사이트 전체에서 선택된 텍스트의 배경색과 텍스트색을 변경할 수 있습니다. 색상을 조정하여 사이트의 색 구성과 일치시켜 일관된 브랜드 경험을 만들 수 있습니다.

#### 8. 쉬운 다크 모드 전환

웹 사이트에 다크 모드를 구현하면 특히 밤에 브라우징하는 사용자들에게 사용자 경험을 향상시킬 수 있습니다. 다음은 간단한 CSS 변수 기반 방법입니다:

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


body {
  --text-color: #333; --bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
  body { --text-color: #fff; --bg-color: #333; }
}


이 CSS 트릭은 CSS 변수를 사용하여 색상을 정의하고 사용자의 색상 설정 기호를 감지하는 미디어 쿼리를 사용합니다. 이후 CSS 전체에서 이러한 변수를 사용하여 밝은 모드와 어두운 모드 사이를 쉽게 전환할 수 있습니다.

#### 9. 후투리 유리 효과 만들기

유리효 효과 또는 글라스모피즘은 UI 디자인에서 점점 더 인기를 얻고 있습니다. 여기 Frosted Glass Effect를 만드는 CSS 원라이너가 있습니다:


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

```js
.frosted-glass {
  backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5);
}
```

이 backdrop-filter 및 반투명 배경색의 조합은 아름다운 유리 효과를 만듭니다. 흐림 정도와 배경 불투명도를 조절하여 원하는 외관을 얻을 수 있습니다.

#### 10. 완벽한 둥근 모서리

크기가 다른 요소에 완벽한 둥근 모서리를 만드는 것은 어려울 수 있습니다. 항상 완벽하게 둥근 모서리를 가진 요소를 보장하는 CSS 트릭이 있습니다:

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

```js
.round {
  border-radius: 9999px;
}
```

`border-radius` 값을 극단적으로 크게 설정하여 요소의 크기에 관계없이 모서리가 항상 최대한 둥글게 보이도록 할 수 있습니다. 이는 버튼, 배지 또는 일관되게 둥근 모서리가 필요한 모든 요소에 특히 유용합니다.

#### 11. 쉬운 CSS 그리드 레이아웃

CSS 그리드를 사용하여 복잡한 레이아웃을 만드는 것이 복잡하지 않을 수 있습니다. 다음은 응답형 그리드를 설정하는 한 줄입니다:

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

```css
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
```

이 CSS 트릭은 열이 사용 가능한 공간에 맞게 자동으로 조정되는 그리드를 만듭니다. minmax() 함수를 사용하여 열이 최소 200px 너비가 되지만 사용 가능한 공간을 채울 수 있습니다. 이렇게하면 최소한의 코드로 반응형 레이아웃이 생성됩니다.

#### 12. Fluid Typography

서로 다른 화면 크기에 매끄럽게 확장되는 타이포그래피를 만드는 CSS 원라이너.

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

```css
h1 {
  font-size: clamp(2rem, 5vw, 5rem);
}
```

clamp() 함수를 사용하면 텍스트의 최소 크기 (2rem), 우선 크기 (5vw) 및 최대 크기 (5rem)를 설정할 수 있습니다. 이를 통해 텍스트의 가독성과 시각적 매력이 모든 기기 크기에서 유지되도록 보장할 수 있습니다.

#### 13. CSS로 삼각형 만들기

가끔 UI 요소에 삼각형과 같은 간단한 모양을 만들어야 할 때가 있습니다. 다음은 삼각형을 만들기 위한 CSS 한 줄입니다:  

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

```js
.triangle {
  width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #333;
}
```

이 CSS 트릭은 선 속성을 사용하여 삼각형 모양을 만듭니다. 선의 너비와 색상을 조절하여 다른 방향으로 향하는 삼각형을 만들 수 있습니다.

#### 14. 전체 화면 레이아웃

일부 요소가 뷰포트의 가장자리까지 확장되는 전체 화면 레이아웃을 만드는 것은 이 CSS로 가능합니다:

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

```js
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }
```

이 CSS 트릭은 부모 컨테이너의 너비에 관계없이 요소를 뷰포트의 전체 너비로 확장하기 위해 필요한 음수 마진을 계산합니다. 이는 제한된 레이아웃 내에서 몰입형 배경 섹션이나 전체 너비 이미지를 만드는 데 특히 유용합니다.

#### 15. 애니메이션 그라디언트 배경

애니메이션 그라디언트 배경을 추가하면 디자인에 생명을 불어넣을 수 있습니다. 다음은 이 효과를 만들기 위한 CSS 원 라이너입니다:

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

```js
.animated-gradient {
  background: linear-gradient(270deg, #ff7e5f, #feb47b); background-size: 400% 400%; animation: gradient 15s ease infinite;
}
@keyframes gradient { 0% {background-position: 0% 50} 50% {background-position: 100% 50} 100% {background-position: 0% 50} }

이 CSS 트릭은 색상 사이를 부드럽게 애니메이션하는 그라데이션 배경을 생성합니다. 원하는 디자인에 맞게 색상, 애니메이션 지속 시간 및 이징 함수를 조절할 수 있습니다.
```

## 결론: CSS 게임 업그레이드하기

이 15가지 CSS 한 줄 코드는 효율적이고 반응형이며 시각적으로 매력적인 디자인을 만드는 CSS의 힘과 유연성을 보여줍니다. 이러한 트릭을 워크플로에 통합하여 다음과 같은 이점을 누릴 수 있습니다:

- 코드를 간소화하여 유지 관리하기 쉽고 가독성을 높입니다.
- 우아하고 간결한 해결책으로 일반적인 디자인 문제를 해결합니다.
- 원활한 애니메이션과 반응형 레이아웃으로 사용자 경험을 향상시킵니다.
- 노력을 최소화하고 더 깔끔하고 전문적으로 보이는 인터페이스를 만듭니다.

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

CSS 마스터하는 핵심은 이런 요령을 알기만 하는 게 아니라 이를 언제 어떻게 적용해야 하는지를 이해하는 것입니다. 이러한 기술을 프로젝트에 통합하면 CSS의 기능에 대한 새로운 이해를 개발하게 되며 UI 개발에 대한 접근 방식을 변화시킬 수 있습니다.

계속해서 실험을 해 보고 호기심을 유지하며 CSS로 가능한 것의 한계를 넘어가는 데 두려움을 갖지 마세요. 더 많이 연습하고 탐험할수록 멋진 효율적인 웹 디자인을 만드는 데 능숙해질 것입니다.

이 인용구는 CSS 한 줄 기법의 본질을 완벽하게 담아냅니다. 때로는 가장 강력한 해결책이 가장 단순한 것일 수도 있음을 입증합니다.

UI 개발자로서 여정을 계속하는 동안 이러한 CSS 요령을 도구 상자에 갖춰두되 새로운 기술을 배우고 최신 CSS 기능과 모범 사례를 따르는 것에도 열려 있으세요. 웹 개발 분야는 끊임없이 진화하고 있으며 급진적이고 효율적이며 아름다운 사용자 인터페이스를 계속 만들 수 있도록 최신 정보에 따라 있어야 합니다.

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

행복한 코딩하세요! 당신의 CSS가 항상 선명하고 깔끔하며 똑똑하길 바래요!

UI 개발자가 꼭 알아야 할 CSS 한 줄 코드 15가지 팁 정리



플러터 개발을 시작했군요! 이제 위젯의 세계에 더 깊이 들어가려고 하시나봐요. 하지만 멀리 나아가기 전에 플러터 위젯 라이프사이클을 이해하는 것이 중요합니다. 이 라이프사이클을 알고 있다면 나중에 머리 아픔을 막을 수 있어요. 걱정 마세요 – 생각보다 쉽답니다. 한 발자국씩 안내해 드릴 테니 함께 즐겁게 배워봐요!

![이미지](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_0.png)

## 1. 플러터 위젯 라이프사이클이란 무엇인가요?

플러터 위젯을 정원의 식물들처럼 생각해보세요. 🌱 자라고 변하며 때로는 시들기도 해요. 플러터 위젯 라이프사이클은 위젯이 처음 심어질(생성될) 때부터 정원에서 제거될(해제될) 때까지 거치는 과정입니다. 이 라이프사이클을 이해한다면 위젯을 더 잘 다룰 수 있어요 – 마치 좋은 정원사처럼 말이죠!

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

여기 간단한 설명이 있어요:

- 생성: 위젯이 처음 심어질 때
- 초기화: 위젯이 성장을 시작할 때
- 생성/렌더링: 위젯이 피어서 아름다움을 보여줄 때
- 업데이트: 위젯이 변할 때, 식물이 새 잎사귀를 내놓는 것처럼
- 삭제: 위젯이 정원에서 제거될 때

## 2. 씨앗 심기: `createState()`

여행은 `createState()`로 시작돼요. 새 위젯이 위젯 트리에 추가될 때(즉, 씨앗을 심을 때) 호출돼요. 이것은 위젯의 상태를 생성하는 것인데, 이는 식물에게 자라기 위한 화분을 주는 것과 같아요.

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


![image](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_1.png)

Example: Let’s say you’re making a widget to display user profiles. The `createState()` method prepares your widget for what’s to come.

![image](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_2.png)

## 3. Starting to Grow: `initState()`


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

다음으로, `initState()`이 호출됩니다. 이 메서드는 위젯이 성장하기 시작하는 곳입니다. 여기서 데이터를 가져오거나 타이머를 시작하는 것과 같은 작업을 설정할 때 사용됩니다.

![image](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_3.png)

예: 매 초마다 UI를 업데이트하는 타이머를 설정할 수 있습니다. 여러분의 식물이 싹을 틔우기 시작했습니다!

![image](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_4.png)

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

## 4. 화려한: `build()`

이제 자란 것을 자랑할 때입니다! `build()` 메서드는 플러터가 화면에 위젯을 표시해야 할 때마다 호출됩니다. 이곳에서는 당신이 어떤 모습인지 정의합니다 - 즉, 꽃들입니다.

![예시](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_5.png)

예시: 사용자 프로필을 만들고 있다고 상상해보십시오. `build()` 메서드에서는 사용자의 이름과 사진을 표시할 수 있습니다. 여러분의 식물이 완전히 피었습니다!

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

![이미지](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_6.png)

## 5. 계절과 함께 변하는 `didUpdateWidget()`

삶은 변화로 가득하고, 당신의 위젯도 마찬가지입니다. `didUpdateWidget()`은 당신의 위젯의 부모가 사용자 프로필을 업데이트하는 것과 같이 무언가를 변경할 때 호출됩니다. 이는 당신의 식물이 오래된 잎을 떨어뜨리고 새 잎을 자라게 하는 것과 비슷합니다.

![이미지](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_7.png)

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

예시: 사용자 ID가 변경되면 이 방법에서 새 데이터를 가져올 수 있습니다. 당신의 식물이 새롭게 열린 잎을 얻었어요!

![이미지](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_8.png)

## 6. 쉬는 중: `deactivate()`와 `activate()`

가끔씩 당신의 위젯은 잠깐 쉬어야 할 때가 있습니다. 😴 그럴 때 `deactivate()`가 필요해요 – 당신의 위젯이 일시적으로 트리에서 제거될 때 호출됩니다. 하지만 걱정하지 마세요, `activate()`로 다시 일어날 수 있어요!

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

<img src="/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_9.png" />

## 7. 이별 인사: `dispose()`

모든 좋은 일은 끝이 날 때가 있어요. 🌻 위젯이 트리에서 영원히 제거될 때, `dispose()`가 호출됩니다. 여기서는 식물에 마지막으로 물을 주는 것처럼 정리를 합니다.

<img src="/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_10.png" />

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

예시: 애니메이션 컨트롤러나 스트림 같은 것이 있다면, 그들을 정리하여 메모리 누수를 방지하는 것이 좋습니다. 안녕, 식물!

![이미지](/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_11.png)

# 요약: 재미있는 예제 앱

간단하고 재미있는 예제로 모두 함께 해보겠습니다. 1초마다 증가하는 카운터로 상상해보세요. 마치 실시간으로 자라는 식물 같은 모습! 🌱

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

<img src="/assets/img/2024-08-26-ABeginnersGuidetotheFlutterWidgetLifecycleWithFunExamples_12.png" />

## 결론

여기 있습니다! 플러터 위젯 라이프사이클을 이해하는 것은 앱에 대한 마스터 가드너가 되는 것과 같습니다. 🌷 위젯이 언제, 어떻게 성장하고 변하며 종료되는지 알고 있다면, 효율적이고 아름다운 플러터 애플리케이션을 만들 수 있습니다.

자, 이제 나가서 당신의 위젯을 활짝 피워보세요! 즐거운 코딩되세요!

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

만약 이 안내서가 도움이 되었고 플러터 개발에 대해 더 알고 싶다면, 더 많은 팁, 튜토리얼 및 재미있는 예제를 보려면 나를 팔로우하지 않는 것을 잊지 마세요! 또한 LinkedIn에서 저와 소통할 수도 있습니다. 함께成 가자! 🌱

플러터 위젯 라이프사이클 정리(코드 있음)



이동 앱 수명주기 전반에 걸쳐 견고한 보안을 보장하는 포괄적인 안내서

# 소개:

오늘날의 연결된 세상에서 이동 앱은 민감한 개인 정보부터 중요한 비즈니스 데이터까지 모든 것을 처리하는 것이 우리의 일상 생활에서 필수 요소가 되었습니다. 이러한 앱들이 기능과 복잡성이 계속 성장함에 따라 그들의 보안을 확보하는 것은 이전보다 더 중요해졌습니다.

개발 초기 단계부터 사용자 장치에 배포될 때까지, 모바일 앱을 안전하게 보호하는 것은 적극적인 접근 방식이 필요한 다면적인 과정입니다. 이 기사에서는 이동 앱 수명주기 각 단계에서 보안을 유지하기 위한 주요 전략과 모범 사례를 탐구합니다. 이러한 조치를 시행함으로써 개발자와 기업은 위험을 완화하고 사용자 데이터를 보호하며, 점점 디지털 환경이 확장되는 상황에서 애플리케이션에 대한 신뢰를 증진시킬 수 있습니다.

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

사용자 장치에 배포되기까지 모바일 앱 개발의 주요 4 단계가 있습니다. 이러한 단계에서 다양한 종류의 보안을 강화할 수 있습니다.

- 개발
- 빌드 준비
- 앱 설치 및 실행
- 애플리케이션의 정기적인 사용

## 모바일 애플리케이션 라이프사이클의 각 단계에서의 보안

세부 내용을 자세히 살펴보고 각 단계에서의 보안 조치를 탐색해 봅시다.

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

# 개발:

API 키, 암호 키 및 기타 민감한 자격 증명과 같은 키를 안전하게 보호하는 것은 모바일 앱 개발의 중요한 측면입니다. 이러한 키를 잘못 관리하면 애플리케이션이 심각한 보안 위협을 받을 수 있습니다. 로컬 개발, CI/CD 파이프라인 및 프로덕션 환경에서 키를 안전하게 보호하는 방법을 살펴봅시다.

## 1. 로컬 개발

로컬 개발 중 키를 안전하게 보호하는 것은 저장소의 보안을 compromise하지 않으면서 개발자의 컴퓨터에 안전하게 저장하는 것을 포함합니다.

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

- 플러터(Flutter): 플러터(Flutter)에서 API 키와 같이 민감한 정보는 .env 파일에 저장해야 합니다. 이 파일에는 환경별 구성이 포함되어 있으며 버전 관리에서 제외해야 합니다. .gitignore에 .env 파일을 추가하여 실수로 GitHub나 다른 저장소에 올라가지 않도록 해주세요.
- 안드로이드(Android): 안드로이드(Android)에서는 local.properties 파일이 SDK 경로와 같은 로컬 머신 구성을 저장하는 데 일반적으로 사용됩니다. 여기에 민감한 키를 저장할 수도 있습니다. .gitignore에 추가하여 이 파일이 버전 관리에서 제외되도록 해주세요. 이를 통해 민감한 정보가 안전하게 보호되며 개발자의 머신에 로컬화됩니다.
- iOS: iOS 개발에서는 debug.xcconfig와 release.xcconfig과 같은 구성 파일을 사용하여 환경별 키를 저장합니다. 이러한 파일은 버전 관리에서 제외되어 민감한 정보가 노출되는 것을 방지해야 합니다. 빌드 환경에 따라 키를 분리함으로써 디버그 및 릴리스 키를 무단 액세스로부터 보호할 수 있습니다.
- NDK를 사용한 암호화된 형태로 키 저장 보안을 강화하기 위해 키를 네이티브(Native) 측의 네이티브 개발 키트(NDK)를 사용하여 암호화된 형태로 저장할 수 있습니다. 이 접근 방식은 APK의 역공학을 통해 키를 추출하는 것을 더 어렵게 만듭니다. 앱 시작 시 암호화된 키를 가져와서 메모리에서 복호화하고, 이후 안전하게 관리하며, 이상적으로는 보호된 메모리 영역에 저장함으로써 안전성을 유지합니다. 강력한 암호화 알고리즘을 사용하고, 복호화된 키가 필요한 시간 동안만 메모리에 보관되도록 해야 합니다. 또한 Android의 Keystore나 iOS의 Keychain과 같은 플랫폼별 안전한 저장소 솔루션을 활용하는 것도 고려해야 합니다.
- 민감한 데이터 저장을 위한 암호화된 데이터베이스 사용 앱 내의 민감한 데이터를 평문으로 저장하면 중대한 보안 위험이 발생할 수 있습니다. 암호화된 데이터베이스를 사용하여 이러한 데이터를 저장하고, 논의된 메커니즘을 사용하여 암호화 키가 안전하게 저장되도록 해주세요. 또한, 암호화 키를 하드코딩하지 않고 런타임 중에만 메모리에 유지되도록만 하는 것도 중요합니다.

## 2. CI/CD (지속적 통합/지속적 배포)

CI/CD 프로세스 중에는 빌드, 테스트 및 배포를 자동화하는 동안 키를 안전하게 관리하는 것이 중요합니다.

- 환경 변수 사용 CI/CD 파이프라인을 구성하여 민감한 정보를 환경 변수를 통해 전달하도록 설정해주세요. 환경 변수는 안전하며 일시적이며, 빌드하는 동안만 존재하고 서버에 저장되지 않습니다. 이를 통해 민감한 데이터가 빌드 중에 하드코딩되거나 실수로 유출되는 것을 방지할 수 있습니다.
- 원격 구성 원격 구성 도구를 사용하면 키와 구성 설정을 중앙 집중식 원격 위치에 유지할 수 있습니다. 이러한 구성은 빌드 중이나 런타임 중에 동적으로 가져올 수 있어 키를 다시 배포하지 않고도 간편하게 업데이트할 수 있습니다. Firebase Remote Config나 기타 클라우드 기반 서비스와 같은 솔루션을 통해 수행됩니다.

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

## 3. 생산

생산 단계에서 키를 동적으로 관리하는 것은 변화하는 구성에 적응하고 키 노출 위험을 줄이는 데 도움이 될 수 있습니다.

- 키를 위한 원격 구성 생산 환경에서는 민감한 키 및 기타 구성을 관리하기 위해 원격 구성 시스템을 사용하는 것이 매우 권장됩니다. 키를 원격 시스템에 저장함으로써 새 앱 버전을 릴리스하지 않고도 이를 동적으로 업데이트할 수 있습니다. 이 접근 방식은 특히 키 회전이 필요한 상황이거나 API 키가 노출되어 즉각적으로 대체해야 하는 경우에 유용합니다. 이를 통해 보안 위협에 대해 유연하게 대응하고 앱이 계속 원할하게 작동하도록 할 수 있습니다.
- 또한 이러한 키가 안전한 연결(예: HTTPS)을 통해 가져오도록 하고, 런타임 중 필요한 만큼 메모리에 안전하게 저장되도록 해야 합니다. 키가 앱의 라이프사이클 동안 유효하고 안전하게 유지되도록 적절한 유효성 검증 및 확인을 수행해야 합니다.

# 빌드 준비:

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

## 역공학에 대한 안전장치

앱을 빌드할 때 앱을 보호하기 위해 역공학을 방지하는 것이 중요합니다. 이를 위해 널리 사용되는 도구인 ProGuard를 사용하세요.

## 코드를 난독화하기 위해 ProGuard 사용하기:

- ProGuard는 클래스, 메서드 및 필드의 이름을 무의미한 이름으로 변경하여 코드를 난독화합니다. 이렇게 하면 공격자가 앱을 역공학으로 분석하기가 더 어려워집니다. 또한 코드를 축소하고 최적화하여 앱의 크기를 줄이고 성능을 향상시킵니다. 난독화는 완벽하지는 않지만 잠재적인 공격자들에 대한 어려움을 상당히 높입니다.

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

## 구현

- proguard-rules.pro 파일에 ProGuard를 포함시키세요:

```js
-keep class com.yourpackage.** { *; }
-keepattributes *Annotation*
-dontwarn org.slf4j.**
```

- 릴리스 빌드에 ProGuard가 활성화되어 있는지 확인하고, 필수 클래스와 속성을 유지할 수 있도록 필요에 따라 규칙을 사용자 정의하세요.

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

## ProGuard의 이점

- 코드 난독화: 코드를 읽기 어렵게 만들어 공격자들이 이해하기 어렵도록 합니다.
- 코드 축소: 사용되지 않는 코드를 제거하고 APK/IPA의 크기를 줄여 성능을 향상시킵니다.
- 최적화: 바이트 코드를 최적화하고 실행 시간 성능을 향상시킵니다.

## 추가적 보호 기능

- 민감한 문자열 암호화: ProGuard와 함께 API 키 및 엔드포인트와 같은 민감한 문자열을 암호화하여 보안성을 높일 수 있습니다.
- R8 통합: 안드로이드의 기본 코드 축소기인 R8은 ProGuard보다 효율적인 대안이며, 더 나은 난독화를 위해 고려할 가치가 있습니다.

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

# 앱 설치 및 실행:

## 루팅 및 탈옥 감지

보안을 유지하기 위해 필수적으로 루팅되거나 탈옥된 기기에서 앱이 실행되는 것을 감지하고 방지해야 합니다. 이러한 기기는 시스템에 무제한 액세스가 허용되어 보안 위협에 취약해질 수 있기 때문입니다.

- 탈옥된 iOS 기기: 탈옥을 통해 사용자는 애플의 제한을 우회하여 무단 소프트웨어를 설치하거나 시스템 파일을 수정하고 애플이 허용하는 범위를 벗어나 기기를 사용자 정의할 수 있습니다. 이로 인해 탈옥된 기기는 승인되지 않은 코드를 실행할 수 있어 앱을 공격에 노출시킬 수도 있어있습니다. 탈옥을 감지하여 앱이 이러한 위험한 환경에서 실행되지 않도록하면 데이터 침해나 무단 액세스 가능성을 줄일 수 있습니다.
- 루팅된 Android 기기: 안드로이드 기기를 루팅하면 사용자는 관리자 권한을 얻어 특정 권한이 필요한 앱을 설치하고 시스템을 수정할 수 있게 됩니다. 루팅은 성능을 향상시키거나 사용자 정의 펌웨어를 사용할 수 있지만 기기의 보안 무결성을 손상시킵니다. 루팅된 기기를 감지함으로써 앱이 위험에 노출된 시스템에서 실행되지 않도록 하여 악성 소프트웨어에 의한 민감한 데이터 노출이나 변경을 방지할 수 있습니다.

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

# 애플리케이션의 정기 사용:

## 모바일 애플리케이션에서 네트워크 상의 데이터 안전 보호

네트워크를 통해 전송되는 데이터를 안전하게 보호하는 것은 사용자 정보를 보호하고 모바일 애플리케이션과 서버 간 통신의 무결성을 보장하는 데 중요합니다. 아래는 따를 가장 좋은 방법에 대한 몇 가지 권장 사항입니다:

## 1. HTTPS 사용

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

모든 앱-서버 통신이 HTTPS (Hypertext Transfer Protocol Secure)를 사용하도록하십시오. 이는 데이터를 TLS (Transport Layer Security)를 사용하여 암호화하여 미인가된 액세스를 방지합니다. 모바일 앱에서 HTTPS 전용 통신을 강제로 적용하려면 다음을 사용하십시오:

- 인증서 핀닝 (Certificate Pinning): 앱이 특정 인증서 또는 공개 키를 신뢰하도록하며 중간자 공격을 완화합니다.
- 서버 측 구성: 서버 수준에서 HTTP 요청을 거부하여 HTTPS 전용 통신을 강제로 적용하십시오.

## 2. 인증서 핀닝

SSL/TLS 인증서 핀닝을 구현하여 중간자 공격으로부터 앱을 보호하십시오. 핀닝을 통해 앱은 사전 정의된 SSL 인증서 또는 공개 키가 있는 서버와만 통신하도록 보장됩니다.

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

플러터에서 인증서 핀닝을 구현하는 단계:

- 신뢰할 수 있는 SSL 인증서 또는 공개 키 식별: 서버 또는 서버 관리자로부터 필요한 SSL 인증서 또는 공개 키를 획득합니다.
- 앱에 인증서/공개 키 임베드: 신뢰할 수 있는 인증서 또는 공개 키를 플러터 앱에 저장합니다. 이는 raw 또는 인코딩된 형태로 저장됩니다.
- 인증서 유효성 검사 로직 구현: HTTPS 연결 중에 서버의 SSL 인증서를 내장된 인증서 또는 공개 키와 비교하여 유효성을 검사합니다.

## 3. API 보안

모든 API 요청이 인증되었고 암호화되었음을 확인하십시오.

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

- 토큰 기반 인증: JWT (JSON Web Tokens)와 같은 토큰 기반 인증 방법을 사용하여 사용자의 신원을 확인하세요. 토큰은 만료 시간을 가지고 있어야 하며, 리프레시 토큰과 같은 메커니즘을 사용하여 안전하게 새로 고칠 수 있어야 합니다.
- 민감한 데이터 암호화: 네트워크를 통해 데이터를 전송하기 전과 로컬 저장시에 민감한 데이터를 암호화하는 강력한 암호화 알고리즘인 AES (Advanced Encryption Standard)를 활용하세요.

## 4. 민감한 데이터 암호화

전송 중과 안정 중에 민감한 데이터를 암호화하세요:

- 전송 중 데이터 암호화: 모든 통신에 HTTPS를 사용하여 네트워크를 통해 데이터를 전송하는 동안 데이터를 보호하세요.
- 안정 중 데이터 암호화: 암호화 키와 같은 민감한 데이터를 Keychain (iOS)이나 Keystore (Android)와 같은 메커니즘을 사용하여 안전하게 저장하세요.
- 키 관리: 암호화 키가 적절히 관리되고 노출을 방지하여 데이터 보안을 유지하도록 보호하세요.

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

## 5. 강력한 인증 사용하기

앱에 인가된 사용자만이 접속할 수 있도록 강력한 사용자 인증 메커니즘을 구현하세요:

- 이중 인증 (2FA): SMS, 이메일 또는 앱 기반의 인증자를 활용한 2FA 통합을 고려해보세요.
- 생체 인식: 지문, 얼굴 인식 등의 생체 인증 방법을 지원하세요.
- 후속 조치 메커니즘: 사용자가 2FA 또는 생체 인식 기능에 접근할 수 없는 경우를 대비해 PIN 또는 비밀번호와 같은 대체 옵션을 구현하세요.

## 6. 데이터 노출 최소화하기

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

아래 가이드라인을 따라 민감한 정보 노출 위험을 줄여보세요:

- 필요한 데이터만 전송: 작업에 필요한 데이터만 전송하고 불필요한 정보는 포함시키지 않도록 합니다.
- 안전한 코딩 관행: 민감한 데이터가 과도한 로그나 오류 메시지를 통해 노출되지 않도록 안전한 코딩 관행을 적용합니다.
- API 디자인: 필요한 데이터만 노출하고 그 외 정보는 노출되지 않도록 API를 디자인하여 민감한 정보 노출을 최소화합니다.

## 7. 안전한 웹소켓

실시간 통신에 웹소켓을 사용하는 경우, HTTPS 위에서 작동하는 WSS(웹소켓 보안)를 사용하여 소켓을 안전하게 유지하세요.

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

- 인증(Authentication): 웹소켓 연결을 인가된 사용자만 연결할 수 있도록 인증합니다.
- 연결 관리(Connection Management): 사용되지 않는 또는 비활성화된 연결로부터 노출 위험을 최소화하기 위해 유휴 연결 시간 제한을 구현합니다.
- 입력 유효성 검사 및 살균화(Input Validation and Sanitization): 웹소켓 연결의 보안을 compromise할 수 있는 삽입 공격을 방지하기 위해 항상 입력 데이터를 유효성 검사 및 살균화합니다.

## 8. 보안 예외 처리하기

보안과 관련된 예외 상황을 적절히 처리하는 것이 중요합니다:

- 오류 처리(Error Handling): 보안 예외 사례(예: SSL/TLS 핸드쉐이크 실패)에 대한 견고한 오류 처리를 구현하여 공격자에게 스택 트레이스와 같은 민감한 정보가 노출되지 않도록 합니다.
- 사용자 알림(User Notifications): 네트워크 요청이 보안 문제(예: SSL/TLS 오류)로 인해 실패할 때 기술적인 세부 정보를 공개하지 않고 사용자에게 정중하게 알립니다.

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

## 배경 스냅샷 제어 스냅샷:

모바일 애플리케이션을 무단 스크린샷으로부터 보호하고 민감한 정보가 노출되는 것을 방지하기 위해서는 배경 스냅샷을 비활성화하는 것이 중요합니다. 다음 전략을 고려해보세요:

- 배경에서 정보 보호: 민감한 데이터를 가려서 배경 스냅샷에 캡처되지 않도록 하여, 무단자에게 노출되지 않도록 보장합니다.
- 스크린샷 기능 비활성화: 앱 내에서 스크린샷 촬영 능력을 제한하거나 비활성화하는 조치를 취하여 사용자 정보의 보안과 개인 정보 보호를 강화합니다.

## 앱 재개 시 재인증:


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

- 앱이 백그라운드로부터 재개될 때 지문 또는 비밀번호로 다시 인증하여 사용자의 신원을 확인하세요. 이렇게 함으로써 앱이 백그라운드에서 실행 중일 때 무단 접근을 방지할 수 있습니다.

이 설명이 앱 보안에 대한 이해를 돕기를 바랍니다, 개발부터 정기 사용까지. 다른 주제에 대해 더 많이 쓰기를 기대하겠습니다. 👏 적어도 하나의 것을 배웠다면 박수를 👏 부탁드리며, 내용에 어울리는 공유는 고맙게 생각합니다. 피드백, 댓글 또는 토론을 자유롭게 제공해주세요.

# 제 정보

LinkedIn: www.linkedin.com/in/radheshyam-singh-9a2747a9

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

행복한 코딩하세요!

실 서비스 모바일 애플리케이션 보안을 위해 필요한 것들



모바일 앱 개발에서 Flutter와 React Native 사이를 선택하는 것은 주로 성능 고려사항에 달려있습니다. 두 프레임워크 모두 지지자들이 있지만, 실제 벤치마킹 결과가 많은 사람들에게 중요합니다.

Flutter와 React Native에 대한 벤치마킹 비교 자료가 많이 없어 놀랐습니다. 심지어 그 중에서도 꽤 오래된 자료들이었습니다. 그래서 Flutter 및 React Native의 최신 버전을 사용하여 앱 크기, 메모리 및 CPU 사용량 면에서 철저히 벤치마킹 비교를 진행했습니다. 결과는 흥미로우며 놀랍다고 해도 과언이 아닙니다.

# 벤치마킹된 앱

세 가지 유형의 앱이 벤치마킹되었습니다:

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

- 1001개 항목을 포함한 대규모 Listview: 각 항목에는 정적 이미지와 무한 회전 이미지가 포함됩니다.
- 대규모 이미지 애니메이션: 200개의 이미지가 동시에 회전, 투명도 조절, 크기 조정됩니다.
- 대규모 Lottie 애니메이션: 단일 화면에 36개의 Lottie 애니메이션이 표시됩니다.

# 벤치마킹 방법론

- 각 벤치마크는 M1 Mac에서 수행되었습니다.
- OnePlus 7 및 Pixel 기기에서 Android 운영체제를 실행 중인 앱을 테스트했습니다. (곧 ios 벤치마크 결과를 게시할 예정입니다)
- 메모리 및 CPU 사용량은 Flutter 및 React Native 모두에 대해 릴리스 apk에서 Android Profiler를 사용하여 측정되었습니다.
- FPS는 Flutter 앱의 "프로필 모드"에서 측정되었고 React Native는 JS 최소화 및 개발 모드 비활성화 빌드에서 측정되었지만 메트로 번들러 연결이 필요합니다. (React Native 성능 통계는 메트로 번들러에 연결된 경우에만 지원됩니다)
- 벤치마크 소스 코드는 다음과 같습니다 : https://github.com/nateshmbhat/flutter-rn-performance-benchmarks
- 애니메이션에는 Flutter의 내장 Animation API 및 React Native의 산업 표준 Reanimated v3이 사용되었습니다.

## 사용된 프레임워크 버전:

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

React Native: 0.74.1
Flutter: 3.19.5
Dart: 3.3.3

# Listview 성능

이 앱은 플러터에서 내장 ListView 및 Animated API를 사용합니다. React Native에서는 최신 Reanimated v3 라이브러리를 사용하고 내장 FlatList를 사용합니다. 두 목록 모두 명시적 최적화나 고정 높이 범위 없이 사용 중입니다.

플러터:

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

- FPS: 60 (튕기지 않음)
- Dart 힙 메모리 사용량: 7–8 MB
- APK 크기: 16.8 MB (빌드하는 데 7.6초 소요)
- 프로세스 메모리: 120–130 MB (스크롤할 때 동일 유지)
- CPU: 5–8% (스크롤할 때 동일 유지)
- 빠른 스크롤링 시에도 튕김이나 프레임 드랍이 없음

React Native:

- FPS: 50–55 (느껴지는 튕김)
- APK 크기: 21.9 MB (빌드하는 데 23초 소요)
- 메모리: 160 MB (스크롤하지 않을 때), 180–190 MB (스크롤할 때)
- CPU: 11–13% (스크롤하지 않을 때), 25–30%까지 급등 (스크롤할 때)
- 가끔 프레임 드랍 및 스크롤 중 공백 항목 발생

Flutter는 스크롤할 때 메모리나 CPU 급증이 없고 부드럽게 작동하는 반면, React Native는 프레임 드랍이 발생하고 CPU 및 메모리 급증이 있었습니다.

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

# 대량 이미지 애니메이션

플러터:

- FPS: 58–60
- Dart 힙: 13.4 MB
- APK 크기: 11.6 MB (빌드 시간 19.6 초)
- 메모리: 128–135 MB
- CPU: 8%

리액트 네이티브:

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

- FPS: 58-60 (가끔 떨어짐)
- APK 크기: 21 MB (빌드 시간 20초)
- 메모리: 380-396 MB
- CPU: 12-16%

두 프레임워크는 유사한 FPS를 유지했지만 React Native은 애니메이션 재시작 시 FPS가 떨어지고 메모리 사용량이 매우 높았습니다.

# 대량 Lottie 애니메이션

Flutter:

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

- FPS: 36
- APK size: 7.6 MB (20.8 초 소요)
- 메모리: 220 MB
- CPU: 11%

React Native:

- FPS: 43
- APK size: 18.5 MB (23 초 소요)
- 메모리: 240 MB
- CPU: 22%

이 테스트에서 흥미로운 점은 React Native이 FPS에서 Flutter를 능가했지만 CPU 및 메모리 사용량이 더 높다는 것입니다.

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

# 스타터 프로젝트 비교

React Native나 Flutter에서 프로젝트를 처음 만들 때, 예상치 못한 결과로 React Native의 Apk 크기가 스타터 프로젝트에서 Flutter 앱보다 현저히 크다는 것을 발견하였습니다.

이 특정한 경우가 공정한 비교가 아닐 수 있다는 것을 염두에 두어야 하지만(두 스타터 앱이 다르기 때문), 성능 기준 결과로서 제외될 수는 있지만, 몇 가지 흥미로운 관찰을 제시합니다.

새 프로젝트를 설정할 때 React Native에서 전체 react-native 라이브러리가 다운로드되기 때문에 앱 생성 시간이 더 오래 걸리지만, 이미 플러터 SDK가 다운로드되어 있기 때문에 Flutter에서는 이미 준비되어 있습니다.

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

# 최종 판결

## 다음 단계 :

- iOS 성능 벤치마킹 실행
- React Native의 새 아키텍처를 활성화하여 성능 벤치마킹 실행

# 다가오는 벤치마킹 포스트

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

더 자세한 벤치마크 비교와 메모리 및 CPU 사용량에 대한 스냅샷 데이터를 곧 게시할 예정입니다.
아직은 iOS에서의 성능 비교를 게시하지 않았어요.
그 부분을 기대해주세요 !

![image](https://miro.medium.com/v2/resize:fit:1000/0*dYbJK5NYUGUlm5Xk.gif)

Posts