VS Code 1.113 업데이트: MCP와 Thinking Effort 변화

TaskFlow는 작업을 관리하는 예제 앱입니다. 이 선택 실습에서는 앱을 실행·개발하는 환경과 설정을 준비합니다.

이 과정의 최종 목표는 VS Code agent 기능이 아닙니다.

선택: 연재 프로젝트와 전체 자료

연재 프로젝트를 이어 만드는 분을 위한 자료입니다. 이 글의 개념과 예제만 찾으셨다면 필요한 파일과 실행 방법만 펼쳐보세요.

TaskFlow 프로젝트 적용

시작 체크포인트: 이전 글의 적용·완료 확인과 이전 회차 시작 ZIP을 기준으로 아래 변경 파일을 수정합니다. 메인 앱은 루트에서 실행하고, labs는 해당 폴더의 package.json과 잠금 파일을 기준으로 따로 실행합니다.

이전 완료본과 달라진 파일: docs/development-environment.md, README.md. 전체 코드에서 같은 경로를 찾아 기존 내용을 대조합니다. ZIP의 자동 생성 lockfile도 해당 패키지 폴더와 함께 유지합니다.

VS Code의 버전·설정 화면을 여는 방법만 필요합니다. Copilot 모델 옵션은 계정과 지원 모델이 있는 경우에만 확인합니다. TaskFlow 7회차 완료는 하단 최종 점검의 조건입니다.

7회차까지의 필수 개발환경 기준을 알고 있어야 합니다. 8~10회차의 Tailwind·Storybook·Copilot 실습은 해당 도구를 사용할 때 참고하는 선택 학습이며, 이를 실행하지 않아도 메인 TaskFlow의 최종 점검을 진행할 수 있습니다.

pnpm 기준
env 계약
Vite env
ESLint CLI
의존성 오류 진단
Agent Debug Logs

TaskFlow 개발환경 최종 점검

이 과정의 최종 목표는 VS Code agent 기능이 아닙니다.

새 환경에서 TaskFlow를 같은 명령으로 실행할 수 있어야 합니다.

최종 체크 순서:

1. 프로젝트 파일 준비
2. Node.js 버전 확인
3. pnpm 버전 확인
4. packageManager 확인
5. pnpm install
6. .env.example 확인
7. 로컬 env 준비
8. pnpm dev
9. pnpm lint
10. 선택 lab은 필요할 때만 실행

clean install 시나리오

새 폴더에서 저장소를 받은 상황을 가정합니다.

pnpm install
pnpm dev
pnpm lint

이 세 명령이 README 또는 개발환경 문서만 보고 재현되어야 합니다.

환경 변수 값이 필요한 경우 .env.example만 보고 필요한 변수 이름을 만들 수 있어야 합니다.

개발환경 문제 해결 최종 순서

현재 경로
→ Node.js / package manager 버전
→ package.json
→ workspace
→ lockfile
→ env
→ config
→ 실행 로그
→ 브라우저/네트워크
→ 에디터/extension
→ AI agent/tool log
→ 필요한 경우 캐시 정리

이 순서를 지키면 “일단 모두 삭제하고 다시 설치”하는 방식보다 원인을 남길 수 있습니다.

nested subagents 같은 agent 기능

1.113에서는 subagent가 다른 subagent를 호출할 수 있는 형태의 개선도 소개됐습니다.

이 기능 역시 TaskFlow를 실행하는 데 필요한 개발환경 필수 조건은 아닙니다.

AI agent 기능은 생산성을 높이는 선택 도구이고, 프로젝트의 기본 재현 조건은 다음과 같습니다.

pnpm install
pnpm dev
pnpm lint

AI 기능이 꺼져 있어도 이 세 단계는 정상 동작해야 합니다.

업데이트 후 가장 먼저 할 일

VS Code를 업데이트했다고 package.json이나 lockfile을 바로 수정하지 않습니다.

먼저 기존 프로젝트가 그대로 실행되는지 확인합니다.

pnpm install
pnpm dev
pnpm lint

그다음 에디터 기능을 확인합니다.

ESLint extension
Tailwind extension
Copilot Chat
MCP
terminal profile
workspace settings

프로젝트 문제와 에디터 업데이트 문제를 섞지 않습니다.

이전 체크포인트

dev-env-step-10-copilot-debug

이번 변경

새 라이브러리나 앱 기능을 추가하지 않습니다.

이번 회차는 TaskFlow 개발환경의 최종 감사 단계입니다.

패키지 매니저 기준 확인
workspace 확인
env 계약 확인
Vite env 확인
ESLint CLI 확인
오류 해결 순서 확인
VS Code/AI 도구는 선택 계층으로 분리

최종 실행 확인

pnpm install
pnpm dev
pnpm lint

가능하면 기존 node_modules에 의존하지 않는 새 폴더 또는 clean install 환경에서도 같은 결과를 확인합니다.

검증 결과 기록

다음 항목은 실제 확인한 것만 완료로 표시합니다.

Node.js 실행
pnpm 명령
pnpm install
pnpm dev
pnpm lint
환경 변수 로드
Vite 개발 서버
ESLint CLI
VS Code
Copilot Agent Debug Logs
선택 lab
clean install

확인하지 않은 항목은 미검증으로 남깁니다.

완료 체크포인트

dev-env-step-11-final

개발환경 과정은 여기서 끝납니다.

완료된 TaskFlow 개발환경 표준은 이후 Git·GitHub, 배포·서버, React, Next.js 등 다른 과정에서 공통 기반으로 사용할 수 있습니다.

node_modules/
dist/
storybook-static/
.env.local
.env.*.local

VITE_API_URL=https://api.example.invalid
VITE_APP_NAME=TaskFlow

import js from '@eslint/js';
import { defineConfig } from 'eslint/config';
import globals from 'globals';

export default defineConfig([
  { ignores: ['dist/**'] },
  js.configs.recommended,
  {
    files: ['src/**/*.js'],
    languageOptions: { globals: globals.browser },
    rules: { 'no-console': 'warn' },
  },
]);

<!doctype html>
<html lang="ko">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TaskFlow 개발환경</title></head>
<body><main id="app"></main><script type="module" src="/src/main.js"></script></body>
</html>

{
  "name": "@taskflow/web",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite --host 127.0.0.1",
    "build": "vite build",
    "lint": "eslint ."
  },
  "devDependencies": {
    "vite": "8.3.0",
    "eslint": "10.11.0",
    "@eslint/js": "10.0.1",
    "globals": "17.12.0"
  }
}

const apiUrl = import.meta.env.VITE_API_URL;
const appName = import.meta.env.VITE_APP_NAME;

if (!apiUrl) {
  throw new Error('VITE_API_URL 환경 변수가 필요합니다.');
}

export const env = {
  apiUrl,
  appName: appName || 'TaskFlow',
};

import './style.css';
import { env } from './config/env.js';

const app = document.querySelector('#app');
const title = document.createElement('h1');
title.textContent = env.appName;
const status = document.createElement('p');
status.textContent = '개발환경 스타터가 실행 중입니다.';
const api = document.createElement('p');
api.id = 'api-url';
api.textContent = `API URL: ${env.apiUrl}`;
app.append(title, status, api);

body { margin: 0; color: #202020; background: #f6f6f6; font: 16px/1.6 system-ui, sans-serif; }
main { max-width: 720px; margin: 64px auto; padding: 24px; }
h1 { font-size: 30px; font-weight: 500; }
p { overflow-wrap: anywhere; }

# TaskFlow 개발환경

이 스타터는 개발환경 진단을 위한 최소 Vite/vanilla JavaScript 앱입니다. 할 일 관리 기능이나 API 서버는 포함하지 않습니다.

Node.js 24.19.0, pnpm 11.19.0으로 검증했습니다. 루트는 pnpm만 사용하며 apps/*만 workspace입니다. labs의 npm/Yarn/pnpm 실습은 독립 프로젝트입니다.

## 2회차

메인 앱은 pnpm을 유지합니다. labs/yarn-modern은 독립 Yarn 실습입니다.

## 3회차

apps/web/.env.example을 apps/web/.env.local로 복사합니다. .invalid 주소는 표시만 하며 실제 API 호출은 하지 않습니다. 공개 샘플값만 제공하고 로컬 파일은 ZIP에서 제외합니다.

## 4회차

Vite 루트는 apps/web입니다. env.js가 필수 VITE_API_URL을 검사하고 화면에 공개 URL을 표시합니다.

## 5회차

ESLint 설정과 의존성은 apps/web에 있습니다. 루트 pnpm lint가 앱의 eslint .을 호출합니다.

## 6회차

npm ERESOLVE 실습은 labs/npm-eresolve에서 실행합니다. 최종본은 react와 react-dom 19.3.0 호환 조합입니다.

## 7회차

설치 오류는 경로 → Node/pnpm 버전 → workspace → package.json → lockfile 순으로 확인합니다. 새 폴더에서 pnpm install --frozen-lockfile로 재현합니다.

## 8회차

Tailwind lab은 독립 pnpm 프로젝트입니다. PostCSS 빌드와 VS Code 언어 모드/확장 상태를 구분합니다. VS Code GUI 경고는 이번 자동 검증 범위에 포함하지 않았습니다.

## 9회차

Storybook lab은 HTML/Vite 기반 최소 UI입니다. 잘못된 import 경로를 진단합니다. Linux 대소문자/CI 자원 문제는 이 Windows 실행으로 검증하지 않았습니다.

## 10회차

VS Code Copilot Agent Debug Logs와 Chat Debug는 선택 기능입니다. 사용자 계정, 모델, 확장 상태가 필요한 GUI 단계는 직접 검증하지 않았습니다.

## 11회차

최종 새 폴더에서 install --frozen-lockfile, dev HTTP, env 변환, lint, build를 검사합니다. 에디터/AI 기능 검증과 앱 검증을 혼동하지 않습니다.

{
  "name": "taskflow",
  "private": true,
  "packageManager": "pnpm@11.19.0",
  "engines": {
    "node": ">=24"
  },
  "scripts": {
    "dev": "pnpm --filter @taskflow/web dev",
    "build": "pnpm --filter @taskflow/web build",
    "lint": "pnpm --filter @taskflow/web lint"
  }
}

packages:
  - "apps/*"

# TaskFlow 개발환경 11 완료 체크포인트

Node.js 24.19.0 / pnpm 11.19.0 검증 기준입니다. pnpm을 별도로 설치한 환경에서 실행하세요. ZIP에는 node_modules, dist, 로컬 환경 변수, 실제 비밀값이 없습니다.

1. 이 폴더에서 `pnpm install --frozen-lockfile`
2. PowerShell: `Copy-Item apps/web/.env.example apps/web/.env.local` 또는 macOS/Linux: `cp apps/web/.env.example apps/web/.env.local`
3. `pnpm dev` 후 http://127.0.0.1:5173 확인
4. `pnpm build`
5. `pnpm lint`

apps/web가 Vite 루트입니다. 환경 변수도 이 폴더에 둡니다. 표시용 API 주소에 실제 요청을 보내지 않습니다. labs는 메인 workspace에서 제외되어 각 폴더에서 별도 설치합니다.

원문 단계별 전체 파일과 실행 검증 범위는 docs/development-environment.md를 확인하세요.

nodeLinker: node-modules

{
  "name": "taskflow-yarn-lab",
  "private": true,
  "type": "module",
  "packageManager": "yarn@4.18.0",
  "scripts": {
    "dev": "node src/main.js",
    "lint": "node --check src/main.js"
  }
}

console.log('TaskFlow Yarn 독립 실습');

{
  "name": "taskflow-npm-eresolve",
  "private": true,
  "type": "module",
  "packageManager": "npm@11.16.0",
  "scripts": {
    "test": "node verify.mjs"
  },
  "dependencies": {
    "react": "19.3.0",
    "react-dom": "19.3.0"
  }
}

# npm ERESOLVE 실습

이 폴더에서만 npm을 사용합니다.

오류 재현: `npm install react@18.3.1 react-dom@19.3.0 --save-exact`

복구: `npm install react@19.3.0 react-dom@19.3.0 --save-exact`

검증: `npm ls react react-dom`, `npm test`

react-dom 19.3.0의 peerDependencies는 react ^19.3.0입니다. 최종 package.json은 복구된 상태입니다.

import { createElement } from 'react';
import { renderToString } from 'react-dom/server';
import assert from 'node:assert/strict';
const html = renderToString(createElement('p', null, 'TaskFlow'));
assert.equal(html, '<p>TaskFlow</p>');
console.log('React 서버 렌더링 통과');

{
  "recommendations": [
    "bradlc.vscode-tailwindcss"
  ]
}

{
  "files.associations": {
    "*.css": "tailwindcss"
  }
}

<!doctype html>
<html lang="ko"><head><meta charset="UTF-8"><title>Tailwind lab</title><link rel="stylesheet" href="/src/style.css"></head><body><h1 class="text-brand text-2xl">TaskFlow Tailwind</h1></body></html>

{
  "name": "taskflow-tailwind-lab",
  "private": true,
  "type": "module",
  "packageManager": "pnpm@11.19.0",
  "scripts": {
    "dev": "vite --host 127.0.0.1",
    "build": "vite build"
  },
  "devDependencies": {
    "vite": "8.3.0",
    "tailwindcss": "4.3.3",
    "@tailwindcss/postcss": "4.3.3",
    "postcss": "8.5.28"
  }
}

packages:
  - "."

export default {
  plugins: { '@tailwindcss/postcss': {} },
};

# Tailwind lab

이 폴더에서 `pnpm install --frozen-lockfile`, `pnpm dev`, `pnpm build`를 실행합니다.

빌드 오류 재현은 postcss.config.js의 plugin을 tailwindcss로 바꿔 확인하고, @tailwindcss/postcss로 복구합니다. VS Code에는 Tailwind CSS IntelliSense를 설치하고 이 폴더를 열어 언어 모드를 확인합니다. 전역 CSS 검사는 끄지 않습니다.

@import "tailwindcss";

@theme {
  --color-brand: #111111;
}

export default {
  stories: ['../src/**/*.stories.js'],
  framework: '@storybook/html-vite',
};

{
  "name": "taskflow-storybook-lab",
  "private": true,
  "type": "module",
  "packageManager": "pnpm@11.19.0",
  "scripts": {
    "dev": "storybook dev -p 6006 --host 127.0.0.1 --no-open",
    "storybook": "storybook dev -p 6006 --host 127.0.0.1 --no-open",
    "build": "storybook build"
  },
  "devDependencies": {
    "vite": "8.3.0",
    "storybook": "10.6.0",
    "@storybook/html-vite": "10.6.0"
  }
}

packages:
  - "."
allowBuilds:
  esbuild@0.28.2: true

# Storybook lab

이 폴더에서 `pnpm install --frozen-lockfile`, `pnpm dev`, `pnpm build`를 실행합니다.

TaskCard.stories.js의 import를 ./missing/TaskCard.js로 변경하면 변환 오류를 재현할 수 있습니다. 개발 서버와 Network의 첫 실패 요청을 확인하고 ./components/TaskCard.js로 복구합니다. 이 실습은 HTML/JavaScript이며 JSX/React parser를 추가하지 않습니다.

export default function TaskCard({ title = '개발환경 확인' } = {}) {
  const article = document.createElement('article');
  const heading = document.createElement('h2');
  heading.textContent = title;
  article.append(heading);
  return article;
}

import TaskCard from './components/TaskCard.js';

export default { title: 'TaskFlow/TaskCard', render: (args) => TaskCard(args) };
export const Default = { args: { title: '개발환경 확인' } };

실행 검증 결과

검증 환경: Windows · Node.js 24.19.0 · pnpm 11.19.0 · Vite 8.3.0 · ESLint 10.11.0.

메인 앱의 개발 서버 응답과 환경 변수 변환은 1·4·5·11회차에서 대표 확인했습니다. 선택 lab과 에디터 기능은 위에 표시한 범위만 검증했으며, 운영 배포 검증은 포함하지 않습니다.

과정 전체 연결

dev-env-step-01-pnpm-base
→ dev-env-step-02-package-manager-choice
→ dev-env-step-03-env-contract
→ dev-env-step-04-vite-env
→ dev-env-step-05-eslint-flat
→ dev-env-step-06-npm-eresolve-fixed
→ dev-env-step-07-pnpm-recovery
→ dev-env-step-08-tailwind-editor-fix
→ dev-env-step-09-storybook-vite-fix
→ dev-env-step-10-copilot-debug
→ dev-env-step-11-final