cyphen156
VS Code ChatGPT 4 Extension 만들기 #2 웹뷰 본문
이번엔 웹뷰를 만들겁니다.
비주얼 코드의 화면 구성은 이렇게 생겼습니다.
- 작업표시줄 : 기본 작업구성탭 5개 외에 확장 기능 리스트가 표시됩니다.
- 트리 뷰(기본 사이드바) : 작업표시줄에서 선택한 구성탭의 내용을 트리 형태로 표시합니다.
- 웹 뷰 : 트리뷰에서 선택한 코드를 보여주거나, 명령어를 실행시켜 띄운 창들이 기본적으로 표시되는 구역입니다.
- 상태 바 : 말그대로 현재 작업의 상태를 나타내줍니다.
이 가운데 저는 트리 뷰에 chat gpt와의 대화 내역을, 웹 뷰에는 실제로 chat gpt와 주고받는 대화를 구현할 것입니다.
처음에는 트리뷰와 보조 사이드바(웹 뷰 오른쪽)을 사용하여 gpt와의 대화를 구현하려 했지만 보조 사이드바에는 웹 뷰와 같이 통신을 통해 상호작용하는 것을 구성하는것이 현재로서는 불가능하여 웹 뷰 화면에 구현하는 것으로 가닥을 잡았습니다.
맨 처음 할것은 웹 뷰 창을 새로 하나 띄우는 것 이겟죠?
Extension.ts
이전 글에서 extension.ts파일이 실제로 확장 명령을 실행할 코드들이 들어가는 파일이라고 보여주었습니다.
1. 먼저 var panel변수 윈도우 웹뷰 패널을 하나 만듭니다.
import * as vscode from 'vscode';
var panel: vscode.WebviewPanel | undefined = undefined;
export function activate(context: vscode.ExtensionContext) {
// clg
console.log('hello chatgpt4');
// alert on right bottom to explain this Extension
let disposable = vscode.commands.registerCommand('chatgpt-extension-pack.helloWorld', () => {
vscode.window.showInformationMessage('hihi');
});
context.subscriptions.push(disposable);
// This method is called when your extension is deactivated
export function deactivate() {}그런 다음 activate함수 내부에 확장 기능을 실행할 커맨드를 추가하고, 동작들을 추가할겁니다.
동작은 ctrl+shift+p >openWebview명령을 실행하면 콘솔창에 hello web view라는 메세지를 출력한 뒤 패널을 보여주는것입니다.
만약 패널이 있으면 보여주고, 없으면 새로 패널을 하나 만들어서 스크립트를 실행할 수 있도록 설정해줍니다.
그리고 나서 웹뷰 html구조를 표시하는 메서드를 실행시킵니다.
// view side bar
// using web view
context.subscriptions.push(
vscode.commands.registerCommand('chatgpt-extension-pack.openWebview', () => {
// 웹뷰 패널이 이미 열려있다면 그것을 활성화하고, 아니라면 새로운 패널을 생성합니다.
console.log("hello web view");
if (panel) {
panel.reveal(vscode.ViewColumn.One);
} else {
panel = vscode.window.createWebviewPanel(
'chatGpt', // Identifies the type of the webview. Used internally
'Chat with ChatGPT', // Title of the panel displayed to the user
vscode.ViewColumn.Beside, // Editor column to show the new webview panel in.
{
// 웹뷰에 표시될 내용에 대한 설정입니다.
enableScripts: true, // JavaScript를 활성화합니다.
retainContextWhenHidden: true, // 웹뷰가 비활성화될 때 상태를 유지합니다.
}
);
panel.webview.onDidReceiveMessage(
message => {
switch (message.command) {
case 'startChat':
console.log('Start chat command received from the webview');
return;
}
},
undefined,
context.subscriptions
);
// 패널이 닫힐 때 panel 객체를 undefined로 설정합니다.
panel.onDidDispose(() => {
panel = undefined;
});
}
// 웹뷰에 표시할 HTML을 설정합니다.
panel.webview.html = getWebviewContent();
})
);실제 웹 뷰 안에 표시될 html구조입니다.
function getWebviewContent() {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with ChatGPT</title>
</head>
<body>
<h1>Welcome to ChatGPT</h1>
<button id="startChat">Start chat</button>
<script>
const vscode = acquireVsCodeApi();
document.getElementById("startChat").addEventListener("click", () => {
//Use vscode API to send a message to the extension.
// vscode API is available as a global variable
vscode.postMessage({ command: "startChat" });
});
</script>
</body>
</html>`;
}pakage.json
확장에서 사용되는 명령커맨드, 구성요소 등 전체적인 프로젝트에 대한 구성요소 파일입니다.
이번에 여기서 건들것은 확장기능을 실행할 명령어를 추가하는것입니다.
여기서 추가된것은
라는 내용으로 openWebview명령어를 실행시키면 위의 extension.ts에서 만든 함수가 작동할겁니다.
"contributes": { //구성요소 리스트
"viewsContainers": {
"activitybar": [ //지금은 안씁니다
{
"id": "chatgpt",
"title": "ChatGPT",
"icon": "media/icon.svg"
}
]
},
"views": { //이것도요
"chatgpt": [
{
"id": "chat",
"name": "Chat"
}
]
},
"commands": [
{ // 맨 첫 게시글에서 사용했던 hihi를 오른쪽 하단에 표시하는 명령어입니다.
"command": "chatgpt-extension-pack.helloWorld",
"title": "Hello World"
},
{ // 웹뷰 창을 새로 띄워주는 명령어입니다.
"command": "chatgpt-extension-pack.openWebview",
"title": "openWebview"
}
]
},이번 장에서의 최종 결과는 이렇게 됩니다.
뭔가 코드를 제가만든게 아니라 gpt가 전부다 만든거같은기분인데 괜찮습니다. 나중에 어차피 extension.ts안에 쑤셔넣은 코드들을 리팩토링 할거고 아직 익숙하지 않지만 계속 코드를 고민하면서 수정하다보면 지피티를 통해서 공부하게 되더라구요.
아래는 제가 ChatGPT와 했던 대화내용입니다. 저와 같은 고민을 할 수 있으니 공유할게요.
나 : 보조사이드바에다가 내용을 입출력하고싶어
GPT : VS Code 확장에서 보조 사이드바(View)에 내용을 표시하려면, 보통 Tree View 또는 Webview를 사용합니다. Tree View는 계층적으로 구성된 아이템을 표시하는 데에 적합하며, Webview는 웹 기반 내용(HTML, CSS, JavaScript)을 표시하는 데에 적합합니다.
간단하게 데이터를 표시하려면 Tree View를 사용하는 것이 좋습니다.
만약 웹 기반 내용을 표시하려면 Webview를 사용해야 합니다. Webview를 사용하면 HTML, CSS, JavaScript를 사용하여 복잡한 사용자 인터페이스를 생성할 수 있습니다. 다만, 이는 좀 더 복잡한 작업이므로, 기본적인 확장 기능 개발에 익숙해진 후에 도전해보세요.
나 : 웹뷰랑 트리뷰는 무슨차이야? 내가 만약 open ai의 chatgpt api의 통신내용을 이 확장에서 보여주고싶다면 웹뷰를쓰는게 좋은건가?
GPT : 웹뷰(Webview)와 트리뷰(Tree View)는 모두 VS Code에서 제공하는 UI 컴포넌트로, 각각 다른 목적에 사용됩니다.트리뷰(Tree View): 트리뷰는 계층적으로 구성된 데이터를 표시하기 위해 사용됩니다. 파일 시스템이나 JSON 구조와 같이 트리 구조로 표현될 수 있는 데이터를 보여줄 때 주로 사용합니다. 이 컴포넌트는 각 아이템에 대해 몇 가지 기본적인 속성(예: 아이콘, 텍스트, 툴팁 등)을 설정할 수 있지만, 사용자 정의 UI를 만드는 데는 제한이 있습니다.
웹뷰(Webview): 웹뷰는 HTML, CSS, JavaScript를 사용하여 사용자 정의 UI를 만드는 데 사용됩니다. 웹 페이지를 만드는 것과 비슷하게 동작하기 때문에, 표준 웹 기술을 사용하여 복잡한 UI를 만들 수 있습니다. 이를 통해 사용자가 상호작용하는 입력 폼, 차트, 애니메이션 등을 만들 수 있습니다.
따라서, 만약 OpenAI의 GPT-3 API 통신 내용을 표시하려면 선택은 전적으로 당신이 어떤 UI를 원하는지에 달려 있습니다.
- 만약 API 응답을 계층적 구조로 간단하게 보여주려면 트리뷰를 사용하는 것이 좋습니다.
- 반면에, API 응답을 복잡한 형태(예: 표, 시각화, 인터랙티브 UI 등)로 보여주려면 웹뷰를 사용하는 것이 좋습니다.
웹뷰는 사용자 정의 UI를 만드는 데 더 큰 유연성을 제공하지만, HTML, CSS, JavaScript를 관리해야 하는 비용이 따르므로 복잡성이 더 높습니다. 따라서 요구사항과 개발 능력에 따라 적합한 선택을 하시면 됩니다.
사이드바에 웹뷰를 추가하려는 의도는 아마도 해당 웹뷰에 특정 정보를 표시하려는 것일 것입니다. 그러나, 현재로서는 이 기능은 VS Code API에서 지원하지 않습니다. 따라서, 일반적으로 트리 뷰나 리스트 뷰를 사용하여 사이드바에 정보를 표시하고, 웹뷰는 전체 창이나 편집기 영역에서 정보를 표시하는 데 사용합니다.
나 : 그러면 비주얼 코드는 화면분할기능을 제공하잖아 이걸 이용할 수 있을까? 예를 들어 기본적으로 화면 위에 아이콘을 띄우고 아이콘을 누르면 chatgpt api와 통신할 수 있는 창이 뜨는거야
네, 화면 분할 기능을 사용하여 사용자의 입력과 ChatGPT API의 응답을 표시하는 데 사용할 수 있는 웹뷰를 만들 수 있습니다.
VS Code 웹뷰는 별도의 패널을 생성하며, 이 패널은 기본적으로 창의 오른쪽에 배치됩니다. 웹뷰는 사용자가 자유롭게 위치를 변경하거나 분할하여 표시할 수 있습니다.
//확장 개발에 대한 레포지토리는 여기입니다.
cyphen156/VSCODE_ext: VSCode Extension using openai API (github.com)
GitHub - cyphen156/VSCODE_ext: VSCode Extension using openai API
VSCode Extension using openai API. Contribute to cyphen156/VSCODE_ext development by creating an account on GitHub.
github.com
'프로젝트 > Extensions' 카테고리의 다른 글
| VS Code ChatGPT 4 Extension 만들기 ##1 확장 기능에 대한 고민 (0) | 2023.06.30 |
|---|---|
| VS Code ChatGPT 4 Extension 만들기 #1 (0) | 2023.06.28 |
