vscode OpenAI api 확장 프로그램 사용 (AICodeHelper)

요즘 Open AI가 개발한 대화 전문 인공지능 챗봇 chat gpt 가 핫하다. 
AICodeHelper는 이 Open AI에서 제공하는 Open AI api를 이용해 간단하게 html 코드 등을 생성하는 vscode 확장 프로그램이다.
챗gpt 를 vscode에서 코더로 활용한다고 생각하면 이해하기 쉽다. 정확히 맞는 표현인지는 모르겠지만.
 
1. OpenAI 회원가입
https://platform.openai.com/

OpenAI API

나는 간단하게 구글 계정으로 했고, 휴대폰으로 인증코드도 받아야한다.
 
2. overview 페이지에서 오른쪽 상단의 Personal 클릭, View API keys 클릭
https://platform.openai.com/overview

 
3. api key 생성. Create new secret key를 클릭하고 대충 키 이름을 넣으면 딱 한번만!! 볼수 있는 secret api key가 나온다. 그걸 반드시 복사해서 메모장에 붙여넣기 해둔다.

+ 참고로 api key는 유료버전 용이지만, 무료 평가판을 쓰게 해준다. 무료로 한도(?)를 조금 주고 그 이상 사용하면 돈내고 써야하는 형식. 내가 얼마나 썼는지, 내 한도는 얼마인지는 Usage에서 확인 가능하다.

나는 참고로 챗 gpt를 먼저 사용해보면서 뭘로 로그인했었는지 까먹고 나한테 있는 구글계정 두개 다 sign up 했었는데, 두번째 sign up 했던 계정으로 api를 들어가니 무료 평가판도 안됬었다. 혹시나 해서 처음에 sign up했던 계정으로 들어가보니 무료 평가판 사용 가능했음! 휴대폰 인증으로 한 사람이 두개의 계정을 쓴거를 체크한건지... 여튼.
저 usage에 한도가 없는 상태에서는 발급받은 api key를 사용할수 없다. 반드시 vscode에서 세팅하기 전에 usage에 free trial usage 하고 떠있는지 확인해보기.
 
4. vscode의 확장 프로그램 란에서 AICodeHelper 검색 후 설치.
* 마켓 플레이스 url : https://marketplace.visualstudio.com/items?itemName=Kimseungtae.aicodehelper 

 
5. 가장먼저 발급받은 api key를 세팅해야한다. (AICodeHelper 의 확장프로그램 설명란에서 확인 가능)

위 내용처럼 Crtl + Shift + Alt + Q를 누르면 

이렇게 창이 뜨고, 여기에 아까 메모장에서 복사해둔 키를 붙여넣기 하면 끝.
 
6. language 설정하기
아주 똑똑한 인공지능이므로 명령을 한글로 해도 당연히 잘 알아먹지만, 이 확장프로그램을 통해서 adding comment (주석추가) 등 뭔가 얘가 써주는거는 language를 korean으로 설정해놔야 한글로 적어준다.
 
설정 탭에서 aicodehelper 를 검색 후 쭉 내리다보면

요기 language에 english 를 korean 으로 변경하면 끝!
 
6. 테스트하기
확장 프로그램 설명란을 보면 Adding Comments, Refactoring, Code Review 등등... 기능이 뭐가 많은데, 만약 내가 html 짤때 이 api를 사용한다면 가장 많이 할거 같은건 사실 테이블 소스 짜는거다.
ppt나 excel로 만들어진 테이블을 html table로 만드려면 노가다로 텍스트 하나하나 복사 붙여넣기 하면서 만들어야 하는데, 전체 내용을 복사해서 넣기만 해도 소스를 잘 짜주는것 확인했다.
 
1) excel에 있는 테이블을 전체 드래그 후 복사 
 

 
2) 복사한걸 그대로 html파일에 붙여넣기
* 만약 ppt에 있는 테이블의 경우, 복사 후 엑셀에 붙여넣은다음 엑셀 테이블을 복사해서 붙여넣기. ppt 테이블을 ctrl + c 한 다음에 바로 메모장이나 vscode에 넣으려고 하면 안넣어짐.
 

붙여넣기 한 화면

 
3) 명령할 내용 위에 쓰기, 전체 드래그 후 ctrl + shift + alt + M (General Requests) 
     혹은 소스 드래그 후 ctrl + shift + alt + , (컴마) 눌러서 나오는 창에 명령할 내용 쓴 후 엔터.
 

명령을 상단에 추가한것

 

ctrl + shift + alt + , 눌러서 명령 쓴것

 
4) 결과화면 (3번의 두가지 방법 모두 결과 동일)
 

복잡한 내용의 표도 잘 생성되는지는 아직 확인 못해보긴 했는데, 이정도면 꽤 쓸만한듯.
다른 방법으로도 활용 방법이 무궁무진 할것 같은데 잘 써봐야겠다. 무료평가판 다 쓸때까지^^
 

---

추가로 테스트해본.. 과연 하이차트도 제대로 그려줄것인가 테스트!
 
1. 명령 쓰고 난 후 전체 드래그 후 ctrl + shift + alt + M
 

 
2. 결과
 

완벽하게 소스를 짜줌. 심지어 난 쓰지도 않았는데 series 이름과 yAxis title도 자기가 알아서 유추해서 넣음.

 

실행화면

 
3. 바 차트가 아닌 라인 차트로 바꾸는것도 가능한가 싶어서 다시한번 명령 쓰고 ctrl + shift + alt + M
 

 
4. 결과
 

바뀐 부분이 어디인지 코멘트까지 적어줬다

실행화면

완벽하게 잘 됨!
 
 
 
* 내가 위와 같은 것을 시도해보게 한 신기한 유튜브 쇼츠 
https://www.youtube.com/shorts/AFG8lPGCQmY