튜토리얼

Node.js 애플리케이션 현대화

Node.js Express API를 버전 16에서 22로 업그레이드하여 애플리케이션 현대화를 위해 IBM Bob을 사용하는 방법을 배웁니다. 이 실습 튜토리얼에서 모드, 승인 및 문학적 코딩을 사용한 AI 지원 개발을 시도해 보세요.

소개

Bob은 기존 워크플로를 강화하는 AI SDLC(소프트웨어 개발 수명 주기) 파트너입니다. 이 튜토리얼에서는 TypeScript Express API를 Node.js 16에서 Node.js 22로 현대화하여 Bob의 핵심 기능 중 일부를 배웁니다. 튜토리얼을 완료하기 위해 Node.js 또는 TypeScript 경험이 필요하지 않습니다. Bob이 종속성을 분석하고 코드 패턴을 현대화하는 방법을 배웁니다.

배울 주요 기능

Bob은 API를 업그레이드하는 동안 사용할 네 가지 필수 기능을 제공합니다:

  • 모드: 특정 작업에 맞게 Bob의 동작을 조정하는 전문화된 페르소나.
  • 컨텍스트 멘션: Bob과의 대화에서 파일, 폴더 또는 Git 커밋과 같은 특정 프로젝트 요소를 참조합니다.
  • 승인 워크플로: Bob이 실행하기 전에 사용할 계획인 모든 도구를 검토합니다.
  • 문학적 코딩: 편집기에서 직접 Bob과 코드를 작성합니다. 코드가 들어가야 할 위치에 자연어로 지침을 입력합니다.

전제 조건

이 튜토리얼은 TypeScript Express REST API를 예제 프로젝트로 사용합니다. 그러나 Node.js 또는 TypeScript 경험이 필요하지 않습니다.

이 튜토리얼을 완료하려면 다음이 필요합니다:

작업 공간 설정

IBM Bob을 시작하고 예제 리포지토리를 복제하여 현대화할 Node.js 애플리케이션 작업을 시작합니다.

IBM Bob 시작

컴퓨터에서 IBM Bob 애플리케이션을 시작합니다.

Bob 사이드바 열기

Bob 사이드바가 아직 열려 있지 않은 경우 탐색 모음 옆의 Bob 아이콘을 클릭하거나 단축키 Option + Command + B(Mac) 또는 Ctrl + Alt + B (Windows)를 사용하여 엽니다.

IBM Bob IDE에서 열린 Bob 사이드바

튜토리얼 리포지토리 복제

Bob IDE 패널의 왼쪽 상단에 있는 파일 아이콘을 클릭하여 예제 애플리케이션이 포함된 리포지토리를 복제합니다. 그런 다음 리포지토리 복제를 클릭하고 다음 GitHub 리포지토리를 검색 표시줄에 붙여넣습니다. Bob이 리포지토리를 저장할 위치를 묻습니다. 원하는 곳에 저장할 수 있습니다.

https://github.com/IBM/bob-demo.git

Bob IDE에서 리포지토리 복제

리포지토리 열기

Bob이 복제된 리포지토리를 열지 묻는 경우 열기를 클릭합니다. Bob이 "이 폴더의 파일 작성자를 신뢰하십니까?"라고 묻는 경우 예, 작성자를 신뢰합니다를 클릭합니다.

탐색기의 프로젝트 파일과 측면의 Bob 채팅 패널을 확인하세요.

Bob 채팅 패널과 함께 탐색기에 표시된 프로젝트 파일

자동 승인 비활성화

자동 승인이 꺼져 있는지 확인하세요. 이 설정은 권한에서 찾을 수 있습니다. 자동 승인이 꺼져 있으면 Bob이 제안된 변경 사항을 실행하기 전에 권한을 요청합니다.

컨테이너화된 환경 구축

Dockerfile을 생성하여 컨테이너화된 환경에서 애플리케이션을 실행하여 Node.js 또는 종속성을 로컬에 설치할 필요가 없도록 합니다.

Agent 모드로 전환

모드 드롭다운을 클릭하고 Agent를 선택하여 Bob을 Agent 모드로 전환합니다.

모드는 Bob이 최소 권한 원칙을 존중하는 방법 중 하나입니다. 각 모드는 Bob에게 사용자를 대신하여 특정 작업 세트를 제안할 수 있는 권한을 부여합니다. Agent 모드를 사용하면 Bob이 코드를 작성, 수정 및 리팩터링할 수 있습니다. Bob은 여전히 각 작업 전에 권한을 요청합니다.

Dockerfile 생성

Bob 채팅 인터페이스에서 프롬프트를 입력하여 Bob에게 Dockerfile을 생성하도록 요청합니다.

이 Node.js TypeScript 애플리케이션용 Dockerfile을 생성하세요. 현재 애플리케이션 버전과 일치하도록 Node 16을 사용하고 TypeScript 코드를 빌드하고 포트 `3000`에서 앱을 실행해야 합니다.

Bob은 Dockerfile의 요구 사항을 이해하기 위해 여러 파일에 대한 읽기 액세스를 요청합니다. 승인을 클릭하여 Bob에게 해당 파일을 읽을 수 있는 권한을 부여합니다.

Bob은 적절한 Dockerfile 구조를 결정하고 제안된 파일을 보여줍니다. 채팅 입력 필드 위에 작업 버튼이 나타납니다. 저장을 클릭하여 파일을 생성합니다. 저장은 프로젝트의 파일을 작성하거나 수정합니다. 이 튜토리얼의 뒷부분에서 Bob은 Dockerfile을 업데이트하여 Node 22를 사용합니다.

레거시 애플리케이션이 빌드되는지 확인

현대화하기 전에 레거시 코드가 올바르게 빌드되고 실행되는지 확인합니다. 이 기준선은 현대화로 인해 발생하는 문제를 식별할 수 있도록 합니다.

빌드 단계 중에 Bob은 Dockerfile이 존재하지 않는 package-lock.json 파일이 필요한 npm ci를 사용하기 때문에 빌드가 실패했다고 알려줍니다.

Bob 채팅 패널에서 Bob에게 애플리케이션을 빌드하고 테스트하도록 지시합니다.

Docker를 사용하여 레거시 애플리케이션을 빌드하고 테스트하여 현대화 전에 올바르게 작동하는지 확인하세요. 애플리케이션은 샘플 데이터로 /api/todos에서 API 요청에 응답해야 합니다

테스트 후 컨테이너를 정리하세요.

Bob은 다음 메시지와 함께 package-lock.json 문제를 수정할 Dockerfile 변경 사항을 저장하도록 요청합니다:

package-lock.json 파일이 없어서 빌드가 실패했습니다.
`npm ci` 대신 `npm install`을 사용하도록 Dockerfile을 업데이트해야 합니다. 수정하겠습니다.

Bob이 빌드 오류를 감지하고 수정하는 능력은 배포 중 문제를 해결하고 해결하기 위해 Bob이 어떻게 협력하는지 보여주는 예입니다.

Bob이 수정 사항을 적용하고 빌드를 완료하면 레거시 애플리케이션이 컨테이너화된 환경에서 올바르게 작동함을 확인하는 빌드 및 테스트 결과 요약을 표시합니다.

귀하와 Bob은 레거시 애플리케이션이 올바르게 작동하는지 확인했습니다.

Bob의 Ask 모드로 Node.js 코드베이스 탐색

현대화하기 전에 모드 선택 드롭다운을 클릭하고 Bob의 Ask 모드로 전환합니다. Ask 모드는 파일만 읽을 수 있으므로 실수로 변경하지 않고 안전하게 코드를 탐색할 수 있습니다. Bob 채팅에서 /ask를 입력하여 Ask 모드로 변경할 수도 있습니다.

@ 컨텍스트 멘션을 사용하여 프로젝트 검토

Bob은 프롬프트에서 특정 파일, 폴더 또는 문제를 직접 참조할 수 있는 @ 컨텍스트 멘션을 지원합니다. 컨텍스트 멘션은 Bob에게 논의하고자 하는 내용에 대한 정확한 정보를 제공합니다.

@ 멘션을 사용하여 분석할 파일을 Bob에게 명시적으로 알려 package.json, tsconfig.jsonDockerfile 파일을 탐색합니다. 이러한 파일에 대해 배우면 변경하기 전에 현대화 요구 사항을 이해하는 데 도움이 됩니다.

Bob 채팅 패널에서 다음 프롬프트를 실행합니다:

@package.json 이 프로젝트는 어떤 Node.js 버전을 사용하고 있나요? Node.js 22를 위해 업데이트해야 하는 종속성은 무엇인가요? 간단한 요약을 주세요.

@ 기호는 Bob에게 package.json을 컨텍스트로 포함하도록 지시합니다. Bob은 즉시 답변을 시작하지 않습니다. 먼저 코드베이스를 탐색하고 파일을 읽고 패턴을 따르고 코드를 분석합니다. 이 탐색 단계를 방해하지 마세요.

Bob은 Node.js 22에 필요한 다음 업데이트를 식별합니다:

**현재 Node.js 버전:** 16.x

**Node.js 22를 위해 업데이트가 필요한 종속성:**

1. **@types/node**: ^16.18.0 → ^22.x.x (Node.js 22용 TypeScript 타입)
2. **typescript**: ^4.9.5 → ^5.x.x (Node.js 22 지원 향상을 위한 TypeScript 5+)
3. **ts-node**: ^10.9.1 → ^10.9.2+ (TS 5 및 Node 22와의 호환성 보장)

**이미 호환되는 종속성:**
- **express**: ^4.18.2 ✓ (Node.js 22와 작동)
- **uuid**: ^9.0.0 ✓ (Node.js 22와 작동)
- **@types/express**: ^4.17.17 ✓ (호환)
- **@types/uuid**: ^9.0.0 ✓ (호환)

**요약:** Node.js 관련 개발 종속성만 업데이트하면 됩니다. 런타임 종속성(Express, UUID)은 이미 Node.js 22와 호환됩니다.

TypeScript 구성 분석

Bob에게 프로젝트의 TypeScript 구성을 분석하도록 요청합니다:

@tsconfig.json 이 TypeScript 프로젝트는 어떤 모듈 시스템과 컴파일러 설정을 사용하고 있나요? Node.js 22를 위해 업데이트해야 하는 종속성은 무엇인가요? 간단한 요약을 주세요.

Bob은 Node.js 22를 위해 업데이트해야 하는 다음 구성 요소로 응답합니다:

**현재 TypeScript 구성:**

**모듈 시스템:** CommonJS (`"module": "commonjs"`)
- `require()` 및 `module.exports`를 사용하는 기존 Node.js 모듈 시스템
- 출력: CommonJS 구문의 `.js` 파일

**컴파일러 설정:**
- **Target:** ES2020 (ES2020 JavaScript로 컴파일)
- **Lib:** ES2020 (ES2020 표준 라이브러리 기능 사용)
- **Module Resolution:** Node (표준 Node.js 해결 알고리즘)
- **Strict Mode:** 활성화됨 (전체 타입 검사)

**Node.js 22에 권장되는 업데이트:**

1. **target**: ES2020 → **ES2022** 또는 **ESNext** (최신 JS 기능 활용)
2. **lib**: ES2020 → **ES2022** (최신 API 액세스)
3. **module**: 네이티브 ESM 지원을 위해 **"node16"** 또는 **"nodenext"**로 마이그레이션 고려
4. **moduleResolution**: "node" → **"node16"** 또는 **"bundler"** (더 나은 최신 해결)

**요약:** 프로젝트는 ES2020 대상으로 레거시 CommonJS를 사용합니다. Node.js 22의 경우 대상/lib를 ES2022+로 업데이트하고 네이티브 ESM 모듈로 마이그레이션하는 것을 고려해야 합니다(CommonJS는 여전히 잘 작동하지만).

Dockerfile 분석

Bob에게 프로젝트의 Dockerfile을 분석하도록 요청합니다:

@Dockerfile 이 Dockerfile은 어떤 Node.js 버전을 사용하나요? Node.js 22를 위해 무엇을 변경해야 하나요? 간단한 요약을 주세요.

Bob은 Node.js 22를 위해 업데이트해야 하는 내용으로 응답합니다:

**현재 Dockerfile Node.js 버전:** Node 16 Alpine (`node:16-alpine`)

**Node.js 22에 필요한 변경 사항:**

1. **기본 이미지(2행):** `FROM node:16-alpine` → `FROM node:22-alpine`

**요약:** 한 줄만 변경하면 됩니다: 기본 이미지를 node:16-alpine에서 node:22-alpine으로 업데이트합니다. Dockerfile의 나머지 부분은 Node.js 22와 호환되지만 npm 플래그 구문을 현대화할 수 있습니다

이제 업데이트해야 할 사항을 이해했습니다. 다음 섹션에서는 Agent 모드로 전환하고 Bob이 변경하도록 합니다.

Bob의 Agent 모드로 API 현대화

Bob은 package.json, tsconfig.jsonDockerfile에 대한 다음 현대화 요구 사항을 결정했습니다:

  • package.json 및 Dockerfile에서 Node.js 16을 Node.js 22로 변경
  • TypeScript 컴파일러 대상 및 모듈 설정 업데이트
  • 오래된 종속성 버전 수정

애플리케이션 현대화를 시작하려면 Bob이 코드 변경을 수행할 수 있도록 Agent 모드로 다시 전환합니다. 모드 선택기를 클릭하고 Agent를 선택합니다.

Bob 채팅 패널에서 다음 현대화 프롬프트를 실행합니다. Bob이 작업하는 특정 파일을 가리키는 @ 참조에 주목하세요:

@package.json @tsconfig.json @Dockerfile

이 Express API를 Node.js 16에서 Node.js 22로 현대화하세요. API 기능은 동일하게 유지하세요 - 이것은 플랫폼 업그레이드이지 기능 변경이 아닙니다. 간단한 요약을 주세요.

Bob이 코드 업데이트 및 테스트를 완료하면 다음과 유사한 요약을 표시합니다:

Dockerfile — 2줄 변경

- 두 FROM node:16-alpine 스테이지 모두 → node:22-alpine

package.json — 3개 필드 변경

- engines.node: 16.x → 22.x
- @types/node: ^16.18.0 → ^22.0.0
- typescript: ^4.9.5 → ^5.0.0

tsconfig.json — 4개 설정 변경

- target: ES2020 → ES2023
- lib: ["ES2020"] → ["ES2023"]
- module: commonjs → node16 (TypeScript 5는 moduleResolution과 일치해야 합니다)
- moduleResolution: node → node16

귀하와 Bob은 애플리케이션을 현대화했습니다.

현대화를 완료로 표시

Bob의 문학적 코딩 기능을 사용하여 샘플 todo 제목을 업데이트하여 앱을 현대화된 것으로 표시합니다. 문학적 코딩을 사용하면 채팅 패널을 사용하는 대신 편집기에서 직접 Bob과 코드를 작성할 수 있습니다. 코드가 들어가야 할 위치에 자연어로 지침을 입력합니다.

문학적 코딩 모드 활성화

화면 왼쪽의 탐색기 탭에서 express-todo-api 폴더로 이동하고 src/db.ts를 클릭하여 편집기에서 엽니다. src/db.ts를 연 후 편집기 도구 모음의 마법 지팡이 아이콘을 클릭하여 문학적 코딩 모드를 전환합니다. 또는 Mac에서는 Cmd + I, Windows 및 Linux에서는 Ctrl + I를 누를 수 있습니다.

지침 작성

편집기에서 열린 src/db.ts 파일에서 코드 앞의 파일 맨 위에 다음 지침을 붙여넣습니다:

// 샘플 todo 객체의 title 속성을 찾아 "Welcome to the Modernized Node.js 22 API"로 변경하세요

문학적 코딩 모드에 있기 때문에 Bob은 이 주석이 일반 코드가 아닌 지침임을 이해합니다. 지침이 편집기에서 강조 표시됩니다.

코드 생성

문서 하단의 생성을 클릭합니다.

Bob은 생성자에서 sampleTodo 객체를 찾아 변경 사항을 보여줍니다. 제목이 다음과 같이 변경되는 것을 볼 수 있습니다:

변경 전:

title: "Learn Node.js modernization"

변경 후:

title: "Welcome to the Modernized Node.js 22 API"

변경 사항 수락

생성을 클릭한 문서 하단의 모두 수락을 클릭하여 파일에 변경 사항을 적용합니다.

문학적 코딩 모드 종료

파일 상단의 문학적 마법 지팡이 아래에 있는 종료를 클릭하여 문학적 코딩 모드를 종료합니다.

문학적 코딩을 사용하여 API를 업데이트했습니다. 다음 섹션에서 API를 테스트하면 API 응답에서 이 새 제목을 볼 수 있습니다.

Docker로 현대화된 애플리케이션 확인

Docker 컨테이너를 재구축하고 테스트하여 코드 현대화 및 문학적 코드 변경을 확인합니다.

Agent 모드로 돌아가서 Bob이 확인하기를 원하는 내용을 설명합니다:

Docker로 빌드하고 테스트하여 현대화된 Node.js 22 애플리케이션이 작동하는지 확인하세요. API가 /api/todos에서 응답하고 업데이트된 todo 제목을 표시하는지 확인하세요. 완료되면 정리하세요. 간단한 요약을 주세요. 새 제목의 검증도 보고 싶습니다.

Bob이 애플리케이션이 현대화되었음을 확인하면 다음 요약을 제공합니다:

✅ **검증 완료 - Node.js 22 현대화 성공**

**빌드 및 테스트 결과:**
- Node.js 22로 Docker 이미지를 성공적으로 빌드
- TypeScript 컴파일이 오류 없이 완료
- 애플리케이션이 시작되고 올바르게 응답

**API 검증:**
{
  "id": "72459851-7953-4a9c-94d3-4f8f1c656d21",
  "title": "Welcome to the Modernized Node.js 22 API",
  "completed": false,
  "createdAt": "2026-02-16T16:35:49.132Z"
}

**확인됨:**
- ✅ 업데이트된 todo 제목이 올바르게 표시됨: "Welcome to the Modernized Node.js 22 API"
- ✅ API 엔드포인트 /api/todos가 성공적으로 응답
- ✅ 모든 기능이 Node.js 22에서 작동
- ✅ 정리 완료(컨테이너 및 이미지 제거)

**요약:** 현대화된 Express TODO API는 업데이트된 샘플 데이터로 새 제목을 표시하여 현대화가 완료되었음을 확인하면서 Node.js 22에서 완전히 작동합니다.

API가 올바르게 작동하고 제목이 "Welcome to the Modernized Node.js 22 API"로 업데이트되어 Bob이 Node.js 버전과 종속성을 현대화하면서 기존 동작을 유지했음을 확인합니다.

다음 단계

이 튜토리얼에서는 Bob을 사용하여 Express API를 Node.js 16에서 Node.js 22로 현대화하는 방법을 배웠습니다. Bob은 종속성을 분석하고 구성 파일을 업데이트하며 모든 기능을 유지하면서 Docker 설정을 현대화했습니다.

  • 작업을 커밋하기 전에 잠재적인 문제를 포착하기 위해 Bob의 코드 검토 기능 /review에 대해 알아보세요.
  • 특정 작업에 맞게 Bob의 동작을 조정하는 전문화된 페르소나인 모드에 대해 알아보세요.
  • Bob과 상호 작용하는 주요 방법인 Bob의 채팅 인터페이스 사용 방법을 알아보세요.

그런 다음 IBM Bob 시작하기 튜토리얼 시리즈를 진행하여 Bob의 기능과 역량에 대해 자세히 알아보세요.

이 주제는 어떤가요?