


<img src="/assets/img/2024-08-03-OptimizingNodejsApplicationPerformanceTipsandTechniques_0.png" />

현재의 빠르게 변화하는 웹 환경에서는 애플리케이션 성능이 매우 중요합니다. Node.js 애플리케이션의 경우, 원활한 사용자 경험을 제공하기 위해서는 효율적인 자원 활용과 최적화된 코드가 필요합니다. 성능이 떨어지는 애플리케이션은 사용자의 당혹감, 이탈률 증가, 그리고 궁극적으로 비즈니스 목표를 방해할 수 있습니다. 이 블로그 게시물은 Node.js 성능 최적화의 세계로 들어가 원활하고 효율적으로 애플리케이션이 실행되도록 하는 가치 있는 팁과 기술을 제공합니다.

Node.js 성능 병목 현상 이해하기

성능 병목 현상을 식별하는 것은 최적화로 나아가는 첫걸음입니다. Node.js 애플리케이션에서 흔히 발견되는 원인은 다음과 같습니다:

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

- 비효율적인 I/O 작업: Node.js는 비동기 I/O 처리에 능숙하지만 잘못 작성된 코드는 블로킹 작업을 일으켜 이벤트 루프를 멈출 수 있습니다. 예시로는 동기적인 데이터베이스 쿼리나 파일 시스템 작업이 있습니다.
- CPU 집약적 작업: 복잡한 계산이나 알고리즘은 이벤트 루프를 과부하시켜 응답성을 해치게 할 수 있습니다.
- 메모리 누수: 메모리 할당이 해제되지 않아 시간이 지남에 따라 메모리 고갈 및 애플리케이션 충돌로 이어질 수 있습니다.

비동기 프로그래밍 활용하기

Node.js는 비동기 프로그래밍에 적합하여 이벤트 루프를 블로킹하지 않고 여러 요청을 동시에 처리할 수 있습니다. 이를 위해 콜백, 프로미스 또는 async/await 구문을 사용합니다. 다음은 콜백을 사용한 예시입니다:

JavaScript

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

```js
function fetchData(callback) {
  // 비동기 작업(예: 데이터베이스 쿼리) 모의
  setTimeout(() => {
    const data = { message: '데이터를 성공적으로 검색했습니다!' };
    callback(data);
  }, 1000); // 1초의 지연 모의
}
fetchData((data) => {
  console.log(data.message); // 1초 후에 "데이터를 성공적으로 검색했습니다!" 출력
});
// 한편, 이벤트 루프는 다른 요청을 처리할 수 있음
console.log('기타 작업 처리 중...');
```

비동기 패턴을 활용하여 I/O 작업이 진행되는 동안 응용 프로그램이 반응성을 유지할 수 있습니다.

효율성을 위한 코드 최적화

성능을 위해 청결하고 잘 구조화된 코드가 필수적입니다. 다음은 최적화 사례 몇 가지입니다:

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

- 함수 호출을 최소화하세요: 불필요한 함수 호출은 오버헤드를 초래할 수 있습니다. 짧은 함수를 인라인으로 처리하거나 메모이제이션과 같은 기술을 사용하여 중복된 계산을 피해주세요.
- 적절한 데이터 구조 선택: 사용 사례에 적합한 데이터 구조(예: 배열 vs. 객체)를 선택하세요. 배열은 임의 접근에 탁월하며, 객체는 키-값 조회에 효율적입니다.
- 메모리 할당 최소화: 대규모 객체나 빈번한 문자열 연결은 메모리 단편화를 야기할 수 있습니다. 더 나은 메모리 관리를 위해 메모리 풀이나 불변 데이터 구조를 사용하는 것을 고려해보세요.

개선된 응답 시간을 위한 캐싱 전략

캐싱은 성능 최적화에 있어 중요한 역할을 합니다. 자주 액세스되는 데이터를 캐시에 저장함으로써 (예: Redis와 같은 인메모리 캐시 또는 브라우저 캐시), 데이터베이스 부하를 크게 줄이고 응답 시간을 개선할 수 있습니다.

JavaScript

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

```js
const redis = require('redis');
const client = redis.createClient();
client.on('connect', () => {
  console.log('Redis 캐시에 연결되었습니다.');
});
// 캐시 조회 및 검색 예시
function getUserData(userId) {
  return new Promise((resolve, reject) => {
    client.get(`user:${userId}`, (err, data) => {
      if (err) {
        reject(err);
      } else if (data) {
        resolve(JSON.parse(data)); // 캐시에서 가져온 데이터
      } else {
        // 캐시 미스: 데이터베이스에서 데이터 가져오기
        // ... (데이터베이스 로직)
        // 미래 요청을 위해 캐시에 데이터 저장
        client.SET(`user:${userId}`, JSON.stringify(userData));
        resolve(userData);
      }
    });
  });
}
```

이 예시에서 getUserData 함수는 먼저 사용자 데이터를 Redis 캐시에서 확인합니다. 데이터가 존재하면 즉시 캐시된 데이터를 반환합니다. 그렇지 않으면 데이터베이스에서 데이터를 가져와 캐시에 저장하고, 그러고는 프로미스를 해결합니다.

효과적인 메모리 관리

Node.js는 자동으로 메모리를 관리하기 위해 가비지 컬렉터를 사용합니다. 그러나 메모리 사용량을 주의 깊게 관리하는 것이 좋은 실천입니다. 내장된 console.memoryUsage() 함수와 같은 도구는 메모리 할당에 대한 통찰을 제공할 수 있습니다. 또한, heapdump와 같은 라이브러리를 사용하면 힙의 스냅샷을 만들어 추가 분석 및 잠재적인 메모리 누수 식별이 가능합니다.


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

지속적 개선을 위한 모니터링 및 프로파일링

성능 최적화는 지속적인 과정입니다. 응답 시간, 메모리 사용량, CPU 부하와 같은 응용 프로그램 성능 지표를 모니터링하는 것이 중요합니다. Prometheus나 Grafana와 같은 도구를 사용하면 이러한 지표를 시각화하고 추이를 파악할 수 있습니다. 또한 내장된 v8 프로파일러나 제3자 옵션(pprof 등)과 같은 프로파일링 도구를 사용하여 코드 내 성능 병목 현상을 정확히 확인할 수 있으며, 가장 영향력이 큰 영역에 최적화 노력을 집중할 수 있습니다.

지금까지 다룬 기술들은 Node.js 애플리케이션의 최적화를 위한 견고한 기반을 제공합니다. 응용 프로그램이 복잡해지면 더 발전된 전략을 탐색할 수 있습니다:

- 클러스터링 및 부하 분산: 높은 트래픽을 처리하기 위해 Node.js 클러스터를 활용하여 여러 워커 프로세스에 작업을 분산시킬 수 있습니다. 로드 밸런서는 이러한 워커 노드에 트래픽을 더 잘 분산시켜줄 수 있습니다.
- 웹 워커: 웹 워커를 활용하여 주요 이벤트 루프에서 CPU 집약적인 작업을 분리하여 다른 작업이 블로킹되는 것을 방지할 수 있습니다.이는 긴 계산이나 이미지 처리 작업에 특히 유익합니다.
- 코드 분할 및 지연 로딩: 응용 프로그램 코드를 작은 번들로 분할합니다. 사용자 상호 작용 또는 페이지 방문에 따라 필요한 코드만 로드합니다. 이렇게 하면 초기로드 시간이 줄어들고 인식된 성능이 향상됩니다.


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

성능 문화 구축하기

Node.js 애플리케이션을 최적화하는 것은 일회성 노력이 아닙니다. 개발 팀 내에서 성능 문화를 육성하기 위한 몇 가지 실천 방법을 소개합니다:

- 성능 테스팅: JMeter나 k6와 같은 성능 테스트 도구를 개발 파이프라인에 통합하세요. 성능 테스트를 자동화하여 회귀를 식별하고 개발 수명 주기 전체에서 일관된 성능을 보장하세요.
- 성능 렌즈를 통한 코드 리뷰: 코드 리뷰 과정에서 개발자들이 코드 선택의 성능 영향을 고려하도록 장려하세요.
- 지속적인 모니터링: 프로덕션 환경에서 애플리케이션 성능을 지속적으로 모니터링하세요. 성능 저하를 알릴 수 있는 경고를 설정하고 즉시 개선 조치를 취하세요.

결론

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

성능 병목 현상을 이해하고 비동기 프로그래밍을 활용하며 코드를 최적화하고 캐싱 전략을 구현함으로써 Node.js 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 성능 최적화는 지속적인 과정임을 기억해 주세요. 애플리케이션이 발전함에 따라 모니터링 도구, 프로파일링 기술을 활용하고 발전된 전략을 적극적으로 받아들이세요. 개발 팀 내에서 성능 문화를 육성함으로써, Node.js 애플리케이션이 빠르고 원활한 사용자 경험을 제공할 수 있도록 만들어 보세요. 심지어 서버 부하가 많을 때에도요.

# Stackademic 🎓

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

- 작가를 금방 기립해서 팔로우해 주시겠어요! 👏
- X에서 저희를 팔로우해 주세요 | LinkedIn | YouTube | Discord
- 다른 플랫폼도 방문해 보세요: In Plain English | CoFeed | Differ
- Stackademic.com에서 더 많은 콘텐츠를 만나보세요

시니어 개발자가 알려주는 Nodejs 애플리케이션 성능 최적화 하는 방법




<img src="/assets/img/2024-08-03-SchedulingCronJobsinNodeJS_0.png" />

회사에서 크론 작업을 예약하는 작업을 받았어요. 오늘은 지식을 더 확고히 하기 위해 Node.js에서 처음부터 작성하기로 결정했어요.

## 목차

- node-cron 설치
- 예제 코드
  - 특정 날짜
  - 특정 시간 범위
  - 스케줄링 취소

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

# node-cron 설치

```js
npm install --save node-cron 
```

# 예시 코드

node-cron을 실행하려면 먼저 예약된 함수를 작성해야 합니다. 파일을 생성하는 함수를 작성했습니다

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

```js
const fs = require('fs/promises');
const cron = require('node-cron');

async function createFile(count){
    try{
        await fs.copyFile("command.txt",`copied-promise${count}.txt`)
    }catch(error){
        console.log(error);
    }
}

// 매 분마다 새 파일 생성
let count = 0;
cron.schedule("* * * * *",function(){
  count++;
  createFile(count);
});
```

노드 크론 표현식의 의미는 다음과 같습니다:

```js
분    시   일   월  요일
 *      *    *    *    *
```

일반적으로 초는 포함하지 않을 수 있습니다.

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

위의 예시에서 * * * * * 는 매 분마다 실행한다는 의미입니다. 왜냐하면 * 는 모든 값을 나타냅니다.

![image](/assets/img/2024-08-03-SchedulingCronJobsinNodeJS_1.png)

## 특정 날짜

```js
cron.schedule("15 11 3 8 6", function(){
      console.log("안녕하세요");
});
```

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

위의 cron은 다음과 같이 번역될 수 있습니다. "8월 3일 토요일 오전 11시 15분에 실행". 요일 부분에서 0과 7은 일요일을 나타내며, 1부터 6까지는 월요일부터 토요일을 나타냅니다.

## 특정 시간 범위

```js
cron.schedule("*/30 * * * *",function(){
    console.log("안녕")
});
```

이 코드는 30분마다 실행됩니다. '*/숫자' 형식은 '매 ~ 숫자'를 의미합니다. 따라서 '*/30'은 '매 30분'을 의미합니다.

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

## 예약 취소

간단히 stop() 메서드를 호출할 수 있습니다. 이 메서드는 cron.schedule()에서 반환됩니다.

```js
const task = cron.schedule("* * * * *", function () {
  console.log("안녕하세요, 세계");
});

setTimeout(function () {
  task.stop();
  console.log("작업이 중지되었습니다.");
}, 2 * 60 * 1000); // 2분 후 중지됨
```

Nodejs에서 node-cron 크론 잡 스케줄링하는 방법

BroadcastChannel API를 사용하여 Angular에서 크로스-탭 통신하는 방법




고성능 Angular 앱을 개발하려면 흔히 범하는 함정을 피해야 합니다. 성능에 해를 끼치는 주요 사례와 그 해결 방법을 살펴보겠습니다.

![이미지](https://miro.medium.com/v2/resize:fit:1360/1*e5Fle3T638N5u18AhwSGgQ.gif)

Angular로 고성능 앱을 개발하기 위해서는 종종 간과되는 세부사항에 주의를 기울여야 합니다. Angular 애플리케이션의 성능을 저하시킬 수 있는 일반적인 사례들과 잘못된 코드의 예시 및 그 수정 방법을 살펴보겠습니다.

# 1. 과도한 변경 감지

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

## 잘못된 코드:

성능에 영향을 미치는 자주 발생하는 변경 감지

```js
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  @Input() data: any;
}
```

## 수정:

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

가능한 경우 컴포넌트에서 OnPush 전략을 사용하세요. 이렇게 하면 컴포넌트의 입력이 변경될 때만 변경 감지가 발생합니다.

```js
@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() data: any;
}
```

# 2. 비효율적인 DOM 조작

## 나쁜 코드:

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

직접 DOM 조작은 비효율적이고 관리하기 어렵습니다.

```js
ngAfterViewInit() {
  document.getElementById('elementId').style.color = 'blue';
}
```

## 수정:

Angular의 Renderer2를 사용하여 DOM을 더 효율적으로 조작하세요.

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

```ts
import { Renderer2 } from '@angular/core';

constructor(private renderer: Renderer2) {}

ngAfterViewInit() {
  const element = this.renderer.selectRootElement('#elementId');
  this.renderer.setStyle(element, 'color', 'blue');
}
```

## 3. 파이프의 남발

### 나쁜 코드:

번거로운 작업을 수행하는 파이프는 자주 다시 실행되어 성능에 영향을 줄 수 있습니다.

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

```js
@Pipe({
  name: 'heavyPipe',
  pure: false
})
export class HeavyPipe implements PipeTransform {
  transform(value: any): any {
    // Heavy transformation logic
  }
}
```

## 수정:

가벼운 작업에는 순수 파이프(pure: true)를 사용하거나 무거운 작업에는 파이프를 피하십시오.

```js
@Pipe({
  name: 'heavyPipe',
  pure: true
})
export class HeavyPipe implements PipeTransform {
  transform(value: any): any {
    // 가벼운 변환 작업
  }
}
```

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

# 4. 초기 로드 과도

## 잘못된 코드:

초기화 시 모든 모듈 및 컴포넌트를 로드하면 로딩 시간이 지연될 수 있습니다.

```js
@NgModule({
  declarations: [AppComponent, FeatureComponent],
  imports: [BrowserModule, FeatureModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
```

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

## 수정 사항:

즉시 필요하지 않은 모듈에 대해 lazy loading을 사용하세요.

```js
const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];
```

# 5. 관리되지 않는 구독

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

## 잘못된 코드:

구독을 취소하지 않으면 메모리 누수가 발생할 수 있습니다.

```js
ngOnInit() {
  this.myService.myObservable.subscribe(value => {
    // value를 처리합니다
  });
}
```

## 수정:

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

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


Use the async pipe or manage subscriptions with takeUntil or Subscription.

```js
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private myService: MyService) {
    this.myService.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        // Handle the data
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}
```

For Angular 16+ use takeUntilDestroyed.

```js
import { Component, OnDestroy } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit, OnDestroy {

  constructor(private myService: MyService) {
  }

  ngOnInit(): void {
    this.myService.getData()
      .pipe(takeUntilDestroyed(this))
      .subscribe(data => {
        // Handle the data
      });
  }

  ngOnDestroy() {
  }
}
```

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

# 6. 공급자에서 과도한 종속성

## 잘못된 코드:

루트 모듈에서 너무 많은 공급자를 등록하면 번들 크기가 커집니다.

```js
@NgModule({
  providers: [MyService]
})
export class AppModule {}
```

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

## 수정:

필요한 곳에만 공급자를 등록하세요.

```js
@NgModule({
  providers: [MyService] // 필요한 곳에만 등록하세요
})
export class FeatureModule {}
```

# 7. AOT 컴파일 부족

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

## 잘못된 코드:

JIT(Just-in-Time) 컴파일을 사용하면 효율이 떨어질 수 있습니다.

```js
// AOT에 대한 특정 구성 없음
```

## 수정:

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

```json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "aot": true
          }
        }
      }
    }
  }
}
```

# 8. 번들 최적화 부족

## 나쁜 코드:

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

미 최적화된 번들은 로딩 시간을 늘립니다.

```js
// 기본 Angular CLI 구성
```

## 수정:

웹팩과 Angular CLI 빌드 구성과 같은 도구를 사용하여 번들을 최적화하세요.

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

```js
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "optimization": true,
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        }
      }
    }
  }
}
```

# 결론

위의 권고 사항과 수정 사항을 따르면 Angular 애플리케이션의 성능을 크게 향상시킬 수 있으며 더 효율적이고 반응이 빠른 애플리케이션으로 만들 수 있습니다.

LinkedIn 팔로우하기: https://www.linkedin.com/in/erickzanetti

Angular 애플리케이션 성능을 망치는 습관 10가지





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

NgRx Signal Store은 이제 안정 버전으로 출시되었습니다. Node.js는 곧 실험적 모드에서 TypeScript를 지원할 예정입니다. Angular Masters Podcast의 인터뷰에서 Mark Thompson은 Angular을 사용해야 하는 이유를 강조했습니다.

# NgRx Signal Store

NgRx Global 및 Component Store는 Angular에서 가장 많이 사용되는 상태 관리 라이브러리입니다. NgRx Signal Store는 세 번째 상태 관리 라이브러리로서 안정 버전으로 출시되어, 지난해 10월 개발자 미리보기 상태에서 벗어났습니다.


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

시그널 스토어는 Angular의 Signals를 기반으로 구축되었으며, 기능 기반으로 작동하여 사용자 정의 확장을 쉽게 작성할 수 있습니다.

이 릴리스에는 캡슐화, 재정의 보호 및 글리치 없는 효과로 상태 변경을 추적할 수 있는 기능과 같은 기능이 추가되었습니다.

주간 다운로드 수가 5만을 넘어가며, 이미 기존 상태 관리 라이브러리 중 상위 반에 속합니다. 그러나, 아직 NgRx 글로벌 스토어의 60만에 미치려면 약간의 여정이 더 남아 있습니다.

# Node.js는 TypeScript를 실행합니다

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

Node.js는 TypeScript를 지원할 예정입니다. 지난 주에 소셜 미디어에 자주 올라온 내용이죠.

전체 이야기는 Node.js가 실험 모드를 갖게 될 것이며, 이 모드에서는 TypeScript 파일에서 유형 정보를 제거하고 남은 JavaScript를 실행할 수 있다는 것입니다.

따라서 TypeScript 컴파일러에서 일반적으로 얻는 유형 검사는 이루어지지 않을 것입니다. 유형 검사를 원한다면 IDE, CI 또는 다른 도구가 실행이 아니라 할 수 있어요.

시험해볼 수 있는 샌드박스가 있으니 확인하세요:

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

https://codesandbox.io/p/devbox/node--experimental-strip-types-with-node-js-nightly-dxdtmp?file=%2Findex.ts

# Mark Thompson on Angular

다리우스 칼바르치크가 최근 Angular의 개발자 관련 엔지니어인 마크 톰슨을 인터뷰했습니다. 다양한 통찰력 있는 토론 중에 마크는 개발자들에게 Angular를 사용하도록 설득하는 전략을 공유했습니다.

마크에 따르면, Angular는 개발자가 다른 프로젝트 간에 전환해야 할 때 뛰어납니다. 그 구조화된 아키텍처와 디자인 원칙은 개발자들이 빠르게 적응할 수 있도록 도와주어 전환을 보다 부드럽고 효율적으로 만듭니다.

Signal Store 출시, TypeScript, Nodejs, Angular 전문가 Mark Thompson와의 인터뷰




## 리액트의 많은 개발자들이 완전히 알지 못하는 몇 가지 알려지지 않은 측면을 소개합니다:

1. 가상 DOM Diffing이 항상 완벽하지는 않습니다

리액트의 가상 DOM 차이 비교 알고리즘은 꽤 효율적이지만 완벽하지는 않습니다. 일반적인 시나리오에 최적화되어 있지만 모든 예외적인 상황을 완벽하게 처리하지 못할 수 있습니다. 복잡한 UI 업데이트나 성능 집약적인 애플리케이션의 경우 때로는 React.memo와 같은 사용자 정의 최적화나 대안적 접근 방식이 필요할 수 있습니다.

2. 함수형 컴포넌트와 성능

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

기능 구성 요소는 때때로 클래스 구성 요소보다 성능이 뛰어날 수 있습니다. 이는 클래스 시스템과 라이프사이클 메서드의 오버헤드를 피하기 때문입니다. 그러나 useMemo 및 useCallback과 같은 훅을 신중하게 사용하지 않으면 불필요한 다시 렌더링으로 인해 성능 문제가 발생할 수 있습니다.

3. 조정 및 키

리스트를 렌더링할 때 React는 요소를 고유하게 식별하기 위해 키를 사용합니다. 그러나 키는 전역적으로 고유할 필요는 없지만 형제 사이에서 고유해야 합니다. 키를 잘못 사용하면(예: 인덱스 사용) 효율적인 업데이트와 버그가 발생할 수 있습니다. 특히 리스트가 동적으로 변경될 때 문제가 발생할 수 있습니다.

4. Strict 모드는 프로덕션에 영향을 미치지 않습니다.

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

React의 Strict Mode는 개발 중 잠재적인 문제를 식별하기 위한 도구입니다. 추가적인 검사를 수행하고 일부 라이프사이클 메서드를 두 번 호출하여 문제점을 강조하지만, 이러한 검사는 제품 빌드에 영향을 미치지 않습니다. 많은 개발자들이 이러한 검사가 제품의 성능이나 동작에 영향을 미친다고 잘못 이해합니다.

5. useEffect와 Cleanup 사용

useEffect 훅은 까다로울 수 있습니다. 클린업을 적절히 처리하는 것이 중요합니다(예: 비동기 작업에서). 구독 또는 타이머와 같은 효과를 청소하는 것을 잊는다면 의도하지 않은 동작이나 성능 문제를 일으킬 수 있습니다.

6. Context API 성능 고려 사항

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

Context API는 컴포넌트 트리 아래로 데이터를 전달하는 데 유용하지만 주의해서 사용하지 않으면 성능 문제를 일으킬 수 있습니다. 컨텍스트 값을 업데이트하면 해당 데이터를 사용하지 않는 경우에도 모든 컴포넌트의 다시 렌더링이 발생할 수 있습니다. React.memo를 사용하거나 컨텍스트를 작은 컨텍스트로 분할하면 이 문제를 완화할 수 있습니다.

7. React Fiber 및 조정

React Fiber는 비동기 렌더링과 같은 기능을 가능케 하는 조정 알고리즘입니다. React Fiber는 복잡한 UI 업데이트를 처리하는 내부 아키텍처를 도입했지만 대부분의 개발자가 직접 걱정할 필요는 없습니다. React의 내부가 발전했다는 점을 이해하면 문제 해결과 성능 최적화에 도움이 될 수 있습니다.

8. React의 프롭 드릴링과 대안들

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

프롭 드릴링(prop drilling)은 여러 계층의 컴포넌트를 통해 전달되는 프롭(prop)으로 번거로워질 수 있습니다. React의 Context API는 이 문제를 완화해주지만, Redux, Zustand, 또는 Recoil과 같은 더 복잡한 시나리오를 위한 다른 상태 관리 솔루션을 탐색하는 것도 값진 시간일 수 있습니다.

9. 개발 및 프로덕션 빌드

React의 개발 빌드는 프로덕션 빌드에 없는 추가 경고 및 검사 기능을 포함하고 있습니다. 이로 인해 디버깅이 더 쉬워지지만 성능에 영향을 줄 수 있습니다. 배포 시 불필요한 오버헤드를 피하기 위해 언제나 애플리케이션이 프로덕션 빌드를 사용하고 있는지 확인하세요.

10. 동시 모드 및 미래 기능

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

리액트의 동시 모드와 실험적인 기능은 렌더링 성능과 사용자 경험을 크게 향상시킬 것으로 기대됩니다. 그러나 이러한 기능들은 아직 실험 단계에 있고 완전히 안정화되지 않았습니다. 흥미로운 가능성을 제공하지만 조심해서 사용해야 합니다.

시니어 개발자들도 잘 모르는 React의 숨겨진 기능들




리액트는 사용자 인터페이스를 구축하기 위한 강력한 JavaScript 라이브러리입니다. 프론트엔드 개발을 보다 빠르고 쉽게 만들기 위해 설계되었습니다. 함께 간단하고 친근하게 리액트의 컨셉을 알아보도록 하죠!

### 1. 컴포넌트

컴포넌트는 리액트 애플리케이션의 구성 요소입니다. 재사용 가능한 코드 조각으로, 사용자 인터페이스의 일부를 반환하는 역할을 합니다.

예시:

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

```js
기능 Welcome(props) {
  return <h1>안녕, {props.name}!</h1>;
}
```

참고:

- 구성 요소는 기능적일 수도 있고 클래스 기반일 수도 있습니다.
- 가능한 경우 함수형 구성 요소를 사용하십시오. 그들은 더 간단하고 관리하기 쉽습니다.

### 2. JSX


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

JSX는 React에서 사용되는 HTML과 비슷한 구문 확장 기능입니다. React 컴포넌트를 쉽고 직관적으로 작성할 수 있게 도와줍니다.

예시:

```js
const element = <h1>Hello, world!</h1>;
```

참고:

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

- JSX를 사용하면 JavaScript 내에서 HTML과 비슷한 코드를 작성할 수 있어요.
- React에 의해 JavaScript로 변환되기 때문에 UI 요소를 생성하는 데 사용할 수 있어요.

### 3. 속성

속성은 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 방식이에요. 그것들을 함수에 전달하는 인수처럼 생각해보세요.

예시:

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

```js
function Greeting(props) {
  return <p>{props.message}</p>;
}
```

참고 사항:

- Props는 읽기 전용이며 받는 컴포넌트에서 수정할 수 없습니다.
- 이들은 컴포넌트를 재사용 가능하고 동적으로 만드는 데 도움이 됩니다.

### 4. State


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

상태(State)는 시간이 지남에 따라 변하는 데이터를 관리하는 데 사용됩니다. 프롭스(props)와 달리 상태는 컴포넌트 내부에서 관리됩니다.

예시:

```js
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </>
  );
}
```

참고:

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

- State은 함수형 컴포넌트에서 useState 훅과 함께 사용됩니다.
- State를 사용하면 컴포넌트가 사용자 입력을 기억하고 반응할 수 있습니다.

### 5. 라이프사이클 메소드

라이프사이클 메소드는 컴포넌트의 생명주기의 여러 단계에서 호출되는 함수들입니다. 주로 클래스 컴포넌트에서 사용되지만 훅으로 함수형 컴포넌트에서 시뮬레이션할 수 있습니다.

단계:

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

- 마운트: 컴포넌트가 DOM에 추가될 때 발생합니다.
- 업데이트: 컴포넌트의 상태 또는 프롭이 변경될 때 발생합니다.
- 언마운트: 컴포넌트가 DOM에서 제거될 때 발생합니다.

### 6. 훅

훅은 함수형 컴포넌트에서 상태 및 다른 React 기능을 사용할 수 있게 해주는 특별한 함수입니다.

예시:

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

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

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, [time]);

  return <p>Time: {time}s</p>;
}
```

노트:

- 일반적인 후크: useState, useEffect, useContext 등
- 후크는 함수 컴포넌트 내에서만 사용할 수 있습니다.

### 7. Context API


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

컨텍스트 API는 컴포넌트 트리를 통해 데이터를 전달하는 방법으로, 각 레벨마다 수동으로 props를 전달하지 않아도 됩니다.

예시:

```js
const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <ThemeContext.Consumer>
      {value => <p>Current theme: {value}</p>}
    </ThemeContext.Consumer>
  );
}
```

참고:

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

- 컨텍스트는 테마, 사용자 정보 등과 같은 전역 데이터에 유용합니다.
- useContext 훅을 사용하면 간편한 Consumer 대신 사용할 수 있습니다.

### 8. Fragments

프래그먼트는 추가적인 노드 없이 여러 요소를 그룹화할 수 있습니다.

예시:

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

```js
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph</p>
    </>
  );
}
```

참고사항:

- Fragment를 사용하면 DOM이 더 깔끔해지고 코드가 더 읽기 쉬워집니다.
- 빈 태그 `` `/` 는 React.Fragment의 축약형으로 사용됩니다.

### 9. Keys

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

React에서 키는 항목이 변경되었는지, 추가되었는지 또는 제거되었는지 식별하는 데 도움이 됩니다. 리스트를 효율적으로 관리하는 데 있어서 매우 중요합니다.

예시:

```js
const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map((item, index) => <li key={index}>{item}</li>);
```

참고:

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

- 키는 고유하고 안정적이어야 합니다.
- 리스트 항목이 순서가 바뀔 수 있다면 인덱스를 키로 사용하는 것을 피하십시오.

### 10. 제어 컴포넌트 vs. 비제어 컴포넌트

제어 컴포넌트는 React가 폼 데이터를 제어하는 경우이며, 비제어 컴포넌트는 DOM에 의존합니다.

제어 컴포넌트의 예시:

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

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

  return (
    <>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Your name: {name}</p>
    </>
  );
}
```

Uncontrolled Component Example:

```js
function Form() {
  const nameRef = useRef();

  return (
    <>
      <input ref={nameRef} />
      <button onClick={() => alert(nameRef.current.value)}>Alert Name</button>
    </>
  );
}
```

참고:

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

- 제어 컴포넌트는 폼 데이터에 대해 더 나은 제어를 제공합니다.
- 비제어 컴포넌트는 기존의 비-React 코드와 쉽게 통합할 수 있습니다.

### 결론

React는 UI를 관리 가능한 조각으로 분해하고 코드를 더 재사용 가능하게 만드는 데에 관한 것입니다. 이러한 개념을 연습하고 프로젝트를 만들면 곧 React 전문가가 될 것입니다!

이 게시물을 즐겼다면 좋아요를 눌러주시고 공유하며 계속 학습하시기 바랍니다. 계속 연락을 유지해주세요.

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

주석: 필수로 알아야 할 중요 내용이나 개념이 빠졌다면
알려주세요.

5분 안에 배워보는 React 팁




Power Pages의 이전 버전은 Bootstrap 3을 사용하고, 최신 버전은 Bootstrap 5를 사용하며, 모두 jQuery를 사용합니다.

## jQuery 및 Bootstrap 버전 확인

콘솔에 다음을 입력하세요:

- $.fn.jquery =` jQuery 버전 3.6.2
- $.fn.tooltip.Constructor.VERSION =` Bootstrap 버전은 포털이 작성된 시점에 따라 ~3.4.1 또는 ~5.2.2입니다

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

저의 경우는 2년 전에 프로비저닝된 포털에 부트스트랩 3.4.1을 사용하고 있고, 최근에는 5.2.2를 사용하고 있습니다.

## ESC 키로 모달

사용자 입력을 받기 위해 모달을 사용하고 있습니다. 모달에는 사용자가 입력해야 할 많은 항목이 있기 때문에 ESC 키를 사용한 모달 닫기 기능을 비활성화해야 합니다.

escape 키가 눌렸을 때 모달을 닫는 것을 비활성화하기 위해 keyboard라는 내장 옵션이 있습니다. 이 속성을 false로 설정하면 ESC 키로 모달을 닫지 않을 수 있습니다.

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

안타깝지만 모달에 data-keyboard="false"를 추가해도 모달의 동작에는 변화가 없고 ESC 키로 모달이 정상적으로 사라집니다.

다음 코드를 추가하면 모달이 포커스를 가지고 있을 때에만 ESC 키가 비활성화됩니다:

```js
document.querySelector("#fa-edit-modal").addEventListener("keydown", (e) => {
    if (e.key === "Escape") {
        e.stopPropagation()
    }
})
```

그러나 사용자로부터 작업을 확인하는 다이얼로그와 같이 모달이 포커스를 잃은 상태에서 열려 있을 때에는 ESC 키를 눌러도 모달이 정상적으로 닫힙니다.

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

부트스트랩 모달에서 키보드를 false로 설정하는 이유를 파헤쳐 보기 시작했어요.

## 모달의 이벤트 리스너

이벤트 리스너를 확인하기 위해 개발자 도구를 사용하세요. =` Elements에서 모달을 선택하세요. =` 이벤트 리스너 탭 =` 키다운 이벤트:

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

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

한 줄씩 확인하면서 keydown 스크립트를 살펴보니 총 코드 중 모달을 닫는 역할을 하는 다음 코드를 발견했어요:

![code image](/assets/img/2024-08-03-PowerPageshowtodisableESConmodals_1.png)

이 코드로부터 어떤 점들을 알 수 있을까요?

- 문서 수준에 이벤트 리스너가 설정되어 있고 keycode 27인 ESC 키가 눌렸을 때 실행됩니다.
- 만약 모달이 표시 중이라면 (c(".modal").is(":visible")) 모달이 닫힙니다: c(".modal").modal("hide") =` 여기가 우리가 찾는 부분입니다.
- 여기서 'c'는 jQuery 객체를 가리킵니다.
- 문서에 위치해 있기 때문에 이벤트는 타깃에서 문서 수준까지 버블링되어 실제로 포커스된 모든 요소에서 실행됩니다.
- 이 스크립트는 Power Pages 번들에 속해 있어 Bootstrap의 기능을 무시합니다.

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

jQuery 특정 이벤트 리스너를 확인하려면 콘솔에 $._data(document, "events")를 입력하면 됩니다. 이 이벤트는 이미지에서 볼 수 있습니다:

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

## 해결 방법

jQuery 이벤트를 제거하려면 다음과 같이 .off() 명령어를 사용합니다: $(document).off("keydown").

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

그 결과로, 이제 모달 종료 기능의 동작을 부트스트랩 `keyboard` 옵션으로 제어할 수 있습니다.

Power Pages 모달에서 ESC 비활성화하는 방법




## 소개: Next.js 정복하기

안녕하세요, 코드 마스터들과 Next.js 애호가 여러분! 👋 컴포넌트, 훅, 그리고 설정 파일들이 무성한 정글을 헤치며 인디아나 존스 같은 기분이 드시나요? 걱정 마세요, 이 모험에서 혼자가 아닙니다. 저도 이전에 이런 곳을 가 보았어요. 대규모 Next.js 프로젝트의 깊은 정글을 가르고자 힘겹게 나무꾼했던 기억이 있거든요.

그런데 중요한 건, 올바른 지도와 도구가 있다면, 여러분의 Next.js 정글은 잘 정리되고 번영하는 생태계가 될 수 있어요. 이 포괄적인 가이드에서, 대규모 Next.js 프로젝트를 구조화하는 데 있어서 제가 쌓아 온 지혜를 공유할 거에요. 기존 앱을 확장하거나 새로운 거대한 프로젝트를 처음부터 시작하든, 이 안내서가 여러분의 믿음직한 나침반 역할을 할 거예요.

## Next.js 프로젝트 구조가 여러분을 무너뜨릴 수도 있고 아닐 수도 있는 이유

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

세부 사항에 들어가기 전에, 프로젝트 구조에 시간을 투자하는 것이 좋은 코딩 신발 구매와 같다는 이유에 대해 이야기해보겠습니다. 이것은 여러분을 멀리 데려다주고 편안함을 유지합니다:

- 개발자의 정신건강: 좋은 구조는 구성 요소를 찾느라 "월도를 찾아라" 하는 시간을 줄이고 실제 코딩에 더 많은 시간을 할애할 수 있습니다.
- 팀의 조화: 팀이 프로젝트를 눈가리고 쉽게 이해할 수 있다면, 협업은 전쟁이 아닌 브리즈가 됩니다.
- 확장성: 잘 구조화된 프로젝트는 코드 몬스터가 되는 대신 행복한 식물처럼 유기적으로 성장합니다.
- 성능 향상: Next.js 최적화 기능은 프로젝트가 논리적으로 구성되어 있을 때 가장 잘 작동합니다.
- 유지 보수성: 미래의 여러분(또는 여러분 프로젝트를 상속받는 불쌍한 이)은 깨끗하고 직관적인 구조에 영원히 감사할 것입니다.

## 프레임에 담고 싶은 Next.js 프로젝트 구조

자, 준비는 됐나요? 🥁 여기 대규모 Next.js 개발 현장에서 싸워본 구조가 있습니다:

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

```js
📁 my-awesome-nextjs-project
|
|_ 📁 app
|  |_ 📁 (auth)
|  |  |_ 📁 login
|  |  |  |_ 📄 page.tsx
|  |  |  |_ 📄 layout.tsx
|  |  |_ 📁 register
|  |     |_ 📄 page.tsx
|  |     |_ 📄 layout.tsx
|  |_ 📁 dashboard
|  |  |_ 📄 page.tsx
|  |  |_ 📄 layout.tsx
|  |_ 📁 api
|  |  |_ 📁 users
|  |  |  |_ 📄 route.ts
|  |  |_ 📁 posts
|  |     |_ 📄 route.ts
|  |_ 📄 layout.tsx
|  |_ 📄 page.tsx
|
|_ 📁 components
|  |_ 📁 ui
|  |  |_ 📄 Button.tsx
|  |  |_ 📄 Card.tsx
|  |  |_ 📄 Modal.tsx
|  |_ 📁 forms
|  |  |_ 📄 LoginForm.tsx
|  |  |_ 📄 RegisterForm.tsx
|  |_ 📁 layouts
|     |_ 📄 Header.tsx
|     |_ 📄 Footer.tsx
|     |_ 📄 Sidebar.tsx
|
|_ 📁 lib
|  |_ 📄 api.ts
|  |_ 📄 utils.ts
|  |_ 📄 constants.ts
|
|_ 📁 hooks
|  |_ 📄 useUser.ts
|  |_ 📄 useAuth.ts
|  |_ 📄 usePosts.ts
|
|_ 📁 types
|  |_ 📄 user.ts
|  |_ 📄 post.ts
|  |_ 📄 api.ts
|
|_ 📁 styles
|  |_ 📄 globals.css
|  |_ 📄 variables.css
|
|_ 📁 public
|  |_ 📁 images
|  |  |_ 📄 logo.svg
|  |  |_ 📄 hero-image.png
|  |_ 📁 fonts
|     |_ 📄 custom-font.woff2
|
|_ 📁 config
|  |_ 📄 seo.ts
|  |_ 📄 navigation.ts
|
|_ 📄 next.config.js
|_ 📄 package.json
|_ 📄 tsconfig.json
|_ 📄 .env.local
|_ 📄 .gitignore
```

이제 한 가지씩 살펴보면서 당신의 Next.js 작품에 왜 각 부분이 중요한지 알아봅시다.

## Next.js 앱의 핵심: app 디렉터리

app 디렉터리는 마법이 벌어지는 곳입니다. 이것이 Next.js 13+ 프로젝트의 핵심이자 새로운 App 라우터를 활용하는 곳입니다.

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

```js
📁 app
|_ 📁 (auth)
|  |_ 📁 login
|  |_ 📁 register
|_ 📁 dashboard
|_ 📁 api
|_ 📄 layout.tsx
|_ 📄 page.tsx
```

### Route 그룹화 with (auth)

(auth) 폴더는 URL 구조에 영향을주지 않으면서 관련된 경로를 그룹화하는 똑똑한 방법입니다. 인증 관련 페이지를 구성하는 데 완벽합니다.

```js
// app/(auth)/login/page.tsx
export default function LoginPage() {
  return <h1>로그인 페이지에 오신 것을 환영합니다</h1>;
}
```

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

### API 라우트: Disguise 된 당신의 백엔드

백엔드 로직을 api 디렉토리에 깔끔하게 유지하십시오. 각 파일이 API 라우트가 됩니다:

```js
// app/api/users/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  // 사용자 데이터 가져오기 로직
  return NextResponse.json({ users: ['Alice', 'Bob'] });
}
```

### 레이아웃 및 페이지: UI의 구성 요소들

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

페이지들 간에 일관된 디자인을 제공하기 위해 layout.tsx를 사용하세요:

```js
// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}
```

각 page.tsx 파일은 애플리케이션 내의 고유한 경로를 나타냅니다:

```js
// app/page.tsx
export default function HomePage() {
  return <h1>Welcome to our awesome Next.js app!</h1>;
}
```

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

## 구성 요소: 당신의 Next.js LEGO 세트

구성 요소를 LEGO 블록으로 생각해보세요. 잘 정리되어 있으면 쉽게 찾을 수 있고 사용하기 즐겁습니다:

```js
📁 components
|_ 📁 ui
|_ 📁 forms
|_ 📁 layouts
```

### UI 구성 요소: 건물 블록들

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

앱 전체에서 일관성을 유지하는 재사용 가능한 UI 요소를 만들어보세요:

```js
// components/ui/Button.tsx
export default function Button({ children, onClick }) {
  return (
    <button onClick={onClick} className="bg-blue-500 text-white py-2 px-4 rounded">
      {children}
    </button>
  );
}
```

### 폼 컴포넌트: 데이터 입력이 쉬워집니다

더 깔끔하고 유지보수가 쉬운 코드를 위해 폼 로직을 캡슐화하세요:

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

```js
// components/forms/LoginForm.tsx
import { useState } from 'react';
import Button from '../ui/Button';

export default function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      onSubmit(email, password);
    }>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <Button type="submit">Log In</Button>
    </form>
  );
}
```

### 레이아웃 구성 요소: UI의 프레임워크

재사용 가능한 레이아웃 구성 요소로 일관된 페이지 구조를 만들어보세요:

```js
// components/layouts/Header.tsx
import Link from 'next/link';

export default function Header() {
  return (
    <header>
      <nav>
        <Link href="/">홈</Link>
        <Link href="/dashboard">대시보드</Link>
        <Link href="/profile">프로필</Link>
      </nav>
    </header>
  );
}
```

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

## 지원 캐스트: lib, hooks 및 types

이 디렉토리들은 당신의 프로젝트의 무명의 영웅들입니다:

### lib: 당신의 유틸리티 벨트

도움이 되는 함수와 상수를 저장하세요:

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


// lib/utils.ts
export function formatDate(date: Date): string {
  return date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
}

// lib/constants.ts
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.example.com';

### hooks: Custom React Superpowers

Create custom hooks to encapsulate complex logic:

// hooks/useUser.ts
import { useState, useEffect } from 'react';
import { fetchUser } from '../lib/api';

export function useUser(userId: string) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchUser(userId).then(userData => {
      setUser(userData);
      setLoading(false);
    });
  }, [userId]);

  return { user, loading };
}


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

### types: TypeScript의 베스트 프렌드

TypeScript 인터페이스와 유형을 정의하세요:

```js
// types/user.ts
export interface User {
  id: string;
  name: string;
  email: string;
  role: 'admin' | 'user';
}

// types/post.ts
export interface Post {
  id: string;
  title: string;
  content: string;
  authorId: string;
  createdAt: Date;
}
```

## 다음 Next.js 작품을 스타일링하기

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

스타일을 깔끔하게 유지하세요. 스타일은 styles 디렉토리에 저장됩니다:

```js
/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 여기에 사용자 정의 전역 스타일 추가 */
body {
  font-family: 'Arial', sans-serif;
}

/* styles/variables.css */
:root {
  --primary-color: #3490dc;
  --secondary-color: #ffed4a;
  --text-color: #333333;
}
```

## 공용 에셋: 당신의 앱의 얼굴

public 디렉토리는 정적 에셋의 홈입니다. 이미지를 최적화하고 사용자 지정 글꼴을 사용하여 앱을 빛나게 만드세요.

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

```js
import Image from 'next/image';

export default function Logo() {
  return <Image src="/images/logo.svg" alt="Company Logo" width={200} height={50} />;
}
```

## 설정: 프로젝트의 중추

루트 디렉토리에 있는 이 중요한 파일들을 잊지마세요:

```js
// next.config.js
module.exports = {
  images: {
    domains: ['example.com'],
  },
  // 다른 Next.js 구성 옵션
};

// .env.local
DATABASE_URL=postgresql://username:password@localhost:5432/mydb
NEXT_PUBLIC_API_URL=https://api.example.com
```

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

## 대규모 Next.js 성공을 위한 전략 팁

- 앱 라우터 활용: 이 것은 그저 새로운 것뿐만이 아니라 성능과 중첩 레이아웃을 바꿀 수 있는 요소입니다.
- 코드 분할이 당신의 친구입니다: 앱의 반응 속도를 유지하기 위해 동적 가져오기를 활용하세요:

```js
   import dynamic from 'next/dynamic';

   const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
```

- 이미지 최적화하기: Next.js의 이미지 구성 요소는 당신의 이미지를 위한 개인 트레이너와 같습니다.

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

```js
   import Image from 'next/image';

   export default function Hero() {
     return <Image src="/hero-image.png" alt="Hero" width={1200} height={600} priority />;
   }
```

- 서버 컴포넌트 대박: 클라이언트 측 JavaScript를 줄이기 위해 사용하세요:

```js
   // 이 컴포넌트는 Next.js 13+에서 기본적으로 서버에 렌더링됩니다
   export default async function UserProfile({ userId }) {
     const user = await fetchUser(userId);
     return <div>Welcome, {user.name}!</div>;
   }
```

- 우승을 향한 API 루트: 서버 측 로직을 안전하고 분리하세요:

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

```js
   // pages/api/posts.ts
   import type { NextApiRequest, NextApiResponse } from 'next';

   export default async function handler(req: NextApiRequest, res: NextApiResponse) {
     if (req.method === 'GET') {
       const posts = await fetchPosts();
       res.status(200).json(posts);
     } else {
       res.status(405).end(); // Method Not Allowed
     }
   }
```

## 마무리: 조직화되고 확장 가능한 Next.js 프로젝트

여기에 있습니다! 이 구조는 대규모 Next.js 프로젝트를 원활하게 만들어줄 것입니다. 기억하세요, 이것은 일괄적인 해결책은 아닙니다. 프로젝트의 고유한 요구 사항에 맞게 자유롭게 조정해보세요.

이 구조를 따르면 무엇이 어디에 위치하는지 고민하는 시간을 덜 들이고, 멋진 기능을 더 많이 구축하는 데 더 많은 시간을 할애할 수 있습니다. 코드가 더 깔끔해지고, 팀원들이 더 행복해지며, 프로젝트가 원활하게 확장될 것입니다.

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

그럼 무엇을 기다리고 있나요? 다음 프로젝트에서 이 구조에 한 번 도전해보세요. 미래의 당신 (그리고 팀원들)이 그것에 대해 엄지 손가락을 치켜들 것입니다!

코딩 즐기세요, 그리고 여러분의 Next.js 프로젝트가 항상 체계적이고 버그가 없기를 바랍니다! 🚀

성공적인 대규모 Next.js 프로젝트의 핵심은 초기 설정뿐만 아니라 프로젝트가 성장함에 따라 구조를 어떻게 유지하고 발전시키는지에 있습니다. 유연하게 대응하고 계속 배우며 필요할 때 리팩토링을 두렵지 않게 하세요. 여러분은 할 수 있어요!