

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

인터넷이 정말 어떻게 작동하는지 궁금했던 적이 있나요? 분명 서버와 그들의 클라이언트에 의해 구동되지만, 그게 정말 무슨 의미일까요? 어떤 기능이 어떤 기계에서 실행되는 프로그램을 서버로 만드는 걸까요?

시작하기 전에 한 가지 명심해야 할 것은, 수염을 치켜들어도 좋다는 거에요 (최대 50번 😱)

이 글에서는 Node.js를 사용하여 처음부터 최소한의 서버를 만들면서 서버가 정확히 어떻게 작동하는지 기초 개념을 살펴보겠습니다. 그 과정에서 서버가 클라이언트와 상호작용하는 핵심 개념과 인터넷이 그것을 어떻게 가능하게 하는지 분해해볼 거예요. 당신이 경험 많은 코더이든 가장 좋아하는 웹사이트 뒤의 기술에 궁금증을 품은 초보자이든, 이 안내서는 서버의 마법을 풀어내어 여러분이 직접 만들 수 있도록 안내해줄 거에요.

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

만약 node.js를 시작하는 방법을 모르시면 여기서 시작해보세요!

먼저 우리는 인터넷이 어떻게 작동하는지 알아보고, 네트워크 상의 컴퓨터들이 어떻게 통신하는지 살펴본 뒤, 서버가 무엇이며 클라이언트와 상호작용하는 방법에 대해 알아보고 나서, 우리만의 작은 서버를 작성해볼 것입니다.

# 인터넷 소개

웹 서버가 무엇인지 제대로 이해하기 위해서는 먼저 인터넷이 무엇인지에 대해 알아야 합니다. 네트워크가 무엇이며 네트워크 상의 컴퓨터들이 어떻게 통신하는지에 대한 기본적인 개념을 정의해야 합니다.

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

2006년 유명한 밈이 말하는 대로 "인터넷은 튜브들의 연속이야! 🎶"

그래요, 어떤 면에선. 인터넷은 네트워크 케이블을 통해 상호 연결된 컴퓨터로 구성되어 있어요. 처음에는 전화선, 그 다음은 이더넷, 마지막으로 광섬유까지 있죠. 그리고 다양한 무선 주파수 기술도 잊지 말아야 해요. 라디오가 오디오를 장치로 방송하는 방식처럼, 컴퓨터도 유사한 기술을 사용해 무선으로 통신하며, 비트를 공중을 통해 전송해요(WiFi, 4G 등을 생각해보세요).

이것이 "컴퓨터 네트워크"를 형성하는 것입니다: 컴퓨터들, 그들을 연결하는 케이블들, 그리고 일부는 무선 주파수를 통해 통신하기도 해요 📻 이것은 종종 물리층(physical layer)이라고 불려요.

이 물리층을 이루는 구성 요소들은 네트워크 프로토콜을 사용해서 통신해요. 인터넷은 특히 TCP/IP 프로토콜에 의존하며, 더 자세히 알아보자면 TCP - Transmission Control Protocol에만 초점을 맞출 거예요.

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

이제 "서버란 무엇인가?"에 초점을 맞출 수 있습니다. 네트워크 상의 모든 통신은 클라이언트-서버 통신으로 정의할 수 있습니다. 클라이언트는 무언가를 요청하고, 서버는 그 요청에 응답합니다. 이것의 가장 간단한 예는 지금 당신이 브라우저(클라이언트)를 통해 이 웹사이트를 읽기 위해 요청하는 것입니다. 당신의 요청은 일련의 튜브를 통해 특정 서버(컴퓨터)를 찾아 이 게시물을 포함한 웹사이트로 응답을 받았습니다.

인터넷 작동 방식에 대한 이 기본적인 이해를 가지고 있으면, 이제 프로그램을 서버로 만드는 데 필요한 기초가 갖추어졌습니다.

# 처음부터 서버 만들기!

인터넷에 연결되는 모든 컴퓨터는 드라이버와 프로토콜에 의존하여 들어오는 요청을 해석하고 네트워크의 다른 컴퓨터로 메시지를 보냅니다.

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

대부분의 프로그래밍 언어는 네트워크 통신용 내장 도구를 제공합니다. 이러한 도구들은 버퍼 관리, 데이터 스트림 처리, 포트 처리와 같은 기본적인 복잡성을 처리합니다. 네트워크 통신이 작동하는 중요한 측면이기는 하지만, 이 기사에서는 이러한 세부 사항에 대해서는 다루지 않겠습니다. 대신 최소한 서버를 구축하는 데 필요한 기본 사항에 초점을 맞추겠습니다.

# 단계 1: 기본 TCP 서버 만들기

Node.js에는 net이라는 내장 저수준 네트워킹 모듈이 함께 제공됩니다. 이는 TCP 연결을 설정하고 관리하기 위한 편리한 추상화입니다.

가장 간단한 구현부터 시작해 보겠습니다. createServer() 함수를 사용하여 두 개의 콜백인 "listening" 및 "connection"을 추가해 보겠습니다.

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

TCP 서버가 초기화를 완료하고 들어오는 TCP 연결을 활발히 수신할 때 듣기 기능이 활성화됩니다.

다음을 server.js 파일에 작성하세요.

```js
import net from 'net';

const PORT = process.env.PORT || 3000;
const server = net.createServer();

server.on("connection", (socket) => {
  console.log("client connected");
});

server.listen(PORT);

server.on("listening", () => {
  console.log(`server listening on port ${PORT}`);
});
```

그런 다음 터미널에서 node server.js를 실행하세요.

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

터미널에서 확인해보세요! 너무 멋져요 💅

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

이제 브라우저를 열고 요청을 보내면 어떻게 되는지 확인해봅시다. 주소창에 localhost:3000을 입력하세요.

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

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

이게 뭐에요! 방금 웹 서버를 작성했는데요? 😤

문제는 우리가 맨땅에 허리한 TCP 서버만 만들었다는 점이에요. 반면 브라우저는 HTTP 프로토콜을 기본으로 사용하죠. 우리 서버가 HTTP로 응답하지 않기 때문에 요청이 실패한 거예요. 하지만 걱정하지 마세요—HTTP는 TCP 기반으로 만들어졌기 때문에 멀지 않아요.

이제 터미널에서 확인해보면, 우리 서버가 방금 연결을 기록했으니 뭔가 진행 중인 것 같아요...👀

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

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

요런, 작고 귀여운 클라이언트-서버 통신이 나왔네요. 이 초기 연결은 서버와 클라이언트 사이에 이뤄지는 이른바 핸드셰이크입니다. 핸드셰이크는 통신이 어떻게 이루어질지에 대한 클라이언트와 서버 간의 합의입니다. 예를 들어 HTTP 클라이언트-서버 전송 프로토콜을 초기화할 때 이루어집니다.

저희는 여기서 핸드셰이크에 대해 다루지 않겠지만, 그에 대해 더 읽고 싶다면 언제든지 말씀해주세요!

# 단계 2: 서버용 클라이언트

브라우저를 서버의 클라이언트로 사용하는 대신, 동일한 net 패키지를 사용하여 클라이언트를 직접 작성할 수 있습니다. 이 패키지는 createConnection이라는 함수를 노출합니다. 그래서, 새 파일을 만들어 client.js라고 이름 짓도록 하죠.

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

그런 다음 이렇게 쓰시면 됩니다:

```js
import net from "net";

let socket = net.createConnection({ port: 3000 }, () => {
    console.log("서버에 연결되었습니다!");
});
```

지금까지 작성한 코드에 대한 링크는 아래와 같습니다.

그런 다음 새로운 터미널 창에서 `node client.js`를 실행합니다.

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


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

여기까지 왔어요... 기본 클라이언트와 서버가 TCP 네트워크 프로토콜을 통해 통신하고 있습니다. 이제 "와이어"를 통해 일부 데이터를 전송해보겠습니다. 작은 핑=퐁.

클라이언트에서는 소켓의 write 메서드를 사용하여 서버에 "Hello server 🎈" 메시지를 보내고 서버로부터 전송된 메시지를 기록합니다. 여기에 클라이언트.js 파일에 이미 있는 내용 이후에 추가할 내용입니다:

```js
socket.write("Hello server! 🎈", "utf8", (err) => {
  if (err) {
    console.error(err);
  }
});

socket.addListener("data", (msg) => {
  console.log(msg.toString());
});
```

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

그리고 이제 server.js 파일에 "connection" 콜백 내에 리스너를 추가하여 모든 메시지를 로그로 남기세요. 그런 다음 "Hello client! 🎉"로 응답하세요.

```js
socket.addListener("data", (msg) => 
    console.log(msg.toString());
    socket.write("Hello client! 🎉", "utf8");
});
```

이 단계에서 수행된 코드 변경 사항에 대한 링크

그런 다음 다시 실행해보세요:

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


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

와우, 우리가 지금까지 이룬 것에 대해 더 행복할 수 없습니다.

우리는 기본적인 TCP 클라이언트-서버 통신을 작성하는 데 성공했습니다. 당연히 다음 단계는 HTTP 마을입니다. 몇 줄의 코드로 가능해야합니다. 하이퍼텍스트 전송 프로토콜은 메시지가 구성되는 방식이 필요합니다. 이것이 브라우저를 열고 프로토콜을 "완수"하는 열쇠입니다. 그래서 우리의 작은 서버를 진정한 웹 서버로 변신시켜 브라우저와 HTTP 프로토콜을 사용하여 클라이언트와 상호 작용할 수 있는 능력을 갖추도록 합시다!

이를 달성하기 위해 우리는 server.js 파일을 조금 수정할 것입니다. 서버를 수정하여 수신된 HTTP 요청을 처리하고 간단한 HTTP 응답을 보내도록 변경할 것입니다.


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

# 단계 3: HTTP 타운

서버.js 파일의 내용을 다음 코드로 교체하세요:

```js
import net from "net";

const PORT = process.env.PORT || 3000;

const server = net.createServer((socket) => {
  console.log("클라이언트가 연결되었습니다"); // 수신된 데이터 처리 (HTTP 요청 처리)
  socket.on("data", (data) => {
    // 기본 HTTP 응답 보내기
    const httpResponse =
      "HTTP/1.1 200 OK\r\n" +
      "Content-Type: text/plain\r\n" +
      "Content-Length: 13\r\n" +
      "\r\n" +
      "안녕, 세상!";

    socket.write(httpResponse, "utf8", (err) => {
      console.error(err);
    });
    socket.end(); // 응답을 보낸 후 연결 종료
  });

  socket.on("end", () => {
    console.log("클라이언트가 연결을 해제했습니다");
  });
});

server.listen(PORT, () => {
  console.log(`프릭킹 HTTP 서버가 포트 ${PORT}에서 수신 대기 중입니다`);
});
```

server.js에 변경사항을 저장한 후, 다음 명령어로 서버를 다시 실행하세요:

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

```js
node server.js
```

브라우저에서 localhost:3000로 이동하면 이제 "Hello, world! 🎉" 텍스트가 표시됩니다.

이것은 당신의 서버가 연결을 수락하는 것뿐만 아니라 적절한 HTTP 메시지로 응답하는 것을 확인합니다. 이 주제에는 더 많은 내용이 있지만, 이것은 시작에 불과합니다. 우리 작은 서버에서 다룰 수 있는 몇 가지 다음 단계는 다음과 같습니다: 다중 연결 처리, HTTP 요청 구문 분석 및 다양한 방법 지원 (시도해 볼 수 있는 것). 계속해서 더 있습니다. 다음으로 무엇을 다룰지 알려주세요!

server.js에 적용된 최종 변경 사항 링크: [링크](링크)


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

# 계속해서 발전해 나가세요!

축하해요! 👏 이제 TCP 서버를 생성하고 HTTP 서버로 업그레이드하여 기술을 탐구하고 웹의 근본을 깊게 파고들었어요.

이를 이해하는 것은 웹과 서버 측 기술을 이해하는 좋은 기반을 제공해줘요. 이 내용이 도움이 되었기를 바라며, 추가 탐구를 위한 질문이나 아이디어가 있다면 망설이지 마시고 댓글을 남기시거나 연락해주세요!

초보 웹 개발자를 위한 간단한 서버 만들기



Angular 18이 방금 출시되었습니다. 다양한 새로운 기능, 성능 향상 및 개발자 경험 향상이 동반됩니다. 웹 애플리케이션을 구축하는 가장 인기 있는 프레임워크 중 하나로, Angular은 계속 발전하여 개발자에게 강력한 도구와 기능을 제공합니다. 이 기사에서는 Angular 18의 주요 업데이트와 프로젝트에서 이를 활용하는 방법에 대해 살펴보겠습니다.

## Angular 18 소개

Angular는 빠르고 확장 가능하며 유지 관리 가능한 웹 애플리케이션을 구축하기 위한 플랫폼입니다. 각 새로운 릴리스마다 Angular 팀은 최신 웹 개발 트렌드에 부합하고 프레임워크의 성능과 사용성을 향상시키는 기능을 도입합니다. Angular 18도 예외는 아니며, 개발을 더 원활하고 효율적으로 만드는 다양한 업데이트를 제공합니다.

## I. Angular 18의 주요 기능 및 개선 사항

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

# 1. Angular 18에서 Signal을 완벽히 포용한 고급 컴포넌트 API

Angular 18에서는 신호(signal)를 완벽하게 포용한 고급 컴포넌트 API를 소개합니다. 신호는 반응형 프로그래밍 개념으로, 응용 프로그램 내의 상태 관리와 데이터 흐름을 단순화하는 데 도움이 됩니다.

## 1.1. Signal이란 무엇인가요?

신호는 컴포넌트가 변경사항에 자동으로 반응할 수 있도록 하는 반응형 데이터 스트림입니다. 이를 통해 Angular 애플리케이션에서 데이터 흐름을 관리하기 쉽고, 복잡한 상태 관리 라이브러리가 필요 없어집니다.

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

1.2. 주요 이점:

- 상태 관리 및 데이터 처리를 간소화합니다.
- 전통적인 Angular 서비스와 관련된 보일러플레이트 코드를 줄입니다.
- 코드 가독성과 유지 관리성을 향상시킵니다.

2. 향상된 독립형 컴포넌트

Angular 17에서 소개된 독립형 컴포넌트 기능을 발전시킨 Angular 18은 더 많은 유연성과 모듈성을 제공하여 기능을 향상시킵니다.

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

## 2.1. 새로운 향상된 기능:

- 독립적인 지시문과 파이프를 지원하는 것이 개선되어, 진정한 모듈화 아키텍처를 가능하게 합니다.
- 독립 컴포넌트를 생성하기 위한 간소화된 API로, 새로운 프로젝트 및 기존 프로젝트에서 사용하고 채용하기가 더 쉬워졌습니다.

## 2.2. 혜택:

- NgModules를 관리하는 오버헤드를 줄입니다.
- 컴포넌트 재사용을 촉진하고 코드베이스를 간소화합니다.

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

3. 서버 사이드 렌더링(SSR)을 위한 개선된 하이드레이션

Angular 18에서는 서버 사이드 렌더링(SSR) 능력을 특히 하이드레이션 영역에서 주요하게 개선했습니다. 하이드레이션은 정적으로 서버에서 렌더링된 페이지를 완전히 대화형 싱글 페이지 애플리케이션(SPA)으로 변환하는 프로세스입니다.

3.1. 주요 개선 사항:

- 더 빠른 하이드레이션 시간으로, 느린 네트워크에서 더 나은 성능을 제공합니다.
- 줄어든 JavaScript 번들 크기로 로딩 시간과 사용자 경험을 향상시킵니다.
- 다양한 백엔드 프레임워크와 더 잘 호환되어 Angular를 다양한 서버 기술과 쉽게 통합할 수 있습니다.

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

4. Angular DevTools 업데이트

Angular 18에서 Angular DevTools가 상당한 업데이트를 받았습니다. 이를 통해 개발자들은 더 강력한 디버깅 및 프로파일링 도구를 이용할 수 있습니다.

4.1. 새로운 기능:

- 컴포넌트 트리 시각화가 개선되어 컴포넌트를 쉽게 탐색하고 검사할 수 있습니다.
- 응용 프로그램의 병목 현상을 식별하고 수정하는 데 도움이 되는 성능 프로파일링 도구가 개선되었습니다.
- 인기 있는 브라우저와 더 잘 통합되었으며, 새로운 디버깅 바로 가기 키와 도구를 제공합니다.

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

4.2. TypeScript 5.2+ 호환성

Angular 18에는 TypeScript 5.2 이상의 완전한 지원이 포함되어 있어 개발자들이 최신 TypeScript 기능과 개선 사항을 활용할 수 있습니다.

* TypeScript 5.2에서 무엇이 새로운가요?

- 향상된 유형 추론 및 오류 처리.
- 코드 안전성을 향상시키고 오류를 줄이는 새로운 유틸리티 유형 및 고급 유형 기능.
- TypeScript 컴파일러의 성능 향상.

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

4.3. 성능 향상 및 작은 번들 크기

Angular 18은 더 나은 성능과 작은 번들 크기를 위해 최적화되어, 더 빠른 로드 시간과 향상된 사용자 경험을 보장합니다.

*주요 성능 향상:

- 구성 요소를 렌더링하는 데 걸리는 시간을 줄이는 최적화된 렌더링 엔진.
- Tree-shaking 및 개선된 죽은 코드 제거를 통해 달성한 작은 기본 번들 크기.
- 개발 피드백 루프를 줄이는 더 빠른 빌드 시간.

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

## II. Angular 18로 업그레이드하기

Angular 18로 업그레이드하는 것은 간단하게 설계되었으며, Angular 팀에서 제공하는 도구와 안내를 통해 원활하게 전환할 수 있도록 도와줍니다.

업그레이드 단계:

- Angular CLI 업데이트: 먼저 npm install -g @angular/cli@latest를 사용하여 Angular CLI를 최신 버전으로 업데이트하세요.
- 업데이트 명령 실행: Angular CLI를 사용하여 프로젝트를 업데이트하세요: ng update @angular/core @angular/cli.
- 파괴적인 변경 사항 확인: Angular 업데이트 가이드를 검토하여 응용 프로그램에 영향을 미칠 수있는 파괴적인 변경 사항을 식별하세요.
- 철저히 테스트: 업그레이드 후 응용 프로그램을 철저히 테스트하여 발견된 문제를 식별하고 해결하세요.

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

## III. Angular 18에 대한 최상의 모범 사례

Angular 18의 혜택을 극대화하기 위해 다음과 같은 최상의 모범 사례를 고려해보세요:

- 고급 컴포넌트 API 채택: 신호 및 고급 컴포넌트 API를 활용하여 상태 관리를 간소화하고 데이터 처리를 개선하세요.
- 독립형 컴포넌트 사용: 응용 프로그램 내에서 복잡성을 줄이고 모듈성을 향상시키기 위해 독립형 컴포넌트를 채택하세요.
- SSR 향상 기능 활용: 향상된 하이드레이션 및 SSR 기능을 활용하여 성능과 SEO를 향상시키세요.
- TypeScript로 최신 상태 유지: 최신 기능과 개선사항을 활용하기 위해 정기적으로 TypeScript를 업데이트하세요.

## 결론

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

Angular 18은 프레임워크 기능을 향상시키며, 현대 웹 애플리케이션을 구축하는 강력한 도구로 만들어졌어요. 고급 시그널, 향상된 독립 구성 요소, 개선된 서버 사이드 렌더링(SSR), 업데이트된 TypeScript 지원과 같은 새로운 기능으로 Angular 18은 모든 개발자에게 무언가를 제공합니다. 새 프로젝트를 만들거나 기존 프로젝트를 업그레이드하든, Angular 18은 성공을 돕기 위한 도구와 기능을 제공해요.

Angular 18을 탐험할 준비가 되셨나요? 프로젝트를 업그레이드하여 이 흥미로운 새로운 기능을 활용하기 시작하세요!

Angular 18에 추가된 새로운 기능 정리



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

폼은 웹 애플리케이션의 기본 요소로 사용자 입력을 수집하는 주요 방법으로 기능합니다. Angular에서는 강력한 폼 처리 기술을 통해 폼 작업을 간편하고 효율적으로 처리할 수 있습니다. 이 문서에서는 Angular 폼의 기본 사항 및 다음 프로젝트에 고려할 가치가 있는 이유에 대해 소개합니다.

## Angular에서의 폼 유형

Angular는 템플릿 기반 및 반응형 폼 두 가지 접근 방식을 제공하여 폼을 처리합니다.

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

- Template-Driven Forms:

- 개요: 템플릿 기반 폼은 간단하게 설정할 수 있으며 일반적으로 간단한 폼에 사용됩니다. HTML 템플릿에서 Angular의 디렉티브에 크게 의존합니다.
- 사용 사례: 선언적인 방식으로 유지하고 싶은 작은 ~ 중간 규모의 폼에 이상적입니다.
- 예시:

```js
<form #form="ngForm">
<input name="username" ngModel required>
<button type="submit" [disabled]="form.invalid">제출</button>
</form>
```

- 주요 기능: ngModel을 통한 자동 양방향 데이터 바인딩.

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

## 2. 반응형 폼:

- 개요: 반응형 폼은 명시적 모델을 사용하여 양식 데이터를 관리하여 더 많은 제어와 유연성을 제공합니다. 이 접근 방식은 동적 유효성을 갖는 복잡한 양식에 적합합니다.
- 사용 사례: 대형 양식, 복잡한 유효성 로직이 있는 양식 또는 양식 동작을 정확하게 제어해야 할 때 가장 적합합니다.
- 예시:

```js
form = this.fb.group({   
username: ['', Validators.required],   
email: ['', [Validators.required, Validators.email]] 
});
```

```js
<form [formGroup]="form">   
<input formControlName="username">   
<input formControlName="email">   
<button type="submit" [disabled]="form.invalid">제출</button> 
</form>
```

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

- 주요 기능: 폼 상태 및 유효성에 대한 세밀한 제어.

### 3. 폼 유효성 검사

유효성 검사는 데이터 무결성을 보장하고 부드러운 사용자 경험을 위해 중요합니다. Angular 폼은 내장 유효성 검사기(예: required, minLength, pattern)와 사용자 정의 유효성 검사기를 생성할 수 있는 기능을 모두 제공합니다. 반응형 폼을 사용하면 서버 응답을 통해 실시간으로 데이터를 확인하는 비동기적인 유효성 검사도 적용할 수 있습니다.

### 왜 Angular를 폼으로 선택해야 하는가?

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

- 사용 편의성: Angular의 폼 처리는 간단한 혹은 복잡한 폼을 다루더라도 직관적입니다.
- 유효성 검사: 사용자 정의 규칙을 지원하는 내장 유효성 검사는 강력한 데이터 입력 확인을 제공합니다.
- 모듈화: 재사용 가능한 폼 구성 요소를 만들 수 있는 능력은 개발을 가속화하고 중복을 줄입니다.
- 확장성: 작은 로그인 폼이든 복잡한 다단계 위저드이든, Angular는 쉽게 처리할 수 있습니다.

## 결론

Angular의 폼은 사용자 입력을 수집하는 방법 이상으로, 데이터 입력, 유효성 검사 및 사용자 상호 작용을 포함한 종합적인 해결책입니다. 적절한 접근 방식을 선택함으로써 - 템플릿 기반 또는 반응형 - 폼을 쉽게 구축하고 유지할 수 있으며 사용자에게 매끄러운 경험을 제공할 수 있습니다.

더 많은 기술 관련 콘텐츠를 위해 팔로우해주세요 : )

앵귤러에서 폼 다루는 방법




![Front-end Frameworks in 2024](/assets/img/2024-08-26-TheHottestFront-EndFrameworksin2024TransformYourWebDevelopmentGame_0.png)

웹 개발자로서 최신 트렌드를 따라가는 것은 기술을 발전시키고 프로젝트를 혁신적으로 유지하는 데 중요합니다. 2024년, 프론트엔드 랜드스케이프는 여전히 다이내믹하며, 새로운 프레임워크가 반응성이 뛰어나고 사용자 친화적인 인터페이스를 구축하는 혁신적인 방법을 제공하고 있습니다. 경험 많은 개발자이든 초보이든, 이러한 프레임워크를 이해하는 것은 개발 프로세스를 크게 향상시킬 수 있습니다. 함께 웹 개발을 재정립하는 2024년의 최고의 프론트엔드 프레임워크를 살펴보겠습니다.

# 1. React

리액트는 강력한 컴포넌트 기반 아키텍처와 활발한 커뮤니티로 프론트엔드 생태계를 지배하고 있습니다. Facebook에서 개발된 리액트는 가상 DOM, 효율적인 업데이트 및 다양한 타사 도구 라이브러리를 통해 많은 개발자에게 필수적인 선택지가 되어 있습니다.


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

주요 기능:

- JSX: 자바스크립트 내에서 HTML을 허용하는 구문 확장.
- 컴포넌트 기반 아키텍처: 빠른 개발을 위해 재사용 가능하고 격리된 컴포넌트.
- React Hooks: 클래스를 작성하지 않고도 상태 및 다른 React 기능을 사용할 수 있는 함수.
- 풍부한 생태계: 서버 측 렌더링을 위한 Next.js 및 모바일 개발을 위한 React Native와 같은 도구.

2024년에 React를 사용해야 하는 이유? React의 유연성과 방대한 생태계는 간단한 웹사이트부터 복잡한 대규모 응용 프로그램까지 구축하기에 이상적입니다. 활발한 커뮤니티는 지속적인 업데이트, 자습서 및 제3자 통합을 제공하여 2024년에도 관련성을 유지합니다.

# 2. Angular

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

안녕하세요! Angular은 구글에서 지원하는 강력한 선택지로 남아 있습니다. 기업급 애플리케이션을 구축하는 데 탁월한 도구입니다. 라우팅, 상태 관리, 그리고 폼 유효성 검사를 비롯한 모든 기능들을 제공하는 풀 특징의 프레임워크입니다. Angular는 강력한 TypeScript 통합을 통해 타입 안전성을 보장하여 대규모 프로젝트를 보다 효과적으로 관리할 수 있게 해줍니다.

주요 기능:

- 양방향 데이터 바인딩: 모델과 뷰 간의 자동 동기화 기능.
- 의존성 주입: 코드 모듈화와 유지 관리에 도움이 되는 설계 패턴.
- RxJS: Observable 스트림을 이용한 반응형 프로그래밍.
- CLI (Command Line Interface): Angular 애플리케이션을 설계, 빌드, 테스트하는 강력한 도구.

2024년에 Angular를 사용하는 이유: 복잡한 비즈니스 로직을 갖춘 대규모 애플리케이션에 대해 Angular는 유지보수성과 확장성을 보장하는 구조화된 환경을 제공합니다. Angular 15의 최신 업데이트로 프레임워크가 더욱 효율적이고 개발자 친화적이 되었습니다.

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

# 3. Vue.js

안녕하세요! Vue.js는 간편함과 유연성으로 계속 주목을 받고 있어요. 점진적인 프레임워크인 Vue.js는 점차적으로 도입할 수 있어요. Vue는 Angular의 전체적인 특성과 React의 유연성 사이에서 균형을 제공하여 작은 프로젝트부터 대규모 프로젝트까지 매력적인 옵션으로 자리 잡았어요.

주요 기능:

- 반응성 시스템: 데이터 모델이 변경될 때 DOM을 자동으로 업데이트해요.
- 단일 파일 컴포넌트: HTML, CSS, JavaScript를 한 파일에 캡슐화할 수 있어요.
- Vue Router & Vuex: 라우팅과 상태 관리를 위한 통합 도구.
- Vue CLI: 프로젝트를 빠르게 시작하고 빌드하고 테스트할 수 있는 명령줄 도구예요.

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

2024년에 왜 Vue.js를 사용해야 할까요? Vue.js는 힘을 희생하지 않는 가벼우면서 유연한 프레임워크를 원하는 개발자들에게 완벽합니다. 학습 곡선이 완만하여 초보자들에게 접근하기 쉽지만 복잡한 애플리케이션에도 충분히 강력합니다.

# 4. Svelte

Svelte는 프론트엔드 개발에 대한 혁신적인 접근 방식으로 주목받고 있습니다. 전통적인 프레임워크와는 달리, Svelte는 브라우저에서 작업을 빌드 프로세스로 옮겨 더 작고 빠른 애플리케이션을 만듭니다. 이것은 라이브러리나 프레임워크가 아니라 컴파일러로, 컴포넌트를 매우 효율적인 명령형 코드로 변환해 줍니다.

주요 기능:

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

- 가상 DOM이 없습니다: Svelte는 DOM을 수술적으로 업데이트하여 성능을 높입니다.
- 반응적 문장: 변수가 변경될 때 자동으로 다시 계산하고 DOM을 업데이트합니다.
- 내장 상태 관리: Redux 또는 Vuex와 같은 외부 라이브러리가 필요하지 않습니다.
- 가벼운 출력물: 빠른로드 시간을 위한 작은 번들 크기.

2024년에 왜 Svelte를 사용해야합니까? Svelte는 성능과 간단함에 중점을 둔 프론트엔드 개발 방식을 제공하여 사전 개발자들이 더 적은 코드로 더 많은 것을 달성하는 데 이상적입니다. Svelte 주변의 생태계가 성장함에 따라 2024년 이후로 강력한 선택지로 자리잡고 있습니다.

# 5. Solid.js

Solid.js는 프론트엔드 프레임워크 공간에서 또 다른 점점 떠오르는 스타입니다. React의 반응성과 간단함을 제공하면서 Svelte와 유사한 성능 이점을 가지고 있습니다. Solid의 독특한 접근 방식은 미세한 반응성과 컴파일 시간 최적화 전략을 포함하여 극도로 효율적입니다.

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

주요 기능:

- 섬세한 반응성: 가상 DOM이 필요하지 않고 정확한 업데이트.
- JSX 구문: React 개발자에게 익숙하며 전환이 더 원활해집니다.
- 작은 번들 크기: 더 빠른로드 시간을 위해 최소화된 코드.
- 우수한 성능: 많은 전통적인 프레임워크보다 벤치마크에서 우위를 차지합니다.

2024년에 Solid.js를 사용해야 하는 이유는 무엇일까요? 개발자들이 개발 경험을 희생하지 않고 이미면의 성능을 찾는 경우, Solid.js는 매력적인 선택지입니다. 반응성 코어와 소형 런타임으로 고성능 웹 애플리케이션에 완벽합니다.

2024년은 프론트엔드 개발자들에게 기쁨으로 가득한 해입니다. 성능, 간결함 및 개발 경험의 경계를 넓히는 프레임워크들이 등장하고 있습니다. Svelte 또는 Solid.js와 같이 고성능 애플리케이션을 구축하거나, Angular나 React의 유연성이 필요한 경우, 여러분의 요구에 맞게 맞춤화된 프레임워크가 있습니다. 이러한 도구들을 최신 상태로 유지하는 것은 다재다능한 개발자로 만들 뿐만 아니라 최신 기술의 웹 응용 프로그램을 만드는 데 도움이 될 것입니다.

웹 개발 실력을 올리기 위한 프론트엔드 프레임워크 



과거(2023년)에 @Input을 통해 객체를 전달할 때 컴포넌트 내부에서 조심해야 했던 것이 기억나시나요? 자식 컴포넌트 내에서 @Input을 변형하는 것은 좋지 않은 습관입니다. 왜냐하면 부모와 자식 간의 예상된 통신 채널 외부에서 발생하기 때문에 디버깅이 더 어려워집니다. 틀린 방향으로 가면(그리고 그럴 확률이 높습니다) 문제가 복잡해집니다.

안타깝게도 추가적인 주의를 기울이지 않고도 이러한 습관에 빠지기 쉬웠습니다. 하지만 요즘에는 입력 신호가 읽기 전용이기 때문에 입력 객체를 수정할 수 없게 되었습니다. 그러니 문제가 해결됐나요? 대부분은 그렇지만 조금의 부주의함으로 여전히 문제가 생길 수 있고 그 영향이 더 커질 수도 있습니다. 제가 설명해드릴게요.

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

# "옛 방식":

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

```js
@Component({
  ...
  template: `
    <h1>입력 버전</h1>
    <app-old-input-way [objectInput]="parentObject"></app-old-input-way>

    <hr class="solid">

    <p> 부모 오브젝트 </p>
    { parentObject | json }
  `,
})
export class App {
  parentObject: ObjectInput = {
    name: 'parent',
    value: 0,
    props: { id: 'id1' },
  };
}

@Component({
  ...
  template: `
      { extendedObject | json }
      <button (click)='onSomeAction()'>액션!</button>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OldInputWayComponent {
  private _objectInput: ObjectInput | undefined;
  @Input()
  set objectInput(objectInput: ObjectInput) {
    this._objectInput = objectInput;
    this.extendedObject = { ...objectInput };
    this.extendedObject.props.enabled = true;
  }

  get objectInput(): ObjectInput | undefined {
    return this._objectInput;
  }

  extendedObject: ExtendedObjectInput | undefined;

  onSomeAction() {
    this._objectInput!.value++;
  }
}
```

간단한 설정으로, 부모 구성 요소가 있는데 그 구성 요소에는 자식 구성 요소에 대한 입력으로 사용되는 객체가 있습니다. 자식 구성 요소 자체는 그 동일한 객체의 장식된 버전이 필요하지만 내부 작업에만 사용됩니다 (어떤 이유에서든, 가장 흔한 이유는 레거시일 때 😆). 여기서 유일한 차이점은 부모의 props에 있는 enabled입니다. 이 모든 것이 좋은 설계는 아니지만, 작은 부주의로 상황이 얼마나 나빠질 수 있는지 보여주는 것이 목적입니다. enabled는 부모에 나타나며, 값 변경은 부모에만 영향을 줍니다.

여기서 올바른 방법 중 하나는 (동일한 객체의 확장 버전이 실제로 필요한 경우) 프라이빗 변수에 할당할 때 입력 객체를 깊은 복사하는 것입니다. 프라이빗 변수가 변경될 때 부모에게 변경 사항을 알리기 위해 @Output을 호출하는 것도 중요합니다. 등가성 확인을 사용하여 순환 설정을 피하는 것을 잊지 마세요.


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

```js
export class OldInputWayComponent {
  private _objectInput: ObjectInput | undefined;
  @Input()
  set objectInput(objectInput: ObjectInput) {
    if(isEqual(objectInput, this._objectInput) {
      return;
    }
    this._objectInput = cloneDeep(objectInput);
    this.extendedObject = { ...this._objectInput };
    this.extendedObject.props.enabled = true;
  }

  get objectInput(): ObjectInput | undefined {
    return this._objectInput;
  }

  @Output() objectChange = new EventEmitter<ObjectInput>()

  extendedObject: ExtendedObjectInput | undefined;

  onSomeAction() {
    this.extendedObject.value++;
    const newObj = { ...this.extendedObject, props: { id: this.extendedObject.id } };
    this.objectChange(newObj);
  }
}
```

이것은 매우 정제되지 않은 구현 방법이며, 사고의 철학의 청사진일 뿐이며 컴파일되지 않습니다. 그대로 복사하지 마세요. 좋은 설계를 복사하고 싶다면 모델과 뷰 모델이 분리된 ngModel의 구현을 확인해보세요.

# 신호로:

신호 입력은 읽기 전용이며, 어떻게 그것을 엉망으로 만들 수 있을까요? 내 라떼 아보카도를 가져다주세요:


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

```js
export class SignalInputWayComponent {
  objectInput = input.required<ObjectInput>(); // <-- 신호 입력

  extendedObject = computed<ExtendedObjectInput>(() => {
    const base: ExtendedObjectInput = this.objectInput();
    base.props.enabled = this.enabled();
    return base;
  });

  private enabled = signal<boolean>(true); // <-- 확장 부분

  onSomeAction() {
    const obj = this.objectInput();
    obj.value++;
  }
}
```

첫눈에 보면 어느 정도 꼬일 수 있을 것 같지만, 다행히 그리 많은 노력이 필요하지는 않다는 것이 보입니다. 우리가 원래 한 것은 원본에서 확장된 객체를 생성하고 그것을 자식 컴포넌트에서 어떻게든 사용하는 것이었습니다. 속성 값을 가져오거나 설정하며 작업하는 것이 여기에서는 작동하지 않습니다. 확장 된 객체를 업데이트하기 위해 계산된 신호가 필요하며, 계산된 신호는 직접 업데이트 할 수 없기 때문에 확장 부분에 대한 신호가 필요합니다. 보통 확장 신호를 사용하여 확장된 객체를 설정하고 필요한 사람에게 전달합니다.

문제점: base를 통해, extendedObject는 다시 부모 객체에 대한 참조를 보유합니다. 그리고 마지막으로 onSomeAction, 이것이 무엇을 하는지 살펴봅시다:


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

부모 객체에 확장을 추가했으며 두 신호의 값도 수정했습니다(다시 말하지만, 읽기 전용입니다).

아무 규칙을 지키지 않고, 2개의 잘못된 해결책을 결합해봅시다(그리고 무엇이 잘못될 수 있는지 빠르게 확인해봅시다).

![image](https://miro.medium.com/v2/resize:fit:1104/1*9_ADYT6VVXGKCQbbRcPHiA.gif)

```javascript
export class SignalInputWayComponentFixed {
  objectInput = input.required<ObjectInput>();
  change = output<ObjectInput>();

  extendedObject = computed<ExtendedObjectInput>(() => {
    const base: ExtendedObjectInput = _.cloneDeep(this.objectInput()); // 이것은 비용이 많이 들 수 있으므로 모든 사용 사례에 권장하지 않습니다
    return {
      ...base, // 기본 obj > 확장 obj, 확장 부분을 제외하고
      props: _.merge(this._extendedObject().props, base.props), 
    };
  });

  private _extendedObject = signal<ExtendedObjectInput>({
    name: '',
    value: 0,
    props: { id: '', enabled: false },
  });

  onSomeAction() {
    this._extendedObject.update((obj) => {
      obj.props.enabled = !obj.props.enabled;
      obj.value++;
      return obj;
    });
    const newExtendedObj = this._extendedObject();
    this.change.emit({
      ...this.objectInput(),
      value: newExtendedObj.value,
    });
  }
}
```

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

# 요약

가능하다면 이러한 종류의 객체 확장을 피하십시오. 불가피한 경우 내부 상태와 외부 상태를 최대한 분리하고 항상 비확장 부분에 대한 입력으로 제공되는 외부 상태에 우선권을 부여하십시오.

어떻게 아름답게 작동하는지 보세요 🙂

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

Angular 시그널로 object inputs이 여전히 별로인 이유



앵귤러에서 보간(Interpolation)은 컴포넌트 클래스에서 템플릿 뷰로 데이터를 바인딩하는 방법입니다. 이를 사용하면 HTML에 문자열, 표현식 또는 변수 값과 같은 동적 콘텐츠를 직접 삽입할 수 있습니다.

앵귤러의 보간 유형

- 문자열 보간
- 프로퍼티 보간
- 속성 보간

1. 문자열 보간

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

문자열 보간법은 Angular에서 가장 일반적인 보간법의 형태입니다. 이를 통해 이중 중괄호('') 안에 식을 포함하여 HTML에 동적 콘텐츠를 직접 삽입할 수 있습니다.

- 구문: '' 식 ''
- 예시:

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

설명:

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

테이블 태그를 마크다운 형식으로 변경해주세요.

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

마크다운 형식으로 테이블 태그를 변경해주세요.

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

속성 보간(interpolation)은 속성 보간과 유사하지만 HTML 속성(예: id, class, name 등)에 데이터를 바인딩할 때 특히 사용됩니다. 이는 attr. 접두사와 문자열 보간의 조합을 사용하여 수행됩니다.

- 구문: [attr.attributeName]=”표현식”
- 예시:

```html
<img src="/assets/img/2024-08-26-WhatisAngularInterpolationTypesSyntaxUsesandPracticalExamples_2.png" />
```

설명:

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

- [attr.id]=”dynamicId”은 구성 요소의 dynamicId 속성을 `div` 요소의 id 속성에 바인딩합니다.
- [attr.class]=”dynamicClass”는 dynamicClass 속성을 `div` 요소의 클래스 속성에 바인딩합니다.

요약

- 문자열 보간: HTML 내부의 텍스트와 간단한 표현식을 '' ''를 사용하여 바인딩하는 데 사용됩니다.
- 속성 보간: [ ]를 사용하여 데이터를 DOM 속성에 직접 바인딩하는 데 사용됩니다.
- 속성 보간: [attr.attributeName]을 사용하여 데이터를 HTML 속성에 바인딩하는 데 사용됩니다.

이러한 보간 유형을 사용하면 Angular 애플리케이션에서 동적 콘텐츠 생성이 가능하며, 템플릿이 기본 데이터의 변경에 반응하여 더 인터랙티브하고 반응형되도록 할 수 있습니다.

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

왜 보간법(interpolation)을 사용해야 하나요?

- 동적 데이터 바인딩: 보간법은 사용자 입력, API 응답 또는 실행 시간에 계산된 다른 데이터와 같은 동적 데이터를 템플릿에 표시할 수 있게 합니다.
- 간편함: 직관적이고 사용이 쉽기 때문에, 변수를 템플릿에 렌더링하는 데 자주 사용되는 방법입니다.
- 가독성: 보간법을 사용하면 HTML에 동적 콘텐츠가 삽입되는 위치를 명확하게 표시하여 코드를 더 읽기 쉽게 만듭니다.

보간법에 대한 중요한 포인트:

- 보안: Angular는 보간식에 포함된 HTML을 자동으로 이스케이프하여 사이트간 스크립팅(XSS) 공격을 방지합니다. 따라서 ' `<h1>Test</h1>` '와 같은 것이 있다면 이는 문자열로 렌더링되고 HTML로 렌더링되지 않습니다.
- 표현식 평가: 보간법은 간단한 표현식만을 평가할 수 있으며 복잡한 논리나 부작용이 있는 함수 호출은 평가할 수 없습니다.
- 양방향 바인딩 불가: 보간법은 컴포넌트에서 뷰로의 단방향 데이터 바인딩만 제공합니다. 양방향 데이터 바인딩을 원한다면 Angular의 `[(ngModel)]` 지시문을 사용해야 합니다.

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

보간법을 사용하는 시기는?

- 템플릿에 동적 콘텐츠를 삽입해야 할 때
- 템플릿에서 간단한 연산이나 메소드 호출을 수행해야 할 때
- 컴포넌트에서 계산된 값이나 데이터를 표시해야 할 때

보간법은 Angular에서 템플릿에서 동적 콘텐츠를 렌더링하는 데 필수적인 기능입니다. 컴포넌트 클래스에서 HTML 뷰로 데이터를 바인딩하는 과정을 단순화하여 애플리케이션을 인터랙티브하고 동적으로 만듭니다.

요약:

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

할 수 있는 것:

- 컴포넌트 속성에서 데이터를 표시함.
- 메서드를 호출하고 반환 값을 표시함.
- 간단한 표현식을 계산함.
- 문자열을 연결함.
- Angular 파이프를 사용하여 서식을 지정함.
- 간단한 요소 속성에 바인딩함.

할 수 없는 것:

- 양방향 데이터 바인딩.
- 이벤트 바인딩.
- 부수 효과를 가진 복잡한 논리 또는 작업.
- 문자열이 아닌 속성에 직접 바인딩.
- 여러 줄의 템플릿.
- 피하고 비이스케이핑된 HTML 콘텐츠에 직접 바인딩.

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

Angular에서 보간을 효과적으로 사용하기 위해 이러한 기능과 한계를 이해하는 것이 중요합니다. 이를 통해 다양한 바인딩 시나리오에 맞는 올바른 도구를 사용할 수 있습니다.

앵귤러 보간법 종류, 문법, 활용 및 예시 코드



## 단계별 안내

대규모 React 애플리케이션을 만들 때 상태를 관리하는 것은 쉽지 않을 수 있습니다. 애플리케이션이 커질수록 상태의 복잡성도 증가합니다. 그럴 때 Redux가 필요한데요, Redux는 애플리케이션의 상태를 보다 조직적이고 확장 가능한 방식으로 관리할 수 있는 예측 가능한 상태 컨테이너를 제공합니다. 하지만 대규모 코드베이스를 다룰 때는 Redux조차 복잡해질 수 있습니다. 이때 Redux Toolkit이 등장하는데요, Redux로 상태를 관리하는 프로세스를 단순화하고 최적화하기 위해 설계된 일련의 도구 및 모범 사례를 제공합니다.

이 블로그에서는 Redux Toolkit이 대규모 React 애플리케이션에서 복잡한 상태를 관리하는 데 어떻게 도움이 되는지 자세히 살펴볼 것입니다. Redux Toolkit이 무엇인지, 사용해야 하는 이유, 공통 Redux 작업을 어떻게 간편화하는지를 다룰 것입니다. 마지막에는 Redux Toolkit을 활용하여 상태 관리를 더 효율적이고 유지보수 가능하게 하는 방법에 대해 확고한 이해를 갖게 될 것입니다.

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

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

## 레덕스 툴킷이란?

레덕스 툴킷은 레덕스 로직을 작성하는 공식적이고 권장하는 방법입니다. 이는 레덕스 애플리케이션에서 발생하는 일반적인 문제인 보일러플레이트 코드, 번거로운 구성, 그리고 대규모 애플리케이션에서 상태 관리를 확장하는 어려움 등을 해결하기 위해 고안되었습니다.

레덕스 툴킷은 다음을 보다 쉽게할 수 있도록 하는 일련의 도구를 제공합니다:

- 합리적인 기본값으로 레덕스 스토어를 설정합니다.
- 자동 액션 생성자와 리듀서를 가진 상태 조각들을 생성합니다.
- 부수 효과, 미들웨어, 비동기 작업과 같은 복잡한 상태 로직을 처리합니다.
- 최상의 관행을 따르면서도 보일러플레이트의 양을 줄입니다.

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

# Redux Toolkit을 사용하는 이유

Redux Toolkit을 사용해야 하는 이유에 대해 알아보기 전에, 다음 React 프로젝트에 고려해야 하는 이유에 대해 이야기해보겠습니다.

- 더 적은 보일러플레이트 코드: 전통적인 Redux 설정에는 많은 보일러플레이트 코드가 포함됩니다. 액션, 리듀서를 수동으로 만들고, 상태와 연결해야 하는 번거로움이 있습니다. Redux Toolkit은 대부분의 작업을 추상화하여 응용 프로그램 로직 작성에 집중할 수 있도록 합니다.

- 간편화된 설정: Redux Toolkit은 추천하는 기본값과 함께 스토어를 설정하는 configureStore 함수를 제공합니다. Redux DevTools 통합과 미들웨어 설정과 같은 작업을 자동화하여 설정을 간소화합니다.

- 개발자 경험의 향상: Redux Toolkit은 디버깅 및 테스트를 단순화하는 내장 도구를 제공하여 응용 프로그램의 유지 및 확장을 쉽게할 수 있습니다.

- 성능 향상: Redux Toolkit의 자동 작업 일괄 처리와 같은 기능을 통해 응용 프로그램의 성능을 개선할 수 있습니다. 특히 상태 업데이트가 많은 시나리오에서 성능을 향상시킬 수 있습니다.

# React 애플리케이션에 Redux Toolkit 설정하기

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

기본적인 Redux Toolkit 설정을 React 애플리케이션에서 안내해 드리겠습니다.

## 단계 1: Redux Toolkit 설치하기

먼저 Redux Toolkit 패키지와 함께 React-Redux를 설치해야 합니다:

```js
npm install @reduxjs/toolkit react-redux
```

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

## 단계 2: 상태 슬라이스 생성하기

Redux Toolkit에서는 슬라이스를 생성하여 상태를 관리합니다. 슬라이스는 응용 프로그램의 단일 기능을 위한 Redux 리듀서 로직과 액션의 모음입니다. 다음은 슬라이스를 만드는 방법입니다:

```js
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
```

이 예시에서는 초기 상태가 0인 counterSlice를 만들었습니다. 이 슬라이스에는 increment, decrement, incrementByAmount 세 가지 리듀서 함수가 포함되어 있습니다. 이 함수들은 전달된 액션에 따라 상태를 업데이트합니다.

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

## 단계 3: 스토어 구성

다음으로는 Redux Toolkit에서 제공하는 configureStore 함수를 사용하여 Redux 스토어를 구성하겠습니다:

```js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;
```

이렇게 하면 Redux 스토어가 구성되고 카운터 슬라이스가 연결됩니다.

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

## 단계 4: React 컴포넌트에서 저장소 사용하기

마지막으로, react-redux의 useSelector 및 useDispatch 훅을 사용하여 React 컴포넌트에서 Redux 저장소를 사용할 수 있습니다:

```js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from './counterSlice';
function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>증가</button>
      <button onClick={() => dispatch(decrement())}>감소</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>5만큼 증가</button>
    </div>
  );
}
export default Counter;
```

이 예제에서 Counter 컴포넌트는 현재 카운트를 표시하고 증가, 감소 또는 특정 양 만큼 증가하는 버튼을 제공합니다.

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

# 발전된 사용법: createAsyncThunk를 사용하여 비동기 논리 처리하기

상태 관리의 가장 어려운 측면 중 하나는 API 호출과 같은 비동기 작업을 처리하는 것입니다. Redux Toolkit은 createAsyncThunk를 사용하여 비동기 작업을 정의하고 처리할 수 있는 유틸리티로 이를 간편화합니다.

createAsyncThunk를 사용하는 예제입니다:

```js
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import axios from 'axios';
export const fetchUser = createAsyncThunk('user/fetchUser', async (userId) => {
  const response = await axios.get(`/api/user/${userId}`);
  return response.data;
});
const userSlice = createSlice({
  name: 'user',
  initialState: { user: null, status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUser.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchUser.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.user = action.payload;
      })
      .addCase(fetchUser.rejected, (state) => {
        state.status = 'failed';
      });
  },
});
export default userSlice.reducer;
```

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

이 예제에서는 createAsyncThunk를 사용하여 비동기 작업 fetchUser를 정의합니다. userSlice는 다른 상태(pending, fulfilled, rejected)를 처리하기 위해 extraReducers를 사용합니다.

Redux Toolkit은 대규모 React 애플리케이션에서 상태 관리를 크게 단순화할 수 있는 강력한 도구입니다. 보일러플레이트 코드를 줄이고 구성을 간소화하며 복잡한 로직을 처리하기 위한 강력한 도구를 제공함으로써, Redux Toolkit을 사용하면 정말 중요한 부분에 집중할 수 있습니다: 훌륭한 애플리케이션을 만드는 것입니다.

Redux를 처음 시작하거나 코드베이스를 개선하려는 경험이 많은 개발자라면 Redux Toolkit을 살펴볼 가치가 있습니다. 올바른 방법으로 접근하면 응용 프로그램에서 심지어 가장 복잡한 상태도 쉽게 관리할 수 있습니다.

본 가이드가 도움이 되었기를 바라겠습니다! 질문이나 인사이트가 있으시면 아래에 댓글을 남겨주시기 바랍니다 - 대화를 이어가요. 이 게시물이 마음에 든다면 박수를 보내고 네트워크와 공유하는 것을 잊지 마세요. 더 많은 웹 개발 팁, 자습서 및 산업 동향을 보려면 Medium에서 저를 팔로우하고 최신 기사를 확인하세요. 즐거운 코딩하세요!

리액트 프로젝트에 Redux Toolkit을 설정하는 방법



React의 forwardRef API는 구성 요소가 참조를 자식 구성 요소로 전달 할 수있게하는 강력한 도구입니다. 재사용 가능한 구성 요소를 작성하거나 제3 자 라이브러리를 다룰 때 특히 유용 할 수 있습니다. 이 문서에서는 forwardRef API에 대해 자세히 살펴 보고, 그 유용성을 이해하고, 여러 실제 예제를 살펴보면서 그 힘을 설명하겠습니다.

# forwardRef란?

React에서 ref는 렌더 메서드에서 만들어진 DOM 노드 또는 React 요소에 액세스하는 방법을 제공합니다. 일반적으로 ref는 클래스 구성 요소에서 사용하지만 훅의 도입으로 ref를 함수 구성 요소에서도 사용할 수 있습니다. forwardRef는 부모 구성 요소에서 자식 구성 요소 중 하나로 ref를 전달할 수 있도록하는 유틸리티 함수입니다.

# 왜 forwardRef를 사용해야하나요?

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

- HOC(고차 컴포넌트)에서 Ref 전달: HOC는 종종 다른 컴포넌트를 감싸고 해당 컴포넌트의 DOM 노드를 숨길 수 있습니다. forwardRef를 사용하면 HOC를 통해 ref를 전달하여 DOM 노드에 직접 액세스할 수 있습니다.
- 향상된 컴포넌트 상호 운용성: 라이브러리나 UI 키트를 구축할 때 ref 액세스를 제공하는 것은 외부에서 입력 필드에 초점을 맞추는 것과 같은 고급 사용에 중요할 수 있습니다.
- 포커스 및 애니메이션 관리: Ref 전달은 포커스 관리 및 애니메이션이 중요한 시나리오에서 필수적일 수 있으며, 기본 DOM 요소와의 원활한 상호 작용을 보장합니다.

# forwardRef가 작동하는 방법은?

forwardRef 함수는 React 컴포넌트를 인수로 받아 새 컴포넌트를 반환합니다. 이 새 컴포넌트는 ref prop을 사용하여 내부 컴포넌트로 전달합니다.

다음은 기본 구문입니다:

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

```js
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="fancy-button">
    {props.children}
  </button>
));
```

# 실제 예시

## 1. 커스텀 입력 컴포넌트 생성

부모 컴포넌트가 포커스를 관리할 수 있는 재사용 가능한 입력 컴포넌트를 만들고 싶다고 상상해보세요.

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

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

const CustomInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function App() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <CustomInput ref={inputRef} placeholder="여기에 입력하세요..." />
      <button onClick={handleFocus}>입력란에 초점 맞추기</button>
    </div>
  );
}

export default App;
```

이 예제에서 버튼을 클릭하면 프로그래밍 방식으로 입력란에 초점이 맞추어지며, ref forwarding의 힘을 실제로 보여줍니다.

## 2. 고차 컴포넌트에서 Ref Forwarding

고차 컴포넌트(Higher-Order Component, HOC)로 래핑된 버튼이 있다고 가정해봅시다. Ref가 실제 버튼을 가리키도록 하고 싶습니다.


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

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

function withLog(Component) {
  class WithLog extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  }

  return React.forwardRef((props, ref) => (
    <WithLog {...props} forwardedRef={ref} />
  ));
}

const Button = React.forwardRef((props, ref) => (
  <button ref={ref} {...props}>
    Click me
  </button>
));

const LogButton = withLog(Button);

function App() {
  const buttonRef = useRef();

  const handleClick = () => {
    console.log(buttonRef.current); // Logs the actual button DOM node
  };

  return (
    <div>
      <LogButton ref={buttonRef} onClick={handleClick} />
    </div>
  );
}

export default App;
```

여기에서 withLog는 컴포넌트를 래핑하고 상호 작용을 기록하는 HOC입니다. forwardRef를 사용하여 LogButton에 전달된 ref가 HOC가 아닌 실제 버튼을 가리키도록합니다.

## 3. 다른 훅과 forwardRef를 결합하기

forwardRef는 다른 훅과 결합하여 더 복잡한 컴포넌트를 구축하는 데 사용될 수 있습니다. 예를 들어, ref를 전달뿐만 아니라 내부 상태를 사용하는 컴포넌트를 원할 수 있습니다.


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

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

const PasswordInput = React.forwardRef((props, ref) => {
  const [showPassword, setShowPassword] = useState(false);

  return (
    <div>
      <input
        type={showPassword ? 'text' : 'password'}
        ref={ref}
        {...props}
      />
      <button onClick={() => setShowPassword(!showPassword)}>
        {showPassword ? 'Hide' : 'Show'}
      </button>
    </div>
  );
});

function App() {
  const passwordRef = useRef();

  const handleShowPassword = () => {
    passwordRef.current.focus();
  };

  return (
    <div>
      <PasswordInput ref={passwordRef} />
      <button onClick={handleShowPassword}>Focus Password Input</button>
    </div>
  );
}

export default App;
```

이 예제는 가시성을 토글하는 비밀번호 입력 필드를 보여줍니다. 동시에 부모 구성 요소가 포커스를 제어할 수 있습니다.

# forwardRef 사용 시의 최상의 방법

- 의미 있는 Ref 이름 사용: inputRef나 buttonRef와 같이 의미 있는 이름을 지정하여 코드를 더 읽기 쉽고 유지보수하기 쉽게 만듭니다.
- Ref 사용 제한: Ref를 절약해서 사용하세요. 대부분의 데이터 흐름에는 props와 상태를 의존하세요. Ref는 DOM 노드와 인터랙션하거나 직접적인 DOM 액세스가 필요한 써드파티 라이브러리 통합 시에 사용하세요.
- useImperativeHandle과 결합: forwardRef와 함께 useImperativeHandle 훅을 사용하여 ref를 사용할 때 노출되는 인스턴스 값을 사용자 정의하세요. focus나 scrollTo와 같은 명령형 메서드를 캡슐화할 수 있습니다.


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

# 결론

React의 forwardRef API는 컴포넌트의 유연성과 기능성을 향상시킬 수 있는 강력한 기능입니다. 재사용 가능한 컴포넌트를 구축하거나 타사 라이브러리를 통합하거나 복잡한 포커스 시나리오를 관리하는 경우, forwardRef는 가치 있는 도구가 될 수 있습니다. 이 API를 이해하고 활용함으로써 더 강력하고 유지보수가 쉬운 React 애플리케이션을 개발할 수 있습니다. 즐거운 코딩하세요!

React에서 forwardRef API를 사용하는 방법(코드 있음)



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

소개:

현대 소프트웨어 개발에서 효율성과 속도는 생산성과 프로젝트 성공에 영향을 미치는 중요한 요소입니다. React 개발자들에게는 빌드 과정이 종종 중요한 병목 현상이 될 수 있습니다.

이 글에서는 빌드를 최적화하기 위해 설계된 혁신적인 빌드 도구인 esbuild를 활용하는 방법을 탐색해 보겠습니다. 우리는 React 프로젝트를 esbuild로 설정하는 포괄적인 안내서를 제공할 것이며, 놀라운 빌드 시간과 개발 효율성 향상을 목표로 할 것입니다.

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

빈 Node.js 프로젝트를 생성하려면 npm init을 실행해주세요.

```js
npm init
```

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

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

npm init 명령을 실행한 후에 나타나는 매개변수에 대한 값을 제공해주세요. 필요하다면 지금은 비워 두고 나중에 업데이트할 수도 있어요.

필요한 npm 종속성 설치

```js
npm install @web/dev-server chokidar-cli esbuild react react-dom @mui/material @emotion/styled @emotion/react
```

패키지 목록을 설치한 후에는 다음 종속성이 포함된 package.json이 업데이트될 거에요.

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

안녕하세요! 위의 텍스트를 친절하고 친근하게 한국어로 번역해 드리겠습니다.

표 태그를 Markdown 형식으로 변경해 주세요.

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

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

App.tsx

```js
import { Button } from '@mui/material';
import React from 'react';

const App = () => {
  return <Button variant='contained'>Click Me</Button>;
};

export default App;
```

프로젝트 빌드를 위한 esbuild 설정하기


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

루트 디렉토리에 esbuild.config.js라는 파일을 만들어서 다음 내용을 복사해 붙여넣으세요:

```js
const esbuild = require('esbuild');

esbuild
  .build({
    entryPoints: ['src/index.tsx'],
    bundle: true,
    outfile: 'dist/index.js',
    loader: {
      '.tsx': 'tsx',
      '.ts': 'tsx',
      '.png': 'file',
      '.svg': 'file',
    },
    sourcemap: true,
    minify: false,
  })
  .catch(() => process.exit(1));
```

- esbuild를 import하여 빌드 기능을 사용합니다.
- entryPoints를 src/index.tsx로 정의하여 메인 파일을 지정합니다.
- bundle을 활성화하여 모든 종속성을 단일 파일로 결합합니다.
- outfile를 dist/index.js로 설정하여 출력 위치를 지정합니다.
- .tsx, .ts, .png 및 .svg 파일을 처리하기 위한 loader를 구성합니다.
- 디버깅을 쉽게 하기 위해 소스맵 생성을 활성화합니다.
- 코드를 가독성 있게 유지하기 위해 미니파이를 비활성화합니다.

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

```js
module.exports = {
  rootDir: '.',
  port: 3000,
  open: true,
  watch: true,
};
```

아래 스크립트를 사용하여 package.json 파일을 업데이트하십시오:

```js
"scripts": {
  "build": "node esbuild.config.js",
  "watch": "chokidar 'src/**/*.{ts,tsx,css}' -c 'npm run build' & web-dev-server --config server.config.js"
},
```

- build: 이 스크립트는 esbuild.config.js 파일을 사용하여 빌드 프로세스를 실행합니다.
- watch: 이 스크립트는 src 폴더의 .ts, .tsx 및 .css 파일의 변경 사항을 감시합니다. 변경이 감지되면 프로젝트를 자동으로 다시 빌드하고 server.config.js에서 설정한 내용을 사용하여 포트 3000에서 개발 서버를 시작합니다.

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

그걸로 끝입니다 - 이제 React 프로젝트가 localhost:3000에서 실행 중입니다. 즐거운 코딩하세요!

esbuild로 빠른 React 빌드 언락하는 방법



# 목차 :

- 목표
- 소개
- Redux Toolkit과 Zustand: 두 가지 다른 빌더
- 결론

# 1. 목표 :

이 블로그에서 친애하는 독자님께서는: 

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

리덕스 Toolkit과 Zustand 두 가지 상태 관리 라이브러리에 대한 개요를 소개해 드리겠습니다.

주요 차이점을 강조하며, Redux Toolkit과 Zustand의 설정, 유연성, 확장성, 사용법을 비교해 보겠습니다.

특정 요구 사항을 기반으로 프로젝트에 적합한 상태 관리 라이브러리를 선택하는 데 도움을 드릴 것입니다.

# 2. 소개 :

리액트 애플리케이션을 구축할 때 상태를 효과적으로 관리하는 것은 중요하고 필수적입니다. 따라서 애플리케이션이 유지되고 이해하기 쉽도록 보장하기 위해 React에서 상태를 관리하는 두 가지 인기 있는 라이브러리인 "Redux Toolkit"과 "Zustand" 를 고려해 보게 됩니다.

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

이 두 라이브러리는 강력한 도구를 제공하지만 서로 다른 필요성과 사용 사례에 부합합니다. 그래서 두 라이브러리 중 어떤 것을 선택해야 할지에 대해 어떻게 결정할까요?

이 블로그에서는 Redux Toolkit과 Zustand 간의 차이점을 비유와 시각 자료를 통해 살펴보며, 프로젝트에 가장 적합한 라이브러리를 선택하는 데 도움이 되도록 할 것입니다.

# 3. Redux Toolkit과 Zustand: 두 가지 다른 빌더:

Redux Toolkit과 Zustand 간의 차이를 이해하기 위해, 집을 짓는 것으로 상상해보겠습니다.

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

## Redux Toolkit: 전문 건축가:

Redux Toolkit을 "전문 건축가"로 상상해 봅시다. 이 건축가는 크고 복잡한 건물을 설계하고 건설하는 분야에 특화되어 있습니다.

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

- 자세한 도면과 계획: 자세한 도면부터 시작하는 건축가처럼, Redux Toolkit은 `createSlice`, `configureStore`, `createAsyncThunk`와 같은 구조화된 도구를 사용하여 상태를 매우 명확하고 잘 구조화되고 조직적으로 관리합니다.
- 전문 도구와 팀: 레덕스 툴킷에는 내장된 도구가 포함되어 있고 미들웨어를 지원하는데, 이는 전문 계약업자를 고용하는 건축가처럼 배관 및 전기 작업에 전문화된 지원을 제공합니다.
- 안정성과 확장성: 건축가가 건물을 안정적이고 미래 확장성을 고려하여 설계하는 것처럼, Redux Toolkit은 확장 가능하고 견고한 상태 관리 솔루션이 필요한 애플리케이션에 이상적입니다.
- 엄격한 건축 규정: 레덕스 툴킷은 모든 것이 안전하고 안정적이며 유지보수가 가능하도록 엄격한 베스트 프랙티스를 시행합니다.
- 대규모 프로젝트에 적합: 이 건축가는 대형과 복잡한 프로젝트에 가장 적합합니다. 마찬가지로 Redux Toolkit은 상태 관리 요구가 크고 중요한 대규모 애플리케이션에서 빛을 발합니다.

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

## 상태 : DIY 주택 건축자 :

반면에 Zustand는 간단함과 유연성을 중시하는 어려운 "DIY 주택 건축자"일 수 있습니다.

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

- 기본 도구로 건축 : Zustand는 최소한의 API를 갖고 있으며 설정이 쉬워, 망치, 못, 줄자만 가지고 복잡한 기계나 도구 없이 작업하는 DIY 건축자와 유사합니다.
- 빠른 건축 : DIY 건축자가 주택 계획을 몇 주 동안 하지 않고도 작은 오두막을 짓듯이, Zustand는 간단함으로 빠르게 시작할 수 있도록 해줍니다.
- 사용자 정의 가능 : Zustand는 레이아웃을 중간에 바꾸기로 결정하는 건축자처럼 쉽게 새로운 요구 사항에 적응할 수 있습니다.
- 작은 프로젝트에 최적화 : 작은에서 중간 규모의 프로젝트에 이상적인 Zustand는 정원 헛간, 나무집, 놀이 집 등과 같은 과도한 엔지니어링을 할 필요 없이 기능적인 솔루션을 원할 때 적합합니다.
- 가벼움 : DIY 건축자가 필요에 따라 필수 도구만을 가지고 경량 여행을 하는 것처럼, Zustand의 작고 견고한 라이브러리를 찾을 수 있습니다.

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

이 마인드맵은 Redux Toolkit과 Zustand 간의 차이에 대해 말한 내용을 요약한 것이에요 :

## 4. 결론 :

요약하면 Redux Toolkit과 Zustand는 모두 상태 관리에 강력하고 완벽하다고 할 수 있어요. 따라서 이 둘 사이에서 선택하는 것은 프로젝트의 특정 요구 사항에 달려 있어요. 만약 중요한 상태 관리를 필요로 하는 복잡하고 큰 애플리케이션을 개발 중이라면, Redux Toolkit이 최선의 선택일 수 있어요. 반면, 작은 프로젝트에 특히 간단하고 유연한 방법을 찾고 있다면, Zustand가 완벽한 솔루션이 될 수 있어요.

마지막으로 각각의 장점과 사용 사례를 이해하면 지금 당장 올바른 도구를 선택해 집을 지을 수 있어요. 프로페셔널한 건축가의 정밀함과 규모 또는 자체 건축자의 단순함, 유연성과 속도가 필요한 경우 솔루션이 필요할 때 선택을 할 수 있겠죠.

Posts