

웹 페이지를 만드는 데 필수적인 HTML이 프로그래밍 언어로 간주되지 않는 이유를 궁금해 해 보셨나요?

웹 개발을 처음 시작할 때 이 질문이 제게는 낯선 것이었습니다. HTML 또는 HyperText Markup Language은 웹에서 어디서나 볼 수 있습니다. 모든 웹 사이트의 기반을 이루고 있지만, 기술적으로는 프로그래밍 언어가 아닙니다.

# 표식 및 프로그래밍 언어의 차이

HTML이 프로그래밍 언어가 아닌 이유를 이해하기 위해 먼저 HTML이 무엇인지 알아야 합니다. HTML은 콘텐츠를 구조화하는 데 사용되는 표식 언어입니다. 이것은 브라우저에게 텍스트, 이미지 및 기타 요소를 페이지에 어떻게 표시할지 알려주는 방법으로 생각할 수 있습니다.

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

프로그래밍 언어는 컴퓨터에게 특정 작업을 수행하도록 지시하는 데 사용됩니다. 그들은 논리를 제어하고 결정을 내릴 수 있으며 명령을 실행할 수 있는 능력을 갖고 있습니다. 프로그래밍 언어는 데이터를 조작하고 계산을 수행하며 복잡한 알고리즘을 만들 수 있습니다.

예를 들어, 널리 알려진 프로그래밍 언어인 Python을 살펴보겠습니다:

```js
x = 5
y = 10
sum = x + y
print(sum)
```

이 코드는 텍스트를 표시하는 것 이상을 수행합니다. 계산을 수행한 다음 결과를 보여줍니다. 그러나 HTML은 이러한 종류의 처리를 할 수 없습니다.

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

# HTML이 할 수 있는 일과 할 수 없는 일

HTML의 역할은 웹 페이지의 구조를 정의하는 것입니다. 브라우저에 "여기가 제목입니다" 또는 "여기가 단락입니다"라고 말해줍니다. 간단한 HTML 조각을 살펴보겠습니다:

```js
<h1>내 웹사이트에 오신 것을 환영합니다</h1>
<p>내 사이트에 대한 설명을 담은 단락입니다.</p>
```

HTML은 아무런 연산이나 결정을 내리지 않습니다. 그냥 내용을 표시할 수 있도록 표시만 하는 것입니다. 계산을 수행하거나 논리적 결정을 내리거나 프로그래밍 언어처럼 기능을 실행할 수 없습니다.

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

# 이 구별이 중요한 이유

"HTML이 프로그래밍 언어인지 아닌지가 왜 중요할까?" 라고 생각할 수 있습니다. 이 구별을 이해하면 우리가 적절한 도구를 사용할 수 있습니다. 웹 사이트의 구조를 구축해야 한다면 HTML이 필요합니다. 하지만 사용자 입력에 응답하거나 데이터를 조작하는 등 상호작용을 추가해야 한다면 JavaScript와 같은 프로그래밍 언어가 필요합니다.

예를 들어 JavaScript를 사용하면 버튼을 상호작용 가능하게 만들 수 있습니다:

```js
function showMessage() {
  alert("안녕, 세계!");
}
```

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

이 코드에서 JavaScript가 하는 것은 HTML이 할 수 없는 것입니다: 기능을 추가하고 있습니다.

# 결론

마지막으로, HTML은 프로그래밍 언어가 아닌 마크업 언어입니다. 왜냐하면 논리를 실행하거나 계산을 수행하거나 행동을 제어할 수 없기 때문입니다. 웹 개발에 있어서 필수적인 도구이지만, 퍼즐의 한 조각일 뿐입니다.

이 개념을 처음으로 이해했을 때, 웹 개발에 접근하는 방식이 변화되었습니다. HTML을 사용해야 하는 시기와 JavaScript와 같은 프로그래밍 언어를 사용해야 하는 시기를 명확하게 구분할 수 있게 되었습니다.

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

다음에 웹 프로젝트를 진행할 때는 HTML이 하는 독특한 역할을 기억해주세요. HTML은 사이트의 뼈대이며, 프로그래밍 언어는 사이트를 움직이게 하는 근육입니다. 이를 이해하는 것은 코딩 기술을 향상시킬 뿐만 아니라 더 나은 대화형 웹사이트를 구축하는 데도 도움이 될 것입니다.

희망컨대 이 기사가 HTML의 웹 개발에서의 역할에 대한 혼동을 해소하는 데 도움이 되었으면 좋겠습니다. 생각이나 질문이 있으신가요? 알려주세요! Aliyan의 IT Journal에서 이야기가 발행되었습니다. IT의 최신 뉴스로 최신 정보를 받아보려면 뉴스레터를 구독하고 LinkedIn에서 Aliyan과 연결하세요!

HTML이 프로그래밍이 아닌 이유

## 소개

안녕하세요, 개발자 여러분! 제가 최신 프로젝트인 Testimonials Slider를 소개하게 되어 기쁩니다. 이 프로젝트는 JavaScript를 사용하여 인터랙티브하고 동적인 웹 구성 요소를 만드는 기술을 향상시키는 좋은 방법입니다. 여러분이 처음 시작하거나 포트폴리오에 새로운 기능을 추가하려는 경우, Testimonials Slider 프로젝트는 프론트엔드 개발에 더 깊이 매인 좋은 기회를 제공합니다.

## 프로젝트 개요

Testimonials Slider는 사용자가 다음 및 이전 버튼을 사용하여 다양한 추천사를 탐색할 수 있는 웹 기반 응용 프로그램입니다. 이 프로젝트는 인터랙티브한 사용자 인터페이스를 만드는 방법, JavaScript로 상태를 관리하는 방법, 그리고 부드러운 전환을 통해 사용자 경험을 향상하는 방법을 보여줍니다.

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

## 기능

- 상호 작용형 추천 사례: 사용자는 내비게이션 버튼을 사용하여 여러 추천 사례를 탐색할 수 있습니다.
- 부드러운 전환 효과: 추천 사례가 부드러운 전환과 함께 변경되어 좋은 사용자 경험을 제공합니다.
- 반응형 디자인: 다양한 기기에서 일관된 시각적으로 매력적인 경험을 보장합니다.

## 사용된 기술

- HTML: 웹 페이지 및 추천 사례 요소를 구조화합니다.
- CSS: 깨끗하고 반응형 디자인을 보장하기 위해 사용자 인터페이스를 스타일링합니다.
- JavaScript: 추천 사례 탐색 및 사용자 상호작용을 관리합니다.

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

## 프로젝트 구조

프로젝트 구조를 간단히 살펴보세요:

```js
Testimonials-Slider/
├── index.html
├── style.css
└── script.js
```

- index.html: Testimonials Slider의 HTML 구조를 포함합니다.
- style.css: 애플리케이션의 모습과 반응성을 향상시키는 CSS 스타일이 포함되어 있습니다.
- script.js: Testimonial 네비게이션 로직 및 사용자 상호작용을 관리합니다.

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

## 설치

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

- 저장소를 복제합니다:
git clone https://github.com/abhishekgurjar-in/Testimonials-Slider.git
- 프로젝트 디렉토리를 엽니다:
cd Testimonials-Slider
- 프로젝트를 실행합니다:
테스티모니얼 슬라이더를 사용하려면 웹 브라우저에서 index.html 파일을 엽니다.
- 테스티모니얼 슬라이더를 사용하려면 웹 브라우저에서 index.html 파일을 엽니다.

## 사용법

<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 name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>테스트 모달</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <div class="box-1" id="testimonial-1">
        <div class="text">
          <h1>
            “가능한 가장 좋은 기반을 마련하려면이 코스를 추천합니다. 강사들이 다루는 내용은 놀라울 정도로 심층적입니다. 이제 전문적인 개발자로서 시작하는 데 대해 매우 자신감을 가집니다.”
          </h1>
          <div class="name">
            <h3>존 타크퍼</h3>
            <h4>초급 프론트엔드 개발자</h4>
          </div>
        </div>
        <div class="image">
          <img src="./images/image-john.jpg" alt="존의 추천서" />
          <div class="button">
            <img src="./images/icon-prev.svg" id="prev-1" alt="이전" />
            <img src="./images/icon-next.svg" id="next-1" alt="다음" />
          </div>
        </div>
      </div>
      
    </div>
    <div class="footer">
      <p>Abhishek Gurjar님에 의해 ❤️️ 제작되었습니다.</p>
    </div>
  </body>
</html>
```

### CSS

style.css 파일은 테스트 모달을 스타일링하여 현대적이고 사용자 친화적인 레이아웃을 제공합니다. 여기에 몇 가지 주요 스타일이 있습니다:

```js
* {
  box-sizing: border-box;
}

body {
  font-family: Inter, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 90vh;
  background: url(./images/pattern-curve.svg) no-repeat fixed left bottom;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-1 {
  width: 70%;
  height: 70%;
  background-color: transparent;
  display: none; /* 초기에 모든 추천서 숨김 */
}

#testimonial-1 {
  display: flex; /* 첫 번째 추천서 표시 */
}

/* 추가 스타일 */
```

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

### 자바스크립트

script.js 파일은 평가 및 사용자 상호 작용 처리를 위한 로직을 관리합니다. 다음은 일부 코드입니다:

```js
document.addEventListener("DOMContentLoaded", function () {
  const testimonials = document.querySelectorAll(".box-1");
  let currentIndex = 0;

  const showTestimonial = (index) => {
    testimonials.forEach((testimonial, i) => {
      testimonial.style.display = i === index ? "flex" : "none";
    });
  };

  document.getElementById("next-1").addEventListener("click", () => {
    currentIndex = (currentIndex + 1) % testimonials.length;
    showTestimonial(currentIndex);
  });

  document.getElementById("prev-1").addEventListener("click", () => {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
    showTestimonial(currentIndex);
  });

  // 추가적인 자바스크립트 로직
});
```

## 실시간 데모

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

위의 표를 마크다운 형식으로 바꿔주시면 됩니다.

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

이 프로젝트는 웹 개발 학습 여정의 일환으로 개발되었습니다. 인터랙티브한 사용자 인터페이스를 만드는 데 중점을 두었습니다.

## 저자

- Abhishek Gurjar
  GitHub 프로필

HTML, CSS, JavaScript로 슬라이더 웹사이트 만드는 방법

새로운 CSS 기능을 활용한 시간 기반 애니메이션 최적화 방법



우리 페이지에서 HTML이 어떻게 렌더링되는지

- 브라우저가 HTML을 로드합니다
- HTML을 DOM으로 변환합니다
- 연결된 자원을 가져옵니다
- 브라우저가 CSS를 구문분석합니다 (CSSOM)
- DOM과 CSSOM을 결합합니다
- UI가 그려집니다 (FCP) (첫 번째 콘텐츠 표시)

HTML 요소 유형

주로

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

- 블록 수준
- 인라인

CSS 선택자: 

- 유형/속성 선택자
- 클래스 선택자
- ID 선택자
- 범용 선택자 (*)

CSS 상속

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

부모체인에 직접 속성을 설정하지 않은 경우에는 상속이 발생합니다. 이 속성에 해당하는 값을 찾을 때까지 부모 체인이 횡단됩니다.

```js
<div class="body">
    <p>이 문단은 상속으로 파란색을 가지게 됩니다.</p>
</div>
<style>
.body{
    color: blue;
}
</style>
```

case 2

```js
<div class="body">
    <p>이 문단은 직접 명시로 빨간색을 가지게 됩니다.</p>
</div>
<style>
p {
color: red;
}
.body{
    color: blue;
}
</style>
```

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

case 3

```js
<div class="body">
    <p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
    color: red;
}
.body p{
    color: blue;
}
</style>
```

CSS Specificity에 대해 어떻게 설명할까요?

- 브라우저가 어떤 CSS 선언을 적용해야 하는지 결정하는 알고리즘입니다.
- 각 선택자는 계산된 가중치를 가지고, 가장 구체적인 가중치가 적용됩니다. ID 선택자: 1 - 0 - 0, 클래스 선택자: 0 - 1 - 0, 타입 선택자: 0 - 0 - 1.

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

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

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

```js
<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2em; //16px * 2 = 32px;
}

p {
font-size: 2em; // 32px * 2 = 64px
}
</style>
```

REM:- 루트 폰트 크기에 상대적입니다.

```js
<html>
<div>
<p></p>
</div>
</html>

<style>
html {
    font-size: 16px;
}

div {
font-size: 2rem; //16px * 2 = 32px;
}

p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>
```

%:- % 계산

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


```html
<div>
<p></p>
</div>
```

```css
html {
    font-size: 16px;
}

div {
font-size: 120%; //1.2*16 = 19.2px;
}

p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
```

**CSS Combinators**

1. Descendent Selector (ul li a)

```html
<ul>
<li><a href='#'></a></li>
</ul>
```

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

2. 자식 결합자 (직계 자손) (div.text ` p)

```js
<div>
<div class="text">
   <P>CSS가 여기 적용됩니다<P>
</div>
<div>
  <p>CSS가 적용되지 않습니다</p>
</div>
</div>
```

3. 인접 형제 결합자 (h1 + p)

Note:-

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

- h1과 p 모두 동일한 부모 안에 있어야 하며, p는 h1 태그 바로 뒤에 위치해야 함

4. 일반 형제 결합자(p ~ code)

참고:

- 이들은 인접 형제와 같이 즉시 형제가 되어서는 안 됩니다. 그러나 형제가 있어야 합니다.
- 동일한 부모를 가져야 함

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

블록 요소 수정자 아키텍처(BEM)

- 재사용 가능한 컴포넌트 및 코드 공유를 도와주는 디자인 방법론

다른 방법론

- OOCSS
- SMACSS
- SUITCVSS
- ATOMIC
- BEM

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

블록

- 헤더
- 메뉴
- 입력란
- 체크박스 (독립적인 의미)

요소 (블록의 일부)

- 메뉴 항목
- 목록 항목
- 헤더 제목

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

수정자

- 비활성화됨
- 강조됨
- 선택됨
- 노란색

.block__element--modifier 구문

```js
<form class=form>
   <input class='form__input'/>
   <input class="form__input form__input--disabled"/>
   <button class="form__button form__button--large"/>
</form>
```

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

박스 모델:- (작업 중)

세부 정보에서 더 많은 정보를 추가해야 합니다.

참고: -

그리드 레이아웃 대 플렉스 레이아웃에 대한 별도의 기사가 있을 것입니다.

CSS 속성과 기능에 대해서 자세히 알고 있어야하는 이유



## 소개

다크 모드는 어두운 배경에 밝은 텍스트와 요소를 사용하는 디스플레이 설정입니다. 디자인이 멋있어 보이고 여러 가지 실용적인 장점을 제공하기 때문에 인기를 얻고 있습니다.

다크 모드의 장점은 다음과 같습니다:

- 눈 노이 증소: 특히 어두운 환경에서는 밝은 빛을 화면에서 방출하는 양을 줄이기 때문에, 눈에 덜 스트레스를 주는 경우가 많습니다.
- OLED 화면에서 배터리 수명 개선: OLED(유기 발광 다이오드) 화면에서는 다크 모드로 사용할 때 검은 색 픽셀이 사실상 꺼져 있어서 밝은 색상을 표시할 때 보다 적은 전력을 소비하여 배터리 수명을 연장할 수 있습니다.

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

이 튜토리얼에서는 CSS와 JavaScript를 사용하여 웹 사이트를 다크 모드로 전환하는 방법을 다룰 것입니다. 우리는 간단한 밝은 테마의 웹 페이지 템플릿으로 시작하여 사용자가 부드럽게 라이트 및 다크 테마 간에 전환할 수 있는 토글 가능한 라이트/다크 모드를 가진 웹 사이트로 변형할 것입니다.

## 프로젝트 설정

간단한 밝은 테마의 웹 페이지 템플릿부터 시작해봅시다. 그런 다음 사용자가 부드럽게 라이트 및 다크 테마 간에 전환할 수 있는 토글 가능한 라이트/다크 모드를 가진 웹 사이트로 변형할 것입니다.

## 다크 모드 스타일 구현

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

### 색상 선택하기

먼저 사용할 모든 색상을 나열하고 각 색상에 대한 다크 테마 버전을 선택하십시오. 아래 표에는 페이지의 모든 색상과 해당 다크 버전이 나열되어 있습니다.

### 사용자 정의 변수

그런 다음 CSS 변수를 사용하여 해당 변수로 본문에 다크 및 라이트 클래스를 만듭니다.

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

```js
body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}
```

CSS 변수에 대해 'Using CSS custom properties'에서 자세히 읽을 수 있어요. 기본적으로 이들은 문서 내에서 재사용할 값을 저장하는 데 사용되는 두 개의 대시 (--)를 사용하여 정의된 엔티티입니다. CSS 변수를 사용하면 변경 사항이 자동으로 업데이트되어 유지 관리가 쉬워집니다.

### 동적 요소 색상

var() CSS 함수를 사용하여 CSS 변수의 값을 삽입합니다. 이 방법으로 하면 색상을 동적으로 변경하고 문서 전체에 걸쳐 변경 사항을 반영하는 하나의 변수를 업데이트할 수 있습니다. 수동으로 각 요소를 변경하는 대신 변경 사항이 전체 문서에 자동으로 적용됩니다.

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

다음은 nav 요소와 그 자식 요소의 예시입니다.

```js
body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}
```

### JavaScript로 라이트/다크 모드 전환하기

이제 body의 클래스를 dark 또는 light로 변경하여 테마를 전환할 수 있습니다. 먼저, 헤더에 버튼을 추가하고 해당 클릭 이벤트에 changeTheme() 함수를 설정하세요.

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

여기 웹 사이트 테마를 변경할 수 있는 버튼이 있습니다. 

마크다운 형식으로 테이블 태그를 변경해보겠습니다.

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

아래의 코드 펜에서 해당 튜토리얼의 코드를 확인할 수 있어요

## 다음 단계

더불어, 사용자의 테마 선호도를 로컬 스토리지에 저장할 수도 있어요. changeTheme() 함수를 업데이트하여 선택한 테마를 저장하고 페이지를 로드할 때 해당 테마를 확인하면, 사용자의 선택이 기억되고 다음 방문 시에 자동으로 적용됩니다.

```js
function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});
```

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

어두운 테마에서 table 태그를 Markdown 형식으로 변경하면 브라우저가 스타일을 변경해야 하는 일부 요소의 처리를 보장할 수 있습니다.

```js
body.dark {
  color-scheme: dark;
}
```

## 결론

결론적으로, 웹 사이트에 어두운 모드를 추가하면 눈의 스트레스를 줄이고 OLED 스크린에서 배터리 수명을 연장하여 사용자 경험을 향상시킬 수 있습니다. 본 안내를 따라 CSS와 JavaScript를 사용하여 쉽게 라이트/다크 모드 토글을 설정할 수 있습니다. 당신의 디자인에 맞게 어두운 모드를 사용자 정의하세요.

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

아래 댓글란에 구현 내용을 공유하거나 질문을 하세요.

CSS와 JavaScript를 사용하여 다크 모드 웹사이트 만드는 방법



태양계는 CSS로 많이 만들어졌어요 - Codepen에서 검색해보세요! 그럼 왜 다시 만들어야 하죠?

더 좋고 간단해지기 때문이죠 - 지금은 몇 줄의 CSS로 반응형 태양계를 만들 수 있어요.

아주 기본적인 마크업으로 시작해봐요:

```js
<ol>
  <li class="sun"></li>
  <li class="mercury"></li>
  <li class="venus"></li>
  <li class="earth"></li>
  <li class="mars"></li>
  <li class="jupiter"></li>
  <li class="saturn"></li>
  <li class="uranus"></li>
  <li class="neptune"></li>
</ol>
```

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

행성은 순서대로 나열되어 있기 때문에 순서가 있는 목록을 사용합니다.

다음으로, 기본 `ol` 스타일을 해제하고 그리드로 스타일을 설정합니다:

```js
ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}
```

이제 행성 궤도에는 "그리드 스택"을 사용할 것입니다. 절대 위치와 많은 변환 대신, 그리드 항목을 모두 스택할 수 있습니다:

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

```js
li {
  grid-area: 1 / -1;
  place-self: center;
}
```

각 행성마다 지름에 맞는 --d 변수를 설정하고 width: var(--d);를 사용하여 이미지 크기를 조절했습니다:

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

멋지죠! 이제 가상 요소 ::after를 사용하여 행성들을 추가해봅시다:

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


```js
li::after {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border-radius: 50%;
  content: '';
  display: block;
  width: var(--w, 2cqi);
}
```

ChatGPT에게 각 행성을 위한 멋진 방사형 그라데이션을 생성해달라고 요청해보세요. 우리가 태양계를 만든다고 말하고 행성의 크기는 1에서 6cqi 사이로 하도록 요청해보세요. 완전히 정확하지는 않지만, 여전히 상당히 큰 크기 차이를 유지하면서도 인식할 수 있는 차이를 유지하도록 해요.

```js
.mercury {
  --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
  --w: 2.0526cqi;
}

.venus {
  --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
  --w: 2.6053cqi;
}

.earth {
  --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
  --w: 3.1579cqi;
}

.mars {
  --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
  --w: 3.7105cqi;
}

.jupiter {
  --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
  --w: 4.8158cqi;
}

.saturn {
  --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
  --w: 5.3684cqi;
}

.uranus {
  --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
  --w: 4.2632cqi;
}

.neptune {
  --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
  --w: 6cqi;
}
```

이제 우리는:


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

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

행성을 각기 다른 궤적 속도로 애니메이션화하려면 다음을 추가합니다:

```js
li::after {
  /* 이전 스타일 */
  animation: rotate var(--t, 3s) linear infinite;
  offset-path: content-box;
}
```

offset-path를 주목하세요. 이것이 궤적 애니메이션을 간단하게 만드는 열쇠입니다. `li`의 모양을 따라 행성을 이동시키기 위해 해야 할 일은 다음과 같습니다:

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

```js
@keyframes rotate {
  to {
    offset-distance: 100%;
  }
}
```

그게 다에요! 저는 ChatGPT에게 "Neptune"을 기반으로 하고 회전 속도가 20초인 타이밍을 계산해 달라고 했어요:

## 결론

몇 가지 규칙만으로 순수 CSS로 간단한 2D 버전 태양계를 만들었어요. 더 깊이 들어가고 싶다면 이렇게 해도 돼요:

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

- 실제 거리와 크기를 사용하고 calc()를 사용해주세요.
- `ul`에 `transform: rotateX(angle)`를 추가하여 의사 3D로 변형해보세요:

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

... 그리고 행성들을 "다시 펴는" 용으로 matrix3d를 사용해볼까요?

코딩하세요!

html, CSS 로 태양계 시뮬레이션 만들기



웹 앱이 점점 복잡해지면 사용자들에게 빠르고 부드러운 경험을 제공하는 것이 어려울 수 있어요. 그래서 React에서 동시성이 필요한 거죠. React가 한 번에 여러 작업을 처리하도록 도와주어 앱이 더 잘 실행되고 반응이 더 빠르게 느껴질 수 있습니다.

## React에서 동시성이란 무엇인가요?

React에서 동시성의 간단한 정의는 React가 동시에 여러 일을 처리할 수 있다는 것이에요. 특히 새로운 기능인 자동 일괄 처리와 전환과 같은 기능은 앱이 더 부드럽게 느껴지도록 도와줍니다.

동시성 뒤에 숨겨진 주요 아이디어들을 살펴보겠습니다:

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

1. 동시 렌더링:
동시 렌더링을 통해 React는 동시에 여러 업데이트를 처리할 수 있습니다. 사용자가 버튼을 클릭하거나 탭 간을 전환하는 등 더 중요한 작업이 발생했을 때, React는 하나의 업데이트를 일시 중지하거나 중단하여 더 중요한 작업에 집중할 수 있습니다. 예를 들어, 사용자가 실수로 한 탭을 클릭한 후 빠르게 다른 탭으로 전환한다면, React는 첫 번째 탭이 로딩을 마치기를 기다리지 않습니다. 대신 최신 탭으로 전환하여 앱이 빠르고 응답성이 유지됩니다. React 팀이 제공한 예제를 확인해보세요.

2. 자동 배치:
React 18에서 자동 배치 기능을 통해 React는 여러 상태 변경을 그룹화하고 한 번에 적용할 수 있습니다. 이는 각 개별 상태 변경마다 앱을 업데이트하는 대신 React가 이를 하나의 업데이트로 결합합니다. 이를 통해 렌더 수를 줄이고 앱을 더 효율적이고 빠르게 만들 수 있습니다.

예시:
- 양식 입력:
여러 입력란이 있는 양식을 가정해봅시다. 여러 입력값을 빠르게 변경하면 React가 이러한 변경 사항을 하나의 업데이트로 묶어줍니다. 자동 배치 기능이 없는 경우 각 입력값 변경마다 별도의 다시 렌더링을 발생시킬 수 있어 앱이 느려질 수 있습니다.

```js
function MyForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
    setEmail('newemail@example.com');
  };

  return (
    <div>
      <input value={name} onChange={handleChange} />
      <input value={email} onChange={handleChange} />
    </div>
  );
}
```

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

이 예제에서 setName과 setEmail은 함께 batched되어 React가 두 번이 아닌 한 번만 다시 렌더링됩니다.

b. 비동기 작업:
여러 비동기 작업을 처리할 때 데이터를 가져오고 결과에 따라 상태를 업데이트한다면, 자동 배칭은 이러한 업데이트를 하나의 렌더링으로 결합할 수 있습니다.

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

function DataFetcher() {
  const [data, setData] = useState(null); // 가져온 데이터를 저장할 상태
  const [loading, setLoading] = useState(true); // 로딩 상태를 추적하는 상태
  const [error, setError] = useState(null); // 에러 처리하는 상태
  const [retry, setRetry] = useState(false); // 재시도를 트리거하는 상태

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true); // 로딩 시작
      setError(null); // 이전 에러 지우기

      try {
        const response = await fetch('/api/data');

        if (!response.ok) {
          throw new Error('네트워크 응답이 올바르지 않습니다.');
        }

        const result = await response.json();
        setData(result); // 가져온 결과로 데이터 상태 업데이트
      } catch (error) {
        setError(error.message); // 실패하면 에러 상태 설정
      } finally {
        setLoading(false); // 로딩 종료
      }
    };

    fetchData();
  }, [retry]); // 의존성 배열에 retry가 포함되어 retry가 변경될 때 데이터를 다시 가져옵니다.

  const handleRetry = () => {
    setRetry(prevRetry => !prevRetry); // 재시도 상태를 토글하여 다시 불러오기 트리거
  };

  return (
    <div>
      {loading && <p>로딩 중...</p>}
      {error && <p>에러: {error}</p>}
      {data && <p>데이터: {JSON.stringify(data)}</p>}
      {!loading && !error && !data && <p>사용 가능한 데이터가 없습니다.</p>}
      {error && <button onClick={handleRetry}>재시도</button>}
    </div>
  );
}

export default DataFetcher;
```

데이터를 가져오는 과정에서 여러 상태 업데이트가 발생합니다.

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

- fetch를 시작하기 전에 setLoading(true)를 호출하세요.
- 이전 오류를 지우기 위해 setError(null)를 호출하세요.
- fetch가 성공하면 setData(result)를 호출하세요.
- 에러가 발생하면 setError(error.message)를 호출하세요.
- 로딩이 완료되었음을 나타내기 위해 setLoading(false)를 호출하세요.

자동 일괄 처리는 이러한 업데이트를 단일 렌더링 주기로 결합합니다. 이는 React가 이러한 변경 사항을 한 번에 처리하여 여러 번의 렌더링을 피할 수 있음을 의미합니다.

3. 전환:
전환을 통해 일부 업데이트를 덜 긴급하게 표시할 수 있습니다. 예를 들어 새 페이지로 이동할 때 React는 새로운 페이지를 준비하는 동안 현재 페이지를 계속 표시할 수 있습니다. 이렇게 하면 애플리케이션이 더 부드럽게 느껴집니다.

전환의 예시:
a. 페이지 이동:
페이지 간 이동 시 React는 이동을 전환으로 표시할 수 있습니다. 이는 React가 새 페이지를 로드하고 준비하는 동안 현재 페이지를 계속 표시할 수 있음을 의미합니다.

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

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

function App() {
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState('home');

  const goToPage = (newPage) => {
    startTransition(() => {
      setPage(newPage); // Mark page change as a transition
    });
  };

  return (
    <div>
      <button onClick={() => goToPage('home')}>Home</button>
      <button onClick={() => goToPage('about')}>About</button>
      <button onClick={() => goToPage('contact')}>Contact</button>

      {isPending ? <p>Loading...</p> : <PageContent page={page} />}
    </div>
  );
}

function PageContent({ page }) {
  if (page === 'home') return <p>Home Page</p>;
  if (page === 'about') return <p>About Page</p>;
  if (page === 'contact') return <p>Contact Page</p>;
  return null;
}
```

이 예제에서 다른 버튼을 클릭하면 페이지가 변경됩니다. React는 현재 페이지를 보이게 유지하면서 새 페이지를 준비하는 전환으로 처리합니다.

b. 목록 필터링:
목록에 필터를 적용할 때 필터링 작업을 전환으로 표시할 수 있습니다. 이렇게 하면 React가 백그라운드에서 새로운 필터 기준을 처리하고 적용하는 동안 현재 목록을 계속 표시할 수 있습니다.

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

function ItemList() {
  const [isPending, startTransition] = useTransition();
  const [filter, setFilter] = useState('');
  const [items, setItems] = useState(allItems);
  const allItems = ['사과', '바나나', '체리', '데이트', '엘더베리'];

  const handleFilterChange = (e) => {
    const newFilter = e.target.value;
    startTransition(() => {
      setFilter(newFilter);
      const filteredItems = allItems.filter(item => item.includes(newFilter));
      setItems(filteredItems);
    });
  };

  return (
    <div>
      <input value={filter} onChange={handleFilterChange} placeholder="항목 필터링" />
      {isPending ? <p>필터링 중...</p> : <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>}
    </div>
  );
}
```

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

여기에서는 필터 입력란에 텍스트를 입력하면 React가 필터링 프로세스를 전환으로 표시합니다. 목록은 백그라운드에서 업데이트되며 UI는 반응성을 유지합니다.

4. Suspense:
Suspense를 사용하면 React가 데이터를 로드하는 동안 일부 UI를 일시 중지할 수 있습니다. 동시성을 사용하면 React가 여전히 다른 부분의 UI를 업데이트할 수 있으므로 사용자가 모든 것이 로드될 때까지 기다릴 필요가 없습니다.

예시: (React 문서에서)

```js
import { Suspense } from 'react';
import Albums from './Albums.js';

export default function ArtistPage({ artist }) {
  return (
    <>
      <h1>{artist.name}</h1>
      <Suspense fallback={<Loading />}>
        <Albums artistId={artist.id} />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>🌀 Loading...</h2>;
}
```

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

이 예시에서는 앨범 컴포넌트에서 아티스트 세부 정보를 가져오는 척을 합니다. 데이터를 가져오기 위한 프로미스를 해결하는 동안, UI에는 로딩 텍스트가 표시됩니다. 이것은 사용자들이 아티스트의 세부 정보가 로드될 때까지 검은 페이지/UI를 보지 못하게 하는 것을 의미합니다.

5. 우선순위 레벨:
React는 다른 작업에 다른 우선순위 레벨을 부여합니다. 사용자 입력과 같은 중요한 작업은 먼저 수행되고, 배경 데이터 로딩과 같은 중요하지 않은 작업은 나중에 수행됩니다. 이를 통해 앱이 빠르고 반응적인 상태를 유지할 수 있습니다.

React의 동시성은 앱이 더 복잡해지더라도 앱이 반응적이고 빠르게 유지할 수 있도록 도와줍니다. 이러한 기능을 사용하여 사용자 경험을 향상시키는 빠르고 부드러운 앱을 구축할 수 있습니다.

여기까지입니다! 항상 읽어주셔서 감사합니다. React에서의 동시성에 대해 더 많이 배우셨기를 바랍니다. 이번 포스트를 너무 길어지지 않도록 아직 다루지 않은 기능들이 더 있습니다.

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

당신의 의견과 피드백은 저에게 소중합니다! 만약 제안 사항, 수정 사항 또는 개선 사항이 있으시면 자유롭게 공유해 주세요.

더 부드러운 웹 사이트를 위한 리액트에서 동시성 이해하기 



안녕하세요 모두!

Theodo Apps(이전 BAM)의 Cyril과 Matthieu입니다👋, Seb 대신 React와 React Native 세계의 최신 소식을 전해드리고 있습니다.

아직 한주가 조용했지만 여전히 여러분에게 훌륭한 업데이트가 있습니다. Waku는 이제 React Server Actions를 지원하며, TanStack/Router 사용 팁도 있고, React가 완전한 스택 프레임워크가 되는 과정을 탐구합니다. 또한 React Native 0.75에서 무엇이 새로운지 확인해보세요! NitroModules와 react-native-webGPU에 대한 몇 가지 업데이트도 있습니다. 참여하시고 즐기세요!

파트너 컨퍼런스 React Advanced London (🇬🇧 런던 - 10월 25일 & 28일)도 확인해보세요. 우리는 선진 React 토크의 아이디어를 정말 좋아하고, 지금까지 라인업이 실망시키지 않았습니다!👌

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

💡 매주 이메일을 받으려면 공식 뉴스레터를 구독해보세요!

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

## 💸 후원사

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

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

React PR 리뷰가 컴포넌트 혼돈으로 변하고 있나요?

React PR 리뷰를 간략화하고 팀의 주요 코드 품질 측면에 초점을 맞출 전략을 발견하세요. 의존성 관리, 코드 조정 및 기타 사항을 포함하여 모든 PR을 검토하며, 팀이 아키텍처 결정, 컴포넌트 설계 및 성능 최적화에 집중할 수 있도록 합니다.

CodeRabbit은 다음을 지원합니다:

- Best Practice Enforcement: CodeRabbit의 공통 React 안티패턴을 식별하고 최상의 실천 방식을 제안하는 능력을 활용하여 우수한 코드 품질을 보장하세요.
- Component Structure Review: 구체적인 컴포넌트 구조 요약을 활용하여 더 나은 구성을 위한 제안을 받아보세요.
- Actionable Code Review Comments: 1-클릭 커밋 제안으로 PR에서 코드 수정을 수행하세요.

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

CodeRabbit은 모든 오픈 소스 저장소에 무료로 제공됩니다. 오늘 바로 시작해보세요!

## ⚛️ React

![React](/assets/img/2024-08-26-ThisWeekInReact197WakuEffectTanStackFramerMotionusePreactValtioAstroThreejsNitrogen_2.png)

Waku v0.21 - React Server Actions에 대한 완벽한 지원

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

리액트 서버 컴포넌트는 새로운 "리액트 프레임워크"의 새로운 파도를 일으켰어요. 조타이 (jotai, valtio의 창조자인 Daishi Kato가 만든 '와쿠(Waku)'도 그 중 하나에요. 이것은 Next.js 외부에서 서버 컴포넌트를 지원하는 최초의 프레임워크 중 하나였어요.

서버 액션을 추가하여, 와쿠에서는 이제 대부분의 리액트 19 기능을 지원하며 "API가 필요한 부분을 건너뛰고" 완전한 앱을 개발할 수 있어요.

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

리액트부터 이펙트까지

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

마이클 아르 날디(Michael Arnaldi)는 Effect의 창시자로, Effect와 React에서 사용하는 모델이 어떻게 유사한지 설명했습니다. Effect는 강력한 툴킷이지만 시작하기가 다소 어렵다는데, 마치 새로운 언어처럼요. 이미 익숙한 것들과 유사점을 찾아내는 것이 도움이 될 것입니다.

Effect에서 React와 마찬가지로 작성하는 대부분의 코드는 "청사진(blueprint)"입니다. 즉, 프로그램이 직접 실행되지 않고 무엇을 해야 하는지를 선언하는 것입니다. 그런 다음 라이브러리(React 또는 Effect)가 실행을 처리해줍니다.

- 💸 TutorialKit — 백엔드 인프라를 구축하거나 관리하지 않고 즉시 대화형 튜토리얼을 생성합니다.
- 🗓️ reactjsday - 🇮🇹 베로나 - 10월 25일 - "TWIR" 코드로 10% 할인 받기. A, B, C가 발표할 예정입니다!
- 🗓️ Squiggle Conf - 🇺🇸 보스턴 - 10월 3일 & 4일 - "TWIR" 코드로 10% 할인 받기. 스피커가 발표 되었으니 컨퍼런스 웹사이트에서 살펴보세요.
- 📜 TanStack/Router를 8개월간 사용하면서 쌓인 팁: Swizec Teller가 loader, suspense query 또는 query를 사용할 때 적용하는 원칙들을 공유합니다.
- 📜 React는 (되는 중인) 풀 스택 프레임워크: 서버 컴포넌트(Server Components)와 서버 액션(Server Actions)의 추가로
- 📜 React에서 상태 동기화하기: useEffect가 아닌 컴포넌트를 분리하는 것으로 클래식한 버그를 "올바른 방법으로" 해결하는 방법을 설명합니다.
- 📜 React와 Framer Motion을 사용하여 Swipe Actions 컴포넌트 만들기
- 📜 useStateObject: useState 주위에 간편한 API
- 📜 순차적 요청을 처리하는 React Hook 만들기 - AbortController 사용
- 📜 React에서 PDF 생성하기 - html2pdf.js, React PDF, 그리고 Puppeteer
- 📜 Preact - Preset Vite와 함께 사전 렌더링
- 📜 좋은 리팩토링 vs 나쁜 리팩토링
- 📜 Valtio의 탄생 과정
- 📦 Astro v4.14 - 콘텐츠 파일에서 인텔리센스 지원하는 실험적인 콘텐츠 레이어 API
- 📦 react-three/xr 6.2.0: 제한 없는 공간, 깊이 감지, 그리고 보조 입력 소스 추가
- 📦 react18-use: Daishi Kato가 만든 React 18에서 작동하는 React 19 use hook의 shim입니다. useMemo 내에서 use(Context) 호출 가능 (실험적)하며, React 팀이 구현할 계획인 컨텍스트 셀렉터(context selectors)에 대한 더 나은 대안
- 📦 Formity: JSON 구조로 복잡한 양식 정의, 패키지가 무거운 작업을 처리하도록 함
- 📦 rspack-plugin-react-refresh v1.0
- 🎙️ PodRocket - Malte Ubl과 함께 Generative UI와 React 컴포넌트
- 🎥 Jack Herrington - React Web Devs를 위한 Secret React-Native Hack! - 패키지를 수정하여 서버 컴포넌트와 호환되지 않는 종속성 수정하기

## 💸 스폰서

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


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

Storybook, Playwright 및 Cypress에 대한 시각적 테스트

레이아웃 오류와 UI의 끈적한 느림에 지친 적이 있나요? Chromatic의 시각적 테스트를 사용하여 자신감 있게 빌드할 수 있습니다. 기능적 테스트에서 놓치는 버그인데요, 이를 잡아내어 정렬 오류부터 잘못된 색상 및 Z-인덱스 문제까지 해결해줍니다.

별도의 테스트 케이스나 구성이 필요하지 않습니다. Chromatic은 기존의 Storybook, Playwright 또는 Cypress 설정에 연결하여 응용 프로그램 UI의 시각적 테스트를 활성화합니다. 모든 테스트는 Chromatic의 초고속 캡처 클라우드 인프라에서 지원되며 별도 비용 없이 병렬로 실행됩니다.


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

설정은 딱 2분이면 끝나요. 그리고 저희 기본 요금제에는 매월 5,000개의 무료 스냅샷이 포함돼 있어요. 오늘 바로 시작해보세요 »

## 📱 React-Native

React Native 0.75

이번 주에는 React Native 0.75가 릴리스되었는데, 핵심 팀은 생산 준비가 완료된 앱을 구축하기 위해 Expo와 같은 React Native 프레임워크를 사용하는 것을 강력히 권장했어요. 이러한 변화를 반영해, 핵심 React Native 패키지에서 /template 폴더가 제거되었고, 2024년 말까지 react-native init 명령어가 폐기될 예정이지만 둘 다 @react-native-community 패키지 내에서는 여전히 사용할 수 있어요. 이번 업데이트를 통해 성능이 향상되는 것뿐만 아니라 자동 연결 빌드 단계 중에 향상된 성능을 보여주고, 새 구조가 활성화되면 gap, columnGap, rowGap 및 translation 속성에 백분율 사용이 가능한 Yoga 3.1이 추가되었어요. 이러한 개선 사항을 통해 새 구조를 도입하는 것이 최신 기능 및 안정성 향상에 필수적임을 알 수 있어요.

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

## 🔀 기타

- 💸 리액트 네이티브 마스터리 - 리액트 네이티브 및 엑스포를 마스터하는 데 필요한 유일한 코스
- 👀 리액트 네이티브 0.76은 단일 병합된 동적 라이브러리 libreactnative.so로 출시됩니다. 이는 앱 크기와 시작 시간을 줄일 것입니다.
- 🐦 Nitrogen, NitroModules용의 새로운 코드 생성기: Marc가 Nitrogen이 스위프트 사양을 생성하고 Objective-C 및 C++ 코드를 건드리지 않고 구현할 수 있는 방법을 제시합니다 👏
- 🐦 리액트 네이티브웹용 타입이 DefinitelyTyped에 게시되었습니다.
- 🐦 리액트 네이티브-웹GPU 덕분에 RN에서 three.js 실행 가능
- 🐦 리액트 쓰리 파이버 컴포넌트로 구성된 expo-dom 데모
- 🗓️ 리액트 유니버스 컨퍼런스 - 🇵🇱 브로츠와프 - 9월 5-6일. "TWIR" 코드로 10% 할인 혜택 받으세요. 발표자: 에반 베이컨, 마크 로우사비, 츠베판 미코브, 오스카르 크와쉬니에프스키...
- 📜 리액트 네이티브 0.75가 엑스포 SDK 51로 함께 제공됩니다: SDK 52를 기다릴 필요 없이 버그 수정, 성능 향상, 새 아키텍처의 안정화를 낮은 업그레이드 비용으로 이용해보세요.
- 📜 Progressive Web Apps (PWA): 네이티브 모바일 앱으로 나아가는 한 가지 중간 단계: PWA와 네이티브 앱 간의 절충에 대한 최신 평가
- 📦 리액트 네이티브 키보드 컨트롤러 v1.13: 안드로이드 모달 및 리액트 네이티브 0.75를 지원합니다.
- 📦 Skip v1.0: 개발자가 Swift 및 SwiftUI로 네이티브 iOS 앱을 작성하고 동시에 네이티브 안드로이드 코드를 자동으로 생성할 수 있는 새로운 크로스플랫폼 프레임워크
- 📦 쇼핑카트 - Tophat은 이제 오픈소스로 공개되었습니다.
- 🎙️ RNR 304 - 사티지트 사후와 함께하는 리액트 내비게이션 V7 - 정적 API, 향상된 딥 링킹, 향상된 TypeScript 지원 등 리액트 내비게이션 7의 새로운 기능
- 🎥 Jolly Coding - 엑스포가 웹에서 네이티브로 마이그레이션을 더 쉽게 만들었습니다 - 엑스포 돔 데모

## 🤭 재미

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


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

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

See ya! 👋


React 새로운 기능  Waku, Effect, TanStack, Framer Motion, use() 정리



도와줄 부탁이에요. 제발요. 무릎을 꿇고 울면서 부탁하는데...

## CREATE-REACT-APP을 사용 중지해주세요

만약 전문을 전체 읽기 싫다면 간단히 설명할게요 (TL;DR):

- create-react-app은 2년 전부터 업데이트가 중단되었습니다.
- CRA가 의존하는 react-scripts가 2년 전부터 업데이트가 중단되었습니다.
- CRA는 현대적인 대안들에 비해 느립니다.
- webpack은 현대적인 대안들에 비해 매우 느립니다.

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

문제의 해결책은 무엇인가요? 한 마디로 말하면: Vite.

### 더 이상 업데이트되지 않음

마지막으로 create-react-app 패키지가 업데이트된 시기는 2022년 4월 12일 오후 1시 33분 EDT였습니다. 이 시점에서 작성 기준으로 이는 2년이 넘게 지난 것입니다. 몇 가지는 몇 년 동안 업데이트되지 않을 수 있지만, CRA 자체가 업데이트되지 않은 종속성을 많이 가지고 있고 취약점의 영향을 받았을 수 있다는 것을 이해하는 것이 중요합니다. npx create-react-app을 실행하면 다음과 같은 결과가 나옵니다:

8 가지 취약점 (2개 중간, 6개 높음)

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

Facebook/React 팀은 현재 의도적으로 어떤 종속성도 수정할 계획이 없습니다. 실제로 create-react-app이 더 이상 업데이트되지 않고 다른 도구를 권장하고 있음을 명확히 알 수 있습니다.

### React-Scripts

react-scripts는 CRA가 개발 서버를 실행하거나 npm run build로 빌드할 때 사용되는 실제 종속성입니다. CRA와 마찬가지로 마지막 업데이트는 2022년에 이루어졌으며 실제로 CRA의 마지막 업데이트 커밋과 동일한 것입니다. react-scripts는 여러 업데이트 및 패치가 이루어진 종속성을 가지고 있지만 물론 react-scripts 자체가 업데이트되지 않습니다.

### Webpack

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

저는 webpack을 비난하려는 것은 아니지만, 한 가지 말씀드리겠습니다: webpack은 Vite에 비해 느리다고 생각해요. 대체 제품인 Vite만큼 설정 가능하지 않습니다. 플러그인 생태계가 풍부해 보이더라도 이미 Vite이 제공하는 것에 그림자를 드리고 있다고 생각해요.

## 해결책: Vite

Vite(프랑스어로 "빠른"이란 뜻인 vit과 veet 사이로 발음합니다)는 create-react-app의 기능을 완전히 대체한다고 볼 수 있습니다. 핫 리로드 서버와 다양한 플러그인을 제공하여 완벽하게 설정 가능한 개발 환경을 제공합니다.

Vite은 설정할 수 있을 뿐만 아니라 빠르고 대부분의 프런트엔드 프레임워크를 지원합니다. 즉, React, Svelte, Solid, Vue, Lit, Quik, 그리고 Angular용 Vite 프로젝트를 생성할 수 있습니다. 더불어 tailwind, sass 등 빌더 종속성을 가진 vanillajs 애플리케이션도 만들 수 있습니다.

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

개인적인 일화를 하나 해볼까요? 이전 직장에서 Vite에 대해 처음 알게 되었을 때, react-scripts를 사용하는 프로젝트를 Vite로 전환하는 데 반이나를 할애했어요. 이 프로젝트는 상당히 거대했기 때문에 반나절이 걸렸죠. 저는 주니어 개발자였고, 이것에 대해 많이 모르고 있었거든요. 그래도 그게 가치 있을 거라고 믿었고 맞았어요! 파일을 저장하고 브라우저에서 핫 리로드를 기다리는 시간이 6분에서 1초 미만으로 급격히 줄었답니다. 네, 맞아요, "분"과 "초" 사이에 오타가 없어요. 초기 빌드 시간도 여전히 상당히 거대한 애플리케이션이지만 약 20초로 줄었어요.

그래서 "초당빛나게 빠른"이라고 말할 때 그 말이 실제로 맞는 거예요. 허풍이나 과장이 아니에요. 제가 반복해서 말할테니까 아직도 react-scripts를 사용하는 모든 프로젝트에서 다시 한 번 Vite로 전환할 거예요.

그럼, 설득되셨나요? 지금 바로 Vite로 시작해보세요.

## 어떻게 변환하는지

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

그래서 당신은 아마 코드에서 할 변경 사항이 많을지 궁금해 할 것 같아요, 그죠? 음... 사실은 그렇지 않아요. 사실 많은 변경 사항은 앱의 설정 및 루트 수준에서 발생해요.

CRA 앱을 Vite로 변환하는 것은 다음과 같아요:

- 새 폴더(기존 앱이 아닌)에서 npm create vite@latest 실행
- React를 프레임워크로 선택
- TS를 사용하는 경우 Javascript + SWC 또는 Typescript + SWC 선택 (TS를 사용하는 경우 SWC를 이용하면 더 빠르게 빌드할 수 있어요)
- 스카폴드 프로젝트 생성
- App.js와 index.js를 제외한 모든 컴포넌트 및 하위 폴더 복사
- main.jsx 및 App.jsx 수정하여 리액트-라우터, 컨텍스트 등의 구성을 다시 추가
- vite.config.js에 필요한 플러그인 추가
- 오류/이슈에 대한 조정

마지막 3단계가 당신의 대부분의 작업이 진행될 곳이에요. 기존 애플리케이션의 복잡성에 따라 올바른 플러그인과 구성을 찾는 데는 시간이 걸릴 수도 있고, 만날 수 있는 오류에 대해 조정하는 데 시간이 걸릴 수도 있어요. 그러나 최종적으로 다시 한 번 말씀드리지만 노력이 절대적으로 가치 있을 거에요.

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

## 도움이 필요하다면 어떻게 해야 할까요?

만약 이 글을 읽고 Vite로 전환하기로 결심했지만 문제나 오류를 다루어야 할까 봐 걱정이 된다면, Discord의 The Programmer's Hangout 채널인 #javascript에 함께 참여하도록 초대합니다. 저는 거기서 eslachance(보통은 Alterion으로 닉네임을 사용합니다)으로 활동하고 있으니 도움이 필요하면 언제든지 나를 불러주시고 이 dev.to 게시물을 언급해 주세요. 더 공식적인 Reactiflux 서버도 여러분의 지원을 기다리고 있습니다.

제가 없어도 TPH와 Reactiflux에는 여러분을 도와줄 수 있는 사람들이 많이 있습니다. 실제로 제가 직접 Vite로 전환하는 데 도움을 준 사람들도 많아요!

## 음모론적인 이론

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

드라마, 음모 이론, 그리고 불만에 관심이 없다면 여기서 멈추세요. 저는 토끼 굴 속으로 깊이 파고들 것이고, 여러분은 따라오라는 강요는 전혀 없어요 - Vite은 이미 멋지니까요, 이것이 여러분의 답이기 때문에 나머지에 대한 관심을 잃어도 괜찮아요 ;)

자주 스스로에게 묻는 질문은: React 팀이 Vite을 자세히 다룬 "심층 분석" 블록에 Vite 언급을 재발하게 했는지에 대해서에요. 왜 Vite을 언급하는 것이 무시된 느낌을 주는 걸까요? 다른 전체 스택 프레임워크와 함께 언급되는 것이 아닌, 대다수의 사람들이 읽지 않을 벽 글 끝에 중요하지 않은 주석으로만 느껴지나요?

내가 생각하는 것은 Vite과 Parcel을 언급하는 거에 의심스러운 '막대한 숨겨진 벽' 대신, 페이지 상단의 문단에 있었어야 했어. 
페이지는 create-react-app이 폐기되었음을 언급하고 (CRA에 대해 언급이 전혀 없다!) 프론트엔드 전용 프로젝트에 대한 직접 제안으로 Vite 사용을 알아야 했어야 했지.

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

하지만 문서에서 하는 일은 "Production-grade React framework"를 사용하라고 제안하며, 주요 및 처음으로 NextJS를 소개하는 것입니다.

여기가 음모가 시작되는 곳입니다. NextJS는 Vercel에서 만들었으며, NextJS와 특히 호환되는 호스팅을 제공합니다. NextJS는 호스팅할 수 없는데도 서비스에서만 사용 가능합니다. 문서에서 "지원을 위한 활성 커뮤니티가 있는 오픈 소스 모든 framework를 권장하며, 자체 서버 또는 호스팅 공급자에 배포할 수 있다"고 하지만, 호스팅 또는 서버가 이 작업을 수행하려면 nodejs가 실행되어야 한다는 것을 언급하지 않습니다.

그리고 Vercel은 대기업이며, 스스로를 React 생태계에 침투시키고 있습니다. Reddit 게시물 하나에서 언급한 것처럼:

- "React 팀은 현재 Vercel과 주로 협력하여 'React Server Components'와 같은 bleeding-edge React 기능을 '연구, 개발, 통합, 테스트'하고 있습니다. React 문서 웹사이트는 NextJS로 구축되어 있습니다."
- "Vercel은 React 코어 팀 멤버를 더 적극적으로 고용하고 후원하고 있습니다."

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

이제... 이것은 사실을 근거로 하지 않기 때문에 소금 조금 넣고 들으면 좋겠어요. (내가 직접 이에 대한 소스를 심각하게 찾지 못했기 때문에 이것이 사실을 단언하는 것이 아니라 음모론이라고 하는 것이죠). 하지만 Vercel이 React 팀에 얼마나 많은 돈을 투입했는지, 그 팀이 얼마나 많은 멤버를 빼앗아 갔는지, 그리고 React 문서와 팀 자체에 그것이 어떻게 영향을 미쳤는지에 대해 고민하게 만들어요. 직접적으로든, "내 동료가 여기서 일하다가 이제 Vercel에서 일하고 있는데 그들이 Next를 대단하다고 자꾸 말해"와 같은 접근으로든요.

이 주제에 대한 실제 정보가 있으면 개인적으로 연락 주시면 감사하겠어요. 조사 기자들처럼 약간의 조사를 하고 관련된 진짜 기사나 비디오를 작성하고 싶어요. 하지만 그 전까지는 이것이 공식적인 Facebook/React 팀 멤버가 Vite가 문서의 최상단에 나타나지 않은 이유를 설명해야 하는 것이 아닌 한 실제 사실이 아닌 음모론으로 남아있을 거에요.

그게 다예요, 친구들!

이제는 create-react-app 대신 이것을 쓰세요 제발



React Router은 React 애플리케이션에서 탐색을 다루는 데 꼭 필요한 라이브러리입니다. React Router v6에서 훅이 도입되면서 라우팅 관리가 더 직관적이고 강력해졌습니다. 이 블로그 포스트에서는 라우팅을 개선할 수 있는 다섯 가지 중요한 React Router 훅을 살펴보겠습니다.

## 1. useNavigate(): 프로그래밍 방식으로 탐색을 간편하게

useNavigate 훅은 애플리케이션에서 다른 경로로 프로그래밍 방식으로 탐색할 수 있는 함수를 제공합니다.

```js
import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    // "/about" 경로로 이동
    navigate('/about');
  };

  return <button onClick={handleClick}>About 페이지로 이동</button>;
}
```

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

이 훅은 사용자 조작이나 일부 작업을 완료한 후에 발생하는 탐색에 특히 유용합니다.

## 2. useLocation(): 현재 위치 정보에 액세스하기

useLocation은 응용 프로그램의 현재 URL 위치를 나타내는 객체를 반환합니다.

```js
import { useLocation } from 'react-router-dom';

function CurrentPath() {
  const location = useLocation();
  return <p>현재 경로는 {location.pathname}입니다.</p>;
}
```

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

이 hook은 현재 URL에 따라 결정되는 기능을 구현하는 데 매우 중요합니다.

## 3. useParams(): URL 매개변수 추출하기

useParams를 사용하면 라우트 경로에 정의된 URL 매개변수에 액세스할 수 있습니다.

```js
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { username } = useParams();
  return <p>{username}의 사용자 프로필</p>;
}

// 라우트 정의에서의 사용법:
// <Route path="/users/:username" element={<UserProfile />} />
```

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

이 훅은 동적 경로를 생성하고 URL 기반 데이터에 액세스하는 데 중요합니다.

## 4. useOutlet(): 동적 중첩 라우트 렌더링

useOutlet은 JSX에서 명시적으로 정의하지 않고 부모 구성 요소 내에서 자식 경로를 렌더링하는 방법을 제공합니다.

```js
import React from 'react';
import { useOutlet } from 'react-router-dom';

const ParentComponent = () => {
  const outlet = useOutlet();
  return (
    <div>
      <h1>부모 구성 요소</h1>
      {outlet}
    </div>
  );
};
```

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

이 훅은 `Outlet` 컴포넌트와 비교하여 중첩 경로를 처리하는 더 유연한 접근 방식을 제공합니다.

## 5. useRoutes(): JavaScript 객체 기반 라우팅

useRoutes를 사용하면 라우트를 JavaScript 객체로 정의하여 라우트 구성에 더 프로그래밍적인 접근 방식을 제공합니다.

```js
import React from 'react';
import { useRoutes } from 'react-router-dom';

const routes = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/users',
    element: <Users />,
    children: [
      { path: ':userid', element: <UserDetail /> }
    ]
  }
];

const App = () => {
  const routeElements = useRoutes(routes);
  return (
    <div>
      <h1>내 앱</h1>
      {routeElements}
    </div>
  );
};
```

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

이 방식은 복잡한 라우팅이 필요한 애플리케이션이나 동적으로 생성된 경로에 특히 유용할 수 있습니다.

## 결론

React Router 훅은 React 애플리케이션에서 네비게이션을 효과적이고 유연하게 관리하는 강력한 방법을 제공합니다. useNavigate, useLocation, useParams, useOutlet 및 useRoutes를 활용하여 보다 동적이고 효율적이며 유지보수 가능한 라우팅 로직을 구성할 수 있습니다.

더 복잡한 애플리케이션을 개발함에 따라 이러한 훅을 숙달하는 것이 점점 더 가치 있어질 것입니다. 이 훅을 활용하면 간단한 네비게이션에서 복잡한 중첩 경로까지 다양한 라우팅 시나리오를 처리할 수 있으면서도 코드를 깔끔하고 선언적으로 유지할 수 있습니다.

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

이 훅을 효과적으로 활용하는 핵심은 애플리케이션의 네비게이션 요구 사항을 이해하고 각 시나리오에 적합한 훅을 선택하는 것입니다. 즐거운 라우팅하세요!

Posts