[Development] .NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기 (1편)

.NET 8 기반 ASP.NET Core MVC 웹앱 구축 첫 단계: VS 2020 & VS Code로 솔루션/프로젝트 생성 과정 안내.

.NET 8 웹 개발 시작하기: Visual Studio 2022 & VS Code로 MVC 프로젝트 만들기 (1편)

핵심 키워드: .NET 8, ASP.NET Core, 웹 개발, MVC, Visual Studio 2022, Visual Studio Code, 솔루션, 프로젝트 생성, 개발 환경

안녕하세요! 오늘은 가장 최신 LTS 버전인 .NET 8을 기반으로 HealthCare 웹 애플리케이션을 만들기 위한 첫 단계를 함께 진행해 보려고 합니다. 정확히는 HealthCare 라기 보다는 Hospital application 에 가까운데요. 무료 WebSite Source 를 DownLoad 받아 진행하려다 보니 명칭과 내용 의 차이가 있습니다. ^^;

이번 1편에서는 개발의 가장 기초가 되는 Solution(솔루션) 생성부터 웹 개발의 핵심 패턴인 MVC (Model-View-Controller) 웹 애플리케이션 프로젝트를 추가하는 과정을 자세히 살펴보겠습니다. 특히 많은 개발자분들이 사용하는 Visual Studio 2022Visual Studio Code 두 가지 환경에서 차근차근 진행할 예정이니, 익숙한 도구를 선택해서 따라오시면 됩니다. 자, 그럼 시작해 보겠습니다.

1. Visual Studio 2022에서 솔루션과 MVC 프로젝트 만들기

Visual Studio 2022은 강력한 개발 도구로서, .NET 개발을 위한 다양한 편의 기능을 제공합니다. 처음 접하는 분들도 쉽게 따라 할 수 있도록 자세히 안내해 보겠습니다.

1. Visual Studio 2022에서 솔루션과 MVC 프로젝트 만들기

1단계: Visual Studio 2020 실행 후 새 프로젝트 생성

Visual Studio 2022을 실행하면 시작 화면이 나타납니다. 여기서 “새 프로젝트 만들기”를 클릭해 주세요. Create a new project그리고 먼저  “Empty  Solution”을선택합니다.Blank Solution

Solution 이름으로 HealthCare 를 입력해 줍니다. Project 위치도 입력해 줍니다.Enter Solution Name그럼 다음 화면과 같이 Solution 이 생성되고 새로운 Project 를 추가하기 위해 Solution 을 오른쪽 Click 하여 New Project… 를 Click 하여 다음 화면으로 이동합니다.Add New Project

2단계: “ASP.NET Core Web App (Model-View-Controller)” template 선택

새 프로젝트 만들기 창이 뜨면 다양한 Template(템플릿) 목록이 보일 겁니다. 검색창에 “ASP.NET Core Web” 라고 입력하거나, 왼쪽의 언어 필터를 “C#”, 플랫폼 필터를 “Web”으로 설정해서 찾아보세요. 찾으셨다면 선택하고 “Next (다음)” 버튼을 클릭합니다.New Project template

3단계: 프로젝트 이름 및 위치 설정

이제 프로젝트의 이름과 저장 위치, 그리고 Solution 이름을 설정하는 화면이 나옵니다.

Project Name : 만들 웹 애플리케이션의 이름을 HealthCareWeb 로 정해주세요
Location : 프로젝트 파일들을 저장할 폴더 경로를 HealthCare Solution 폴더 아래로 지정합니다.

원하는 설정을 마치셨다면 “Next”을 눌러 진행합니다.Enter Project Name

4단계: 대상 프레임워크 선택 (.NET 8.0)

다음 화면에서는 Target Framework 를 선택해야 합니다. DropDown 메뉴를 열어서 “.NET 8.0” 을 선택해 주세요. 인증 방식은 필요에 따라 설정하셔도 좋지만, 일단은 기본 설정으로 두고 아래 이미지와 같이 설정하고 “Create (만들기)” 버튼을 클릭합니다.Create Project

5단계: 솔루션 탐색기 확인

프로젝트 생성이 완료되면 Visual Studio 오른쪽에 있는 Solution Explorer(솔루션 탐색기)에 생성된 Solution (HealthCare)과 그 안에 HealthCareWeb Project가 나타난 것을 확인할 수 있습니다. 기본적인 MVC 구조인 Controllers, Models, Views 폴더와 함께 Program.cs (.NET 6 이후 버전에서는 Startup.cs 와 Program.cs 파일이 하나로 통합), .csproj 파일 등 기본적인 파일들이 생성된 것을 볼 수 있습니다. Solution and Project

2. Visual Studio Code에서 솔루션과 MVC 프로젝트 만들기

Visual Studio Code (이후 VS Code)는 가볍지만 강력한 코드 에디터로, C# 확장 기능을 통해 .NET 개발 환경을 구축할 수 있습니다. 요즘 MAC Book 을 사용하여 개발할 기회가 점점 늘어나다 보니 VS Code 를 주 IDE 로 사용하게 되어 함께 구성하였습니다. Project 생성과 몇몇 과정을 제외한 개발 과정은 대부분 비슷하니 다음 과정을 확인하시기 바랍니다. 그럼 이제 콘솔 명령어를 통해 솔루션과 프로젝트를 생성하는 과정을 알아보겠습니다.

Visual Studio 2022 에서의 제작과 함께 하다보니 Solution Folder 의 위치를 HealthCare 가 아닌 HealthCareVSC 라고 하겠습니다.

1단계: 개발 폴더 생성 및 터미널 열기

먼저 프로젝트 파일을 저장할 HealthCareVSC 폴더를 하나 만들어 진행하겠습니다. VS Code 를 실행하고 “Ctrl + `” 눌러 “Terminal” 창을 엽니다. (“Terminal” 메뉴에서 “New Terminal”을 클릭해서 터미널 창을 열어 진행할 수도 있습니다)

2단계: .NET SDK 설치 확인

터미널에 다음 명령어를 입력해서 .NET SDK가 제대로 설치되어 있는지 확인합니다.

dotnet --info

Check .NET Version

NET 8 관련 정보가 출력되면 정상적으로 설치된 겁니다. 만약 설치되어 있지 않다면 Terminal 의 맨 아래로 이동하면 표시되어 있는 링크를 Ctrl Key 를 누른 상태에서 Click 하여 이동하거나 .NET 공식 홈페이지로 이동하여 .NET 8 SDK를 설치해 주세요. install .NET 8

3단계: Solution, Project  파일 생성

이제 솔루션 파일을 만들어 보겠습니다. 먼저 Solution 과 Project 를 포함할 Folder 를 생성하겠습니다. 그리고 터미널에 다음 명령어들을 입력하여 Solution.NET 8 기반의 MVC Web Application Project 파일을 생성합니다.

dotnet new mvc -n HealthCareWeb -f net8.0 명령어는 HealthCareWeb 폴더를 만들고, 기본적인 MVC 구조와 함께 .NET 8을 대상으로 하는 프로젝트 파일을 생성합니다.

cd projects
mkdir HealthCareVSC
cd HealthCareVSC
dotnet new sln -n HealthCare
dotnet new mvc -n HealthCareWeb -f net8.0

Create Solution and Project In VS Code

4단계: VS Code 에서 Solution Folder 열기

이젠  “File” 메뉴에서 “Open Folder…”를 선택해서 만든 폴더를 엽니다. Folder 를 믿을만 한 작성자가 만든 것인지 확인하는 화면이 나타납니다. 

화면의 왼쪽, 탐색기(Explore) 에 폴더의 구조가 표시됩니다. 그리고 하단에 SOLUTION EXPLORER 가 표시되는데 Header 를 콜릭하여 위치를 이동할 수 있습니다. 왼쪽 Tab 으로 이동이 가능합니다. 확인해 보시기 바랍니다. Heder 의 이름이 SOLUTION EXPLORER 인지 Folder 이름인지 확인하시기 바랍니다. 자신이 편한 위치로 이동하여 화면을 구성할 수 있습니다.

SetUp Windows

5단계: Solution 에 Project 추가

생성된 MVC Project를 Solution 파일에 연결해 줘야 합니다. 터미널에서 다음 명령어를 실행하세요.

dotnet sln add ./HealthCareWeb/HealthCareWeb.csproj

이 명령어는 HealthCare 폴더 안의 HealthCareWeb.csproj 파일을 HealthCare.sln 파일에 추가합니다. 명령어를 실행하는 폴더의 위치를 확인하십시오. sln 파일이 있는 폴더(d:/projects/HealthCareVSC : 여러분의 폴더명과 다를 수 있습니다.) 에서 실행하고 있습니다.

add project in solution

위의 화면의 경우 미리 만들어 놓은 Project 를 Solution 에 포함하는 내용이지만 다음과 같이 VS Code 에서 새로 생성하며 추가할 수도 있습니다. SOLUTION EXPLORER 에서 Solution Name (HealthCare) 의 우측 “+” 를 클릭하면 왼쪽에 추가할 수 있는 Project 의 Template 명칭이 나열됩니다. 이 때 상단에 “mvc” 를 입력하면 “ASP.NET Core Web App (Model-View-Controller)” 이 Filtering 됩니다. 이를 선택하고 Project 의 이름을 입력하면 해당 Project 가 추가됩니다.

하지만 조금 더 정확한 Project 를 추가하기 위해서는 Terminal 명령어를 통해 추가하는 것을 추천합니다.

Create Project On VS Code

Create and add project  in Solution on VS Code

6단계: 프로젝트 구조 확인

VS Code의 탐색기에서 HealthCareVSC 폴더내에 HealthCare.sln 파일이 생성된 것을 확인할 수 있습니다. HealthCareWeb Project 폴더 안에는 Controllers, Models, Views 폴더와 Program.cs, .csproj 파일 등 웹 애플리케이션 개발에 필요한 기본적인 파일들이 갖춰져 있습니다.

Solution, Project Folder Structure

자, 이렇게 해서 Visual Studio 2022과 Visual Studio Code, 각각의 환경에서 .NET 8 기반의 ASP.NET Core MVC 웹 애플리케이션을 위한 Solution을 만들고 Project를 추가하는 과정을 성공적으로 마쳤습니다! 이제 다음 편에서는 생성된 기본적인 MVC 프로젝트의 구조를 좀 더 자세히 살펴보고, 간단한 기능을 추가해서 웹 페이지가 어떻게 동작하는지 직접 확인해 보도록 하겠습니다.

그리고 궁금한 점이 있다면 언제든지 댓글로 질문해주세요.

[Development] 마이크로서비스 : 아키텍처, 장점과 단점

Microservice Architecture 와 Monolithic Architecture 를 비교하고 Microservice Architecture 의 장점과 단점을 알아봅니다.

소개

오늘날 빠르게 변화하는 디지털 환경에서 소프트웨어 아키텍처는 애플리케이션의 성공과 확장성을 결정하는 데 중요한 역할을 하죠. 다양한 아키텍처 패턴 중에서 Microservice 가 오래전부터 사용하고 있죠. 그래서 이번에는 Microservice의 개념과 Archtecture, 장단점을 살펴보고, 기존의 Monolithic 시스템 대신 언제 이 방법을 적용해야하는 지에 대해 알아보겠습니다.

Microservice 란 ?

Microservice는 애플리케이션 도메인 내에서 단일한 목적을 가진 독립적인 서비스입니다. 모든 기능을 하나의 codebase 에서 처리하는 거대한 monolithic application 과는 달리, Microservice는 특정 작업을 수행하도록 설계되었습니다.  예를 들어, e-commerce application 에서 하나의 microservice 는 사용자 인증을 처리하고, 다른 microservice 는 쇼핑 카트를 관리하며, 또 다른 microservice 는 결제를 처리하는 식입니다.  

Microservice 의 주요 특징은 다음과 같습니다:

  • 단일 책임 (Single Responsibility) : 각 microservice 는 하나의 특정 기능에 대한 책임만 가집니다.    
  • 작고 집중됨 (Small and Focused) : microservice 는 일반적으로 작으며, 특정 작업에 필요한 코드만 포함합니다.    
  • 독립성 (Independent) : microservice 는 종종 독립적으로 개발, 배포 및 확장됩니다.   

Microservice Archtecture

하나의 Microservice 도 가치가 있지만, 진정한 힘은 여러 Microservice 를 결합하여 완전한 application을 구축하는 데서 나옵니다. 이 구성을 Microservice Architecture 라고 합니다.    

이 Architecture 에서 microservice 는 Application의 전체 기능을 수행하기 위해 API(Application Programming Interface) 또는 Event를 통해 서로 통신합니다. 예를 들어, E-Commerce 시나리오에서 FrontEnd Application은 다양한 microservice 와 상호 작용하여 제품을 표시하고, 사용자 Session을 관리하며, 주문을 처리하는 등의 작업을 수행합니다.   

Microservice 를 “결합”하는 것이 codebase 를 병합하는 것을 의미하지 않는다는 점을 이해하는 것이 중요합니다. microservice 로 결합되지 않으면 monolithic system 을 구축하는 것과 같습니다.    

Microservice의 장점

Microservice 의 장점은 다음과 같습니다:    

  • 향상된 유지보수성 (Enhanced Maintainability) :
    • Microservice 는 작고 집중되어 있기 때문에 유지 관리가 더 쉽습니다.    
    • 하나의 Microservice 에 대한 변경이 다른 서비스에 영향을 미칠 가능성이 적습니다.
    • 각 서비스는 자체 codebase를 가지므로 개발 팀이 더 쉽게 이해하고, 업데이트하고, 유지 관리할 수 있습니다.
    • 단일 책임 원칙을 준수하므로 code refactoring을 요구하는 외부 요인의 영향을 덜 받습니다.
    • Microservice 는 자체 데이터 저장소를 소유하므로 다른 서비스가 데이터에 직접 액세스하는 것을 방지합니다.
  • 지속적인 배포 (Continuous Delivery) :
    • Microservice 는 더 빠르고 빈번한 배포를 가능하게 합니다.    
    • 독립적이므로 하나의 서비스 업데이트를 전체 application을 다시 배포하지 않고 배포할 수 있습니다.
    • 이는 agile 개발 및 빠른 반복에 매우 중요합니다.
    • Microservice 의 작은 크기와 집중된 특성 덕분에 자동화된 테스트를 구현하기가 더 쉽습니다.
  • 확장성 (Scalability) :
    • Microservice 는 독립적으로 확장할 수 있습니다.    
    • 하나의 서비스에 과부하가 걸리면 전체 application을 확장하지 않고 해당 서비스만 확장할 수 있습니다.
    • 이를 통해 resource를 보다 효율적으로 사용하고 비용을 절감할 수 있습니다.

Microservice 의 단점

 Microservice 는 다음과 같은 단점도 있습니다 :    

  • 복잡성 (Complexity) :
    • Microservice Architecture는 본질적으로 Monolithic Architecture보다 더 복잡합니다.    
    • 개발자는 여러 서비스, 데이터베이스 및 통신 채널이 있는 분산 시스템을 관리해야 합니다.
    • 디버깅 및 모니터링이 더 어려울 수 있습니다.
  • 지연 시간 (Latency) :
    • 네트워크를 통한 Microservice 간의 통신은 지연 시간을 발생시킵니다.    
    • 이는 application 성능에 영향을 줄 수 있습니다.
    • 비동기 통신 패턴은 이를 완화하는 데 자주 사용되지만 복잡성을 더합니다.
  • 리팩토링 (Refactoring) :
    • Microservice 전반의 refactoring은 어려울 수 있습니다.    
    • 여러 서비스에 걸친 변경 사항은 신중한 조정과 테스트가 필요합니다.
    • 기술 스택의 차이는 refactoring을 더욱 복잡하게 만들 수 있습니다.

Monolithic vs. Microservice : 올바른 선택

Monolithic Architecture 와 Microservice Architecture 간의 선택은 프로젝트의 특정 요구 사항에 따라 다릅니다.    

  • Monolithic :
    • Monolithic Architecture 는 초기 개발이 더 간단하며 복잡성이 적고 개발팀 규모가 작은 소규모 application 에 적합합니다.    
    • 빠른 초기 개발이 가능합니다.
  • Microservice :
    • Microservice 는 확장성, 유연성 및 독립적인 배포가 필요한 대규모의 복잡한 application 에 더 적합합니다.    
    • 여러 개발팀이 있는 조직에도 적합합니다.

결론

Microservice 는 확장 가능하고 유지 관리하기 쉬운 application을 구축하는 강력한 접근 방식을 제공합니다. 그러나 복잡성을 수반하며 Trade-off 를 신중하게 고려해야 합니다. 핵심은 프로젝트의 목표, 팀 규모 및 장기적인 요구 사항에 가장 적합한 architecture를 선택하는 것입니다.

[Mac OS] React Native Build Error in MAC M1

Mac Os M1 Process 에서 React Native build 시 오류가 발생했을 때 제일 처음 Rosetta option 이 설정되어 있는지 확인한다.

Mac Os M1 Process 에서 React Native build 시 오류가 난다면.

    1. Terminal App 의 Rosetta option 을 Check 한다.
set Rosetta option in app info
set Rosetta option in app info
set Rosetta option in app info
set Rosetta option in app info
    1. iTerm App 의 Rosetta option 을 Check 한다.
set Rosetta option in app info
set Rosetta option in app info
set Rosetta option in app info
set Rosetta option in app info
    1. XCode App 의 Rosetta option 을 Check 한다.

하지만 XCode 에는 Rosetta option 이 없다.

set Rosetta option in app info
set Rosetta option in app info
 

모두 행복한 고수되십시오.

WooGong ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\