VSCode에서 WPF 시작하기

VSCode에서도 WPF를 사용할 수 있습니다.

그렇다면 과연 실제로도 문제가 없을까요?
그래서 직접 WPF를 한번 사용해보면서 장단점을 살펴보기 위한 Slog입니다.

살짝 검토해봤는데 너무 재밌어서 Slog로 작성하게 되었습니다. :smile:

주요 내용 TBD

10개의 좋아요

개발 환경 만들기

PC 초기화 상태의 WIndows 11 OS 기준으로 진행되었음을 참고바랍니다.

  1. NET SDK 설치
  2. Visual Studio Code 설치
  3. VSCode C# 확장 설치

참고로 SDK와 VSCode 설치 순서는 상관 없습니다.

1. NET SDK 설치


VSCode에서 WPF를 사용하기 위해서는 닷넷 SDK이 먼저 설치되어 있어야 합니다. 단 이미 VisualStudio가 설치되어 있다면 상관 없습니다. (SDK도 함께 설치되기 때문에…)

그리고 SDK를 직접 설치하는 경우 운영체제 버전에 맞는 인스톨러를 설치하면 됩니다.

저는 보통 Visual Studio를 통해 개발해왔기 때문에 이번 SDK 수동 설치 과정이 어렵고 낮설게 느껴졌는데요. 그래서 사실 버전을 자동으로 찾아주는 기능도 제공합니다.

Not sure what to download? See recommended downloads for the latest version of .NET.

여담으로 저는 Thinkpad X1 노트북 환경이므로 x64 버전을 설치했습니다만 추후에 DevKit 환경의 Arm64와 비교해 보는 시간을 가져보는 것도 아주 재밌을 것 같습니다.

2. Visual Studio Code 설치


비주얼 스튜디오 코드는 공식 홈페이지에서 무료로 쉽게 설치하실 수 있습니다. Electron으로 개발된 VSCode는 쉽고 간편한 설치와 함께 빠르게 개발을 시작할 수 있는 장점이 있습니다.

image

같이 읽어보면 재밌을만한 글

3. VSCode 확장 C# 설치


VSCode에서 C#, WPF를 원활하게 사용하기 위한 확장 앱입니다. C#과 WPF가 동작함에 있어 필수적인 사항은 아니지만 디버깅, 문법 어시스트 등을 사용하기 위해 필수처럼 설치해야 합니다.

C# - Visual Studio Marketplace

주요 제공 기능은 다음과 같습니다.

  • Debuging
  • IntelliSense

이로써 VSCode에서 WPF를 사용하기 위한 최소한의 개발 환경이 준비되었습니다.

개발환경 만들기 끝.

5개의 좋아요

한번 해보고 싶었는데 정말 좋습니다 !

1개의 좋아요

@hask 응원 감사합니다!! 더 알차게 작성해봐야겠습니다. :smile:

프로젝트 시작하기

VSCode에서 WPF를 하기 위해 다음과 같은 준비가 필요합니다.


  • 작업 위치 생성
  • 템플릿 생성
  • 프로젝트 열기

1. 작업위치 생성


먼저 cmd 창을 열어 소스코드 작업 위치부터 생성합니다.

위치는 취향대로~ 저는 기존 VS 작업과 섞이지 않도록 따로 새로운 위치를 구성했습니다.

mkdir c:\vscodeworks
cd c:\vscodeworks

물론 Windows 탐색기와 같은 GUI를 통해 작업위치를 구성하더라도 문제될 것 없습니다. 다만, 다음 순서인 프로젝트 템플릿 생성은 dotnet 명령어를 통해 진행해야 하기 때문에 cmd 창에서 디렉토리 생성을 명령어를 통해 만드는 것은 꽤 자연스럽고 괜찮은 방법입니다.

2. 템플릿 생성


다음은 WPF 템플릿(프로젝트)을 만들어볼 차례입니다.

참고로 VSCode는 VS처럼 GUI를 통한 템플릿 항목을 제공하는 기능이 없기 때문에 우리가 직접 구성해야 하는데요. 다행이 .csjproj 파일을 직접 만들일까지는 없습니다. :rofl:

cmd 또는 terminal 창에서 아래와 같이 dotnet 명령어를 통해 원하는 템플릿을 생성할 수 있습니다.

dotnet new wpf --name JamesApp --framework net7.0

참고로 --name 옵션을 생략한다면 상위 폴더의 이름이 기본 값으로 대체됩니다. 그렇기 때문에 보통 소문자로 상위 폴더를 구성하시는 분들은 필히 --name을 작성하는 것이 좋겠습니다.

그리고 --framework 옵션의 경우 타겟을 직접 주지 않아도 됩니다. (net7.0-windows xxx)

dotnet new wpf --name JamesApp --framework net7.0-windows

심지어 이렇게 하면 에러입니다. :rofl:

3. 프로젝트 열기


이제 방금 생성된 프로젝트를 VSCode에서 열기만 하면 됩니다.

c:\vscodeworks\JamesApp

File > Open Folder

VSCode에서 WPF 불러온 모습

손이 많이 가지만 Visual Studio 없이도 WPF 애플리케이션 프로젝트를 구성하고 VSCode으로 불러오는 것 까지 성공 했습니다.

그리고 다음 내용에서는 dotnet run 명령어를 통한 컴파일, VSCoe에서의 C# 확장과 빌드, 디버그 등을 살펴볼 예정입니다.


제가 준비한 내용은 여기까지입니다.

읽어주셔서 감사합니다!

4개의 좋아요

개인적으로 가장 기대되는 다음 글입니다.
다음 글이 언제 올라오는지 기대됩니다.

4개의 좋아요

WPF 실행하기


WPF를 실행하기 위해 다음 방법을 살펴보겠습니다.

  1. 직접 명령어 사용
  2. VSCode에서 실행

1. 직접 명령어 사용


터미널 또는 cmd 창에서 dotnet run 명령어를 통해 실행하는 방법입니다. 이 때 디렉터리의 경로는 WPF 프로젝트를 생성한 곳에 위치하면 됩니다.

dotnet run

아래 Gif 이미지는 C:\vscodeworks\ 위치에서 JamesWpfApp WPF 프로젝트를 생성하고 JamesWpfApp 폴더 위치로 이동한 후 dotnet run 명령어를 통해 애플리케이션을 실행하는 과정입니다.

dotnetrun

그리고 dotnet run 명령어와 관련하여 다양한 옵션이 있습니다. Visual Studio에서는 GUI를 통해편리하게 기능이 제공되지만, 우리는 Microsoft에서 제공하는 공식 문서를 읽을 필요가 있습니다. 읽기

2. VSCode에서 실행


VSCode에서 WPF 실행 및 인텔리전스 도움을 받기 위해서는 아래 C# 확장 설치가 필수로 필요합니다. 이 플러그인은 Microsoft에서 제공하는 공인된 확장입니다.

image

또한 Visual Studio 만큼은 아니지만 VSCode에서도 디버깅, 다양한 어시스트 GUI를 어느 정도 사용할 수 있습니다.

VS와 동일하게 F5를 통해 디버깅을 할 수 있고 Ctrl + F5를 통해 실행을 할 수도 있습니다.

F5, Ctrl + F5

여담으로 C#은 VSCode 내에서도 상당히 높은 다운로드를 자랑하고 있습니다.

  • Phyton: 74,000,000
  • C/C+: 41,000,000
  • C#: 19,000,000
  • Extension Pack for Java: 17,000,000 (단 자바의 경우에는 다양한 확장이 존재합니다.)

사실 단순 비교하는 것은 문제가 있을 수 있지만 Visual Studio 외에서도 이렇게나 활발하게 C#을 사용하고 있다는 것은 재미있는 사실입니다. :smile:


제가 준비한 내용은 여기까지 입니다.

다음 내용은 기본 Console Application에서 최소한의 WPF 파일 구조를 구성하여 프로젝트를 시작할 수 있는지에 대해 확인해볼 예정입니다.

읽어주셔서 감사합니다.

3개의 좋아요

WPF 수동 구성


TBD…

2개의 좋아요

CommunityToolkit.Mvvm 테스트


TBD…

2개의 좋아요

아 안됩니다 미정이라니 ㅠ

3개의 좋아요