

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

TypeScript은 현대 웹 개발에서 프론트엔드 및 백엔드 엔지니어 모두에게 필수 요소가 되었습니다. TypeScript 인터뷰에서 가장 자주 묻히는 질문 중에는 두 가지 주제가 돋보입니다: 제네릭과 유틸리티 타입입니다. 이러한 개념을 이해하는 것은 유연하고 유지보수 가능하며 타입 안전한 코드를 작성하려는 모든 개발자에게 중요합니다.

# 제네릭이란 무엇인가요?

TypeScript의 제네릭은 다양한 데이터 유형과 함께 작동할 수 있는 컴포넌트(함수, 클래스 또는 인터페이스)를 만드는 방법을 제공합니다. 제네릭을 사용하면 다양한 데이터 유형에 적응할 수 있는 재사용 가능한 코드를 작성할 수 있어 코드를 더 유연하고 유지보수 가능하게 만들 수 있습니다.

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

# `T` 구문

`T` 구문은 TypeScript에서 제네릭 함수, 클래스 또는 인터페이스를 정의하는 데 사용됩니다. T는 호출자가 제공하거나 TypeScript 자체에서 추론할 유형을 나준하는 자리 표시자로 작용합니다. 이를 통해 함수 또는 클래스가 유형 안전성을 잃지 않고 다양한 유형을 처리할 수 있습니다.

```javascript
function deepCopy<T>(obj: T): T {
  return JSON.parse(JSON.stringify(obj));
}

const original = { name: "Alice", details: { age: 25, country: "USA" } };
const copied = deepCopy(original);

copied.details.age = 30;
console.log(original.details.age); // 출력: 25
console.log(copied.details.age); // 출력: 30
```

# 제네릭의 장점

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

- 재사용성: 한 번 코드를 작성하고 어떤 데이터 유형이든 사용할 수 있습니다.
- 유형 안전성: 실행 시간이 아닌 컴파일 시간에 오류를 감지합니다.
- 유연성: 여러 유형과 작동하는 유연한 데이터 구조와 알고리즘을 만듭니다.

## TypeScript의 유틸리티 유형

TypeScript는 기존 유형을 더 유연하게 조작하고 변환할 수 있게 해주는 여러 내장 유틸리티 유형을 제공합니다. 이러한 유틸리티 유형은 기존 유형에서 새로운 유형을 만들거나 응용 프로그램의 유형 안전성을 향상하는 데 귀중합니다.

## 자주 사용되는 유틸리티 유형

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

## 부분 `Type`:

부분 유틸리티 타입은 Type의 모든 속성을 선택적으로 만드는 유형을 구성합니다. 이는 유형에서 정의된 속성 중 일부만 필요한 객체를 만들고 싶을 때 유용합니다.

```js
interface Config {
  host: string;
  port: number;
  useSSL: boolean;
}

function createConfig(overrides: Partial<Config>): Config {
  const defaultConfig: Config = { host: "localhost", port: 8080, useSSL: false };
  return { ...defaultConfig, ...overrides };
}

const config1 = createConfig({ port: 3000 });
const config2 = createConfig({ host: "example.com", useSSL: true });

console.log(config1); // 출력: { host: "localhost", port: 3000, useSSL: false }
console.log(config2); // 출력: { host: "example.com", port: 8080, useSSL: true }
```

## 선택 `Type, Keys`

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

`Pick` 유틸리티 타입은 기존 타입(Type)에서 일부 프로퍼티(키)를 선택하여 새로운 타입을 생성합니다. 이는 특정 프로퍼티만 포함하는 타입을 만들 때 유용합니다.

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

type SafeUser = Pick<User, "id" | "name" | "email">;

function logUser(user: SafeUser): void {
  console.log(`ID: ${user.id}, 이름: ${user.name}, 이메일: ${user.email}`);
}

const user: User = { id: 1, name: "Alice", email: "alice@example.com", password: "securePass123" };
logUser({ id: user.id, name: user.name, email: user.email });
// 출력: ID: 1, 이름: Alice, 이메일: alice@example.com
```

## `Omit<Type, Keys>`

`Omit` 유틸리티 타입은 기존 타입(Type)에서 일부 프로퍼티(키)를 제거하여 새로운 타입을 구성합니다. 이는 특정 프로퍼티를 제외한 타입을 만들 때 유용합니다.

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

```js
인터페이스 User {
  id: number;
  name: string;
  email: string;
  password: string; 
}

// User 타입에서 'password' 필드를 제외한 UserWithoutPassword 타입을 정의합니다
type UserWithoutPassword = Omit<User, "password">;

const user: UserWithoutPassword = {
  id: 1,
  name: "Alice",
  email: "alice@example.com",
};

// 사용 예
console.log(user); // 출력: { id: 1, name: 'Alice', email: 'alice@example.com' }
```

## Readonly`Type`

Readonly 유틸리티 타입은 Type의 모든 속성을 읽기 전용으로 설정된 타입을 구성합니다. 이는 구성된 타입의 속성을 재할당할 수 없다는 것을 의미합니다.

```js
인터페이스 Todo {
  title: string;
  description: string;
  completed: boolean;
}

// 모든 Todo 속성을 읽기 전용으로 만듭니다
const todo: Readonly<Todo> = {
  title: "Learn TypeScript",
  description: "Study generics and utility types",
  completed: false,
};


console.log(todo); // 출력: { title: 'Learn TypeScript', description: 'Study generics and utility types', completed: false }
```

신입 프론트엔드 면접에서 물어본 타입스크립트 관련 질문 정리



소프트웨어 개발에서 올바른 디자인 패턴을 구현하면 확장성, 유지 보수성 및 성능을 크게 향상시킬 수 있습니다. Command Query Responsibility Segregation (CQRS) 패턴이 그 중 하나입니다. 이 글에서는 NestJS 애플리케이션에서 CQRS 패턴을 어떻게 구현하는지 탐구해볼 것입니다. 하지만 먼저 CQRS가 무엇이며 어째서 다가오는 기능에 적합한 아키텍처 선택일 수 있는지 살펴보겠습니다.

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

# CQRS 소개

## CQRS란 무엇인가요?

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

Command Query Responsibility Segregation (CQRS)은 소프트웨어 시스템에서 명령(command)과 조회(query) 간의 책임 분리를 권장하는 디자인 패턴입니다.

- 명령(Command): 시스템의 상태를 수정하는 작업들을 의미합니다. 예를 들어, 사용자 생성, 업데이트 또는 삭제와 같은 작업은 모두 명령에 속합니다. 왜냐하면 이러한 작업들은 애플리케이션의 데이터를 변경하기 때문입니다.
- 조회(Query): 상태를 변경하지 않고 데이터를 검색하는 작업을 의미합니다. 예를 들어, 사용자 세부 정보를 가져오거나 제품을 나열하는 것은 조회에 속합니다. 이러한 작업들은 데이터베이스에서만 읽기 때문에 상태를 변경하지 않습니다.

전통적인 아키텍처에서는 명령(쓰기 작업)과 조회(읽기 작업) 양쪽에 같은 모델이 종종 사용됩니다. 이는 성능 및 확장성을 최적화하는 데 어려움을 줄 수 있는 복잡한 단일 모델로 이어질 수 있습니다. CQRS는 시스템을 두 가지 구별된 부분, 명령 서비스와 조회 서비스로 나눔으로써 이를 개선합니다:

- 명령 서비스: 일관성과 비즈니스 규칙에 최적화되어 있습니다. 일반적으로 쓰기 최적화된 데이터베이스 모델을 사용하여 명령을 처리할 때 시스템의 상태가 일관되게 유지되도록 보장합니다.
- 조회 서비스: 이 서비스는 빠르고 효율적인 데이터 검색에 최적화되어 있습니다. 일반적으로 다른 데이터베이스 스키마나 캐시 계층을 도입하여 읽기 최적화된 모델을 사용합니다. 이를 통해 조회가 가능한 빠르게 처리되도록 보장합니다.

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

# CQRS를 선택해야 하는 경우

CQRS는 다음과 같은 특성을 가진 시스템에 적합합니다:

- 고 읽기/쓰기 불균형: 시스템이 소셜 네트워크나 콘텐츠 중심 애플리케이션과 같이 읽기 대 쓰기 비율이 극명하게 다른 경우, CQRS를 사용하면 해당 불균형을 더 효율적으로 처리할 수 있습니다.
- 복잡한 도메인 로직: 응용 프로그램에 복잡한 비즈니스 규칙이나 데이터 작성 시에만 해당되는 복잡한 워크플로우가 있는 경우, CQRS를 통해 해당 복잡성을 격리하고 관리할 수 있습니다.
- 확장 요구: 서로 다른 구성 요소가 독립적으로 확장해야 하는 대규모 분산 시스템의 경우, CQRS는 강력한 솔루션이 될 수 있습니다.

하지만 CQRS는 그 대가를 치뤄야 합니다. 두 개의 별도 모델을 유지할 때 발생하는 복잡성과 추가 비용이 동반될 수 있습니다. 따라서 이 수준의 분리가 실제로 프로젝트에서 필요한지 평가하는 것이 중요합니다.

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

# NestJS에서 CQRS 시작하기

이제 CQRS에 대한 개요를 알았으니, NestJS 애플리케이션에서 이를 어떻게 구현하는지 살펴보겠습니다. NestJS는 확장 가능한 서버 측 애플리케이션을 구축하기 위한 혁신적인 Node.js 프레임워크입니다. NestJS를 사용하면 @nestjs/cqrs 패키지를 통해 CQRS 패턴을 구현하는 것이 간단해집니다.

## 단계 1: 필요한 패키지 설치

먼저, @nestjs/cqrs 패키지를 설치해야 합니다:

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

```js
npm install @nestjs/cqrs
```

## Step 2: 애플리케이션 구조 설정

CQRS 기반 애플리케이션에서는 명령(command)과 쿼리(query)를 별도의 디렉토리로 구성해야 합니다. 아래는 예시 디렉토리 구조입니다:

```js
src/
│
├── app/
│   ├── commands/
│   ├── queries/
│   ├── handlers/
│   ├── services/
│   ├── schemas/
│   └── controllers/
```

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

- 명령어: 응용 프로그램 상태를 수정하는 작업을 정의합니다.
- 쿼리: 데이터 검색 작업을 처리합니다.
- 핸들러: 명령어와 쿼리를 처리하는 역할을 합니다.
- 서비스: 핵심 비즈니스 로직을 구현합니다.
- 스키마: 데이터베이스 모델과 스키마를 정의합니다.

## 단계 3: 간단한 CQRS 예제 구현하기

- 명령어 생성: 먼저 사용자를 생성하는 간단한 명령어를 만들어 봅시다.

```js
// src/app/commands/create-user.command.ts

export class CreateUserCommand {
  constructor(
    public readonly name: string,
    public readonly email: string,
  ) {}
}
```

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

2. Command Handler 생성: 이제이 명령을 처리하는 핸들러를 만들어야합니다.

```js
// src/app/handlers/create-user.handler.ts

import { CommandHandler, ICommandHandler } from '@nestjs/cqrs';
import { CreateUserCommand } from '../commands/create-user.command';
import { UserService } from '../services/user.service';

@CommandHandler(CreateUserCommand)
export class CreateUserHandler implements ICommandHandler<CreateUserCommand> {
  constructor(private readonly userService: UserService) {}

  async execute(command: CreateUserCommand) {
    const { name, email } = command;
    return this.userService.createUser(name, email);
  }
}
```

3. Query 생성: 다음으로, 이메일로 사용자를 가져오는 쿼리를 만들어 보겠습니다.

```js
// src/app/queries/get-user.query.ts

export class GetUserQuery {
  constructor(public readonly email: string) {}
}
```

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

4. 쿼리 핸들러 생성하기: 명령어와 마찬가지로 쿼리도 핸들러가 필요합니다. 실제 데이터 가져오기를 수행하는 핸들러를 만들어보겠습니다:

```js
// src/app/handlers/get-user.handler.ts

import { IQueryHandler, QueryHandler } from '@nestjs/cqrs';
import { GetUserQuery } from '../queries/get-user.query';
import { UserService } from '../services/user.service';

@QueryHandler(GetUserQuery)
export class GetUserHandler implements IQueryHandler<GetUserQuery> {
  constructor(private readonly userService: UserService) {}

  async execute(query: GetUserQuery) {
    return this.userService.findByEmail(query.email);
  }
}
```

이 글에서는 서비스 및 해당 데이터베이스 모델을 만드는 데 중점을 두지 않습니다.

## 단계 4: 사용자 서비스 생성하기

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

서비스 레이어에는 비즈니스 로직이 포함되어 있고 데이터베이스와 상호 작용합니다.

```js
// src/app/services/user.service.ts

import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { User } from '../schemas/user.schema';

@Injectable()
export class UserService {
  constructor(@InjectModel(User.name) private userModel: Model<User>) {}

  async createUser(name: string, email: string): Promise<User> {
    const user = new this.userModel({ name, email });
    return user.save();
  }

  async findByEmail(email: string): Promise<User | null> {
    return this.userModel.findOne({ email }).exec();
  }
}
```

- createUser: 이름과 이메일을 받아 새 사용자 레코드를 생성하고 데이터베이스에 저장합니다.
- findByEmail: 제공된 이메일에 기반하여 사용자를 검색합니다.

## 단계 5: 사용자 스키마 생성하기

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

스키마는 데이터베이스에서 사용자 데이터가 구조화될 방법을 정의합니다.

```js
// src/app/schemas/user.schema.ts

import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { Document } from 'mongoose';

@Schema()
export class User extends Document {
  @Prop({ required: true })
  name: string;

  @Prop({ required: true, unique: true })
  email: string;
}

export const UserSchema = SchemaFactory.createForClass(User);
```

이 스키마는 이름과 이메일 두 가지 속성을 가진 사용자 문서를 정의합니다.

## 단계 6: 모듈에서 핸들러, 서비스 및 스키마 등록하기

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

모든 것을 연결하려면 NestJS 모듈에서 핸들러, 서비스 및 스키마를 등록해야 합니다.

```js
// src/app/app.module.ts

import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';
import { CqrsModule } from '@nestjs/cqrs';
import { CreateUserHandler } from './handlers/create-user.handler';
import { GetUserHandler } from './handlers/get-user.handler';
import { UserService } from './services/user.service';
import { User, UserSchema } from './schemas/user.schema';

@Module({
  imports: [
    CqrsModule,
    MongooseModule.forRoot('mongodb://localhost/nest'),
    MongooseModule.forFeature([{ name: User.name, schema: UserSchema }])
  ],
  providers: [
    UserService,
    CreateUserHandler,
    GetUserHandler,
  ],
})
export class AppModule {}
```

여기서:
- CQRS를 처리하기 위해 CqrsModule을 가져옵니다.
- MongooseModule.forRoot()를 사용하여 MongoDB를 설정합니다.
- MongooseModule.forFeature()를 사용하여 UserSchema를 등록합니다.

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


## 단계 7: 컨트롤러 생성

컨트롤러는 CommandBus와 QueryBus를 사용하여 명령(command)과 쿼리(query)를 보냅니다.

```js
// src/app/controllers/user.controller.ts

import { Controller, Post, Body, Get, Query } from '@nestjs/common';
import { CommandBus, QueryBus } from '@nestjs/cqrs';
import { CreateUserCommand } from '../commands/create-user.command';
import { GetUserQuery } from '../queries/get-user.query';

@Controller('user')
export class UserController {
  constructor(
    private readonly commandBus: CommandBus,
    private readonly queryBus: QueryBus,
  ) {}

  @Post()
  async createUser(@Body('name') name: string, @Body('email') email: string) {
    const command = new CreateUserCommand(name, email);
    return this.commandBus.execute(command);
  }

  @Get()
  async getUser(@Query('email') email: string) {
    const query = new GetUserQuery(email);
    return this.queryBus.execute(query);
  }
}
```

UserController는 CommandBus와 QueryBus를 통해 명령과 쿼리를 보내고, 해당 핸들러와 상호 작용합니다.

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

## 단계 8: 애플리케이션 실행하기

모든 준비가 끝났으니 다음 명령어를 사용하여 애플리케이션을 실행할 수 있습니다:

```js
npm run start
```

이 설정을 통해 NestJS에서 사용자 데이터의 쓰기 및 읽기를 처리하는 완전히 작동하는 CQRS 시스템을 마칠 수 있게 되었습니다. 필요한 데이터베이스 스키마와 서비스 로직도 마련되어 있습니다.

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

## 결론

CQRS는 읽기 및 쓰기 작업을 독립적으로 확장해야 하는 시스템, 비즈니스 로직 분리 및 성능 향상이 필요한 시스템에 적합한 강력한 디자인 패턴입니다. 복잡성을 추가하지만, 올바른 맥락에서 사용될 때 응용 프로그램의 확장성과 유지 관리성을 크게 향상시킬 수 있습니다. 이 안내서는 NestJS에서 CQRS를 기본적으로 구현하는 방법을 제공합니다.

이 글이 마음에 드시면 박수와 댓글을 자유롭게 남겨주세요. 더 많은 콘텐츠를 원하시면 팔로우해주세요.

# 간단히 설명하자면 🚀

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

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

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

NestJS에서의 CQRS 패턴 개념 정리



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

# 소개

익스프레스 응용 프로그램 내에서 세션을 구현하려면 미들웨어로 사용할 NPM 모듈인 'express-session'을 사용할 수 있습니다.

세션 미들웨어는 일반적으로 세션 데이터의 생성, 검색 및 관리를 처리하며, 일반적으로 세션 스토어(인메모리 스토어, 데이터베이스 또는 Redis와 같은 서드파티 서비스)에 저장됩니다.

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

# 의존성 설치

```js
npm i express-session connect-redis redis
```

# 세션 미들웨어 설정

이제 express-session을 설치했으니 미들웨어를 구성해 세션을 만들 수 있도록 설정해보겠습니다.

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

설정할 수 있는 몇 가지 옵션이 있습니다:

```js
import RedisStore from "connect-redis";
import session from "express-session";
import { createClient } from "redis";

let redisClient = createClient({
  url: REDIS_URL,
});
redisClient
  .connect()
  .then(() => {
    console.log("Redis에 연결되었습니다.");
  })
  .catch(console.error);

app.use(
  session({
    store: new RedisStore({
      client: redisClient,
    }),
    secret: SESSION_SECRET,
    resave: false, // 필수: 가볍게 세션을 유지하기 위한 강제 세션 유지(touch)
    saveUninitialized: false, // 권장: 데이터가 있는 경우에만 세션 저장
    cookie: {
      secure: process.env.NODE_ENV === "production",
      httpOnly: true,
      maxAge: 600000 * 60 * 24 * 60,
    },
  })
);
```

세션 미들웨어가 올바르게 구성되고 Express 애플리케이션에 통합되면 각 수신 요청 객체에 세션 속성을 만듭니다.

이 세션 속성을 통해 해당 요청과 연결된 현재 세션 데이터에 액세스할 수 있습니다. 이 세션 객체를 통해 현재 사용자 세션의 세션 데이터를 읽고 쓰거나 수정할 수 있습니다.

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

# 세션 데이터에 액세스하고 수정하기

세션 미들웨어를 구성했으므로 이제 세션을 활용하고 인증 프로세스와 결합할 수 있습니다.

```js
import { Request, Response } from "express";
import { UserModel } from "../models/userModel";
import bcrypt from "bcryptjs";

declare module "express-session" {
  export interface SessionData {
    user: { id: string; username: string };
  }
}

export const signup = async (req: Request, res: Response) => {
  const { username, password } = req.body;
  try {
    const hashpassword: string = await bcrypt.hash(password, 12);
    const newUser = await UserModel.create({
      username,
      password: hashpassword,
    });
    req.session.user = {
      id: newUser._id.toString(),
      username: newUser.username,
    };
    return res.status(201).json({
      status: "success",
      data: {
        user: newUser,
      },
    });
  } catch (error) {
    return res.status(400).json({ status: "fail", error: error.message });
  }
};

export const login = async (req: Request, res: Response) => {
  const { username, password } = req.body;
  try {
    const user = await UserModel.findOne({ username });
    if (!user) {
      return res.status(404).json({
        status: "fail",
        message: "user not found",
      });
    }
    const passwordIsCorrect = await bcrypt.compare(password, user.password);
    if (passwordIsCorrect) {
      req.session.user = { id: user._id.toString(), username: user.username };
      return res.status(200).json({ status: "success" });
    } else {
      return res
        .status(400)
        .json({ status: "fail", message: "incorrect password" });
    }
  } catch (error) {
    return res.status(400).json({ status: "fail", error: error.message });
  }
};

export const logout = async (req: Request, res: Response) => {
  req.session.destroy((err) => {
    if (err) {
      return res.status(500).json({
        status: "fail",
        message: "Could not log out, please try again",
      });
    }
    res.clearCookie("connect.sid"); // 세션 쿠키 삭제
    return res
      .status(200)
      .json({ status: "success", message: "로그아웃이 성공적으로 완료되었습니다" });
  });
};
```

일반적으로 다음과 같이 작동합니다:

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

- 사용자가 성공적으로 로그인하면 관련 사용자 정보(예: _id 및 username)를 req.session.user 객체에 설정합니다: req.session.user = ' id: user.\_id.toString(), username: user.username ';
- Redis 스토어를 사용하도록 구성된 세션 미들웨어가 다음 단계를 자동으로 처리합니다:
1. 세션 데이터(req.session.user 객체)를 직렬화하여 Redis 스토어에 저장하고 고유한 세션 ID와 연결합니다.
2. 고유한 세션 ID를 클라이언트 브라우저의 쿠키로 설정합니다. 이 쿠키는 일반적으로 connect.sid와 같은 이름으로 지정됩니다.
- 사용자가 이후 요청을 보낼 때마다 세션 미들웨어는 다음을 수행합니다:
1. 클라이언트의 쿠키(connect.sid 쿠키)에서 세션 ID를 추출합니다.
2. 세션 ID를 사용하여 Redis 스토어에서 해당 세션 데이터를 검색합니다.
3. 검색된 세션 데이터를 req.session 객체에 첨부하여 응용 프로그램 코드에서 액세스할 수 있도록 합니다.

# 보호된 경로를 위한 미들웨어

```js
import { Request, Response, NextFunction } from "express";

export const authMiddleware = (
  req: Request,
  res: Response,
  next: NextFunction
) => {
  if (req.session.user) {
    return next(); // 사용자가 인증되었습니다. 다음 미들웨어나 라우트 핸들러로 이동
  } else {
    return res.status(401).json({ status: "fail", message: "인가되지 않음" });
  }
};
```

```js
app.use("/api/v1/protected", authMiddleware, protectedRouter);
```

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

축하합니다! express-session을 사용하여 세션을 구현하는 기본 사항을 배웠습니다. 이 단계를 따르면 ExpressJS 애플리케이션에서 세션을 효과적으로 처리하여 사용자 상태를 유지하고 사용자에게 맞춤 경험을 제공할 수 있습니다.

Node.js와 Express에서 세션 관리하기 초간단 가이드



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

Node.js와 MongoDB를 사용하여 백엔드를 구축할 때, Express.js가 개발자들이 가장 먼저 선택하는 프레임워크인 경우가 많습니다. 그러나 단 하나뿐인 선택지는 아닙니다. 특정 요구 사항, 프로젝트 규모 또는 개발 스타일에 따라, 여러 강력한 대안이 있을 수 있습니다. 이 글에서는 MongoDB를 사용한 Node.js 백엔드를 구축하기 위한 최고의 프레임워크들을 살펴보고, 각각의 강점과 이상적인 사용 사례를 강조할 예정입니다.

Koa.js

- 개요: Express 팀에서 개발한 Koa.js는 미니멀한 프레임워크로서 응용 프로그램의 미들웨어와 구조에 더 많은 제어를 제공합니다. Express와는 달리 Koa는 내장된 미들웨어 세트가 없어 필요에 따라 정확히 구성할 수 있습니다. async/await와 같은 현대적인 JavaScript 기능을 사용하여 보다 깨끗하고 유연한 코드베이스를 제공합니다.
- 사용 이유: 가벼운 디자인과 간단함을 원하지만 미들웨어와 에러 처리에 대한 세밀한 제어가 필요한 경우, Koa는 탁월한 선택지입니다.
- 이상적인 대상: 현대적인 ES6+ 구문을 포용하면서 미니멀리즘과 유연성을 선호하는 개발자들에게 적합합니다.
- 예제

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

```js
const Koa = require('koa');
const Router = require('@koa/router');
const mongoose = require('mongoose');

const app = new Koa();
const router = new Router();

// MongoDB에 연결
mongoose.connect('mongodb://localhost:27017/koa_example', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 간단한 Mongoose 모델 정의
const User = mongoose.model('User', new mongoose.Schema({
  name: String,
  age: Number,
}));

// 라우트
router.get('/users', async (ctx) => {
  const users = await User.find();
  ctx.body = users;
});

router.post('/users', async (ctx) => {
  const newUser = new User(ctx.request.body);
  await newUser.save();
  ctx.body = newUser;
});

// 미들웨어
app.use(router.routes()).use(router.allowedMethods());

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

Hapi.js

- 개요: Hapi.js는 더 많은 설정 중심으로 개발자 경험과 보안에 중점을 둔다. Express나 Koa와 달리 Hapi.js는 입력 유효성 검사, 인증 및 캐싱을 포함한 많은 기능이 내장되어 있다. 플러그인 시스템을 통해 대규모 응용 프로그램의 확장에 적합하다.
- 사용 이유: Hapi.js는 보안, 유효성 검사 및 구성 지원이 내장되어 있는 경우 우수하다. 기업급 응용 프로그램에 특히 적합하다는 평가를 받고 있다.
- 이상적인 대상: 구성 및 확장성이 중요한 대규모 복잡하고 안전한 응용 프로그램을 개발하는 개발자들에게 이상적이다.
- 예시

```js
const Hapi = require('@hapi/hapi');
const mongoose = require('mongoose');

// MongoDB에 연결
mongoose.connect('mongodb://localhost:27017/hapi_example', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// 간단한 Mongoose 모델 정의
const User = mongoose.model('User', new mongoose.Schema({
  name: String,
  age: Number,
}));

// Hapi 서버 초기화
const server = Hapi.server({
  port: 3000,
  host: 'localhost',
});

// 라우트
server.route({
  method: 'GET',
  path: '/users',
  handler: async () => {
    return await User.find();
  },
});

server.route({
  method: 'POST',
  path: '/users',
  handler: async (request) => {
    const newUser = new User(request.payload);
    await newUser.save();
    return newUser;
  },
});

// 서버 시작
const start = async () => {
  await server.start();
  console.log('Hapi 서버가 3000 포트에서 실행 중입니다.');
};

start();
```

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

NestJS

- 개요: NestJS는 TypeScript의 우아함을 Node.js 세계로 가져오는 기능이 풍부한 프레임워크입니다. Express 및 Fastify를 기반으로 지원하는 모듈화 아키텍처, 견고한 의존성 주입 및 WebSocket, GraphQL, 및 마이크로서비스를 위한 내장 지원을 제공합니다.
- 사용 이유: TypeScript를 선호하거나 Angular 배경이 있으면 NestJS는 매우 익숙할 것입니다. 모듈화된 구조와 현대적인 아키텍처에 대한 Out-of-the-box 지원으로 복잡한 애플리케이션을 확장하기에 이상적입니다.
- 적합 대상: 기업 애플리케이션을 개발하는 개발자 또는 TypeScript를 우선적으로 사용하는 프로세스를 선호하는 사람들에게 적합합니다.
- 예시

```ts
// app.module.ts
import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';
import { UsersModule } from './users/users.module';

@Module({
  imports: [
    MongooseModule.forRoot('mongodb://localhost:27017/nest_example'),
    UsersModule,
  ],
})
export class AppModule {}
```

```ts
// users.module.ts
import { Module } from '@nestjs/common';
import { MongooseModule } from '@nestjs/mongoose';
import { UsersService } from './users.service';
import { UsersController } from './users.controller';
import { User, UserSchema } from './user.schema';

@Module({
  imports: [MongooseModule.forFeature([{ name: User.name, schema: UserSchema }])],
  controllers: [UsersController],
  providers: [UsersService],
})
export class UsersModule {}
```

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

```js
// users.controller.ts
import { Controller, Get, Post, Body } from '@nestjs/common';
import { UsersService } from './users.service';
import { CreateUserDto } from './create-user.dto';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Get()
  findAll() {
    return this.usersService.findAll();
  }

  @Post()
  create(@Body() createUserDto: CreateUserDto) {
    return this.usersService.create(createUserDto);
  }
}
```

```js
// users.service.ts
import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { User, UserDocument } from './user.schema';
import { CreateUserDto } from './create-user.dto';

@Injectable()
export class UsersService {
  constructor(@InjectModel(User.name) private userModel: Model<UserDocument>) {}

  async findAll(): Promise<User[]> {
    return this.userModel.find().exec();
  }

  async create(createUserDto: CreateUserDto): Promise<User> {
    const newUser = new this.userModel(createUserDto);
    return newUser.save();
  }
}
```

```js
// user.schema.ts
import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { Document } from 'mongoose';

@Schema()
export class User extends Document {
  @Prop({ required: true })
  name: string;

  @Prop()
  age: number;
}

export const UserSchema = SchemaFactory.createForClass(User);
```

Sails.js


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

- 개요: Sails.js는 Ruby on Rails에서 많은 영감을 받은 MVC(Model-View-Controller) 프레임워크입니다. 실시간 애플리케이션을 고려하여 설계되었으며, WebSockets를 지원하고 데이터 모델에 기반한 REST API를 자동으로 생성합니다.
- 사용 이유: Sails는 데이터 중심 API를 구축하는 과정을 간소화하고 강력한 실시간 기능을 제공하여, 채팅 앱이나 협업 도구와 같이 지속적인 업데이트가 필요한 앱에 적합합니다.
- 이상적인 대상: 실시간 애플리케이션을 개발하는 개발자나 기능이 풍부하고 견해가 명확한 프레임워크를 찾는 사람들에게 이상적입니다.

Fastify

- 개요: Fastify는 속도와 오버헤드를 낮추는 데 중점을 둔 고성능 프레임워크입니다. 요청 유효성 검사 및 오류 처리에 스키마 기반 접근 방법을 사용하여 빠른 처리 속도를 보장하며, 처리량이 높은 애플리케이션에 매우 중요할 수 있습니다.
- 사용 이유: Fastify는 가장 빠른 프레임워크 중 하나로 성능이 최우선이 되는 애플리케이션에 이상적입니다.
- 이상적인 대상: 처리량이 높고 최소한의 대기 시간으로 많은 부하를 처리해야 하는 성능 중심 애플리케이션을 개발하는 개발자에게 적합합니다.
- 예시:

```js
const fastify = require('fastify')();
const mongoose = require('mongoose');

// MongoDB에 연결
mongoose.connect('mongodb://localhost:27017/fastify_example', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 간단한 Mongoose 모델 정의
const User = mongoose.model('User', new mongoose.Schema({
  name: String,
  age: Number,
}));

// 라우트
fastify.get('/users', async (request, reply) => {
  const users = await User.find();
  reply.send(users);
});

fastify.post('/users', async (request, reply) => {
  const newUser = new User(request.body);
  await newUser.save();
  reply.send(newUser);
});

// 서버 시작
fastify.listen(3000, (err, address) => {
  if (err) throw err;
  console.log(`Fastify 서버가 ${address}에서 실행 중`);
});
```

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

LoopBack

- 개요: LoopBack은 API를 구축하기 위해 특별히 설계된 강력한 프레임워크입니다. MongoDB를 포함한 다양한 데이터 소스에 연결하고 API를 관리하고 구축하기 위한 GUI를 제공합니다. LoopBack은 또한 모델에서 RESTful API를 자동으로 생성하는 데 우수합니다.
- 사용 이유: API를 구축하는 것이 주요 관심사이고 여러 데이터 소스와의 원활한 통합이 필요한 경우, LoopBack은 개발 시간을 크게 단축할 수 있습니다.
- 이상적인 대상: API 중심 애플리케이션 및 견고한 데이터 소스 통합이 필요한 프로젝트.

Feathers.js

- 개요: Feathers.js는 실시간 능력에 중점을 둔 마이크로서비스 지향 프레임워크입니다. REST 및 웹소켓 지원을 통해 신속하게 API 및 실시간 기능을 구축할 수 있습니다. Feathers는 또한 매우 모듈화되어 있어 다른 프레임워크나 라이브러리와 통합하기에 적합합니다.
- 사용 이유: 응용 프로그램이 실시간 통신이 필요하거나 마이크로서비스 작업을 진행 중인 경우, Feathers는 개발 경험을 간소화해줍니다.
- 이상적인 대상: 채팅 플랫폼, 협업 도구 또는 마이크로서비스 기반 아키텍처와 같은 실시간 애플리케이션.
- 예:

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

```js
const feathers = require('@feathersjs/feathers');
const express = require('@feathersjs/express');
const mongoose = require('mongoose');

// Feathers 응용 프로그램 생성
const app = express(feathers());

// MongoDB에 연결
mongoose.connect('mongodb://localhost:27017/feathers_example', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

// 간단한 Mongoose 모델 정의
const User = mongoose.model('User', new mongoose.Schema({
  name: String,
  age: Number,
}));

// User 모델에 대한 서비스 정의
app.use('/users', {
  async find() {
    return User.find();
  },
  async create(data) {
    const newUser = new User(data);
    await newUser.save();
    return newUser;
  }
});

// 서버 시작
app.listen(3000).on('listening', () => {
  console.log('Feathers 서버가 3000번 포트에서 실행 중입니다.');
});
```

추천: 어떤 프레임워크를 선택해야 할까요?

위 프레임워크들은 각각 고유한 장점을 제공하지만, 가장 좋은 프레임워크를 선택하는 것은 프로젝트의 성격과 개발 선호도에 크게 의존합니다. 다음은 다양한 시나리오에 따른 간단한 추천입니다:

- 간편함과 제어력이 중요할 때: Koa.js를 선택하세요. 가벼우며 미들웨어에 대해 더 많은 제어권을 제공하여 미니멀한 프레임워크를 선호하는 개발자에게 탁월한 선택입니다.
- 대규모 기업 애플리케이션에는: NestJS가 강력한 경쟁자입니다. TypeScript를 선호하는 접근 방식, 모듈화된 아키텍처, 그리고 마이크로서비스 및 GraphQL에서 내장 지원을 통해 대규모 응용 프로그램에 완벽합니다.
- API 중심 또는 데이터 주도적 애플리케이션에는: API 개발에 중점을 둔다면, LoopBack 또는 Sails.js가 내장 기능 및 자동 생성된 API를 통해 작업 부하를 크게 줄일 수 있습니다.
- 실시간 애플리케이션에는: Feathers.js 또는 Sails.js는 둘 다 실시간 애플리케이션에 적합합니다. 내장 웹소켓 지원을 제공하며 채팅 앱, 협업 도구 또는 실시간 업데이트가 필요한 모든 앱에 매우 적합합니다.
- 고성능이 필요한 경우: 속도가 최우선이라면, Fastify가 명확한 선택입니다. Node.js 애플리케이션에 제공되는 가장 빠른 프레임워크 중 하나를 제공합니다.


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

각각의 Node.js 프레임워크는 성능 중심 애플리케이션부터 실시간 기능 및 기업 규모 프로젝트에 이르기까지 각각의 강점과 이상적인 사용 사례를 갖고 있습니다. JavaScript에 익숙하다면 이러한 프레임워크 중 어떤 것이든 MongoDB 통합을 통해 다음 프로젝트에 튼튼한 기반을 제공할 수 있습니다. 일반 개발을 위해서는 Express.js가 신뢰할 만하고 널리 사용되는 옵션이지만, 이러한 대안을 탐색하면 프로젝트의 성공을 위해 정확히 필요한 기능이나 최적화를 제공할 수 있을지도 모릅니다.

Node.js Express.js 대체제와 MongoDB 통합하기



canActivateFn은 Angular 14에서 소개된 기능적 라우트 가드입니다. 이는 전통적인 클래스 기반 CanActivate 가드와 동일한 목적을 제공하지만 클래스 대신 간단한 함수를 사용하여 가드 로직을 정의할 수 있습니다. 이 접근 방식은 특히 간단한 권한 확인에 대해 더 간결하고 가독성 있는 코드를 작성할 수 있게 해줍니다.


![NewAngular canActivateFn Guard](/assets/img/2024-09-10-NewAngularcanActivateFnGuardfunction_0.png)


auth.guard.ts

```js
import { CanActivateFn, Router } from '@angular/router';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';
```


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

```js
export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);
  if (authService.isAuthenticated()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};
```

이 코드는 더 간결하고 가독성이 좋아요. 😊

Auth.service.ts

```js
// auth.service.ts
import { Injectable } from '@angular/core';
```

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

```js
@Injectable({
  providedIn: 'root',
})
export class AuthService {
  private authenticated = false;
  isAuthenticated(): boolean {
    // 여기에 인증 로직을 구현하세요
    return this.authenticated;
  }
  login(): void {
    // 로그인 작업 수행
    this.authenticated = true;
  }
  logout(): void {
    // 로그아웃 작업 수행
    this.authenticated = false;
  }
}
```

그런 다음, Inject() 함수를 사용하여 Auth 서비스를 로드했습니다;

그런 다음, 파라미터 없이 새로운 AuthGuard 함수를 CanActivate 라우트 배열에 추가하십시오.

```js
const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    canActivate: [AuthGuard],
  }
```

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

auth.guard.spec.ts

```js
import { TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { authGuard } from './auth.guard';
import { AuthService } from './auth.service';
import { RouterTestingModule } from '@angular/router/testing';
```

```js
describe('authGuard', () => {
  let canActivateFn: CanActivateFn;
  let authServiceSpy: jasmine.SpyObj<AuthService>;
  let routerSpy: jasmine.SpyObj<Router>;
  
  beforeEach(() => {
    const authSpy = jasmine.createSpyObj('AuthService', ['isAuthenticated']);
    const router = jasmine.createSpyObj('Router', ['navigate']);
    
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [
        { provide: AuthService, useValue: authSpy },
        { provide: Router, useValue: router }
      ]
    });
    
    canActivateFn = authGuard;
    authServiceSpy = TestBed.inject(AuthService) as jasmine.SpyObj<AuthService>;
    routerSpy = TestBed.inject(Router) as jasmine.SpyObj<Router>;
  });
  
  it('should allow access if user is authenticated', () => {
    authServiceSpy.isAuthenticated.and.returnValue(true);
    const result = canActivateFn(null, null);
    expect(result).toBeTrue();
    expect(authServiceSpy.isAuthenticated).toHaveBeenCalled();
    expect(routerSpy.navigate).not.toHaveBeenCalled();
  });
  
  it('should redirect to login if user is not authenticated', () => {
    authServiceSpy.isAuthenticated.and.returnValue(false);
    const result = canActivateFn(null, null);
    expect(result).toBeFalse();
    expect(authServiceSpy.isAuthenticated).toHaveBeenCalled();
    expect(routerSpy.navigate).toHaveBeenCalledWith(['/login']);
  });
});
```

Thank you!

Angular의 새로운 canActivateFn 가드 함수 사용 방법과 기능



안녕하세요! 아래의 Markdown 형식으로 테이블 태그를 변경해드릴게요.


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

Qwik은 웹 개발의 미래인가요, 아니면 단지 특정 시장을 겨냥한 도구인가요? 그 성능 중심적인 접근 방식을 알아보고, 이미 잘 알려진 거대 툴들과 비교해보겠습니다.

# 소개

프론트엔드 개발 환경은 항상 진화하고 있습니다. 새로운 프레임워크와 기술들이 등장해 오랫동안 존재해온 문제들을 해결하고 웹에서 가능한 것들의 한계를 넓히고 있습니다.


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

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

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

React, Vue 및 다른 현대적인 프레임워크에서 사용하는 수분 공급 방식과 대비되는 것이다. 여기서 페이지 또는 구성 요소의 JavaScript가 완전히 다운로드되고 실행된 후에 상호 작용이 가능해지는 방식이다.

## Qwik의 주요 기능:

- 재개 가능성: 수분 공급과는 달리, Qwik 애플리케이션은 서버가 중지한 곳에서 정확히 재개할 수 있어 로드할 때 더 빠른 상호 작용을 가능하게 합니다.
- 게으름 실행: Qwik는 필요한 경우에만 JavaScript를 로드하여 로드 시간을 크게 줄입니다.
- 점진적 렌더링: Qwik는 상호 작용성 있는 구성 요소의 렌더링을 우선시하여 First Contentful Paint (FCP) 및 Time to Interactive (TTI)와 같은 성능 지표를 개선합니다.
- 최소한의 JavaScript 전송: Qwik는 브라우저로 최소한의 JavaScript를 보내어 번들 크기를 최적화합니다.
- 기본적으로 SSR (서버 측 렌더링): Qwik는 SSR을 중심으로 구축되어 성능 중심 앱에 대한 최고의 후보가 됩니다.

# Angular, React 및 Vue.js와 Qwik 비교

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

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

Qwik은 고속 성능으로 눈에 띕니다. 이는 주로 초기 로드 시간을 최소화하고 상호 작용 속도를 향상시키는 계속 가능한 아키텍처 덕분에 이루어집니다. 이는 Angular, React, Vue 같은 전통적인 프레임워크와 비교했을 때 상호 작용 속도가 향상되는 것을 의미합니다.

이로 인해 대규모 및 성능이 중요한 애플리케이션에 유망한 후보로 자리 잡을 수 있습니다.

# Qwik이 Angular, React, Vue.js보다 갖는 잠재적 이점

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

# 1. 대규모 성능

Qwik를 고려해야 하는 가장 설득력있는 이유 중 하나는 성능에 중점을 둔다는 점입니다. Angular, React, Vue.js와 같은 전통적인 프레임워크는 애플리케이션이 확장됨에 따라 성능 병목 현상을 겪는데, 특히 클라이언트에 JavaScript를 로드할 때 문제가 발생합니다. Qwik의 지연 로딩 접근 방식은 브라우저로 보내는 코드를 필요한 것만 보내어 더 빠른 로드 시간과 Time to Interactive (TTI) 메트릭스를 제공합니다. 이는 대규모 앱이나 신속한 상호 작용이 필요한 앱에 중요합니다.

# 2. 재개 대 수화

수화는 React, Vue와 같은 프레임워크에서 사용되는 일반적인 기술로, 상호 작용을 위해 전체 앱을 클라이언트 측에서 다시 로드해야 합니다. 특히 대량 번들을 가진 앱에 지연이 발생할 수 있습니다. Qwik은 재개 기능으로 이 문제를 우회하여 전체 수화 없이 서버 렌더링 상태에서 앱을 직접 시작할 수 있도록 하여 사용자에게 더 즉각적인 상호 작용을 제공합니다.

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

# 3. 더 적은 JavaScript, 빠른로딩

Qwik로 개발된 앱은 필요한 JavaScript만로드됩니다. 이는 Angular의 일반적으로 큰 초기 번들 크기나 React의 자주 발생하는 클라이언트 측 재수화와 대조를 이룹니다. 특히 모바일 사용자나 느린 네트워크를 사용하는 사람들에게 Qwik가 더 효율적일 수 있습니다.

# 4. SEO 최적화가 더 쉬워짐

Qwik는 최소한의 JavaScript를 제공하고 기본적으로 서버에서 렌더링되기 때문에 SEO 및 Largest Contentful Paint (LCP) 및 Cumulative Layout Shift (CLS)와 같은 성능 메트릭에서 중요한 이점을 가질 수 있습니다. 이는 검색 엔진 및 빠른 사용자 경험을 최적화하는 데 중점을 둔 개발자들에게 흥미로운 선택지가 될 수 있습니다, 특히 콘텐츠가 많은 웹 사이트에게 유용할 것입니다.

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

# Qwik이 직면한 과제들

Qwik은 많은 이점을 제공하지만 몇 가지 도전에 직면하고 있습니다.

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

# Qwik은 Angular, React 또는 Vue.js를 대체할 것인가요?

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

큰 질문: Qwik가 Angular, React 또는 Vue.js를 대체할 것인가요? 답은 적어도 가까운 미래에는 아마 그렇지 않을 것입니다. Qwik은 흥미로운 새로운 방식을 제공하고 프론트엔드 생태계에서 중요한 역할을 할 수 있지만, Angular, React 및 Vue 같은 프레임워크가 현재 누리고 있는 수용과 지원 수준까지 가는 길은 멀고 험난할 것입니다.

그러나 Qwik은 성능, 재개 가능성 및 레이지 실행에 초점을 맞춘 점으로 인해, 특히 성능이 중요한 매우 상호작용적이고 대규모 앱과 같은 특정 사용 사례에는 강력한 선택지가 될 수 있습니다. 시간이 흐르면 Qwik이 계속 발전하고 인기를 얻는다면, 특히 주변 커뮤니티와 도구가 크게 성장한다면, 기존 프레임워크에 직접적으로 도전할 수도 있을 것입니다.

# Qwik의 잠재적인 특수 분야

단기적으로는, Qwik가 React나 Angular과 같은 일반 개발 목적의 직접적인 경쟁 상대가 되기보다는 성능이 중요한 응용 프로그램에서 자리를 잡을 가능성이 더 큽니다. 특히 다음과 같은 경우에 적합할 것입니다:

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

- 빠른 페이지로드와 상호작용성이 필요한 전자상거래 플랫폼.
- SEO와 성능 지표가 중요한 콘텐츠가 많은 웹사이트.
- 저 대역폭 환경에 최적화해야 하는 모바일 중심 어플리케이션.

# 결론

Qwik는 재개능, 성능, 현저한 자바스크립트 배송에 초점을 맞춘 JavaScript 프레임워크 개발에 새로운 시선을 제공합니다. Angular, React 또는 Vue를 완전히 대체할 가능성은 낮지만, 성능이 중요한 특정 사용 사례에 대한 흥미로운 대안을 제공합니다.

프론트엔드 개발 환경이 계속 발전함에 따라 Qwik의 독특한 접근 방식은 다른 프레임워크가 보다 성능 중심적인 패러다임을 채택하도록 영감을 줄 수 있습니다. 큰 플레이어들을 대체하든 말든, Qwik는 이미 웹 개발의 미래를 형성할 가치 있는 아이디어를 제공했습니다.

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

# Follow me

- 내 랜딩 페이지
- 내 유튜브 채널
- 내 SaaS 서비스
- 내 GitHub

# Stackademic 🎓

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

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

- 작가를 박수 치고 팔로우해 주세요! 👏
- 팔로우하기 X | 링크드인 | 유튜브 | 디스코드
- 다른 플랫폼 방문하기: In Plain English | CoFeed | Differ
- 더 많은 콘텐츠는 Stackademic.com에서 확인하세요

언젠가 Qwik이 Angular, React, Vue.js를 대체할 수 있을까요



가끔은 클라이언트 측에 데이터를 캐시해야 할 때가 있습니다. 이를 달성하는 몇 가지 방법이 있습니다. 그러니 함께 자세히 살펴보겠습니다.

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

그러나 코딩을 시작하기 전에 데이터를 캐시할 때에 대해 이해해야 합니다. 몇 가지 시나리오를 설명하겠습니다.

컴포넌트에서 observable 스트림을 선언하고 이를 async 파이프를 사용하여 HTML에서 사용하는 경우를 가정해 봅시다. async 파이프의 장점은 자동으로 구독하고 구독을 해제한다는 것입니다. 우리는 메모리 관리를 걱정할 필요가 없습니다. 그러나 async 파이프를 사용하여 동일한 스트림을 두 번 구독하면 두 번 호출되어 처리하는 최적화되지 않은 방법이 됩니다. 아래 코드는 동일한 문제를 가지고 있습니다.

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

두 번 구독하여 스트림을 두 번 사용하고 있습니다. 아래 스냅샷과 같이 두 번 호출되는 현상이 발생합니다.

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

이제 share() 또는 shareReplay(1) 오퍼레이터를 사용하여 데이터를 캐시할 수 있습니다.

이제 API는 한 번만 호출되며 async pipe의 두 번째 구독 시 캐시된 데이터가 읽혀지고 HTML에서 사용됩니다.

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


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

이해되셨나요?

저는 Udemy에서 Angular 코스를 만들었어요. 이 코스는 Angular에서의 실전 문제들과 해결책을 다루고 있어요. 여러분의 Angular 전문가 여정에 한 발자국이 될 수도 있을 거예요. 한 번 살펴보세요.

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


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

제 무료 YouTube 채널도 구독해보세요.

구독/팔로우/좋아요/박수 눌러주세요.

Angular에서 데이터 캐싱하는 방법 정리



프리미엄 멤버십이 없다면 블로그를 읽으려면 여기를 클릭하세요.

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

2024년에 Angular이 여전히 유효한지에 대한 많은 논의가 있었는데, 특히 React, Vue.js와 같은 다른 프레임워크들과 Svelte와 같은 최신 프레임워크가 인기를 얻으면서 그랬습니다. 그래서 Angular은 죽고 있는 걸까요? 간단한 답은 '아니요, Angular은 죽은 게 아닙니다.' 사실, 많은 개발자와 기업들에게 여전히 강력한 선택지로 남아 있습니다. 그렇다면 2024년에도 Angular이 왜 여전히 활기찬지 살펴보겠습니다.

# 1. Angular의 성장과 업데이트

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

Google가 관리하고 있는 Angular은 지난 몇 년 동안 많이 발전해 왔어요. 2010년에 AngularJS로 시작되어 2016년에 전면적으로 재작성되어 지금의 Angular로 변모했죠. 이 버전은 TypeScript를 사용하며 구성 요소 기반 구조를 갖춰 큰 애플리케이션을 구축하는 데 더 효율적입니다.

2023년에 출시된 Angular 16은 Signal-기반 반응성과 같이 큰 개선 사항을 제공하여 개발자들이 더 빠르고 쉽게 사용할 수 있게 되었어요. Google의 이러한 정기적인 업데이트는 Angular가 여전히 성장하고 현대적인 웹 개발 요구 사항에 적응하고 있다는 것을 보여줍니다.

# 2. 2024년에도 Angular을 사용하는 기업

많은 대기업들이 여전히 Angular에 의존하고 있어요. 2024년에 Angular을 사용하는 잘 알려진 기업들 중 일부는 다음과 같아요:

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

- Google: 구글은 Angular를 많은 내부 도구와 서비스에 여전히 사용하고 있습니다. 이것은 그들이 만든 이후부터 계속 Angular를 사용하고 있다는 것을 의미합니다.
- Microsoft: 마이크로소프트는 오피스 365 스위트를 포함한 여러 제품에서 Angular를 사용합니다.
- IBM: IBM은 기업용 애플리케이션에 Angular를 의존하고 있습니다.
- Upwork: 인기 있는 프리랜싱 플랫폼인 Upwork은 Angular로 개발되었습니다.
- PayPal: 지불 거대 기업인 PayPal은 애플리케이션 일부에 Angular를 사용합니다.
- Forbes: 포브스는 Angular를 사용하여 동적 콘텐츠와 성능 중심 웹사이트를 구동합니다.

이러한 기업들을 포함하여 Angular를 신뢰하는 기업들이 많이 있습니다. 이것은 여전히 믿을 만한 선택지임을 보여줍니다.

### 3. Angular가 여전히 인기 있는 이유

완전한 프레임워크
Angular는 애플리케이션을 구축하는 데 필요한 모든 것을 제공합니다. 라우팅, 상태 관리 및 테스트를 위한 내장 도구가 있습니다. Angular를 사용하면 React와 달리 이러한 기능에 대해 보통 추가 패키지를 추가해야 하는 경우가 많지 않습니다.

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

큰 규모 응용 프로그램에 적합합니다
Angular는 대규모 복잡한 응용 프로그램을 구축할 때 빛을 발합니다. 구성 요소 기반 아키텍처와 TypeScript에 대한 강력한 지원으로 인해 기업 환경에서 특히 대규모 프로젝트를 유지 보수하고 확장하기 쉬워집니다.

정기적인 업데이트와 장기 지원
Google은 Angular에 대해 장기 지원(LTS)을 제공합니다. 이것이 대기업이 계속해서 사용하는 이유 중 하나입니다. Angular가 계속해서 존속할 것이며 애플리케이션에 대한 업데이트와 지원에 의지할 수 있다는 것을 알고 있습니다.

강력한 커뮤니티와 생태계
Angular는 다양한 라이브러리 및 도구의 거대한 생태계와 활발한 개발자 커뮤니티를 보유하고 있습니다. 이로 인해 공통 문제에 대한 도움, 자습서 및 솔루션을 더 쉽게 찾을 수 있습니다.

# 4. Angular가 직면한 도전과제

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

앵귤러는 여전히 널리 사용되고 있지만 몇 가지 어려움이 있을 수 있습니다:

* 가파른 학습 곡선

앵귤러는 다른 프레임워크인 Vue나 React와 비교할 때 학습이 어려울 수 있는 많은 기능을 갖고 있습니다. TypeScript, RxJS, 의존성 주입과 같은 요소들을 숙지하여 앵귤러를 완전히 활용하는데 익숙해져야 합니다.

* 성능 및 번들 크기

앵귤러는 Ivy 렌더링 엔진과 같은 업데이트로 성능을 개선했지만, 다른 프레임워크인 Vue나 Svelte에 비해 여전히 큰 번들 크기를 가질 수 있습니다. 이는 개발자들이 애플리케이션을 최적화하여 원활하게 실행되도록 해야 함을 의미합니다.

# 5. 다른 프레임워크와의 앵귤러 비교

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

- React: React은 더 유연하며 개발자가 자신만의 도구를 선택할 수 있습니다. 그러나 Angular처럼 모든 것이 내장되어 제공되지는 않습니다. 이는 작은 프로젝트에 적합할 수 있지만 대규모 응용 프로그램에는 더 많은 설정이 필요할 수 있습니다.
- Vue.js: Vue는 배우기 쉽고 작은 프로젝트에 적합하지만 대규모 기업급 응용 프로그램의 경우 Angular는 더 많은 제어력과 확장성을 제공합니다.
- Svelte: Svelte는 빠르고 가벼우나 아직은 새로운 기술이며 Angular처럼 성숙도나 생태계가 부족합니다. 큰 장기 프로젝트의 경우 Angular의 신뢰성이 주요 장점입니다.

## 6. 결론: 2024년에도 Angular는 살아있습니다

2024년에도 Angular는 대규모 확장 가능한 응용 프로그램을 구축하는 데 안정적인 선택지로 남아 있습니다. 주요 기업에서 널리 사용되며 지속적인 업데이트를 받고 있습니다. 모든 프로젝트에 가기 위한 선택 사항은 아니지만 Angular는 죽지 않았습니다. 여전히 뛰어난 성과를 보여주고 있습니다.

그러니 만일 대규모 프로젝트를 진행하거나 완전한 out-of-the-box 솔루션이 필요하다면, 2024년에도 Angular는 탁월한 선택일 것입니다.

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

"편리하게 테이블 태그를 Markdown 형식으로 변경해주세요."

2024년, Angular의 현재 상태 간단 분석



이 기사에서는 ngrx 신규 signalStore를 사용하여 기본 CRUD 작업을 수행하는 방법에 대한 완전한 가이드를 보여드리겠습니다.

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

# NGRX signalStore란 무엇인가요?

# CRUD는 무엇의 약자인가요?

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

# 시작하기

저는 간단한 CRUD 작업을 처리하기 위해 NGRX를 사용하는 방법을 보여주기 위해 Angular 프로젝트를 처음부터 생성할 것입니다. Angular 응용 프로그램을 만든 후에 NGRX에서 필요한 모든 패키지를 설치할 것입니다. 아래에 설명된 단계를 따라 주세요:

- npm에서 전역 패키지로 Angular CLI를 설치 → 터미널을 열고 다음 명령을 실행하세요:

```js
npm i -g @angular/cli
```

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

2. 이제 새로운 Angular 프로젝트를 생성해 봅시다 → 다음 명령어를 실행하면 라우팅을 추가할지 물어보게 됩니다 (난 수락했어요, 초기 라우트를 구성해 줍니다) 그리고 선호하는 스타일시트 형식을 선택할 수 있습니다 (나는 SASS를 좋아해서 SCSS를 사용하기로 선택했어요).

```js
ng new crud-ngrx-signals-angular
```

3. 선호하는 IDE에서 프로젝트를 열고 비즈니스에 들어가 봅시다.

# NGRX 신호 패키지 설치하기

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

ngrx에서 제공하는 signalStore를 사용하려면 ngrx에서 제공하는 패키지가 필요합니다. 시작해 봅시다. 새 터미널을 열고 다음을 실행하세요.

```js
ng add @ngrx/signals@latest
```

또는 npm을 사용하고 싶다면:

```js
npm install @ngrx/signals --save
```

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

참고로 전체 문서는 여기에서 확인하실 수 있습니다.

# 구현

이 예제를 쇼케이스로 사용하기 위해 매우 간단한 온라인 예약 스토어를 CRUD 작업과 함께 사용하겠습니다. 따라서 책 목록을 가져오거나, 새 책을 만들거나, 기존 책 이름을 업데이트하거나, 물론 삭제할 수 있는 페이지를 만들겠습니다.

- 간단한 'book.interface.ts'라는 책 인터페이스를 보관할 폴더를 만들어보겠습니다.

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


이제 Book signalStore를 book.store.ts라는 파일에 만들어 보겠습니다.


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

```js
import {Book} from "@app/book.interface";
import {patchState, signalStore, withHooks, withMethods, withState} from "@ngrx/signals";
import {inject} from "@angular/core";
import {pipe, tap} from "rxjs";
import {rxMethod} from "@ngrx/signals/rxjs-interop";
import {switchMap} from "rxjs/operators";
import {tapResponse} from "@ngrx/operators";
import {BookService} from "@app/book.service";

type BookStoreState= {
    isLoading: boolean;
    books: Book[];
}

const initialState: BookStoreState = {
    isLoading: false,
    books: [],
}

export const BookStore = signalStore(
    {providedIn: 'root'},
    withState(initialState),
    withMethods((store, service = inject(BookService)) => ({
        getBooks: rxMethod<void>(pipe(
            tap(() => patchState(store, {isLoading: true})),
            switchMap(() => service.getBooks().pipe(
                tapResponse({
                    next: (books) => patchState(store, {books}),
                    error: error => console.log(error),
                    finalize: () => patchState(store, {isLoading: false}),
                })
            ))
        )),
        createBook: rxMethod<Book>(pipe(
            tap(() => patchState(store, {isLoading: true})),
            switchMap((bookToCreate) => service.create(bookToCreate).pipe(
                tapResponse({
                    next: (book) => patchState(store, {
                        books: [...store.books(), book],
                    }),
                    error: error => console.log(error),
                    finalize: () => patchState(store, {isLoading: false}),
                })
            ))
        )),
        updateBook: rxMethod<Book>(pipe(
            tap(() => patchState(store, {isLoading: true})),
            switchMap((bookToUpdate) => service.update(bookToUpdate).pipe(
                tapResponse({
                    next: (book) => patchState(store, {
                        books: store.books().map((b) => b.id === book.id ? book : b),
                    }),
                    error: error => console.log(error),
                    finalize: () => patchState(store, {isLoading: false}),
                })
            ))
        )),
        deleteBook: rxMethod<Book>(pipe(
            tap(() => patchState(store, {isLoading: true})),
            switchMap((bookToDelete) => service.delete(bookToDelete).pipe(
                tapResponse({
                    next: (book) => patchState(store, {
                        books: store.books().filter(b => b.id !== book.id)
                    }),
                    error: error => console.log(error),
                    finalize: () => patchState(store, {isLoading: false}),
                })
            ))
        )),
    }))
);
```

4. 컴포넌트 로직 구현을 살펴보겠습니다. Observable ngrx 스토어에서 마이그레이션하는 것으로 주목해야 할 점은 코드가 가벼워졌다는 점입니다. 더 이상 해체 구독이 필요하지 않으며, 보일러플레이트도 없습니다. 간단한 함수만 있습니다.

```js
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Book } from '@app/book.interface';
import { select, Store } from '@ngrx/store';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    public isLoading: Signal<boolean> = computed(() => this.bookStore.isLoading());
    public books: Signal<Book[]> = computed(() => this.bookStore.books());
    private bookStore = inject(BookStore);

    constructor() {
       effect(() => {
            this.bookStore.getBooks();
        }, {allowSignalWrites: true})
    }

    public onCreateBook(book: Book): void {
        this.bookStore.createBook(book);
    }

    public onUpdateGroup(book: Book): void {
        this.bookStore.updateBook(book);
    }

    public onDeleteGroup(book: Book): void {
        this.bookStore.deleteBook(book);
    }
}
```

5. 컴포넌트 HTML


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

```javascript
<div class="header">
    <input #inputElement>
    <button (click)="onCreateBook(inputElement.value)">Create book</button>
</div>
<div class="container">
    | ID | Name | Action |
    | --- | --- | --- |
    | <tbody>
        <tr *ngFor="let book of books()">
            <td>{book.id}</td>
            <td>{book.name}</td>
            <td><button (click)="onDeleteBook(book)">Delete</button></td>
        </tr>
        </tbody> |
</div>
```

# 여기까지입니다

항상 감사합니다. 내 내용과 이야기를 읽어주셔서 감사합니다. 이 기사가 유용하게 활용되기를 바랍니다.

곧 또 방문해주시고 즐거운 코딩하세요!

Angular에서 가벼운 NGRX signalStore 사용하기 완벽한 가이드



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

리덕스는 리액트와 함께 사용되는 인기 있는 상태 관리 라이브러리로, 확장 가능하고 유지보수가 쉬운 프론트엔드 애플리케이션을 개발하고자 하는 개발자들에게 필수적입니다. 그러나 리덕스 인터뷰 질문은 때로는 까다로울 수 있습니다. 특히 엣지 케이스, 성능 최적화 및 고급 패턴이 관련된 경우에는 더 그렇습니다. 아래에는 17가지 어려운 리덕스 인터뷰 질문이 나열되어 있습니다. 논리적 엣지 케이스와 코드 예제를 통해 더 잘 이해하도록 설명되어 있습니다.

참고: GPT-4가 이 기사를 작성하는 데 도움을 주었으며, 개인 실험 결과와 그 결론이 통합되었습니다.

# 1. 리덕스는 무엇이며 어떻게 작동합니까?

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

해석: Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너입니다. 앱의 전체 상태를 단일 저장소에서 관리함으로써 작동합니다. 액션은 업데이트를 트리거하기 위해 통지되며, 리듀서는 이러한 액션에 대응하여 상태가 어떻게 변경되어야 하는지 정의합니다.

```js
const initialState = { count: 0 };
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}
```

# 2. Redux에서 비동기 액션을 처리할 때의 엣지 케이스는 무엇인가요?

해석: Redux의 가장 어려운 부분 중 하나는 비동기 액션(예: API 호출)을 처리하는 것입니다. Redux Thunk는 종종 비동기 로직에 사용되지만, 여러 비동기 액션이 동시에 실행되어 경합 상태가 발생할 수 있는 엣지 케이스가 발생할 수 있습니다.

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

에지 케이스: 두 개의 API 호출이 동시에 발생하여 동일한 상태를 변경하는 경우, 후자의 조치가 이전 조치의 결과를 덮어쓸 수 있습니다.

해결책:

```js
const fetchUserData = () => async (dispatch, getState) => {
  const response = await fetch('/user');
  const data = await response.json();
  
  // 상태가 여전히 가져온 데이터를 필요로 하는지 확인
  if (!getState().user.loaded) {
    dispatch({ type: 'SET_USER', payload: data });
  }
};
```

### 3. Redux에서 깊게 중첩된 상태를 다루는 방법은 무엇인가요?

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

Edge Case: 리덕스에서 깊게 중첩된 상태를 업데이트하는 것은 복잡하고 유지보수가 어려운 코드를 야기할 수 있습니다.

해결책: immer를 사용하여 간편한 불변성 처리를 수행합니다.

```js
import produce from 'immer';
const initialState = { user: { profile: { address: { city: '' } } } };
const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_CITY':
      return produce(state, draft => {
        draft.user.profile.address.city = action.payload;
      });
    default:
      return state;
  }
};
```

## 4. 대규모 애플리케이션에서 Redux를 성능 최적화하는 방법은 무엇인가요?

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

Edge Case: 대규모 상태 객체를 다룰 때, 컴포넌트로 전달되는 전체 상태 트리로 인해 다시 렌더링 속도가 느려질 수 있습니다. connect를 사용하여 상태의 일부에 선택적으로 구독하는 방식으로 이를 해결할 수 있습니다.

해결책: reselect를 사용하여 복잡한 상태 셀렉터의 결과를 메모이제이션하세요.

```js
import { createSelector } from 'reselect';
```

```js
const selectItems = state => state.items;
const selectFilteredItems = createSelector(
  [selectItems],
  items => items.filter(item => item.visible)
);
```

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

# 5. Redux에서 데이터를 캐싱할 때 중복 요청을 어떻게 처리하나요?

특이사항: 현재 상태를 확인하지 않고 동일한 액션이 여러 번 디스패치되면 실수로 중복 API 요청을 보낼 수 있습니다.

해결책: 중복 API 호출을 피하기 위해 캐싱 메커니즘을 구현하세요.

```js
const fetchIfNeeded = () => (dispatch, getState) => {
  const { isLoaded } = getState().data;
  if (!isLoaded) {
    dispatch(fetchData());
  }
};
```

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

# 6. Redux 액션에서 오류를 처리하는 경우의 엣지 케이스는 무엇인가요?

엣지 케이스: API 요청에서 발생한 오류가 제대로 처리되지 않으면 UI에서 무한 루프나 일관성 없는 상태로 이어질 수 있습니다.

해결책: 상태에 오류를 저장하는 메커니즘을 도입하고, 성공적인 요청 후에는 초기화되도록 보장합니다.

```js
const apiReducer = (state = {}, action) => {
  switch (action.type) {
    case 'FETCH_SUCCESS':
      return { ...state, data: action.payload, error: null };
    case 'FETCH_ERROR':
      return { ...state, error: action.error };
    default:
      return state;
  }
};
```

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

# 7. 동일한 state 조각을 수정하는 여러 개의 리듀서를 어떻게 처리하나요?

특별한 경우: 때때로 두 개의 리듀서가 동일한 state 조각을 수정하려고 시도하여 충돌이 발생할 수 있습니다.

해결책: 리듀서가 특정 state 조각만을 처리하도록 하여 관심사를 분리합니다.

```javascript
const rootReducer = combineReducers({
  auth: authReducer,
  profile: profileReducer,
});
```

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

# 8. Redux에서 미들웨어가 작동하는 방식을 설명하세요. 어떤 논리적 예외 상황이 발생하나요?

설명: Redux의 미들웨어는 액션이 리듀서에 도달하기 전에 가로채서 로깅, API 호출 또는 비동기 논리와 같은 부작용을 처리할 수 있는 장소를 제공합니다.

예외 상황: 미들웨어가 신중한 제어 없이 액션을 디스패치하는 경우, 무한 루프나 예상치 못한 동작으로 이어질 수 있습니다.

해결책: 적절한 디스패치 체인과 액션 처리를 보장하세요.

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

```js
const loggingMiddleware = store => next => action => {
  console.log('Dispatching action:', action);
  next(action);
};
```

# 9. 대형 Redux 애플리케이션을 어떻게 구조화합니까?

특이사항: 대형 애플리케이션에서 적절한 모듈화 없이 Redux 상태를 관리하는 것은 혼란스러운 코드베이스로 이어질 수 있습니다.

해결책: 피쳐 기반 폴더 구조를 사용하고 리듀서, 액션 및 셀렉터를 기능별로 구성합니다.

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

```js
src/
  features/
    user/
      userActions.js
      userReducer.js
      userSelectors.js
```

# 10. 리듀서가 유효한 상태를 반환하지 않는 경우에는 어떻게 될까요?

특이 케이스: 리듀서가 undefined나 올바르지 않은 유형의 상태를 반환하면 앱이 오작동할 수 있습니다.

해결책: 항상 기본 상태를 제공하고 액션 유형을 유효성 검사하세요.

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

```js
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};
```

# 11. Redux에서 낙관적 업데이트를 다루는 방법은 무엇인가요?

특별한 경우: 낙관적 업데이트는 업데이트가 실패하는 경우 불일치가 발생할 수 있습니다.

해결책: 실패 시 상태를 되돌리는 롤백 액션을 구현합니다.

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

```js
const updateUser = user => dispatch => {
  dispatch({ type: 'UPDATE_USER_OPTIMISTIC', payload: user });
  try {
    // API 호출 시뮬레이션
    dispatch({ type: 'UPDATE_USER_SUCCESS', payload: user });
  } catch (error) {
    dispatch({ type: 'UPDATE_USER_FAILURE' });
  }
};
```

# 12. Redux에서 상태 수화를 다루는 방법은 무엇인가요?

특이 케이스: 로컬 스토리지에서 상태를 수화할 때, 일관되지 않거나 오래된 데이터를 병합하는 것이 까다로울 수 있습니다.

해결책: 수화할 상태 조각들의 화이트리스트를 사용하고 주의 깊게 병합하세요.

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

```js
const persistedState = localStorage.getItem('reduxState')
  ? JSON.parse(localStorage.getItem('reduxState'))
  : {};
const store = createStore(rootReducer, persistedState);
```

# 13. 리덕스에서 경합 조건을 방지하는 방법은 무엇인가요?

특수 상황: 여러 비동기 액션이 동시에 동일한 상태를 업데이트하면 경합 조건이 발생할 수 있습니다.

해결책: 동시 변경을 하기 전에 플래그나 체크를 구현하여 경합 상황을 방지하세요.

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

```js
상태를 가져와서 확인하세요.
만약 데이터가 로딩 중이 아니라면,
FETCH_DATA_START action을 디스패치합니다.
'/api/data'로 요청을 보내고,
응답을 JSON으로 변환하여 FETCH_DATA_SUCCESS action을 디스패치합니다.
```

# 14. Redux 액션에서 순환 종속성을 어떻게 처리하나요?

특이 케이스: 액션이나 리듀서에서의 순환 종속성은 무한 반복을 일으킬 수 있습니다.

해결책: 코드를 주의 깊게 구성하여 순환 논리를 피하세요.

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

# 15. 복잡한 앱에서 Redux 액션을 디버그하는 방법은 무엇인가요?

특이 케이스: 너무 많은 액션이 동시에 디스패치될 때 디버깅하기 어려울 수 있어요.

해결책: Redux DevTools나 로깅 미들웨어를 사용하여 가시성을 높이세요.

# 16. Redux에서 셀렉터의 역할은 무엇인가요?

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

에지 케이스: 셀렉터 없이 컴포넌트를 사용하면 상태 모양과 강하게 결합될 수 있어서 상태를 리팩토링할 때 문제가 발생할 수 있습니다.

해결 방법: 셀렉터를 사용하여 상태 엑세스를 추상화하세요.

```js
const selectUser = state => state.user;
```

# 17. Redux를 사용할 때 흔히 발생하는 함정은 무엇인가요?

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

에지 케이스: 상태 관리를 지나치게 복잡하게 만들거나 불변성을 처리하지 않거나 지역 컴포넌트 상태에 Redux에 지나치게 의존하는 것입니다.

해결 방법: 전역 또는 공유 상태에만 Redux를 사용하고 적절한 곳에 지역 상태를 사용하며 immer와 같은 라이브러리를 통해 불변성을 보장합니다.

# 결론

이 인터뷰 질문 및 에지 케이스는 대규모 응용 프로그램을 구축할 때 Redux에서 발생하는 복잡성을 강조합니다. 이러한 시나리오를 탐색하는 방법을 이해하고 효율적이고 확장 가능한 코드를 작성하는 능력은 Redux 인터뷰와 실제 프로젝트에서 성공하는 데 도움이 됩니다.

Posts