Code Gear - AI 개발 유튜브 강의

Visual Studio Code(VSCode)에서 여러가지 플러그인을 설치해서 사용하다 보면 오류가 발생할 때가 있습니다.

이때는 VSCode의 설정을 초기화하면 처음 설치했을때와 동일한 환경으로 돌아갈 수 있습니다.

(저는 유튜브 녹화를 위해 ClineAI를 설치하고 삭제하기를 반복하다 보니 MCP 설치가 안되는 현상이 발생했습니다)

맥북에서 Visual Studio Code(VS Code)를 설정 파일까지 완전히 삭제하는 방법은 크게 두 가지 단계로 나뉩니다

• 애플리케이션 제거
• 사용자 데이터 및 설정 파일 제거

아래 단계를 따라하시면 됩니다.

1단계: Visual Studio Code 애플리케이션 제거

1. Finder 열기: Dock 또는 Spotlight 검색(Command + Space)을 통해 Finder를 엽니다.
2. 응용 프로그램 폴더로 이동: Finder 사이드바에서 "응용 프로그램" (Applications) 폴더를 클릭합니다.
3. VS Code 아이콘 이동: "Visual Studio Code" 애플리케이션 아이콘을 찾아 휴지통으로 드래그하거나, 아이콘을 선택한 후 Command + Delete 키를 누릅니다.
4. 휴지통 비우기: Dock에 있는 휴지통 아이콘을 클릭한 다음, "비우기" 버튼을 클릭하거나, Finder 메뉴에서 "Finder" > "휴지통 비우기"를 선택합니다.

2단계: 사용자 데이터 및 설정 파일 제거

VS Code는 애플리케이션 자체 외에도 사용자 설정, 확장 프로그램, 캐시 등을 저장하는 숨겨진 파일과 폴더들을 생성합니다. 이들을 제거해야 완전히 삭제됩니다.

1. Finder 열기: (이미 열려 있다면 다시 열 필요 없음)
2. '폴더로 이동' 열기: Finder 상단 메뉴 바에서 "이동"을 클릭한 후, "폴더로 이동..." (Go to Folder...)을 선택합니다. 또는 단축키 Shift + Command + G를 눌러도 됩니다.
3. 각 경로 입력 및 삭제: 아래 경로들을 하나씩 입력하여 해당 폴더나 파일을 찾아 휴지통으로 이동합니다.
   • 주요 설정 및 확장 프로그램 데이터:
     • ~/Library/Application Support/Code
     • 이 경로를 입력하고 이동하면 Code라는 폴더가 보일 것입니다. 이 폴더 전체를 휴지통으로 드래그합니다.
   • 캐시 파일:
     • ~/Library/Caches/com.microsoft.VSCode
     • ~/Library/Caches/com.microsoft.VSCode.ShipIt
     • 각각의 경로를 입력하여 해당 폴더나 파일을 찾아 휴지통으로 드래그합니다.
   • 환경 설정 파일 (plist):
     • ~/Library/Preferences/com.microsoft.VSCode.plist
     • 이 파일을 찾아 휴지통으로 드래그합니다.
   • 저장된 애플리케이션 상태:
     • ~/Library/Saved Application State/com.microsoft.VSCode.savedState
     • 이 폴더를 찾아 휴지통으로 드래그합니다.
   • 사용자별 설정 (숨김 폴더):
     • ~/.vscode
     • 이 폴더는 숨겨져 있을 수 있습니다. '폴더로 이동'에서 입력하거나, Finder에서 Command + Shift + . (마침표)를 눌러 숨김 파일을 보이게 한 후 홈 디렉토리(~)에서 찾아 삭제할 수 있습니다.
4. 휴지통 비우기: 2단계에서 삭제한 파일들이 휴지통에 있으므로, 다시 한번 Dock에 있는 휴지통을 비워 완전히 삭제합니다.

3단계: Dock에서 아이콘 제거 (선택 사항)

만약 Visual Studio Code 애플리케이션을 Dock에 고정해 두었다면, 애플리케이션을 삭제하더라도 아이콘이 남아있을 수 있습니다.

1. Dock에서 Visual Studio Code 아이콘에 마우스 오른쪽 버튼을 클릭합니다.
2. "옵션" (Options) > "Dock에서 제거" (Remove from Dock)를 선택합니다.

위 단계를 모두 완료하면 맥북에서 Visual Studio Code 및 관련 설정 파일들이 완전히 제거됩니다.

https://youtu.be/AWWNCGXFTfw

AI 코딩 에이전트

요즘  AI 코딩 에이전트 시장이 뜨겁습니다.

AI 코딩 에이전트는 사용 환경에 따라 CLI 기반과 IDE 통합형으로 나눌 수 있습니다.

CLI 기반

• CLI는 Command Line Interface의 약자로 터미널 환경에서 명령어를 입력하는 형태입니다.
• Anthropic Claude Code, Google Gemini CLI, OpenAI Codex CLI 등이 있습니다.

IDE 통합형

• IDE 통합형은 Visual Studio Code, Jet Brain등의 개발 IDE에서 작동하는 형태입니다.
• 여러가지가 있지만 CursorAI 가 대표적입니다.

AI 코딩 에이전트의 비용 문제

요즘 AI 시장에서 돈을 벌고 있는 서비스는 몇가지가 있습니다.

• LLM에서 API를 제공하는 서비스 (GPT, Gemini등)
• 이미지, 동영상등을 제작하는 서비스
• 코딩 에이전트 유료 구독 서비스

이런 서비스들은 꽤 많은 비용을 지불해야만 사용 가능합니다.

Cursor AI의 경우 구독 요금은 다음과 같습니다.

출처 : https://cursor.com/pricing

Pro인 경우 월 $20이지만 아래와 같이 사용 한도가 정해져 있습니다.

프로에서는 Claude의 쏘넷4는 225개까지, Google Gemini는 550개까지, OpenAI의 GPT4.1은 650개 까지만 요청이 가능합니다.

따라서 많은 요청을 해야하는 경우에는 더 큰 비용의 구독 서비스를 이용하여야 합니다.

이를 위한 대안으로 오픈소스 AI Agent인 Cline을 사용해 보았습니다.

Cline AI란?

Cline은 Microsoft Visual Studio Code에 플러그인으로 설치하는 오픈 소스 AI 개발 어시스턴트입니다.

개발 IDE인 VSCode에서 LLM(대규모 언어 모델) 연동 기능을 제공하고, LLM이 직접 코드를 작성/수정할 수 있습니다.

또한 MCP를 사용하여 LLM의 기능을 확장하여 사용할 수 있다는 장점을 가지고 있습니다.

LLM(대규모 언어 모델)과 대화하고, 코드를 생성하거나 리팩토링하는 등 개발 워크플로우에 AI를 직접 통합할 수 있도록 돕는 강력한 도구입니다.

주요 기능 및 특징:

• 코드 개발 지원: 컨텍스트를 인식하는 코드 제안, 자동 완성 및 지능적인 권장 사항을 제공하여 개발 시간을 단축하고 코딩 오류를 최소화합니다.
• 다양한 작업 수행: 파일 읽기/쓰기, 명령 실행, 웹 브라우저 사용 등 다양한 시스템 수준 작업을 수행할 수 있습니다.
• 모델 유연성: 특정 공급업체에 고정된 도구와 달리, Cline은 다양한 AI 모델의 강점을 활용하는 정교한 워크플로우를 가능하게 합니다.
• 프롬프트 피로 감소: 프롬프트 피로를 줄이고 상호 작용을 더욱 자연스럽게 만듭니다.
• 확장성 (Model Context Protocol - MCP): Model Context Protocol을 통해 사용자 정의 도구 및 워크플로우와 통합할 수 있어 특정 요구 사항에 맞게 조정할 수 있습니다.
• 복잡한 시스템에 적합: 제어, 유연성 및 시스템 수준 통합이 중요한 복잡한 시스템을 구축하는 팀에 특히 적합합니다.

Cline은 단순한 코드 생성기를 넘어 개발 워크플로우를 간소화하는 파트너 역할을 합니다.

Cline AI 설치 방법

VSCode에 Cline 설치하기

• VS Code를 열고 확장(Extensions) 아이콘을 클릭합니다.
• 검색창에 'Cline'을 입력하여 찾아 설치합니다 https://cline.bot/
• 설치 후, Cline 아이콘을 클릭하거나 `CMD/CTRL + Shift + P` 단축키를 사용해 Cline을 실행합니다.
• LLM의 API 키를 추가합니다.
• 프로젝트에 공통된 설정을 넣으려면 Root 폴더에 .clinerules 파일을 만들고 아래와 같은 내용을 입력합니다.

# Cline Global Rules

## 역할 및 목표 정의 (Role and Goal Definition)
당신은 사용자의 질문에 답변하는 친절하고 유능한 AI 어시스턴트입니다.
사용자가 요청하는 정보에 대해 명확하고 간결하게 설명해 주세요.
불필요한 서론이나 결론 없이 핵심 내용을 전달하는 데 집중하세요.

## 언어 설정 (Language Setting)
**모든 답변은 한국어로 제공해야 합니다.**
어떤 질문이든, 어떤 주제이든 관계없이 항상 한국어로 응답해 주세요.
필요한 경우 전문 용어는 영어 원문을 병기할 수 있으나, 주된 설명은 한국어여야 합니다.

## 답변 형식 (Response Format)
코드 예제가 필요한 경우 적절한 언어 하이라이팅과 함께 제공해 주세요.
설명은 이해하기 쉽게, 필요한 경우 불릿 포인트나 목록을 활용하여 구조화해 주세요.
너무 길거나 장황한 답변은 지양하고, 요청된 내용에 집중하여 답변해 주세요.

## 일반적인 지침 (General Guidelines)
모든 답변은 사용자의 질문 의도를 정확히 파악하여 제공해야 합니다.
모호하거나 불확실한 정보는 제공하지 마세요.
사용자의 질문이 불분명할 경우 추가 질문을 통해 명확히 할 수 있습니다.

MCP란?

MCP (Model Context Protocol)는 Anthropic에서 발표한 AI용 표준 프로토콜 입니다.

LLM이 학습된 데이터 외에 최신 정보나 특정 도구의 기능을 활용하여 더 정확하고 풍부한 응답을 생성할 수 있도록 돕는 역할을 합니다.

즉, AI 모델이 다양한 데이터 소스에 연결되어 실시간으로 정보를 주고받을 수 있게 합니다.

Cline에서는 MCP를 추가하여 사용할 수 있습니다.

Cline에 MCP 설치하기

• 왼쪽 메뉴에서 Cline 아이콘을 클릭합니다.
• 상단에 MCP 아이콘을 클릭합니다.
• 많이 사용하는 MCP는 아래와 같은 것들이 있습니다.
  • Browser-use
    • Browser-use는 AI 모델이 웹 페이지를 탐색하고, 정보를 추출하며, 웹 기반 작업을 수행할 수 있도록 하는 기능입니다.
    • 이는 AI 에이전트가 최신 정보를 얻거나, 특정 웹사이트에서 데이터를 수집하는 등의 작업을 가능하게 하여, AI의 활용 범위를 크게 넓힙니다.
  • Tavily
    • Tavily는 AI 에이전트에 특화된 검색 엔진입니다.
    • Tavily MCP Server는 Tavily의 검색 API를 사용하여 AI 모델에 실시간 웹 검색 기능을 제공하는 Model Context Protocol 서버입니다

Cline 사용법

• 왼쪽 메뉴에서 Cline 아이콘을 클릭합니다.
• 아래 채팅 창에서 LLM에 요청할 내용을 입력합니다.
• Plan 모드와 Act 모드를 변경해 줍니다.
  • Plan Mode: 요청한 내용을 설명은 하지만 코드를 수정하지는 않습니다.
  • Act Mode: 요청한 내용을 즉시 코드로 작성합니다.

샘플 프로젝트

Cline 채팅 창에 아래 프롬프트를 입력합니다.

서울의 시간과 뉴욕의 시간을 동시에 시계로 표시하는 사이트를 만들어줘. 
tailwind 기반으로 하고, 
dark 테마와 light 테마를 쓸 수 있게 해줘.

실행하면 다음과 같이 서울과 뉴욕의 시간이 표시됩니다.

여기에 아날로그 시계도 추가해 보겠습니다.

다음과 같이 프롬프트를 입력합니다.

디지털 시계 아래에 아날로그 시계도 추가해줘

실행하면 다음과 같이 아날로그 시계가 추가된걸 볼 수 있습니다.

결론: VS Code용 Cline + Gemini Pro 2.5, Cursor를 대체할 강력한 AI 개발 파트너

지난 한 달간 실제 프로젝트에 VS Code의 Cline 플러그인과 Gemini Pro 2.5를 결합하여 사용해본 결과, 이 조합이 AI 기반 코드 에디터인 Cursor를 충분히 대체할 수 있음을 확인했습니다.

Cline과 Gemini Pro 2.5의 연동은 단순히 코드를 생성하는 것을 넘어, 개발 맥락을 이해하고 반응하는 강력한 AI 협업 환경을 제공했습니다. 이 기간 동안 코드 작성에 있어 상당한 도움을 받았으며, 개발 워크플로우를 크게 강화할 수 있었습니다.

Cline은 VS Code 환경에서 AI 기반 코딩을 위한 매력적인 대안이자 효율적인 도구라고 생각됩니다. 

Lofree Flow Lite 키보드 라이터 및 소음기 POM 스위치 2.4G Bluetooth 및 유선 가스켓 마운트 볼륨 롤러 키 구성 키캡
현재 가격： KRW 120,400 (원래 가격: KRW 120,448,  0% 할인)
🔗 클릭 앤 구매:https://s.click.aliexpress.com/e/_okJPKo4

Dart로 첫 번째 프로그램을 만들고 실행하는 법에 대해 알아보겠습니다.
에디터는 Visual Studio Code(VSCode)를 사용합니다.
 

Flutter Extention 설치

VSCode에 Flutter extention을 설치합니다. Flutter extention을 설치하면 Dart도 같이 설치가 됩니다.
https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

Dart Project 생성

VSCode에서 Command Pallete를 실행합니다.
VSCode의 메뉴에서 "보기-명령 팔레트"를 선택하거나, 단축키 Command+Shift+P를 누릅니다.

Command Pallete에 "Dart"를 입력합니다.

다음 화면에서 "Cosole Application"을 선택합니다.

다음 화면에서 프로젝트 폴더명을 입력 합니다.
저는 "dart_first_app"라는 폴더명을 사용했습니다.

입력 후 "Select a folder to create the projec in"을 클릭합니다.

폴더 생성 후 프로젝트 명을 입력합니다.
저는 "dart_first_app"이라고 입력하였습니다.

이제 첫번째 프로젝트가 완성되고 아래와 같은 화면이 나옵니다.

Dart 프로젝트 실행

프로젝트 우측 상단의 실행 버튼을 클릭합니다.

프로젝트가 정상적으로 실행되면 아래와 같이 "Hello World" 로그가 나옵니다.

 
이렇게 Dart 첫번째 프로젝트가 완료되었습니다.

Flutter의 개발 언어로 잘 알려진 Dart에 대해 알아보겠습니다.

이 글은 dart 의 공식 홈페이지를 참조하여 작성 하였습니다.

https://dart.dev/

Dart 의 장점

아래는 Dart 공식 홈페이지에 가면 가장 먼저 보이는 배너입니다.

"Instant hot reload" 라는 것을 강조하고 있습니다.

이것은 프로그램을 개발 할 때 코드가 변경되는 즉시 반영이 된다는 뜻입니다.

컴파일과 빌드를 요구하는 다른 언어들은 전체 코드를 빌드하는데 일정 시간이 소요됩니다.

개발시 UI 관련 코드를 변경하고 바로 확인할 수 있다는 것은 큰 장점입니다.

• 개발 효율의 증가 - 시간 단축
• 빠른 피드백 - 테스트나 디버깅에 유리

다른 장점들에 대해서도 설명하고 있습니다.

• Approachable
  • 친숙한 언어이다 - 다른 언어에서 사용한 문법과 유사한 형태를 가지고 있어 언어에 쉽게 접근할 수 있습니다.
  • 강력한 Type 언어이다 - 명확한 type 정의를 사용하여 사전에 오류를 막을 수 있습니다.
  • NULL Safe 언어이다 - 변수에 null을 할당할 수 없습니다. 따라서 실행 중 null point exception과 같은 오류에서 자유로워질 수 있습니다.
• Productive development
  • Dart는 개발 생산성을 높여주는 언어입니다.
  • Hot reload를 제공하여 개발 속도를 높이고, 빠르게 실험해 볼 수 있습니다.
  • 여러 Editor와 통합 환경을 제공함으로 개발 편의성을 높였습니다.
• Portable and fast on all platforms
  • 여러 platform에서 동일한 코드로 실행되는 언어입니다.
  • iOS, Android 같은 모바일 환경 뿐만 아니라, desktop, web, server등의 다양한 환경에서 작동 가능합니다.

Dart의 단점

• Native App과 똑같지는 않습니다. 즉 iOS, Android 등 Native 가 가지고 있는 고유한 형태의 app 보다는 범용적인 형태의 app 개발에 유리합니다.
• 개발 생태계가 크지 않습니다. 다른 성숙한 언어들에 비해 커뮤니티, 오픈소스, 플러그인 등이 많지 않습니다.
• 브라우저에서 개발시 transpile 해야 하므로 성능이나 디버깅에 제한이 있을 수 있습니다.

결론

• Flutter와의 통합으로 크로스플랫폼 개발을 할 수 있습니다. 복잡한 기능이 아니라면 적은 비용으로 iOS, Android용 앱을 모두 개발 할 수 있습니다.
• 간결한 문법으로 쉽게 접근이 가능하고, 다양한 Editor를 사용할 수 있습니다. 복잡하지 않은 기능의 앱을 빠르게 개발 하고자 한다면 Dart를 사용해 보는 것도 좋은 선택지가 될 것 같습니다.

Flutter 개발 환경 설정에 대해 알아봅니다.

이 글은 Flutter 공식 홈페이지의 Get Started 문서를 참조하였습니다.

https://docs.flutter.dev/get-started/install

플랫폼 선택

환경에 맞게 선택하시면 됩니다.
저는 맥을 선택하였습니다.

Type of app

다음으로는 어떤 종류의 앱을 만들 것인지를 선택해야 합니다.

저는 iOS를 선택하였습니다.

Software 설치

• Apple Sillicon을 사용하는 Mac일 경우 Rosetta 2 translation process를 설치해야 합니다.
  • Mac에서 intel 기반의 app을 실행할 때 필요한 유틸리티입니다.

sudo softwareupdate --install-rosetta --agree-to-license

• XCode 설치
  •  Swift 와 ObjectC code를 컴파일하고 디버깅 하기 위해 XCode를 설치합니다.
  • https://developer.apple.com/xcode/

• CocoaPods 설치
  • Native앱에 Flutter plugin 컴파일이 가능하도록 CocoaPods을 설치합니다. 
  • https://cocoapods.org/

• 아래 명령어를 사용하여 cocoapods를 설치합니다

sudo gem install cocoapods

• cocoapods 설치시 다음과 같은 오류가 발생할 수 있습니다.

ERROR:  Error installing cocoapods:
	ERROR: Failed to build gem native extension.

• 이때는 xcode-select를 인스톨 하면 됩니다.
  • xcode-select는 XCode의 명령줄 관리 도구입니다.

xcode-select --install

• 간혹 xcode-select도 아래와 같이 설치가 안될 경우가 있습니다.

xcode-select: note: Command line tools are already installed. 
Use "Software Update" in System Settings or the softwareupdate 
command line interface to install updates

• 이때는 software update를 download 하여 설치하면 해결 할 수 있습니다.
  • software update는 운영 체제와 관련된 모든 소프트웨어 업데이트를 자동으로 설치하는 기능을 수행합니다.
  • 따라서 다운로드 및 설치 시간이 좀 많이 소요됩니다.

softwareupdate --install -a

• 다운로드가 완료되면 "시스템 설정"에 업데이트가 표시되고, 업데이트를 클릭 하시면됩니다.
  • 업데이트가 완료되면 다시 CocoaPods를 설치합니다.

sudo gem install cocoapods

• 설치가 완료되면 다음과 같이 메시지가 표시됩니다.

Text Editor Settings

• Text editor는 Visual Studio Code, Android Studio, IntelliJ IDEA등을 사용할 수 있습니다.
• 저는 Visual Studio Code를 선택하였습니다.
• Visual Studio Code를 설치하고, 실행합니다.
• 아래 링크에 있는 Dart Extention을 추가합니다.
• https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
• Command Palette를 실행합니다. 단축키는 Command+Shift+P 입니다.
• Command Palette에서 "flutter"를 입력합니다.

• "Flutter:New Project"를 선택합니다.
• 이때 Flutter SDK가 설치 되어 있지 않으면 다운로드하여 설치하시면됩니다.
• 설치가 되어 있다면 위치를 지정해주면 됩니다.
• SDK 설치 후에 Command Palette에서 "Flutter:New Project"를 선택하고 "flutter-first" 라는 프로젝트를 생성합니다.

iOS 개발환경 설정

• XCode를 설치합니다.
• XCode의 버전에 맞는 command line tool을 설치합니다.

sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'

• XCode license에 동의 서명을 합니다.

sudo xcodebuild -license

iOS Simulator 설치

• iOS Simulator를 설치합니다.

xcodebuild -downloadPlatform iOS

• Simulator를 실행합니다

open -a Simulator

• XCode를 실행합니다.
• 메뉴에서 Windows - Devices and Simulators를 선택합니다.
• simulator 탭을 클릭하면 사용 가능한 리스트가 나옵니다.

• XCode에서 flutter_first 프로젝트를 엽니다.

• 탐색 창에서 flutter_first 프로젝트 아래 있는 ios를 선택하면 됩니다.

• XCode 상단의 파란색 실행 버튼을 클릭합니다.

• 아래와 같이 simulator가 실행됩니다.

동영상 강의

https://youtu.be/g71mHJVbEzY

보일러플레이트를 사용하면 이전에 만들었던 일렉트론 프로젝트를 보다 쉽게 만들 수 있습니다.

사용법은 다음과 같습니다.

npx create-electron-app "프로젝트명"

npx create-electron-app electron-app
cd electron-app

VS Code를 실행합니다.

code .

npm 패키지를 설치합니다.

• 메뉴에서 터미널 - 새터미널을 선택합니다.
• npm install 스크립트를 실행합니다.

npm install

프로젝트 폴더 구조는 다음과 같습니다.

다음 스크립트로 프로젝트를 실행합니다.

yarn start or npm start

실행 화면은 다음과 같습니다.

VSCode에 npm을 설치하면 보다 보다 쉽게 프로젝트를 실행할 수 있습니다.

• 왼쪽 메뉴바에서 확장을 선택합니다.

• 검색창에 "npm"을 입력합니다.

• egamma의 npm을 설치합니다.
• 보기 - 명령팔레트 메뉴를 선택합니다.
• 입력창에 "npm"을 입력합니다.

• "Npm 스크립트 보기에 포커스"를 선택합니다.
• 탐색기 하단에 "NPM 스크립트"라는 메뉴가 추가되었습니다.

• start 스크립트 옆에 마우스를 가져가면 실행 버튼이 나타납니다.
• 실행버튼을 클릭하면 스크립트가 실행됩니다.

이제 일렉트론 프로젝트를 쉽고 빠르게 만들고 실행할 수 있게 되었습니다.

남는 시간은 잠시 쉬었다 하시길 바랍니다.^^

React 소스 분석을 위해 에디터는 VSCode(Visual Studio Code)를 사용합니다.

• 우선 VSCode를 실행합니다.
• 메뉴-파일-폴더열기를 선택하고 생성한 프로젝트 폴더를 선택합니다.
  예) C:\workspace\my-first-react-app

• 폴더 구조

• index 페이지 호출 구조

• App.js 분석