본문 바로가기

[Phthon] Visual Studio Code에서 ChatGPT 사용 방법

I am bucks 발행일 : 2023-04-23

이번 글에서는 Visual Studio Code(VS Code)에서 ChatGPT 확장프로그램을 설치하여 사용하는 방법을 알아보겠습니다. ChatGPT 확장프로그램은 AICodeHelper입니다.

1. Intro

파이썬 코딩을 할 때 파이참(Pycharm)과 Visual Studio Code(VS Code)를 많이 사용하실 겁니다. 저도 파이썬 코딩을 할 때 파이참과 Visual Studio Code(VS Code)를 함께 사용하는 경우가 많은데요.

 

특히, VS Code의 경우에는 다양한 확장 프로그램을 사용할 수 있는데요. 이번에는 VS Code에서 ChatGPT를 사용하는 방법에 대해 알아보겠습니다.

 

ChatGPT를 사용해 보셨다면, ChatGPT가 코드를 리뷰해 주거나, 수정 또는 만들어주기도 한다는 것을 잘 아실 겁니다. 그런데, VS Code로 코딩을 하면서 바로 사용할 수 있는 방법이 있습니다. 

 

2. VS Code에서 ChatGPT 확장 프로그램 설치하는 방법

가. VS Code에서 확장메뉴 클릭 후, 메뉴창에서 aicodehelper 입력

AICodeHelper 설치
AICodeHelper 설치

 

나. AICodeHelper 설치하기

저는 이미 설치해서 아래와 같이 나옵니다. 설치를 눌러 진행하시면 됩니다.

AICodeHelper 설치
AICodeHelper 설치

 

다. ChatGPT API 발급하기

ChatGPT API를 아래의 사이트에 방문하여, 우측 상단의 계정을 눌러 View API keys를 선택합니다.

Create new Secret key를 눌러 API Key를 발급받아 메모장에 복사해 둡니다.

 

 

OpenAI API

An API for accessing new AI models developed by OpenAI

platform.openai.com

Open AI API
Open AI API 발급하기

 

라. ChatGPT API 입력하기

아래의 그림과 같이 설정메뉴를 누르다음, aicodehelper를 누릅니다.

안내문과 같이 단축키(Ctrl+Alt+Shift+Q)를 눌러 나오는 입력박스에 API Key를 입력해 줍니다.

 

마. AIcodehelper Language를 Korean으로 입력

 

3. VS Code에서 ChatGPT 사용방법

가. 원본 코드

아래와 같이 셀레니움을 사용하여 네이버에 로그인하는 코드를 기본 코드로 사용하였습니다.

from selenium import webdriver
import chromedriver_autoinstaller   # pip install chromedriver_autoinstaller
chromedriver_autoinstaller.install()
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time
import pyautogui
import pyperclip


#브라우저 꺼짐 방지
chrome_options = Options()
chrome_options.add_experimental_option("detach", True)

#불필요한 에러 메세지 없애기
chrome_options.add_experimental_option("excludeSwitches", ["enable-logging"])

#웹페이지 열기
driver = webdriver.Chrome(options=chrome_options)
driver.implicitly_wait(5)
driver.maximize_window()
driver.get("https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com")

# 아이디 입력창
id = driver.find_element(By.CSS_SELECTOR, "#id")
id.click()
pyperclip.copy("iamhappy")
pyautogui.hotkey("ctrl", "v")
time.sleep(2)

# 비밀번호 입력창
pw = driver.find_element(By.CSS_SELECTOR, "#pw")
pw.click()
pyperclip.copy("youarehappy")
pyautogui.hotkey("ctrl", "v")
time.sleep(2)

# log.login
login_btn = driver.find_element(By.CSS_SELECTOR, "#log\.login")  # \. : 이스케이프 문자
login_btn.click()

 

나. ChatGPT 이용하여 주석달기(Chtr + Alt + Shift + Z)

코드를 드래그하여 선택한 후, 단축키(Ctrl+Alt+Shift+Z)를 누르면 아래와 같이 주석이 달립니다.

from selenium import webdriver
import chromedriver_autoinstaller   # pip install chromedriver_autoinstaller
chromedriver_autoinstaller.install()
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time
import pyautogui
import pyperclip

# Chrome 옵션 설정
chrome_options = Options()
chrome_options.add_experimental_option("detach", True)  # 브라우저 창 분리
chrome_options.add_experimental_option("excludeSwitches", ["enable-logging"])  # 로그 제거

# Chrome 드라이버 실행
driver = webdriver.Chrome(options=chrome_options)
driver.implicitly_wait(5)  # 암묵적 대기
driver.maximize_window()  # 창 최대화
driver.get("https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com")  # 네이버 로그인 페이지 접속

# 아이디 입력
id = driver.find_element(By.CSS_SELECTOR, "#id")  # 아이디 입력 요소 선택
id.click()  # 클릭
pyperclip.copy("iamhappy")  # 클립보드에 아이디 복사
pyautogui.hotkey("ctrl", "v")  # 클립보드 붙여넣기
time.sleep(2)  # 2초 대기

# 비밀번호 입력
pw = driver.find_element(By.CSS_SELECTOR, "#pw")  # 비밀번호 입력 요소 선택
pw.click()  # 클릭
pyperclip.copy("youarehappy")  # 클립보드에 비밀번호 복사
pyautogui.hotkey("ctrl", "v")  # 클립보드 붙여넣기
time.sleep(2)  # 2초 대기

# 로그인 버튼 클릭
login_btn = driver.find_element(By.CSS_SELECTOR, "#log\.login")  # 로그인 버튼 요소 선택
login_btn.click()  # 클릭

 

다. ChatGPT 이용하여 코드리뷰(Chtr + Alt + Shift + C)

코드를 드래그하여 선택한 후, 단축키(Ctrl+Alt+Shift+C)를 누르면 아래와 같이 코드를 리뷰해 줍니다.

코드리뷰 결과는 아래와 같습니다. 좋은 점과 나쁜 점을 잘 나타내 줍니다. 

# |이 코드는 Selenium을 사용하여 네이버 로그인 페이지에 자동으로 로그인하는 코드입니다.
# |
# |좋은 점:
# |- chromedriver_autoinstaller 모듈을 사용하여 크롬 드라이버를 자동으로 설치할 수 있습니다.
# |- Chrome 옵션을 설정하여 브라우저 창을 분리하고 로그를 제거할 수 있습니다.
# |- pyautogui와 pyperclip 모듈을 사용하여 클립보드에 저장된 아이디와 비밀번호를 붙여넣을 수 있습니다.
# |
# |나쁜 점:
# |- 코드의 가독성이 떨어집니다. 변수명이 간단하게 설정되어 있어 코드를 이해하기 어렵습니다.
# |- time.sleep() 함수를 사용하여 강제로 대기하는 부분이 있습니다. 이는 코드 실행 시간을 늘리고, 실행 속도를 느리게 만듭니다. 대신, Selenium의 암묵적 대기 기능을 사용하는 것이 좋습니다.

 

# |이 코드는 Selenium을 사용하여 네이버 로그인 페이지에 자동으로 로그인하는 코드입니다.
# |
# |좋은 점:
# |- chromedriver_autoinstaller 모듈을 사용하여 크롬 드라이버를 자동으로 설치할 수 있습니다.
# |- Chrome 옵션을 설정하여 브라우저 창을 분리하고 로그를 제거할 수 있습니다.
# |- pyautogui와 pyperclip 모듈을 사용하여 클립보드에 저장된 아이디와 비밀번호를 붙여넣을 수 있습니다.
# |
# |나쁜 점:
# |- 코드의 가독성이 떨어집니다. 변수명이 간단하게 설정되어 있어 코드를 이해하기 어렵습니다.
# |- time.sleep() 함수를 사용하여 강제로 대기하는 부분이 있습니다. 이는 코드 실행 시간을 늘리고, 실행 속도를 느리게 만듭니다. 대신, Selenium의 암묵적 대기 기능을 사용하는 것이 좋습니다.
from selenium import webdriver
import chromedriver_autoinstaller   # pip install chromedriver_autoinstaller
chromedriver_autoinstaller.install()
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time
import pyautogui
import pyperclip

# Chrome 옵션 설정
chrome_options = Options()
chrome_options.add_experimental_option("detach", True)  # 브라우저 창 분리
chrome_options.add_experimental_option("excludeSwitches", ["enable-logging"])  # 로그 제거

# Chrome 드라이버 실행
driver = webdriver.Chrome(options=chrome_options)
driver.implicitly_wait(5)  # 암묵적 대기
driver.maximize_window()  # 창 최대화
driver.get("https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com")  # 네이버 로그인 페이지 접속

# 아이디 입력
id = driver.find_element(By.CSS_SELECTOR, "#id")  # 아이디 입력 요소 선택
id.click()  # 클릭
pyperclip.copy("iamhappy")  # 클립보드에 아이디 복사
pyautogui.hotkey("ctrl", "v")  # 클립보드 붙여넣기
time.sleep(2)  # 2초 대기

# 비밀번호 입력
pw = driver.find_element(By.CSS_SELECTOR, "#pw")  # 비밀번호 입력 요소 선택
pw.click()  # 클릭
pyperclip.copy("youarehappy")  # 클립보드에 비밀번호 복사
pyautogui.hotkey("ctrl", "v")  # 클립보드 붙여넣기
time.sleep(2)  # 2초 대기

# 로그인 버튼 클릭
login_btn = driver.find_element(By.CSS_SELECTOR, "#log\.login")  # 로그인 버튼 요소 선택
login_btn.click()  # 클릭

 

라. ChatGPT 이용하여 코드 리팩토링(Chtr + Alt + Shift + R)

코드를 드래그하여 선택한 후, 단축키(Ctrl+Alt+Shift+R)를 누르면 아래와 같이 코드를 리팩터링해 줍니다.

해당 코드는 코드가 간단하여, 리팩토링의 효과는 원본과 큰 차이는 없는 것 같습니다.

특히, 위에서 실행한 코드리뷰에서 나온 time.sleep() 함수에 대한 수정은 해주지 않네요.

from selenium import webdriver
import chromedriver_autoinstaller
chromedriver_autoinstaller.install()
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time
import pyautogui
import pyperclip

chrome_options = Options()
chrome_options.add_experimental_option("detach", True)
chrome_options.add_experimental_option("excludeSwitches", ["enable-logging"])

driver = webdriver.Chrome(options=chrome_options)
driver.implicitly_wait(5)
driver.maximize_window()

driver.get("https://nid.naver.com/nidlogin.login?mode=form&url=https%3A%2F%2Fwww.naver.com")

id = driver.find_element(By.CSS_SELECTOR, "#id").click()
pyperclip.copy("iamhappy")
pyautogui.hotkey("ctrl", "v")
time.sleep(2)

pw = driver.find_element(By.CSS_SELECTOR, "#pw").click()
pyperclip.copy("youarehappy")
pyautogui.hotkey("ctrl", "v")
time.sleep(2)

login_btn = driver.find_element(By.CSS_SELECTOR, "#log\.login").click()

 

4. Closing

이번 글에서는 Visual Studio Code(VS Code)에서 ChatGPT 확장프로그램을 설치하여 사용하는 방법을 알아보았습니다. ChatGPT 확장프로그램은 AICodeHelper입니다.

 

사용해 본 결과, 주석과 코드 리뷰는 좋은 결과를 얻을 수 있었습니다. 하지만, 한글로 원하는 내용을 입력했을 때 셀레니움으로 코드를 구현해 달라고 했는데요. 이 결과는 이번 글에 적지는 않았지만, 제대로 실행되지 않았습니다. 아무래도 ChatGPT가 2022년도에 변경된 셀레니움(Selenium) 코드를 학습하지 못해서 인 듯합니다.

 

다음 글에서는 셀레니움 버전 3.0에서 버전 4.0으로 바뀌면서 변경된 부분에 대해서 알아보도록 하겠습니다. 감사합니다. 

댓글