Windows 11에서 Playwright 실행 엔진 개발하기

물론입니다! 아래는 Windows 11 로컬 환경에서 Playwright 실행 엔진을 개발하기 위한 완전한 설치 및 개발 가이드입니다.  
개발 도구 추천부터 실제 코드 작성, 실행, 보안 강화까지 단계별로 안내해 드립니다.


Windows 11에서 Playwright 실행 엔진 개발하기  
## 개발자 환경 설치 & 개발 가이드

##  목차

1. [필수 개발 도구 설치](#1-필수-개발-도구-설치)
2. [Node.js 설치 및 설정](#2-nodejs-설치-및-설정)
3. [VS Code 설치 및 설정](#3-vs-code-설치-및-설정)
4. [프로젝트 생성 및 Playwright 설치](#4-프로젝트-생성-및-playwright-설치)
5. [기본 스크립트 실행기 개발](#5-기본-스크립트-실행기-개발)
6. [보안 강화: 샌드박스 적용 (vm2)](#6-보안-강화-샌드박스-적용-vm2)
7. [API 서버 구축 (Express 기반)](#7-api-서버-구축-express-기반)
8. [테스트 및 디버깅 방법](#8-테스트-및-디버깅-방법)
9. [다음 단계: 확장 가능성](#9-다음-단계-확장-가능성)



## 1. 필수 개발 도구 설치

### 추천 개발 도구 (Windows 11용)

| 도구 | 용도 | 다운로드 |
|------|------|---------|
| Node.js | JavaScript 런타임 | [https://nodejs.org](https://nodejs.org) |
| VS Code | 코드 편집기 (가볍고 확장성 좋음) | [https://code.visualstudio.com](https://code.visualstudio.com) |
| Windows Terminal | 터미널 통합 (cmd, PowerShell, WSL 등) | Microsoft Store |
| Git | 버전 관리 | [https://git-scm.com](https://git-scm.com) |

>  모두 무료이며 Windows 11과 완벽 호환됩니다.

---

## 2. Node.js 설치 및 설정

### 2.1 다운로드 및 설치
1. [https://nodejs.org](https://nodejs.org) 접속
2. LTS 버전 (예: `18.18.2` 또는 `20.10.0`) 다운로드
3. 설치 시 기본 설정 유지 (체크박스 전부 체크 권장)

### 2.2 설치 확인
- PowerShell 또는 CMD 열기
```powershell
node --version
npm --version
```
- 출력 예:
  ```
  v18.18.2
  9.8.1
  ```

> ? 정상 설치 확인

---

## 3. VS Code 설치 및 설정

### 3.1 설치
1. [https://code.visualstudio.com](https://code.visualstudio.com) 접속
2. Windows용 설치 프로그램 다운로드 → 설치

### 3.2 추천 확장 설치 (Extensions)

| 확장명 | 설명 |
|-------|------|
| ESLint | 코드 품질 검사 |
| Prettier - Code formatter | 자동 포맷팅 |
| Playwright Test for VS Code | Playwright 테스트 실행 및 디버깅 |
| JavaScript (ES6) code snippets | JS 코드 조각 지원 |
| REST Client | API 테스트 (`.http` 파일 사용) |

 설치 방법:  
VS Code → 왼쪽 확장 아이콘 → 검색 → 설치

---

## 4. 프로젝트 생성 및 Playwright 설치

### 4.1 프로젝트 폴더 생성

```powershell
mkdir C:\dev\playwright-runner
cd C:\dev\playwright-runner
```

>  `C:\dev` 폴더가 없으면 먼저 생성하세요.

### 4.2 npm 초기화

```powershell
npm init -y
```

### 4.3 Playwright 설치

```powershell
npm install @playwright/test
```

### 4.4 브라우저 설치

```powershell
npx playwright install
```

> ? Chromium, Firefox, WebKit 설치됨

(선택) 의존성 문제 방지 (Windows는 일반적으로 필요 없음):
```powershell
npx playwright install-deps
```

---

## 5. 기본 스크립트 실행기 개발

### 5.1 파일 생성: `runner.js`

```javascript
// runner.js
const { chromium } = require('playwright');

let browser = null;

async function getBrowser() {
  if (!browser) {
    browser = await chromium.launch({ headless: false }); // 디버깅용: 창 보이기
  }
  return browser;
}

async function runUserScript(code) {
  const browser = await getBrowser();
  const context = await browser.newContext();
  const page = await context.newPage();

  try {
    const func = new Function('page', code);
    await func(page);
    await context.close();
    return { success: true, message: '실행 성공' };
  } catch (error) {
    await context.close();
    return { success: false, error: error.message };
  }
}

module.exports = { runUserScript, getBrowser };
```

---

## 6. 보안 강화: 샌드박스 적용 (vm2)

>  사용자 코드 실행은 보안 위험 → `vm2`로 샌드박스

### 6.1 vm2 설치

```powershell
npm install vm2
```

### 6.2 보안 실행기: `secure-runner.js`

```javascript
// secure-runner.js
const { chromium } = require('playwright');
const { NodeVM } = require('vm2');

let browser = null;

async function getBrowser() {
  if (!browser) {
    browser = await chromium.launch({ headless: true }); // 배포용: 숨김 모드
  }
  return browser;
}

async function runUserScriptSecure(code) {
  const browser = await getBrowser();
  const context = await browser.newContext();
  const page = await context.newPage();

  const vm = new NodeVM({
    sandbox: { page },
    require: {
      external: false,
      builtin: []
    }
  });

  try {
    const wrappedCode = `(async () => { ${code} })();`;
    await vm.run(wrappedCode, __filename);
    await context.close();
    return { success: true, message: '성공' };
  } catch (error) {
    await context.close();
    return { success: false, error: error.message };
  }
}

module.exports = { runUserScriptSecure, getBrowser };
```

---

## 7. API 서버 구축 (Express 기반)

### 7.1 Express 설치

```powershell
npm install express
```

### 7.2 `server.js` 생성

```javascript
// server.js
const express = require('express');
const { runUserScriptSecure } = require('./secure-runner');

const app = express();
app.use(express.json());

app.post('/run', async (req, res) => {
  const { code } = req.body;
  if (!code) return res.status(400).json({ error: '코드가 필요합니다.' });

  console.log('실행 요청 수신');
  const result = await runUserScriptSecure(code);
  res.json(result);
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(` 서버 실행 중: http://localhost:${PORT}`);
});
```

### 7.3 서버 실행

```powershell
node server.js
```

> ? 출력: `서버 실행 중: http://localhost:3000`

---

## 8. 테스트 및 디버깅 방법

### 8.1 테스트 코드: `test.js`

```javascript
// test.js
const { runUserScriptSecure } = require('./secure-runner');

const code = `
  await page.goto('https://example.com');
  console.log('제목:', await page.title());
  await page.screenshot({ path: 'output.png' });
`;

(async () => {
  const result = await runUserScriptSecure(code);
  console.log(result);
})();
```

실행:
```powershell
node test.js
```

> ? 성공 시: `output.png` 생성

---

### 8.2 API 테스트 (REST Client 사용)

VS Code에서 `test.http` 파일 생성:

```http
POST http://localhost:3000/run
Content-Type: application/json

{
  "code": "await page.goto('https://example.com'); await page.screenshot({ path: 'api-test.png' });"
}
```

 위 코드에서 `Send Request` 클릭 → 응답 확인

---

### 8.3 디버깅 팁

| 상황 | 해결 방법 |
|------|-----------|
| 브라우저 안 열림 | `headless: false`로 설정 |
| 스크린샷 안 됨 | 경로 확인 (`C:\dev\playwright-runner\`) |
| 오류: `page is not defined` | `page` 객체가 샌드박스에 주입되었는지 확인 |
| vm2 오류 | `npm install vm2@latest`로 최신 버전 설치 |

---

## 9. 다음 단계: 확장 가능성

| 기능 | 방법 |
|------|------|
|  TypeScript 지원 | `ts-node`, `typescript` 설치 후 `.ts` 파일 처리 |
| ? DB 연동 | `pg` (PostgreSQL), `sqlite3` 등 |
| ? 프론트엔드 연동 | React + Monaco Editor로 코드 편집기 구축 |
|  CI/CD | GitHub Actions + Playwright |
|  Docker | Windows에서 WSL2 + Docker Desktop 사용 |

---

##  최종 폴더 구조

```
C:\dev\playwright-runner\
├── node_modules/
├── runner.js
├── secure-runner.js
├── server.js
├── test.js
├── test.http
├── output.png
├── api-test.png
├── package.json
└── package-lock.json
```

---

## ? 결론

이제 당신은 Windows 11 로컬 환경에서:

- ? Playwright 기반 실행 엔진을 구축했고,
- ? 사용자 정의 JS 코드를 안전하게 실행할 수 있으며,
- ? API 서버로 외부와 연동할 수 있는 기반을 마련했습니다.

---

##  보너스: 자주 쓰는 명령어 요약

```powershell
# 프로젝트 생성
mkdir C:\dev\playwright-runner && cd C:\dev\playwright-runner

# 초기화
npm init -y

# 설치
npm install @playwright/test vm2 express

# 브라우저 설치
npx playwright install

# 서버 실행
node server.js

# 테스트 실행
node test.js
```

---

필요하시면 TypeScript 버전, React 프론트엔드 예제, 또는 Dockerfile 예제도 제공해 드릴 수 있어요!