코드생성 편집하기

AI 에이전트를 이용한 코드 작성 방법에 대한 기술

=Visual Studio Code=
코드 에디터 설치 및 활용 관련 내용

==VSC download 및 install==
[https://code.visualstudio.com/download Visual Studio Code] 다운로드 위치

===설치 및 활용 기본===
기본 단계는 다음과 같다.

[https://code.visualstudio.com/docs/setup/windows Visual Studio Code 활용] 참조
# 다운로드 & 설치
# 추가 구성요서 설치 (VSC 안에서)
# GItHub Copilot AI 지원 코딩 설정 - Cline으로 대체(Cursor)
# VS Code 튜토리얼

===다운로드 사용 주의===
회사 PC의 계정을 확인해야 함. 이에 따라서, 자꾸 나오는 메시지를 조절할 수 있다.

예를 들어, 회사 PC 계정은 Administrators Group으로 된 경우, System install이 더 편하다.

[[file:Vsc_install_02.jpg | 600px]]
파일 다운로드 

* 여러가지 버전이 있다.
# 사용자 버전
# 시스템(Admin) 버전 (업데이트가 컴퓨터에 적용되는)
# zip 파일 형태로, 압축풀고 그냥 복사해서 사용
# CLI 명령어 추가 

* 사용자 버전과 System Installer 차이
설치 위치 자체가 접근 권한의 차이가 있음

* 사용자 버전 - default
나만 사용하는 것, admin 경우, 설치 후에 계속 전체 시스템에 업그레이드 필요하다는 메시지 나옴 (귀찮음)
사용자 로컬 AppData( ) 폴더 아래에 위치, LOCALAPPDATA.

설치시 나오는 메시지

[[file:Vsc_install_01.jpg | 400px]]

* 시스템 설정
admin 권한으로 실행, Program Files에 위치, 자신의 권한 확인

* 권한 확인 방법
# win + X 
# 컴퓨터 관리 선택
# 로컬 사용자 및 그룹 - 자신 선택
# 속성 >> 소속 그룹 확인

[[file:Vsc_install_03.jpg | 700px]]

* x64와 ARM 버전
x64는 x86계열로 PC용 CPU가 사용된 경우

ARM 버전은 모바일 프로세서가 포함된 경우

[[file:Vsc_install_04.jpg | 600px]]
 노트북에서는 x64 (INTEL, AMD)를 선택하여 사용한다.


* System installer 다운로드후 설치

[[file:Vsc_install_05.jpg | 500px]]

==설치 후 setup==
설치 후에 몇가지 사용 환경에 맞춰 설정을 해주어야 한다.

개인적으로 사용하는 것에 따라 맞춰 설정한다.

* 설치 후 화면
[[file:Vsc_install_06.jpg | 800px]]

설정 작업 내용
# Copilot 사용 - github 계정 필요
# Choose your theme - 테마 결정
# 언어 설정 - 개발언어, locale
# 셋팅 조절 - 각 개발 언어 마다 다른 부분 적용, java, python, PHP
# 명령어 팔렛트 허용 - 화면 상단 커멘트 창 활용 켜기
# Watch video tutorials - 학습 비디오


=== Copilot사용===
무료 사용 가능, 초기에 등장 약간의 불편함

github연동 필요 (계정 필수)

=== 테마 결정 ===
개인이 선호하는 테마를 선택하여 사용할 수 있음

default는 black임

[[file:Vsc_install_07.jpg | 800px]]


=== 언어 설정 ===
언어 설정은 2가지가 있다. 
# 개발 언어 설정 - 개발에 사용하는 언어 설정, python
# locale 언어 설정 - 한글 사용

개발하고자 하는 언어에 따라 지원 모듈을 설치한다.

[[file:Vsc_install_08.jpg | 800px]]

 문법 사항을 반영하여, 색깔을 바꾸던지, 띄어 쓰기를 자동으로 해주던지, 주석처리 등 사항

====파이썬 언어 지원====
파이썬 개발의 경우는 파이썬 지원팩을 설치한다.

파이썬 Visual Studio Code 지원 설치(setup)

[[file:Vsc_install_09.jpg | 800px]]

설치시 auto update를 체크한다.

특정한 버전 개발이 아닌 경우, 다른 코드를 불러들여서 사용할 때, 수동으로 업데이트를 해야하는 경우가 많으므로, 그냥 auto update를 설정한다. 다른 경우에도 대부분 채크

[[file:Vsc_install_10.jpg | 600px]]

설치가 완료되면, 톱니바퀴 모양이 생기면서, 추가 조정을 할 수 있게 바뀐다.

[[file:Vsc_install_11.jpg | 600px]]

* 다른 방법

왼쪽의 extension 에서 선택하고, 필터에서 해당 내용 입력 python, korean


====VSC 한글 사용====
Visual Studio Code에서 메뉴 구성을 한글화 작업을 할 수 있다.

Extension에서 '''"Korean"''' 입력 및 설치

[[file:Vsc_install_12.jpg | 800px]]

Restart한다고 하면서, 한글로 바뀜

메뉴가 한글로 바뀐 Visual Studio Code

[[file:Vsc_install_13.jpg | 800px]]

====파이썬 환경====
파이썬은 MS 제품이 아니다. 따라서, 파이썬 컴파일러를 설치하여야 한다.

* 주의사항
# 먼저 작업할 폴더를 선택. (가상환경 구축시 필요)
# venv 명령어로 가상환경 구축.

파이썬 설치에서 문제는 최신 업데이트의 경우, 제대로 동작이 안되는 경우가 있다. 다시 바꿔야 하는데, 이런 것을 피하기 위해서 중간 버전을 사용한다.

* 디펜던시 (Dependency, 의존성)
컴파일러와 문법 등의 변화(업그레이드)로 인한 코드 에러 문제, 의존성을 검사하여 반영하여야 한다. 물론 AI가 의존성도 파악하고 구분하기도 하지만, 모든 것에 다 적용되지는 않으므로, 안전한 컴파일러를 선택해서 사용해야 한다.

[[file:Vsc_install_14.jpg | 800px]]

* Venv vs. Coda 환경

# Venv 가상 환경, Virtual Environment 가상머신에서 Python 코드를 실행
# Coda 환경, Anaconda에서 처럼 직접 머신에서 동작시킴

* venv 환경 사용
다른 코드들과 얽히는 경우가 있으므로, venv환경에서 개발 활용 추천

[[file:Vsc_install_15.jpg | 700px]]

나와 있는대로, 팔레트 명령어에서 '''venv''' 를 입력한다.

[[file:Vsc_install_16.jpg | 700px]]

* 주의사항
사용 폴더를 결정하는 과정으로 다시 돌아감. 

이유: 사용 폴더 밑에 '''.venv'''가 생성되어 가상 환경에서 사용이 가능하므로, 반드시 폴더가 선택되어야 한다. 이후, 가상 환경 구성이 다시 확정되는 것이다.

 가상 환경이라는 것이 별것 아니고, 사용하는 폴더 생성하고 필요한 파일을 복사해 놓은 것임

[[file:Vsc_install_17.jpg | 700px]]

===파이썬 컴파일러===
파이썬 컴파일러를 사용하기 위해서는 파이썬을 설치해야 한다.

[https://dotiromoook.tistory.com/32 파이썬 윈도우 설치] 참조

* 파이썬 공식 사이트에서 다운로드
[https://www.python.org/downloads/ 파이썬 org 사이트]에서 다운로드

[[file:Vsc_install_18.jpg | 800px]]

: 이전 버전도 설치 후에, 필요시 자동으로 업그레이드 된다.

* 설치시 주의해야 할 것
여러개 버전 설치의 경우, 설치 디렉토리 위치 기억할 것, 

'''Path설정 주의'''

[[file:vsc_install_19.jpg | 600px]]

python이 설치된 디렉토리 위치가 path로 등록되어 있다.

* 환경변수 수동 설정
WIN+R에서 '''sysdm.cpl''' 실행, 혹은 시스템설정 >> 고급 시스템 설정 >> '''환경 변수''' 

[[file:vsc_install_20.jpg | 500px]]

==AI agent 설치==
코스 생성을 위한 에이전트를 사용한다.

* 기본적인 설치 과정
# 마켓에서 Cline 선택
# Cline, auto update로 설치
# google API키

주로 사용하는 종류는 다음곽 같다.

# Copilot - Visual Studio Code + Github 형태, 사용 불편 있음
# Cursor - 스마트폰 '런처'처럼, Cursor라고 바꿈, 유료
# Cline - Gemini 등 여러 모델 사용, Cursor랑 비슷한데, 무료 AI도 지원

* Cursor
스마트 폰 런처처럼 Visual Studio Code 스킨을 수정하여 사용한다.

[[file:agent_cursor_01.jpg|800px]]

===Cline 설치===
마켓 place에서 cline 선택 

[https://docs.cline.bot/ 클라인 공식 문서]

[[file: agent_cline_01.jpg|700px]]

* 자동업데이트 체크 상태로 설치

[[file: agent_cline_02.jpg|700px]]

* 설치가 완료되면, 왼쪽 메뉴에 아이콘이 나옴

[[file: agent_cline_03.jpg|700px]]

===Google API획득===
* 필요한 것
'''구글 계정'''

아이콘을 클릭하여 cline을 활성화 시킨다.

[[file: agent_cline_04.jpg|400px]]


* 사용자 API키를 선택한다.
'''구글 Gemini는 free plan'''임.

[[file: agent_cline_05.jpg|400px]]

* 신규 API키를 얻는 것 선택
[https://aistudio.google.com/apikey 구글 API 키 얻기] - 구글 AI Studio 키를 얻는다.

[[file: agent_cline_06.jpg|800px]]

키를 생성하고, 해당 키를 복사한다.

* API키를 입력해주면, 활성화 된다.

[[file: agent_cline_07.jpg|400px]]

키 입력 후 자동 연결 및 실행!

=== AI(Gemini) 모델 선택 사용 ===
AI 모델 선택하여 사용 할 수 있음

[[file: agent_cline_08.jpg|400px]]

* 프로그램을 Plan / Action을 이용하여 작성
실제 프로그램을 작성한다.

스스로, 오류 발생시 처리함

[[file: agent_cline_09.jpg|800px]]


* 기타 설정 Advanced에서 한글 사용 OK 
확인 필요.

===권장 스택 및 기초===

[https://docs.cline.bot/getting-started/our-favorite-tech-stack git 및 기타 내용에 대한 기초사항]

* git사용

<source>
git add
# Save your changes (do this often!)
git add .                                    # Stage all changed files
git commit -m "Add login page"              # Save changes with a clear message

# Share your changes
git push origin main                        # Upload to GitHub
</source>

* 공동 플로우

공통 워크플로

# 하루 시작 : 최신 변경 사항 가져오기
<code>
bashCopygit pull origin main                     # Download latest code
</code>
# 개발 중 : 정기적으로 작업 저장
<code>
bashCopygit add .
git commit -m "Clear message about changes"
</code>
# 하루의 끝 : 진행 상황을 공유하세요
<code>
bashCopygit push origin main                     # Upload to GitHub
</code>

==Visual Studio Code 메뉴==

* Visual Studio 화면 구성 명칭

[[file: vsc_basic_01.jpg|800px]]

# 맨 왼쪽 화면은 Active bar (활동 막대) - 주요 기능 및 extension을 아이콘으로 바로 실행
# 사이드 메뉴라고 하는데 원래 명칭은 '''기본 사이드'''이다. Primary Side bar
# 편집기 탭 - 편집 파일 이름
# 패널 영역 - 실행(터미널) 등의 다른 외부 기능의 결과를 표시하는 것
# 실행 프로필 - 다양한 실행 메뉴들을 선택하여 동작시킬 수 있음
# 명령 팔레트 - 명령어들이 팔레트 처럼 널부러저(?) 있다. = 다양한 명령어를 실행시키는 창, 공간

* 명령 팔레트 - 다양한 명령어를 사용, extension으로 추가한 기능도 명령어로 수행 가능, 그래서 팔래트라고 함

1. 팔레트 열기

Ctrl+Shift+P를 눌러 명령 팔레트를 엽니다 . 보기 > 명령 팔레트... 메뉴 항목을 사용할 수도 있습니다 .

VS Code의 많은 명령은 명령 팔레트를 통해 사용할 수 있습니다. 확장 프로그램을 설치하면 명령 팔레트에 명령을 추가할 수도 있습니다.

명령 팔레트를 보여주는 스크린샷입니다.

[[file: vsc_basic_02.png|600px]]
 !팁
 명령 팔레트에는 기본 키보드 단축키가 표시됩니다. 단축키를 사용하여 명령을 바로 실행할 수 있습니다.

2. 다양한 작동 모드

명령 팔레트는 다양한 작동 모드를 지원합니다.
:: 1) 기호 다음에 '''>''' 입력하여 명령 목록을 필터링하세요. 예를 들어, move terminal터미널을 새 창으로 이동하는 명령을 찾으려면 를 입력하세요.

:: 터미널을 이동하기 위한 항목을 나열한 명령 팔레트를 보여주는 스크린샷입니다.

:: [[file: vsc_basic_03.png|600px]]

:: 2) 문자를 삭제 하고 입력하여 작업 공간에서 파일을 검색하세요. Ctrl+P> 단축키를 사용하면 명령 팔레트를 열고 파일을 직접 검색할 수 있습니다.

:: 명령 팔레트의 빠른 열기 기능을 보여주는 스크린샷입니다.

:: [[file: vsc_basic_04.png|600px]]

 팁
 VS Code는 퍼지 매칭을 사용하여 파일이나 명령을 찾습니다. 예를 들어, 를 입력하면 odks해당 명령이 반환됩니다 '''Open Default Keyboard Shortcuts'''.


===VSC 단축기===
* 블럭 주석 토글 : '''Cntl+/'''




[[분류: AI]]