말랑말랑제리스타일
VS Code로 Blazor 웹앱 생성하기 본문
VS Code로 Blazor 웹앱을 생성하는 순서를 알아봤습니다.
Blazor는 닷넷을 이용해 웹앱을 만들 수 있는 오픈소스 프레임워크입니다.
설치해야 될 요소
VS Code로 Blazor 웹앱을 생성 및 실행하기 위해 필요한 구성요소들입니다.
VS Code 설치
대부분 설치되어있을거라 생각해 따로 서술은 하지 않겠습니다.
VS Code 설치하시면 됩니다.
C# Dev Kit 확장프로그램 설치
VS Code Extension에서 C#을 검색하면 C# Dev Kit이라고 맨 위에 나옵니다.
이걸 설치하면 됩니다.
닷넷 코어 설치
하기 사이트에서 닷넷 최신버전을 받을 수 있습니다.
저는 최신 릴리즈 버전인 8.0 버전을 설치했습니다.
.NET 다운로드(Linux, macOS 및 Windows)
Linux, macOS 및 Windows용 공식 .NET 다운로드. .NET은 다양한 유형의 애플리케이션을 빌드하기 위한 무료 플랫폼 간 오픈 소스 개발자 플랫폼입니다.
dotnet.microsoft.com
설치 완료 후 파워쉘이나 커맨드창 열어서 dotnet --version 명령어로 설치를 확인합니다.
VS Code 터미널을 사용해도 됩니다.
프로젝트 생성
VS Code에서 적당한 폴더를 생성해줍니다.
폴더로 이동 후 Ctrl + Shift + ` 단축키로 터미널을 열어줍니다.
(메뉴바에서 Terminal - New Terminal 선택으로도 가능)
dotnet new blazorwasm명령어로 해당 폴더에 프로젝트를 생성합니다.
시간이 지나면 아래 화면과 같이 프로젝트 생성이 완료됩니다.
프로젝트 구성요소 확인
간단히 프로젝트 구성요소를 확인해 봅시다.
Program.cs는 서버를 시작하고 앱 서비스와 미들웨어를 구성하는 앱의 진입점입니다.
Components 디렉터리 내 파일은 아래와 같습니다.
App.razor는 앱의 루트 구성 요소입니다.
Routes.razor는 Blazor 라우터를 구성합니다.
Pages 디렉터리에는 앱에 대한 몇 가지 예제 웹 페이지가 포함되어 있습니다.
BlazorApp.csproj는 앱 프로젝트와 해당 종속성을 정의하며 솔루션 탐색기에서 BlazorApp 프로젝트 노드를 두 번 클릭하여 볼 수 있습니다.
Properties 디렉터리 내의 launchSettings.json 파일은 로컬 개발 환경에 대한 다양한 프로필 설정을 정의합니다. 포트 번호는 프로젝트 생성 시 자동으로 할당되어 이 파일에 저장됩니다.
마지막으로 우상단의 실행 버튼을 클릭하면 빌드 및 프로젝트 실행이 됩니다.
장황한 Hello World가 뜨네요.
Counter에서 카운트를 증가시키는 샘플 앱이 있고 Wearher에서는 api로 날씨를 불러오고 있습니다.
생각보다 엄청나네요.
'프로그래밍 > 웹코딩(html&JS)' 카테고리의 다른 글
| Webpack을 이용한 마이크로 프론트엔드 구현 (0) | 2024.07.09 |
|---|---|
| React 프로젝트 최초 생성 및 초기 상태 만들기 (0) | 2024.07.02 |
| 어떤 npm을 설치해야될지 고민될 때 유용한 사이트 (0) | 2023.10.06 |
| 리액트 5.0 이상 버전 사용시 "webpack < 5 used" 에러 조치 방법 (0) | 2023.10.05 |
| HTML 파일 소스 나누기 두가지 방법(부트스트랩) (0) | 2023.08.17 |
