
우리의 Node.js 내부의 깊이 탐구 8번째 시리즈에 오신 것을 환영합니다! 이 포스트에서는 모든 Node.js 개발자가 따라야 할 필수 보안 모범 사례를 탐색할 것입니다. 이를 통해 일반적인 취약점과 위협으로부터 응용 프로그램을 보호할 수 있습니다. Node.js는 웹 응용 프로그램, API 및 마이크로서비스를 구축하는 인기 있는 선택지로 계속 성장하고 있기 때문에 응용 프로그램의 보안을 유지하는 것이 매우 중요합니다.

![Node.js 보안 모범 사례](/assets/img/2024-08-17-NodejsSecurityBestPractices_0.png)

# Node.js에서 보안이 중요한 이유는 무엇인가요?

보안은 어플리케이션, 데이터 및 사용자를 악의적인 공격과 취약점으로부터 보호하기 때문에 중요합니다. 보안 침해는 데이터 도난, 사용자 신뢰 손실, 법적 결과 및 응용 프로그램의 평판에 중대한 피해를 가져올 수 있습니다. Node.js 어플리케이션은 다른 웹 어플리케이션과 마찬가지로 SQL 인젝션, 크로스사이트 스크립팅(XSS), 크로스사이트 요청 변조(CSRF) 및 서비스 거부(DoS) 공격과 같은 다양한 유형의 공격에 취약합니다.

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

# Node.js 보안에 중점을 둘 Key Area

- 안전한 코딩 관행
- 인증 및 권한 부여
- 데이터 유효성 검사 및 살균 처리
- 안전한 통신
- 의존성 관리
- 오류 처리 및 로깅
- 설정 및 배포 보안
- 모니터링 및 사고 대응

각 영역을 자세히 살펴보겠습니다.

# 1. 안전한 코딩 관행

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

안전한 코드 작성은 안전한 애플리케이션의 기반이 됩니다. 안전한 코딩 관행을 채택하면 개발 중에 취약점이 도입되는 것을 방지할 수 있습니다.

## Best Practices:

- Eval 및 New Function 사용 피하기: eval() 및 new Function() 사용을 피하세요. 이들은 임의의 코드를 실행할 수 있고 코드 주입과 같은 보안 위험을 도입할 수 있습니다.
- Strict Mode 사용: JavaScript 코드에서 "use strict";를 파일의 처음에 사용하여 엄격 모드를 활성화하세요. 이를 통해 더 엄격한 구문 분석 및 오류 처리가 강화되어 우연한 보안 문제 발생 가능성이 줄어듭니다.
- 데이터 노출 제한: 애플리케이션이 노출하는 민감한 데이터 양을 최소화하세요. 특히 로그와 오류 메시지를 통해 데이터가 노출되지 않도록 주의하세요.

## 예시: eval() 사용 회피하기

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

```js
// 안전하지 않은 방법: eval을 사용하여 코드를 실행
const userInput = 'console.log("Hello, World!")';
eval(userInput); // 임의의 코드를 실행할 수 있어 위험함

// 안전한 방법: eval 사용 회피
const allowedCommands = {
  greet: () => console.log("Hello, World!"),
};

const command = "greet";
if (allowedCommands[command]) {
  allowedCommands[command]();
}
```

# 2. 인증 및 권한 부여

적절한 인증 및 권한 부여는 애플리케이션 및 자원에 정당한 사용자만 액세스할 수 있도록 보장하는 데 중요합니다.

## 모범 사례:

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

- 강력한 암호와 해싱 사용하기: 사용자의 암호를 저장하기 전에 반드시 bcrypt와 같은 강력한 해싱 알고리즘을 사용하여 해싱해야 합니다. 절대로 평문 암호를 저장해서는 안 됩니다.
- 다중 요소 인증(MFA) 구현: 사용자가 두 번째 인증 형식(예: 전화로 전송된 코드)을 제공하도록 요구하여 추가적인 보안 계층을 추가하세요.
- 역할 기반 접근 제어(RBAC): 사용자 역할에 기반하여 응용 프로그램의 특정 부분에 대한 액세스를 제한하는 RBAC를 구현하세요. 이렇게 함으로써 훼손된 계정으로 인한 잠재적 피해를 제한할 수 있습니다.

예시: bcrypt를 사용한 암호 해싱

```js
const bcrypt = require("bcrypt");

const saltRounds = 10;
const plainTextPassword = "mysecretpassword";

// 암호 해싱하기
bcrypt.hash(plainTextPassword, saltRounds, (err, hash) => {
  if (err) throw err;
  console.log("해싱된 암호:", hash);

  // 나중에 로그인할 때 암호 비교
  bcrypt.compare(plainTextPassword, hash, (err, result) => {
    if (err) throw err;
    console.log("암호 일치여부:", result);
  });
});
```

# 3. 데이터 유효성 검사 및 살균 처리

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

사용자 입력 값의 유효성 검사 및 살균 처리는 SQL 인젝션 및 크로스사이트 스크립팅(XSS)과 같은 인젝션 공격을 방지하는 데 매우 중요합니다.

## 최상의 사례:

- 입력 값 유효성 검사: 클라이언트 및 서버 측에서 모두 사용자 입력 값을 항상 유효성 검사하세요. 입력 데이터가 예상 형식, 길이 및 유형에 부합하는지 확인하세요.
- 입력 값 살균 처리: 쿼리에 사용하기 전이나 브라우저에 출력하기 전에 잠재적으로 위험한 문자를 제거하거나 이스케이프하여 사용자 입력을 살균하세요.
- 매개변수화된 쿼리 사용: 데이터베이스와 상호 작용할 때 항상 SQL 인젝션을 방지하기 위해 매개변수화된 쿼리를 사용하세요.

예시: 검증 라이브러리 사용하기

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

```js
const { body, validationResult } = require("express-validator");

app.post(
  "/submit",
  [
    body("email").isEmail().withMessage("유효하지 않은 이메일 주소입니다"),
    body("age").isInt({ min: 0 }).withMessage("나이는 양의 정수여야 합니다"),
  ],
  (req, res) => {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    // 유효한 데이터 처리 진행
    res.send("데이터가 유효합니다");
  }
);
```

# 4. 통신 보안

애플리케이션과 클라이언트 또는 다른 서비스 간의 통신을 보호하여 데이터가 가로채지거나 변경되는 것을 방지하는 것이 중요합니다.

## 권장 사항:

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

- HTTPS 사용: 항상 HTTPS를 사용하여 클라이언트와 서버 간에 전송되는 데이터를 암호화하세요. HTTPS는 중간자 공격으로부터 보호합니다.
- 안전한 쿠키: 쿠키에 Secure 및 HttpOnly 플래그를 설정하여 HTTPS를 통해서만 전송되고 JavaScript를 통해 액세스할 수 없도록 합니다.
- HSTS 구현: HTTP Strict Transport Security (HSTS)를 사용하여 HTTPS를 강제하고 다운그레이드 공격을 방지하세요.

예: Express를 사용하여 HTTPS 강제하기

```js
const express = require("express");
const helmet = require("helmet");

const app = express();

// HTTP를 HTTPS로 리디렉션
app.use((req, res, next) => {
  if (req.secure) {
    return next();
  }
  res.redirect(`https://${req.headers.host}${req.url}`);
});

// Helmet을 사용하여 안전한 HTTP 헤더 설정
app.use(helmet());

app.get("/", (req, res) => {
  res.send("안전한 통신이 활성화되었습니다");
});

app.listen(3000, () => {
  console.log("포트 3000에서 실행 중인 서버");
});
```

# 5. 의존성 관리

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

Node.js 어플리케이션은 종종 제3자 패키지에 의존합니다. 외부 라이브러리를 통해 취약점이 도입되는 것을 방지하기 위해 의존성을 안전하게 유지하는 것이 매우 중요합니다.

## 최선의 사례:

- 정기적으로 의존성 업데이트: npm outdated를 정기적으로 실행하여 최신 버전으로 업데이트하십시오. 이를 통해 최신 보안 패치가 적용된 상태를 유지할 수 있습니다.
- 신뢰할 수 있는 소스 사용: 신뢰할 수 있는 소스에서만 패키지를 설치하십시오. 다운로드 횟수가 적거나 커뮤니티에서 강력한 평판이 없는 패키지를 설치할 때 조심해야 합니다.
- 의존성 심사: npm audit 같은 도구를 사용하여 의존성에서 알려진 취약점을 확인하고 권장 사항을 적용하십시오.

예시: 의존성 심사

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

# 의존성에 취약점이 있는지 확인하기 위해 오디트를 실행하세요

npm audit

# 가능한 경우 취약점을 자동으로 수정하기

npm audit fix

# 6. 오류 처리 및 로깅

적절한 오류 처리 및 로깅은 보안 사건을 확인하고 대응하는 데 중요합니다. 그러나 로그나 오류 메시지에서 민감한 정보가 노출되지 않도록 주의해야 합니다.

## 최상의 실천 방법:

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

- 에러 메시지를 검증하세요: 스택 트레이스, 데이터베이스 쿼리 또는 API 키와 같은 민감한 정보가 노출되지 않도록 합니다.
- 중앙 집중식 로깅 사용: 애플리케이션의 모든 부분에서 로그를 집계하기 위해 중앙 집중식 로깅을 구현하세요. 이를 통해 보안 사고를 모니터링하고 대응하는 것이 더 쉬워집니다.
- 보안 이벤트 기록: 로그인 실패 시도나 사용자 역할 변경과 같은 중요한 보안 이벤트를 기록하여 잠재적인 공격을 감지하는 데 도움이 됩니다.

예: 익스프레스를 사용한 중앙 집중식 에러 처리

```js
const express = require("express");
const fs = require("fs");
const morgan = require("morgan");

const app = express();

// Morgan을 사용하여 HTTP 요청을 파일에 로깅합니다
const accessLogStream = fs.createWriteStream("access.log", { flags: "a" });
app.use(morgan("combined", { stream: accessLogStream }));

// 에러 처리 미들웨어
app.use((err, req, res, next) => {
  console.error("에러 발생:", err.message);
  res.status(500).send("예기치 못한 오류가 발생했습니다.");
});

app.listen(3000, () => {
  console.log("포트 3000에서 서버가 실행 중입니다.");
});
```

# 7. 설정 및 배포 보안

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

적절한 구성 및 안전한 배포 관행은 애플리케이션 환경의 잘못된 구성 또는 취약점을 악용하는 공격자를 방지하는 데 중요합니다.

## 최상의 관행:

- 환경 변수: 환경 변수를 사용하여 구성 설정과 비밀 정보(예: 데이터베이스 자격 증명, API 키)를 관리하세요. 민감한 정보를 코드에 하드코딩하는 것을 피하세요.
- 안전한 기본 설정: 응용 프로그램 및 서비스를 안전한 기본 설정으로 구성하세요. 예를 들어, 불필요한 기능을 비활성화하고 액세스 제어가 올바르게 구성되었는지 확인하세요.
- CI/CD 파이프라인 사용: 지속적 통합 및 지속적 배포(CI/CD) 파이프라인을 구현하여 보안 점검이 일관되게 수행되도록 배포 프로세스를 자동화하세요.

예: dotenv를 사용한 환경 변수의 예

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

```js
require("dotenv").config();

const express = require("express");
const app = express();

const dbPassword = process.env.DB_PASSWORD;

app.get("/", (req, res) => {
  res.send("환경 변수가 안전하게 로드되었습니다.");
});

app.listen(3000, () => {
  console.log("서버가 3000번 포트에서 실행 중입니다.");
});
```

# 8. 모니터링과 사고 대응

사전 대응 모니터링 및 사건 대응 계획 수립은 보안 침해를 시간 내에 감지하고 대응하는 데 중요합니다.

## 모범 사례:

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

- 모니터링 도구 구현: PM2, New Relic 또는 Datadog와 같은 모니터링 도구를 사용하여 응용 프로그램의 성능을 추적하고 이상을 감지하며 보안 이벤트를 모니터링하세요.
- 경보 설정: 다중 로그인 실패 시도 또는 트래픽 급증과 같은 중요한 보안 이벤트에 대한 경보를 구성하여 팀이 신속하게 대응할 수 있도록 하세요.
- 사고 대응 계획 수립: 보안 침해 사례 처리 방법을 개발하고 정기적으로 업데이트하여 의사 소통, 격리 및 복구 단계를 포함한 경로를 개요로 작성하세요.

예시: PM2를 활용한 기본 모니터링

```js
# PM2로 응용 프로그램 시작
pm2 start app.js

# 응용 프로그램의 성능과 로그를 모니터링
pm2 monit

# PM2에서 경보 및 모니터링 통합 설정
pm2 set pm2:intercom true
```

# 결론

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

Node.js 애플리케이션을 보호하는 것은 세심한 주의, 침착함, 그리고 모범 사례를 준수하는 지속적인 과정입니다. 이 블로그에서 논의된 전략들을 실천함으로써 — 안전한 코딩, 적절한 인증, 데이터 유효성 검사, 안전한 통신, 의존성 관리, 강력한 오류 처리, 안전한 배포 방법, 그리고 지속적인 모니터링 — 보안 취약점의 위험을 크게 줄이고 악의적 공격으로부터 애플리케이션을 보호할 수 있습니다.

다음 글에서는 Node.js에서의 테스팅과 디버깅을 탐구하여, 애플리케이션이 견고하고 버그가 없는지 확인하는 데 도움이 되는 도구와 기술에 대해 알아볼 것입니다. 많은 기대 부탁드립니다!

Node.js 내부 세계로의 흥미진진한 여정에 함께하고 싶으시다면 팔로우하고 구독해주세요!

아래에 댓글과 질문을 자유롭게 남겨주세요. 학습 과정에서 도움을 주기 위해 여기에 있습니다.

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

행복한 코딩하세요!


Nodejs에서 보안을 지키기 위해 해야하는 10가지 행동

JSON Web Tokens JWT 정리


<img src="/assets/img/2024-08-17-MasteringCustomProvidersinAngularsDependencyInjection_0.png" />

# 소개 📝:

Angular의 종속성 주입에서 사용자 정의 프로바이더를 숙달하는 블로그에 오신 것을 환영합니다! 오늘은 Angular에서 사용자 정의 프로바이더의 개념을 간단하게 설명하여 프로젝트에서 쉽게 이해하고 활용할 수 있도록 도와드리겠습니다. Angular의 종속성 주입 시스템에서 사용자 정의 프로바이더의 힘을 발휘해 보세요.

# Angular에서 프로바이더 이해하기 💡💡

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

앵귤러에서는 프로바이더를 사용하여 의존성이 어떻게 인스턴스화될지 정의합니다. 프로바이더는 어떤 객체나 값이든 될 수 있지만 대부분의 경우, 서비스나 기능을 제공하는 클래스입니다.

## 코드 예시:

```js
import { Injectable } from '@angular/core';
// 일반 서비스 정의
@Injectable()
export class MyService {
  // 서비스 로직은 여기에 작성
}
// 모듈 프로바이더 배열에서 사용
@NgModule({
  providers: [MyService]
})
export class AppModule {
```

# 커스텀 프로바이더 필요성 🔧

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

Angular의 사용자 정의 제공자는 개발자가 서비스를 제공하고 인스턴스화하는 방법을 정의할 수 있어 유연성을 제공합니다. 이를 통해 모듈성, 고급 의존성 주입 패턴 및 최적화된 서비스 인스턴스화가 가능해져 더 깨끗하고 효과적인 Angular 애플리케이션을 개발할 수 있습니다.

# 사용자 정의 제공자 생성

1- Factory 제공자 📕

팩토리 제공자를 사용하면 팩토리 함수를 사용하여 의존성의 인스턴스를 생성하고 구성할 수 있습니다.

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

```js
// logger.service.ts
export class LoggerService {
  constructor(private prefix: string) {}

  log(message: string): void {
    console.log(`${this.prefix}: ${message}`);
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LoggerService } from './logger.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    {
      provide: LoggerService,
      useFactory: () => {
        const prefix = 'MyApp'; // 환경 또는 다른 조건에 따라 이 값을 설정할 수 있습니다
        return new LoggerService(prefix);
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


// app.component.html
<h1>Logger Service Test</h1>
<p>로그 출력을 확인하세요.</p>

// app.component.ts

....
  ngOnInit() {
    this.logger.log('AppComponent에서 안녕하세요!');
  }
```

## 설명 💻:

- 이 예시에서는 factory 함수를 사용하여 LoggerService를 생성하고 접두사를 설정합니다. 이 접두사는 환경 변수, 사용자 설정 또는 다른 실행 시 데이터에 따라 달라질 수 있습니다

결과:

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

![Image](/assets/img/2024-08-17-MasteringCustomProvidersinAngularsDependencyInjection_1.png)

## 2-Value Providers 📕:

Value providers allow you to provide a specific value or object that can be injected into your components or services.

```js
// app.config.ts

// 애플리케이션 구성을 위한 인터페이스 정의
// 이를 통해 구성 객체가 특정 구조를 준수하도록 보장합니다.
export interface AppConfig {
  apiUrl: string;
  featureFlag: boolean;
}

// AppConfig를 위한 InjectionToken 생성
// InjectionToken은 값을 또는 객체를 주입하는 데 사용할 수 있는 고유 토큰을 만드는 방법입니다.
// 'app.config' 문자열은 DI 시스템에서 이 특정 토큰을 식별하는 데 사용됩니다.
export const APP_CONFIG = new InjectionToken<AppConfig>('app.config');

// AppConfig 인터페이스를 준수하는 구성 객체 정의
// 이 객체는 구성 요소나 서비스에 주입하려는 실제 구성 값을 보유합니다.
const appConfig: AppConfig = {
  apiUrl: 'https://api.example.com',  // API 요청을 위한 기본 URL
  featureFlag: true                   // 기능 토글 플래그 (기능 활성화/비활성화)
};

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { APP_CONFIG, appConfig } from './app.config'; // InjectionToken 및 구성 객체 가져오기

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    // APP_CONFIG 토큰에 appConfig 값을 제공합니다.
    // 이는 APP_CONFIG 토큰이 주입될 때마다 Angular가 appConfig 객체를 제공할 것을 의미합니다.
    { provide: APP_CONFIG, useValue: appConfig }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular_custom_providers';

  constructor(@Inject(APP_CONFIG) public config: AppConfig, private logger: LoggingService) {}

}

// app.component.html
<h1>Application Configuration</h1>
<p>API URL: { config.apiUrl }</p>
<p>Feature Flag: { config.featureFlag }</p>
```

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

코드-설명 💻:

이 예시에서, APP_CONFIG은 구성 객체를 제공하는 데 사용된 InjectionToken입니다. useValue 옵션은 주입할 값입니다.

결과:

<img src="/assets/img/2024-08-17-MasteringCustomProvidersinAngularsDependencyInjection_2.png" />

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

# 참고 자료 📗:

- [Angular Providers](https://dev.to/angular/a-practical-guide-to-providers-in-angular-3c96)
- [Inject custom provider in Angular 2+](https://stackoverflow.com/questions/39721884/inject-custom-provider-in-angular-2-0-1)
- [NestJS Custom Providers](https://docs.nestjs.com/fundamentals/custom-providers)
- [Angular Architecture Services](https://v17.angular.io/guide/architecture-services)

# 추가 자료 📗:

Angular의 고급 주제에 대해 더 알아보고 싶다면, 다음 블로그를 확인해보세요.

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

- Angular 단위 테스트를 더 빨리 실행하는 방법
- 다음 단계로 Angular 번들 크기 최적화하기
- Angular을 사용할 때 피해야 할 나쁜 관행
- Ngrx와 Angular로 상태 관리 소개
- Angular과 Cypress로 CRUD E2E 테스트 작성

# 결론:

마지막으로, 일반 프로바이더는 서비스를 직접 제공하는 데 간단함을 제공하지만, 커스텀 프로바이더는 Angular 애플리케이션에서 서비스 인스턴스화에 대한 유연성과 제어를 제공합니다.

이 블로그의 소스 코드는 GitHub에서 찾을 수 있습니다.

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

# 마지막으로 ✌️:

만약 이 포스트가 마음에 드시면 👏을 남겨 주시고, 트위터에서 제 계정을 팔로우해 주세요.

또한 제게 커피 한 잔 ☕️도 사주세요.

이 링크로 가입하면 수수료 중 일부가 직접적으로 저를 지원해줄 것입니다. 여러분에겐 추가 비용이 발생하지 않아요. 도움 주시면 감사하겠습니다!


Angular의 의존성 주입 -Custom Providers 정리


우리는 양식이 필요해요, 만들어야 해요.

문제를 구글로 찾아보니:

완벽해요!

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

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

# 체크리스트

오픈 소스 라이브러리를 도입하기 전에 고려해야 할 항목들에 대한 체크리스트를 작성했습니다. Formly가 어떻게 되는지 살펴보겠습니다.

## 유지보수 되고 있는가?

최근 그들과 작은 문제를 열었고, 네, 유지보수가 되고 있습니다. 몇 일 안에 수정되었습니다. ✅

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

## 문제를 해결하나요?

네, Angular 자체에서 동적 형식을 지원하지만, JSON 스키마로부터 동적으로 형식을 생성하고 필드를 필요에 따라 추가하는 것은 많은 수고가 들어갑니다.✅

## 우리 문제를 해결할까요?

만약 우리가 자체 디자인 프레임워크를 갖고 있지 않고 Formly에서 기본적으로 지원하는 프레임워크 중 하나를 사용하며, 일반적인 형식을 동적으로 생성하는 것이 우리에게 흔한 사용 사례라면, 확실히 💯

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

프로젝트의 요구 사항을 항상 신중히 고려해야 합니다. 작은 프로젝트의 경우에는 거의 매우 쉬운 결정입니다. 예제를 사용하면 문제없이 이용할 수 있습니다.

큰 프로젝트의 경우에는 이러한 타사 솔루션을 사용하기 위해 많은 지원 코드를 작성해야 한다는 것을 곧 알게 될 것입니다. 데이터 변환기, 사용자 정의 필드, 동일한 작동 방식을 하는데 다른 모습을 가진 필드, 특수 케이스를 위한 Formly 구성 생성기 등이 필요할 수 있습니다.

# 무엇이 더 있을까요?

- Angular은 양식 생성을 지원하므로 고려할 가치가 있습니다.
- 일부 프레임워크는 양식 생성에 대한 변형을 지원합니다. 보다 다양하지만 덜 복잡할 수도 있습니다. 예를 들어, Fundamental은 이와 같은 하나의 프레임워크입니다.
- 다른 것들은 마찬가지로 조금 다른 라이브러리일 수 있습니다.


Formly를 사용해서 폼 쉽게 만드는 방법


마이크로 프론트엔드는 대규모 애플리케이션을 작은 독립적인 애플리케이션으로 분해하는 아키텍처 스타일입니다. 각 부분은 개별적으로 개발, 배포 및 유지 관리됩니다. 이 안내서에서는 Angular를 사용하여 마이크로 프론트엔드 아키텍처를 생성하고 호스트 응용 프로그램이 공유 구성 요소를 사용하여 두 원격 애플리케이션을 통합하는 방법을 보여줍니다.

![MicroFrontendsAngular](/assets/img/2024-08-17-MicroFrontendsAngular_0.png)

# 단계별 구현

# 1. 워크스페이스 및 애플리케이션 생성하기

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

- 새 워크스페이스를 생성하세요:

```js
ng new angular-mfe-example --create-application=false
cd angular-mfe-example
```

2. 호스트 애플리케이션을 생성하세요:

```js
ng generate application host --standalone
```

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

3. 원격 애플리케이션을 생성하세요:

```js
ng generate application remoteapp1 --standalone
ng generate application remoteapp2 --standalone
```

## 2. 모듈 연맹 플러그인 추가

- 호스트 애플리케이션에 모듈 연맹 추가하기:

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

```js
ng add @angular-architects/module-federation --project host --port 4200
```

2. 원격 애플리케이션에 모듈 연맹 추가하기:

```js
ng add @angular-architects/module-federation --project remoteapp1 --port 5001
ng add @angular-architects/module-federation --project remoteapp2 --port 5002
```

# 3. 독립 구성요소 및 공유 구성요소 설정하기

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

- 각 원격 앱을 위해 독립적인 컴포넌트를 생성해보세요:

```js
cd projects/remoteapp1
ng generate component admin --standalone

cd ../remoteapp2
ng generate component user --standalone
```

2. 호스트 애플리케이션에서 공유 컴포넌트를 생성합니다:

```js
cd ../host
ng generate component shared-button --standalone
```

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

3. 공유 컴포넌트를 내보내기:

프로젝트/host/src/app/shared-button/shared-button.component.ts:

```js
import { Component } from "@angular/core";

@Component({
  selector: "app-shared-button",
  template: `<button>공통 버튼</button>`,
  standalone: true,
})
export class SharedButtonComponent {}
```

# 4. 모듈 연합을 위해 웹팩 구성하기

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

- 원격 애플리케이션에서 스탠드얼론 컴포넌트 노출하기 (webpack.config.js):

원격앱1:

```js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:5001/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "remoteapp1",
      filename: "remoteEntry.js",
      exposes: {
        "./Admin": "./src/app/admin/admin.component.ts",
      },
      shared: {
        "@angular/core": { singleton: true },
        "@angular/common": { singleton: true },
        "@angular/router": { singleton: true },
        "./SharedButton": "host@http://localhost:4200/remoteEntry.js",
      },
    }),
  ],
};
```

원격앱2:

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

```js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:5002/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "remoteapp2",
      filename: "remoteEntry.js",
      exposes: {
        "./User": "./src/app/user/user.component.ts",
      },
      shared: {
        "@angular/core": { singleton: true },
        "@angular/common": { singleton: true },
        "@angular/router": { singleton: true },
        "./SharedButton": "host@http://localhost:4200/remoteEntry.js",
      },
    }),
  ],
};
```

2. 호스트의 webpack.config.js에서 원격 구성 요소를 로드합니다:

```js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  output: {
    publicPath: "http://localhost:4200/",
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        remoteapp1: "remoteapp1@http://localhost:5001/remoteEntry.js",
        remoteapp2: "remoteapp2@http://localhost:5002/remoteEntry.js",
      },
      shared: {
        "@angular/core": { singleton: true },
        "@angular/common": { singleton: true },
        "@angular/router": { singleton: true },
      },
    }),
  ],
};
```

# 5. 공유 구성 요소 통합하기

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

- 원격 애플리케이션에서 공용 구성 요소 사용하기:

remoteapp1/src/app/admin/admin.component.ts 파일 내용:

```js
import { Component } from "@angular/core";
import { SharedButtonComponent } from "host/SharedButton";

@Component({
  selector: "app-admin",
  template: `<h1>원격 앱 1 관리자</h1>
    <app-shared-button></app-shared-button>`,
  standalone: true,
  imports: [SharedButtonComponent],
})
export class AdminComponent {}
```

remoteapp2/src/app/user/user.component.ts 파일 내용:

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

```js
import { Component } from "@angular/core";
import { SharedButtonComponent } from "host/SharedButton";

@Component({
  selector: "app-user",
  template: `<h1>Remote App 2 User</h1>
    <app-shared-button></app-shared-button>`,
  standalone: true,
  imports: [SharedButtonComponent],
})
export class UserComponent {}
```

2. 호스트 애플리케이션에서 라우트 구성 (app-routing.module.ts):

```js
import { Routes } from "@angular/router";

const routes: Routes = [
  {
    path: "admin",
    loadComponent: () => import("remoteapp1/Admin").then((m) => m.AdminComponent),
  },
  {
    path: "user",
    loadComponent: () => import("remoteapp2/User").then((m) => m.UserComponent),
  },
  { path: "", redirectTo: "admin", pathMatch: "full" },
];
```

3. 호스트 애플리케이션의 decl.d.ts 파일에 모듈 선언을 추가하세요.

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

`projects/host/src/app`로 이동하고 decl.d.ts라는 파일을 만들어주세요. 파일이 없다면요:

```js
declare module 'remoteapp1/Admin';
declare module 'remoteapp2/User';
declare module 'host/SharedButton';
```

# 6. 모든 애플리케이션 실행

- 호스트 애플리케이션 실행하기:

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

```js
cd projects/host
ng serve
```

2. 원격 애플리케이션 실행:

```js
cd ../remoteapp1
ng serve

cd ../remoteapp2
ng serve
```

위 단계를 따르면 Angular를 사용하여 스탠드얼론 컴포넌트와 공유 컴포넌트를 사용하는 작동하는 마이크로 프론트엔드 설정을 갖게됩니다. 이 아키텍처를 통해 애플리케이션의 다른 부분을 독립적으로 개발하고 배포할 수 있어 더 큰 유연성과 확장성을 제공할 수 있습니다.

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

감사합니다!  
LinkedIn: Vishalini Sharma

# Stackademic 🎓

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

- 작가에게 박수를 보내고 팔로우해주시는 것을 고려해주세요! 👏
- 팔로우하기: X | LinkedIn | YouTube | Discord
- 다른 플랫폼 방문: In Plain English | CoFeed | Differ
- 더 많은 콘텐츠는 Stackademic.com에서 확인해주세요


Angular로 마이크로 프론트엔드  구현하는 방법


![JavaScript Libraries](/assets/img/2024-08-17-AComprehensiveGuidetotheMostPopularJavaScriptLibrariesApril2024_0.png)

안녕하세요 여러분. 오늘은 가장 유용하고 많이 사용되는 자바스크립트 라이브러리와 프레임워크에 대해 이야기하려고 합니다. 우선 자바스크립트란 무엇인가요? 웹의 보편적인 스크립팅 언어인 자바스크립트는 코딩을 간소화하고 개발 시간을 단축하며 프로젝트의 기능을 향상시키기 위해 설계된 라이브러리 생태계가 풍부합니다. 단순히 시작을 원하는 초보 개발자든 최신 기술 도구를 찾는 숙련된 코더든 상관없이, 이 안내서를 통해 가장 인기있는 자바스크립트 라이브러리 중 일부를 알아볼 수 있습니다.

# 자바스크립트 라이브러리란?

라이브러리의 풍경에 뛰어드기 전에 자바스크립트 라이브러리가 무엇인지 명확히 해보겠습니다. 주로 구현 기능과 기능을 제공하는 미리 작성된 자바스크립트 코드의 집합입니다. 이는 개발자가 일반적인 작업을 위해 바퀴를 다시 발명하는 것을 피하고 대신 개발 작업의 고유한 측면에 집중할 수 있다는 것을 의미합니다.

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

## React.js:

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 중 가장 널리 사용되는 오픈 소스입니다. 페이스북의 개발자 그룹이 주도하는 React는 Model-View-Controller 원칙에 따라 개발되었습니다.

사용 사례: React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 단일 페이지 애플리케이션(SPA) 및 동적 웹사이트를 개발하는 데 인기가 있습니다.

주요 기능:

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

- 성능 최적화: React는 성능을 최적화하기 위해 가상 DOM을 사용합니다.
- 컴포넌트 기반 아키텍처: React는 대규모 애플리케이션을 구축하기 위한 컴포넌트 기반 아키텍처를 제공합니다.

추가 정보:

- Facebook에서 개발됨
- 2013년 오픈 소스로 출시
- 오늘날 개발자들에게 널리 사용됨
- https://www.uxpin.com/studio/blog/reactjs-websites-examples/

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

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

## Vue.js:

Vue.js는 사용자 인터페이스 및 싱글 페이지 애플리케이션을 구축하는 데 사용되는 오픈 소스 자바스크립트 프레임워크입니다. 2013년 개발이 시작된이 프레임워크의 현재 버전은 3.2입니다. 2020년 9월 18일에 출시된 3버전에서는 소스 코드가 TypeScript로 재작성되었습니다.

사용 사례: Vue.js는 사용자 인터페이스 및 싱글 페이지 애플리케이션을 구축하는 JavaScript 라이브러리입니다. 배우고 사용하기 쉽습니다.

주요 기능:

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

- Virtual DOM: Vue.js는 React와 유사한 가상 DOM을 사용합니다.
- 유연성: Vue.js는 높은 유연성을 제공하며 쉽게 통합할 수 있습니다.

추가 정보:

- 2014년 Evan You에 의해 개발됨
- 사용자 친화적인 API 및 쉬운 학습 곡선으로 인기 획득
- https://vuejs.org/examples/

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

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

## Angular.js:

Angular.js는 구글에서 지원하고 전 세계 소프트웨어 개발자들이 기여하는 오픈 소스 웹 애플리케이션 프레임워크입니다. 자바스크립트로 작성된 Angular는 MVC 원칙을 준수하면서 단일 페이지 애플리케이션을 작성할 수 있게 해줍니다.

사용 사례: Angular는 Google에서 개발한 자바스크립트 프레임워크입니다. 단일 페이지 애플리케이션과 대규모 프로젝트를 구축하는 데 인기가 있습니다.

주요 기능:

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

- MVC 아키텍처: Angular은 MVC (Model-View-Controller) 아키텍처를 기반으로 합니다.
- TypeScript 지원: Angular은 TypeScript 지원으로 강력한 유형 검사를 제공합니다.

추가 정보:

- 2010년에 처음 출시됨
- 포괄적인 생태계 제공
- Angular 2에서 주요 업데이트를 거쳐 현재는 단순히 "Angular"로 더 잘 알려져 있음
- https://www.freecodecamp.org/news/the-best-angular-examples/

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

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

## jQuery:

jQuery은 2006년 John Resig에 의해 개발된 오픈 소스 JavaScript 라이브러리이며 현재는 대규모 jQuery 팀에 의해 개발되고 있습니다. DOM 및 AJAX 작업을 용이하게 하는 데 특히 알려져 있습니다. 전 세계적으로 널리 사용되며 제가 가장 좋아하는 라이브러리입니다.

사용 사례: jQuery는 웹 페이지를 더 상호 작용적이고 동적으로 만드는 데 사용되는 JavaScript 라이브러리입니다. 주로 간단한 DOM 조작, 이벤트 처리 및 AJAX에 사용됩니다.

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

- DOM 조작: jQuery는 DOM 조작 작업을 간단하게 합니다.
- 이벤트 처리: jQuery는 이벤트를 처리하는 편리한 방법을 제공합니다.
- AJAX: jQuery는 AJAX 요청을 간단하게 합니다.

추가 정보:

- 2006년 John Resig에 의해 개발됨
- 웹 개발을 위한 가장 오래된 라이브러리 중 하나
- 오늘날에도 여전히 널리 사용됨
- https://intellipaat.com/blog/jquery-project-ideas/

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

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

## D3.js:

D3.js는 웹 브라우저에서 수치 데이터를 시각화할 수 있는 오픈 소스 자바스크립트 라이브러리입니다. SVG, HTML5 및 CSS 구성 요소를 사용하여 데이터를 시각화하는 D3.js는 Protovis 프레임워크의 연장으로 개발되었습니다.

사용 사례: D3.js는 데이터 시각화 프로젝트용 자바스크립트 라이브러리입니다. 차트, 지도 및 복잡한 데이터 시각화를 만드는 데 널리 사용됩니다.

주요 기능:

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

- 커스터마이제이션: D3.js는 데이터 조작 및 시각화를 위한 강력한 커스터마이제이션 옵션을 제공합니다.

추가 정보:

- Mike Bostock이 개발
- 2011년에 출시
- 유연성과 광범위한 커스터마이제이션 옵션으로 유명
- https://d3-graph-gallery.com/intro_d3js.html

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

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

## Next.js:

Next.js는 React 기반의 웹 개발 프레임워크로, Vercel이라는 비공개 회사에서 만들었습니다. 이 프레임워크는 서버 측 렌더링과 정적 웹사이트 렌더링을 제공합니다.

활용 사례: Next.js는 서버 측 렌더링과 정적 사이트 생성과 같은 기능을 제공하는 React 기반 프레임워크입니다. 이는 싱글 페이지 응용 프로그램, 웹 응용 프로그램 및 블로그를 구축하는 데 인기가 있습니다.

주요 기능:

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

- 서버 측 렌더링: Next.js는 서버 측 렌더링을 통해 페이지 로드 시간과 SEO를 개선합니다.
- 정적 사이트 생성: Next.js는 정적 사이트 생성(SSG)와 동적 라우팅을 지원합니다.

추가 정보:

- 2016년 Vercel(이전 Zeit)에 의해 출시됨
- 현대 웹 개발 프로젝트에서 널리 사용됨
- https://codedamn.com/news/nextjs/top-10-project-ideas

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

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

## Node.js:

Node.js는 서버 측 및 네트워크 어플리케이션을 개발하기 위해 개발된 오픈 소스 런타임 환경입니다. Node.js 어플리케이션은 일반적으로 클라이언트 측 스크립팅 언어인 JavaScript를 사용하여 개발됩니다.

사용 사례: Node.js는 JavaScript가 서버 측에서 실행되도록 허용하는 런타임 환경입니다. API, 실시간 어플리케이션 및 웹 서버를 개발하는 데 인기가 있습니다.

주요 기능:

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

- 이벤트 위주: Node.js는 빠르고 효율적인 성능을 위해 이벤트 주도형, 논 블로킹 I/O 모델을 사용합니다.
- 양쪽 모두에서 JavaScript 사용: Node.js를 사용하면 클라이언트 측과 서버 측 양쪽에서 JavaScript를 사용할 수 있습니다.

추가 정보:

- 2009년 라이언 달에 의해 출시
- JavaScript 부상과 함께 인기 얻음
- https://www.knowledgehut.com/blog/web-development/node-js-projects

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

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

## Deno.js:

Deno는 V8 JavaScript 엔진과 Rust 프로그래밍 언어를 기반으로 한 JavaScript 및 TypeScript용 런타임 환경입니다. 이는 Node.js의 진보된 버전으로 나타납니다. 그가 자리를 차지할 수 있을까요? 기대해 봅시다.

사용 사례: Deno.js는 Node.js의 창시자인 Ryan Dahl이 만든 현대적인 JavaScript 및 TypeScript 런타임 환경입니다. 더 안전하고 현대적이며 모듈식 플랫폼을 제공하는 것을 목표로합니다.

주요 기능:

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

- 보안: Deno.js는 샌드박싱과 안전한 기본 구성을 우선시하여 보안을 강조합니다.
- 모듈 시스템: Deno.js는 향상된 모듈화를 위해 브라우저와 유사한 모듈 시스템을 사용합니다.
- 언어 지원: Deno.js는 JavaScript와 TypeScript를 모두 지원합니다.

추가 정보:

- 2020년에 출시됨
- 최신 기술을 지원하여 현대 프로젝트에서 주목을 받고 있음
- https://getstream.io/blog/build-deno-app/

[이미지](/assets/img/2024-08-17-AComprehensiveGuidetotheMostPopularJavaScriptLibrariesApril2024_8.png)

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

## Three.js:

Three.js는 WebGL을 사용하여 웹 브라우저에서 애니메이션 3D 컴퓨터 그래픽을 만들고 표시하는 데 사용되는 크로스 브라우저 JavaScript 라이브러리 및 응용 프로그램 프로그래밍 인터페이스(API)입니다. 소스 코드는 GitHub의 저장소에 호스팅되어 있습니다.

사용 사례: Three.js는 3D 그래픽 및 애니메이션을 만들기 위한 JavaScript 라이브러리입니다. 3D 장면, 게임, 데이터 시각화 및 시뮬레이션 개발에 널리 사용됩니다.

주요 기능:

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

- WebGL을 기반으로 함: Three.js는 WebGL을 기반으로 하여 복잡한 3D 씬을 쉽게 만들 수 있습니다.
- 포괄적인 문서 및 예제: Three.js는 포괄적인 문서와 다양한 예제를 제공하여 개발자들이 쉽게 시작할 수 있도록 도와줍니다.

추가 정보:

- 2010년 Ricardo Cabello에 의해 개발됨
- 전문가와 아마추어 개발자 모두에게 널리 사용되는 3D 프로젝트에 사용됨
- https://freefrontend.com/three-js-examples/

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

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

## Anime.js:

Anime.js는 간단하면서 강력한 API를 가진 JavaScript 애니메이션 라이브러리입니다. 이 라이브러리는 작은 파일 크기를 가지고 모든 최신 브라우저를 지원합니다. HTML, CSS, JS, SVG 및 DOM 속성을 애니메이션화하는 데 사용할 수 있습니다.

사용 사례: Anime.js는 웹 프로젝트에서 애니메이션을 만드는 JavaScript 라이브러리입니다. CSS, SVG 및 JavaScript 애니메이션을 쉽게 만들 수 있습니다.

주요 기능:

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

- 간단하고 강력한 API: Anime.js는 애니메이션의 타이밍 및 다른 속성을 제어하기 위한 간단하고 강력한 API를 제공합니다.

추가 정보:

- 2016년에 출시됨
- 사용자 인터페이스에 동작과 애니메이션을 추가하기 위해 개발자들 사이에서 인기가 있음
- https://blog.logrocket.com/exploring-anime-js-example-site-animation-project/

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

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

자바스크립트 라이브러리 및 프레임워크 요약:

자바스크립트 생태계는 웹 애플리케이션 및 사용자 인터페이스를 구축하는 데 다양한 라이브러리와 프레임워크를 제공합니다. 각 도구마다 강점과 약점이 있어 특정 프로젝트 요구 사항에 맞는 올바른 도구를 선택하는 것이 중요합니다. 저의 즐겼던 것은 오랫동안 vue.js, node.js 및 jQuery이었지만, 세상은 변하고 개발은 계속됩니다. 모두 시도하고 테스트해보는 것이 좋을 것 같아요!

- React: 단일 페이지 애플리케이션 및 동적 웹사이트를 구축하는 인기 있는 선택지입니다.
- Vue.js: 사용자 인터페이스를 만들기 위한 쉽고 유연한 라이브러리입니다.
- Angular: 대규모 및 기업 애플리케이션을 개발하는 강력한 프레임워크입니다.
- jQuery: DOM 조작, 이벤트 처리 및 AJAX를 단순화하는 다재다능한 라이브러리입니다.
- D3.js: 데이터 시각화, 차트 및 지도를 만드는 강력한 도구입니다.
- Next.js: 서버 측 렌더링 및 정적 사이트 생성을 제공하는 React 기반 프레임워크입니다.
- Node.js: API, 실시간 응용프로그램 및 웹 서버를 구축하는 자바스크립트 런타임 환경입니다.
- Deno.js: 보안과 모듈성을 우선하는 현대적인 JavaScript 및 TypeScript 런타임 환경입니다.
- Three.js: 웹 프로젝트에서 3D 그래픽과 애니메이션을 만드는 인기 있는 라이브러리입니다.
- Anime.js: 웹 사용자 인터페이스에 애니메이션을 추가하는 간단하고 강력한 라이브러리입니다.

자바스크립트 라이브러리나 프레임워크를 선택할 때 프로젝트 요구 사항, 개발자 경험, 커뮤니티 지원 및 문서 가용성과 같은 요인을 고려해야 합니다. 이러한 요인을 신중하게 평가하면 다음 웹 애플리케이션이나 사용자 인터페이스를 구축하는 데 올바른 도구를 선택하는 데 도움이 될 것입니다.

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

# 여기까지 와주셔서 감사합니다.

아래 링크로 연락주세요:

[LinkedIn 바로 가기](https://www.linkedin.com/in/yunus-emre-ada%C5%9F-212200174/)

[Instagram 바로 가기](https://www.instagram.com/emreyadas/)

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

아래에서 다른 게시물을 찾을 수 있어요:


2024년 8월 최신 인기 자바스크립트 라이브러리 정리


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

로그는 응용 프로그램 개발의 중요한 측면이지만, 올바르게 처리되지 않으면 민감한 데이터가 노출될 수 있습니다. 이 기사에서는 TypeScript와 React를 사용할 때 콘솔에 민감한 데이터를 로깅하지 않는 여러 기술에 대해 살펴보겠습니다.

# 1. 환경별 로깅 사용

개발 환경과 프로덕션 환경을 구분하여 로깅 동작을 제어하세요. 예를 들어, 환경 변수를 사용하여 개발 중에 자세한 로깅을 활성화하고, 프로덕션에서는 최소화하거나 사용하지 않도록 할 수 있습니다.

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

```js
if (process.env.NODE_ENV === "development") {
  console.log("Debug information");
}
```

# 2. 로그 산화

민감한 정보를 제거하거나 마스킹하여 출력하기 전에 로그를 산화합니다. 이를 통해 로그된 데이터가 비밀번호, 토큰 또는 기타 개인 정보를 노출하지 않도록 합니다.

```js
function sanitizeLog(data: any): any {
  if (typeof data === "object") {
    const sanitized = { ...data };
    if (sanitized.password) sanitized.password = "****";
    if (sanitized.token) sanitized.token = "****";
    return sanitized;
  }
  return data;
}

console.log(sanitizeLog(userData));
```

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

# 3. 사용자 정의 로거 유틸리티

로그 메커니즘을 추상화하고 무엇을 로깅할지 제어하기 위한 사용자 정의 로거 유틸리티를 만듭니다. 이 접근 방식은 로깅 로직을 중앙 집중화하고 일관된 살균화 및 포매팅을 구현하기 쉽게 만듭니다.

```js
class Logger {
  static log(message: string, data: any) {
    if (process.env.NODE_ENV === "development") {
      console.log(message, sanitizeLog(data));
    }
  }
}

Logger.log("사용자 데이터:", userData);
```

# 4. TypeScript를 사용한 타입 안전성

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

타입스크립트를 사용하여 민감한 데이터를 제외한 유형을 정의하고 강제하세요. 이렇게 하면 유형 시스템을 활용하여 민감한 정보가 실수로 로그에 남지 않도록 도와줍니다.

```js
interface User {
  id: number;
  name: string;
  email: string;
}

interface SensitiveUser extends User {
  password: string;
  token: string;
}

function logUser(user: User) {
  console.log(user);
}
const user: SensitiveUser = { id: 1, name: "John", email: "john@example.com", password: "secret", token: "abc123" };
logUser(user); // 이것은 적절하게 세척되지 않으면 TypeScript 오류를 발생시킵니다.
```

# 5. 서드파티 로깅 라이브러리

Winston 또는 Pino과 같은 서드파티 라이브러리를 활용하여 고급 로깅 기능을 활용하세요. 이러한 라이브러리는 로깅 수준 및 형식에 대한 더 나은 제어를 제공하여 민감한 데이터를 관리하기 쉽게 만들어줍니다.

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

```js
import * as winston from "winston";

const logger = winston.createLogger({
  level: process.env.NODE_ENV === "development" ? "debug" : "info",
  format: winston.format.json(),
  transports: [new winston.transports.Console()],
});

logger.info("사용자 데이터:", sanitizeLog(userData));
```

# 6. 민감한 작업 로깅 피하기

민감한 작업에서 불필요한 세부 정보가 로깅되지 않도록 데이터를 조건부로 로깅합니다. 이 접근 방식은 민감한 프로세스 중 개인 정보를 노출하는 위험을 줄입니다.

```js
if (operation !== "sensitive") {
  console.log(`작업: ${operation}, 데이터:`, data);
}
```

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

# 7. 정적 코드 분석과 린팅

린팅 도구를 사용하여 로깅 규칙을 강제하고 민감한 데이터가 기록되는 것을 방지하세요. ESLint 또는 TSLint를 구성하여 특정 유형의 데이터를 기록하는 것에 대해 경고하면 안전한 로깅 관행을 유지할 수 있습니다.

```js
// .eslintrc.json
{
    "rules": {
        "no-console": ["error", { "allow": ["warn", "error"] }],
        "security/detect-object-injection": "error"
    }
}
```

# 8. 정기적으로 로그를 검토하고 감사하세요.

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

정기적으로 로그를 검토하고 감사하여 민감한 데이터가 노출되지 않도록 확인하세요. 자동화된 도구를 사용하여 로그를 스캔하고 분석하여 민감한 정보가 있는지 확인함으로써 추가적인 보안 방어층을 제공할 수 있습니다.

이러한 기술을 따르면 TypeScript 및 React 애플리케이션의 콘솔 로그를 통해 민감한 정보가 노출될 위험을 크게 줄일 수 있습니다. 적절한 로깅 관행은 애플리케이션 데이터의 보안과 개인 정보 보호를 유지하는 데 중요합니다.


콘솔에 중요한 데이터를 기록하지 않는 방법 5가지


<img src="/assets/img/2024-08-17-ServerActionsvsAPIRoutesinNextjs_0.png" />

Next.js에서 Server Actions 및 API Routes는 데이터를 보내거나 변이를 실행하여 웹 서버와 통신하는 데 사용되는 방법입니다.

오늘은 Server Actions와 API Routes 간의 주요 차이를 표 형식으로 강조하고, 각각에 대한 예제와 설명을 제공할 것입니다.

그럼 이제... 바로 시작해 봅시다!

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

# API 라우트

API 라우트는 Next.js에서 데이터를 가져오고 보내는 전통적인 방법이며, Next.js 앱 라우터가 출시되기 전부터 사용되어 왔습니다.

다음은 MongoDB에서 데이터를 가져와 프론트엔드로 반환하는 기본적인 API 라우트의 예시입니다:

app/api/items/route.ts

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

```js
export async function GET() {
  const res = await fetch("https://data.mongodb-api.com/...", {
    headers: {
      "Content-Type": "application/json",
      "API-Key": process.env.DATA_API_KEY,
    },
  });
  const data = await res.json();

  return Response.json({ data });
}
```

중요 사항:

- API 경로의 네이밍 규칙은 HTTP 메소드를 대문자로 사용하는 것입니다. 예를 들어 GET, POST.
- 이 API에 액세스하려면 example.com/api/items로 GET 요청을 보내야 합니다. 이를 통해 GET 핸들러의 코드가 실행됩니다.
- API 경로는 페이지 파일과 충돌할 수 있습니다. 예를 들어 app/api/items 폴더 안에 page.tsx 파일을 정의하면 동일한 디렉토리의 route.ts 파일과 충돌할 수 있습니다.

또 다른 중요한 점은 웹훅이 API 경로와 아주 잘 작동한다는 것입니다.

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

웹훅은 특정 이벤트가 발생할 때 다른 앱으로 실시간 데이터를 전송할 수 있는 특별한 API 루트입니다 (스트라이프 웹훅과 같은 것을 생각해보세요).

여기 실제 Stripe 웹훅의 예시가 있습니다. 이 웹훅은 고객 구매 후 트랜잭션 데이터를 저장합니다:

```js
import { headers } from "next/headers"
import { db } from "@/db"
import { transactions } from "@/db/schema"
import { env } from "@/env.mjs"
import Stripe from "stripe"
import { stripe } from "@/lib/stripe"

export async function POST(req: Request) {
  const body = await req.text()
  const signature = headers().get("Stripe-Signature") as string

  let event: Stripe.Event
  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.NODE_ENV === "development"
        ? env.STRIPE_WEBHOOK_TEST_SECRET
        : env.STRIPE_WEBHOOK_SECRET
    )
  } catch (error: any) {
    return new Response(`Webhook Error: ${error.message}`, { status: 400 })
  }

  const session = event.data.object as Stripe.Checkout.Session

  if (event.type === "checkout.session.completed") {
    const { data } = await stripe.checkout.sessions.listLineItems(session.id)

    const { name: productName } = await stripe.products.retrieve(
      data[0].price!.product.toString()
    )
    const priceId = data[0].price!.id
    const userId = session.metadata!.userId
    const paymentIntent = session.payment_intent!.toString()

    await db.insert(transactions).values({
      paymentIntent,
      priceId,
      userId,
      productName,
    })
  }
  return new Response(null, { status: 200 })
}
```

API 루트가 웹훅에 사용되는 이유는 노출된 엔드포인트로 설정되어 쉽게 트리거할 수 있기 때문입니다.

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

서버 작업에는 미리 정의된 엔드포인트 URL이 없어서 이 방법으로 액세스할 수 없어요.

## 서버 작업

서버 작업은 Next.js 13에서 App 라우터의 출시와 함께 소개되었습니다.

서버 작업의 주요 목표는 데이터 변이를 쉽게 만들고 프론트엔드와 백엔드 개발 간의 갭을 줄이는 것입니다.

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

다음은 Resend 마법 링크를 사용하여 사용자를 인증하는 서버 액션의 예시입니다:

```js
"use server" // 이것은 이 파일이 서버 액션을 포함하고 있음을 Next.js에 알려줍니다.

// 시간당 매직 링크 요청을 2회로 제한합니다.
const ratelimit = new Ratelimit({
  redis: Redis.fromEnv(),
  limiter: Ratelimit.slidingWindow(2, "60 m"),
})

interface AuthResend {
  redirectTo: string
  email: string
}

export async function authenticateResend({
  redirectTo,
  email,
}: AuthResend): Promise<ActionResponse> {
  // IP별로 인증 요청 비율 제한하는 코드입니다.
  // 이를 통해 이메일 스팸을 방지할 수 있습니다.
  const ip = headers().get("x-forwarded-for") ?? ""
  const { success } = await ratelimit.limit(ip)

  if (!success) {
    return {
      ok: false,
      code: 429,
      error: "에러, 나중에 다시 시도해주세요",
    }
  }
  // Resend를 사용하여 로그인하면 사용자의 이메일 수신함에서 클릭할 수 있는 마법 링크가 생성됩니다.
  await signIn("resend", {
    email,
    redirect: false,
    callbackUrl: redirectTo === "/login" ? "/dashboard" : redirectTo,
  })

  return {
    ok: true,
    code: 200,
  }
}
```

주요 사항:

- 서버 액션 구문은 간단합니다. 파일 상단에 "use server" 지시어를 추가하고 addData, authenticate 등의 함수를 작성하면 됩니다.
- 서버 액션은 엔드 투 엔드 타입 안전성을 가지고 있습니다. 이는 서버 액션이 보내고 받는 데이터의 형태를 알 수 있어 개발자 경험에 큰 도움이 됩니다.
- 서버 액션은 캐시되지 않습니다. 이는 서버 액션이 하단에 POST HTTP 엔드포인트를 만들기 때문에 Next.js에서 캐시되지 않습니다. 이는 서버 액션이 폼 제출에서 사용될 때 CSRF 공격을 방지하기 위한 조치입니다.

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

# 표 비교

이것은 Next.js에서 서버 작업과 API 라우트에 대한 간략한 개요였습니다. 각각의 예시를 살펴보았습니다.

이제 언제 API 라우트 또는 서버 작업이 특정 시나리오에서 더 적합한지 결정해야 할 때 참고할 수 있는 테이블로 주요 차이점들을 요약해 보겠습니다:

![표 비교](/assets/img/2024-08-17-ServerActionsvsAPIRoutesinNextjs_1.png)

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

아래는 다크 모드 버전입니다 😉

![다크 모드](/assets/img/2024-08-17-ServerActionsvsAPIRoutesinNextjs_2.png)

# 결론

Next.js에서 서버 액션과 API 라우트에 관한 이 기사를 즐겁게 읽어주셨기를 바랍니다.

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

이러한 개념들은 이미 오랫동안 존재해 왔지만, 두 가지 사이의 명확한 상세 비교를 찾을 수 없어서 데이터를 가져오는 두 가지 방법에 대해 설명하고 싶었습니다.

# 참고 자료

- API 라우트
- 서버 액션
- 세그먼트 구성


Nextjs에서 Server Actions와 API Routes 비교 및 정리


## 작업

![image](/assets/img/2024-08-17-MyTwoExperiencesasaDeveloperThatHurtMyEmployment_0.png)

## 케이스 1:

당시에는 미디어/인터넷 기관에서 학생 조교 및 코더로 일했습니다.

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

## 회사 소개:

사장님은 디자인을 공부했고, 대부분의 직원들은 HTML과 CSS에 대해 전혀 모르는 미디어 디자이너였습니다. 보스의 친척인 유일한 "개발자"가 있었는데, 그는 모든 것을 스스로 가르치고 웹사이트를 배포하는 업무를 책임졌습니다.

## 저에 관한 정보:

저는 이전에 공부했던 것들은 주로 자바에서의 객체 지향 프로그래밍(자바스크립트는 아님), 다양한 알고리즘들, 수학 그리고 약간의 소프트웨어 아키텍처와 그와 관련된 것들이었습니다. HTML, PHP, CSS에 대한 기본 지식이 있습니다. 많은 것들을 스스로 배웠습니다.

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

첫 3개월 동안 모든 것이 순조롭게 진행되었어요. 작업은 기존 HTML 기반 정적 웹사이트를 Contao로 이전하고, PHP로 내 백엔드 모듈을 만들고, CMS를 통해 프론트엔드를 편집 가능하게 하는 것이었어요.

그 모든 것을 몇 일 안에 혼자서 배웠어요. 제 고용주가 한 일가족의 팁을 주는 것 말고 따로 도움을 주지 않았어요. 그 팁은 “rock sold”라는 플러그인이 있다고 들은 건데요, 그 순간부터 난 깊은 물에 던져졌어요.

솔직히 말해서, 그것을 해내는 데 운이라고 해도 과언이 아니에요. Contao를 구현하는 것이 매우 직관적이고 쉬워서 그랬어요. 다른 학생이라면 추가적인 도움 없이는 해내지 못했을 수도 있었을 거예요.

그리고 꼼수가 나왔어요: 기존 웹사이트의 양식을 Javascript로 "빠르게" 수정해야 했는데, 여기에서 특정 필드는 이전에 선택된 다른 필드에 의해만 표시되는 조건이 있었어요.

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

처음에는 쉬워 보였지만, 실제로는 기존 코드를 조금 수정하고 조금의 논리를 적용하여 간단히 필드를 숨기고 표시하는 방식으로 만들 수 있겠다고 생각했어요. 사실 막연하지 않은 작업이었죠.

하지만 여기서 "너무 많은 요리사가 국물을 망치는" 문제가 발생했어요.

해당 웹사이트는 이전에 여러 회사와 개발자들이 구현하고 수정해온 결과였죠. 부트스트랩과 다른 프레임워크가 혼합돼 있었거나, 아예 없는 경우도 있었어요. CSS 코드는 계속 덮어쓰였고, 개발자들이 매번 새로운 규칙을 마지막에 추가해서 무수히 많은 곳에서 덮어쓰여져 있었어요.

그것을 파악하는 데는 시간이 꽤 걸렸어요. 뿐만 아니라, 양식은 주로 PHP로 만들어졌지만, 분명히 복사하여 붙여넣기되었고 인터페이스 구현이 정확하게 이루어지지 않았어요.

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

서버 어딘가에 있는 .php 파일에서 폼의 내용이 나왔다고 들었어요 (먼저 스스로 찾아야 했죠). 물론 폼 파일 자체에 직접 src로 명시되지 않았지만 페이지가 생성될 때 어딘가에 숨겨져 있었어요. 그것 때문에 미치겠더라구요.

또한, 이 파일은 실제로 존재했지만 사용되지 않았어요. 다른 곳 (전혀 보이지 않았던 곳)에서 데이터베이스의 파일이 JavaScript를 사용하여 폼에 채워졌어요. 그래서 먼저 폼이 파일에서 데이터를 채웠지만, 파일을 찾을 수 없는 개발자가 있었는지 찾기 싫어했던 사람이 나와서 내용을 후에 스크립트로 덮어썼어요.

이런 걸 해결하려면 상당한 시간이 걸려요. 특히 JavaScript에 대해 사전 지식이 없다면 더 그렇죠. 저는 크리스마스 휴가 동안 자바스크립트를 배워서 이런 엉망인 것을 정리해야 했어요.

사장이 이미 송장을 발행했기 때문에 크리스마스 휴가 중에 끝내달라는 업무를 맡겨줬어요. 결국 해년 전에 그것을 회계에 포함시키고 싶었던 겁니다.

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

안녕하세요! 불행하게도 마감일을 맞추지 못했고, 1월 2일에 작업을 마무리했어요. 멍청하고 어리석은 양식이었음에도 불구하고 두 주 이상이나 고생했어요.

제 상사는 이미 송장을 발행한 상태라서 고객과 문제가 생겼고, 고객은 구현이 이뤄지지 않은 것에 크리스마스 때 당황하고 기분이 상해서 상사의 자존심이 상처이 되어 1월에 퇴직통지를 받았어요.

이게 현실이에요.

## Case #2:

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

워드프레스만 다루는 회사에서 일해보는 시도를 했어요. 면접에서는 CMS에 대한 경험이 있지만 워드프레스는 처음이라고 말했어요.

그 회사에는 두 명의 개발자가 있었어요: 외부 개발자 한 명과 사장님 본인이요. 사장님은 외부 개발자에게 나를 훈련시키기로 지시하셨고, “우리는 코더를 급하게 찾고 있지만 누군가를 훈련시킬 시간이나 돈이 별로 없어요.”라고 말씀하셨어요. 그래서 “외부 개발자의 옆에서 지켜보라”고 했어요.

그러나 외부 직원은 나에게 관심이 없었으며 나와 관련된 합당한 이유도 없었어요. 그럼 그의 작업이 사라질 것이라고 생각했어요. 매우 억지스럽지 않았나 싶었어요.

내 업무는 스마트폰 버전에서 제대로 표시되지 않는 완전히 망가진 메뉴를 수리하는 것이었어요. 또한 프론트엔드의 버그를 수정해야 했어요. 그러나 전혀 모르는 워드프레스의 특정 사항으로 인해 즉시 제약을 받았고, 기본적으로 “X 라인에서 Y 오류가 발생했으니 그것을 수정하라”고 했지만 오류는 완전히 다른 곳에 있었어요.

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

그런 다음 "가만히 있는" X 라인의 오류를 수정하고 싶었지만, 원래의 오류를 바로 잡고 싶었어요. 그러나 모를 바에 나가 문제에 빠졌어요. 왜 명령대로 하지 않았는지 물었어요. 그래서 전 어떻게든 X 지점에서 프론트엔드에서 올바르게 만들기 위한 해결책을 고안해냈어요.

그 코드는 진짜 최악이었어요. 저는 그렇게 사용하지 않았을 거예요. 그러나 제가 그렇게 해야 했어요. 결과적으로, 제가 다음과 같은 이유로 해고당했어요: 모든 걸 다 알고 있음/조숙, 잘못된 코드, 그리고 구현하는 데 너무 오랜 시간이 걸림. 제 생산성이 낮았고 '프로그래머 유형이 아니라'라는 이유로 비판을 받았으며 '구조에 대한 감각이 없다'는 것을 비판 받았어요. 비판은 나와 제 성격에 상당히 큰 탄압이었어요.

그럼에도 불구하고, 저는 이러한 경험들에 대해 기뻤어요. 제가 해고당한 것을 좋게 받았어요. 그러니 개발자를 해고해주세요. 왜냐하면 지금은 훌륭한 회사에서 일하고 있어요, 저와 제 고용주 모두 극도로 만족하며, 여기서 제가 많은 지원과 동시에 많은 신뢰를 받고 있어요. 제가 여기서 더 나이 많은 동료들로부터 믿으라ㄴ 양양한 것을 배우고 있어요.

오류의 원인이 많기 때문에 작업에 대해 자세한 설명 없이는 일반화할 수 없어요. 당신이 묻는 질문은 여러분의 의견을 형성하기 위한 전문 지식이나 기술 지식이 부족하다는 것을 시사해요.

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

IT 배경이 없는 기업가들에게는 왜 일부 작업이 놀라울 만큼 오랜 시간이 걸리는지, 반면 거의 동일한 작업이 훨씬 많은 시간이나 전문 지식이 필요한 작업을 왜 정확히 하지는 않는지 이해하는 것이 특히 어렵습니다.

프로그래머들은 항상 연구 작업에 많은 시간을 주어야 합니다. 재정적 이유로 프리랜서/외부 회사를 사용할 수 없거나 원치 않는다면, 적어도 주니어 개발자들도 시간이 필요하다는 것을 알아야 합니다. 그들이 “나쁜” 또는 “어리석은” 것을 의미하지는 않습니다.

# 간단한 한국어로 🚀

In Plain English 커뮤니티의 일원이 되어 주셔서 감사합니다! 떠나시기 전에:

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

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


시니어 개발자가 알려주는 반드시 하면 안되는 개발 습관


<img src="/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_0.png" />

강력한 실시간 앱을 기획 중이었어요. 그래서 웹 소켓이 필수적이었죠.

하지만 찾아본 웹 소켓 호스팅 옵션은 모두 너무 비실거나 설정이 복잡했어요.

그래서 Redux의 혁신적인 트릭을 사용해 Firebase를 해킹해서 무료 웹 소켓을 사용했지요. Pusher 죄송해요.

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

웹 소켓은 정말 좋아요.

우리가 흔히 아는 클래식 HTTP 요청-응답 방식과는 달리, 웹 소켓 서버는 요청이 필요하지 않고 실시간으로 여러 메시지를 다수의 연결된 클라이언트에게 보낼 수 있어요.

파이어베이스 Firestore는 무료이면서 기본적으로 이러한 강력한 실시간 기능을 제공해요. 하지만 큰 문제가 있었죠.

Firestore는 데이터 중심이자 클라이언트 중심이에요.

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

하지만 웹 소켓은 행동 중심적이고 서버 중심적입니다.

웹 소켓에서 클라이언트로서 이벤트 메시지를 채널을 통해 보내고 서버가 이를 사용하여 데이터를 처리하는 방법을 결정합니다.

서버가 완전한 제어를 갖고 있으며 어떤 사용자로부터도 악의적인 조작의 여지가 없습니다.

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

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

파이어스토어에서는 데이터를 데이터베이스에 덤프하고 끝납니다. 클라이언트는 원하는대로 저장할 수 있습니다. URL을 가지고 있다면 누구나 데이터베이스의 모든 것에 액세스할 수 있습니다.

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

물론, 특정 데이터 경로를 보호하기 위해 "보안 규칙"을 추가할 수 있습니다.

하지만 이는 Pusher와 같은 실제 웹 소켓 서버의 유연성과 원격 제어와는 비교할 수 없이 부족합니다.

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

그리고 Pusher를 사용했지만 무료 동시 연결 수량이 적었습니다. 이 앱에서는 모든 사용자가 서버에 영구적으로 연결되어 있어야 했는데, 그러다가 앱을 닫을 때에도 포함입니다.

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

그리고 새 프로젝트를 작업할 때면 종종 환상을 부리고 언젠가 수천, 수백만 사용자를 보유할 것으로 기대합니다.

그래서 그 일이 언젠가 일어날 때, 상당히 많은 금액을 지불해야 할 것을 알고 있었습니다.

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

하지만 Firebase Firestore를 실제 서버처럼 작동하도록 만들고 데이터를 완전히 제어할 수 있다면 어떨까요?

저는 넓은 무료 한도를 즐기고 100만 개의 동시 연결이 가능할 것입니다.

## 내가 한 일

Firestore를 데이터 중심에서 행동 중심으로 변환해야 했습니다.

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

하지만 정확히 어떻게 해야 할까요? Firestore에 채널을 가져오고 데이터를 조절하는 데 필요한 모든 권한을 갖춘 종류의 "서버"를 만들 수 있을까요?

답은 Redux 입니다.

하지만 어떻게 일까요? Redux가 Firebase와 무슨 관련이 있는 걸까요?

음, 바로 Redux가 순수한 React를 데이터 중심으로 변형하는 데 도움이 되었습니다.

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

아래와 같이 변경해주세요:

<img src="/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_4.png" />

액션 중심으로:

<img src="/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_5.png" />

이제 데이터를 수정하는 책임은 리듀서의 손에 있습니다. 마치 웹 소켓 또는 HTTP 서버와 같이요.

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

- 작업: 클라이언트에서 서버로 채널에 실시간 메시지를 보내기
- 리듀서: 메시지를 처리하고 웹 소켓 서버의 데이터를 수정하기

그래서 어떤 방식으로든 작업과 리듀서를 Firestore로 가져와야 했습니다. 그리고 결국, 모든 것이 스키마로 이어졌다는 것을 깨달았어요.

# 작업

작업과 작업 디스패치를 복제하기 위해 서로 다른 주제의 채널에 대한 Firestore 콜렉션을 생성했습니다.

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

모든 채널은 사용자가 실시간 메시지를 수신하기 위한 각각의 하위 컬렉션을 가진 Firestore 문서입니다.

채널을 통해 이벤트를 보내려면 클라이언트는 해당 이벤트를 채널 내 자체 하위 컬렉션에 추가하면 됩니다.

![이미지1](/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_6.png)

![이미지2](/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_7.png)

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

이것을 함수로 추상화하여 재사용하기 쉽도록 만들 수 있습니다:

![image1](https://yourwebsite.com/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_8.png)

![image2](https://yourwebsite.com/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_9.png)

# 리듀서들

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

이제 데이터 수정을 위한 작업 처리를 추가해야 했습니다.

새로운 액션을 추가할 때마다 클라이언트에서 트리거되는 Firebase 함수를 만들어 이 작업을 수행했습니다:

따라서 데이터는 Firestore DB의 동일한 액션 스트림 컬렉션과 함께 존재하게 됩니다:

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

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

아무 사용자도이 데이터에 직접 액세스 할 수 없습니다. 보안 규칙에 따라 사용자는 채널 컬렉션의 하위 컬렉션을 통해 메시지를 전송할 수 있습니다.

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

# 서버로부터 실시간 메시지 수신

나는 클라이언트로부터 서버 이벤트 전용으로 각 채널 내에 특별한 하위 컬렉션을 생성합니다.

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

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

여기서 데이터를 저장한 후에 다른 사용자들에게 새로운 메시지를 중계합니다.

지금 서버에 클라우드 함수 트리거를 추가한 것처럼, 클라이언트 측 Firestore 리스너를 서버 하위 컬렉션에 추가합니다:

한 가지 주요 차이점은 이 클라이언트를 위해 의도된 메시지만 가져 오도록 targetIds로 필터링한 것입니다:

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

아래는 Markdown 형식으로 표 태그를 변경한 것입니다.

![Image 1](/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_13.png)

And I could also abstract this logic into a function to use it several times:

![Image 2](/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_14.png)

![Image 3](/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_15.png)

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

그래서 이를 통해 돈을 들이지 않고 Firebase에서 실시간 서버 중심 웹 소켓 기능을 완벽하게 복제했습니다.

실시간 데이터베이스에서도 완벽하게 작동합니다.

# 자바스크립트가 하는 모든 미친 짓

모든 뉘앙스를 알고 있다고 생각했을 때.
자바스크립트가 하는 모든 미친 짓은 자바스크립트의 세밀한 함정과 잘 알려지지 않은 부분에 대한 매혹적인 안내서로, 귀찮은 버그를 피하고 소중한 시간을 절약하세요.

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

Get a free copy here today.

![Image](/assets/img/2024-08-17-IhackedFirebasewithReduxtogetfreeWebSockethostingsorryPusher_16.png)


Posts