[IDE] VSCode React + .Net 개발환경 설정 (MacOS M1)

💡 본 문서는 'React + .Net 개발 환경 구축하기 (feat. Visual Studio for Mac)'에 대해 정리해놓은 글입니다.
React + .Net 개발 환경을 구축하는 과정을 정리하였으니 참고하시기 바랍니다. 여기서 Window와 Mac에서의 개발 환경 구축과정이 일부 차이가 있으니 참고하시기 바랍니다.

1. React 설치하기

1.1 node.js 및 npm 다운로드: https://nodejs.org/en/

Node.js

1.2 node.js 설치 확인 

% npm -v
% node -v

1.3 create-react-app 설치

npm install -g create-react-app

만약 위 명령어를 입력하고 에러가 뜬다면 아래 명령어를 입력한다.

sudo npm install create-react-app

1.4 create-react-app 설치 확인

% create-react-app -V

1.5 React 프로젝트 만들기

% cd react-memo
% create-react-app react-memo

1.6 React 프로젝트 확인하기

% npm start

2. .Net 설치하기

2.1 Visual Studio 다운로드: https://visualstudio.microsoft.com/ko/

• Window: Visual Studio
• Mac: Visual Studio for Mac

Visual Studio: 소프트웨어 개발자 및 Teams용 IDE 및 코드 편집기

2.2 ASP .NET Core 프로젝트 생성하기

2.2.1 Window의 경우

프로젝트 생성시, ASP .Net core 프로젝트 생성하기를 실행할 경우 바로 React를 클라이언트로 가지고 서버가 .Net인 프로젝트가 구성됩니다. 

이후 웹 어플리케이션 템플릿을 선택하라고 하는데, 이때 'React.js'를 선택합니다. 추가로 오른쪽 상단의 '인증'의 경우 '인증 안 함'으로 설정한 후 만들면 프로젝트가 생성됩니다.

2.2.2 Mac의 경우

프로젝트 생성시, 'ASP .Net core 프로젝트 생성하기' 버튼이 존재하지 않습니다. 따라서 직접 dotnet을 추가로 설치해주어야 합니다.

% brew install dotnet

이후 하단의 커멘드를 이용하여 프로젝트를 생성해줍니다.

% dotnet new react -o <project_name>

프로젝트를 생성한 후 Visual Studio for Mac을 실행시킨 후 프로젝트 '열기'를 선택합니다.

이후 프로젝트 경로 내의 *.csproj 를 클릭 후 열기를 누르면 프로젝트가 생성됩니다.

2.3 ASP .NET Core 프로젝트 빌드 및 실행하기

프로젝트가 열리면 왼쪽 바에 프로젝트 파일들이 보일 것입니다. 여기서 ClientApp 내부에 있는 파일들은 create-react-app 명령으로 만든 React 클라이언트와 동일하게 생성됩니다. 이제 해당 프로젝트 자체를 우클릭한 후 '<project_name> 다시 빌드'를 클릭합니다. 하단의 사진에서는 'ReactMemo 다시 빌드'입니다.

여기서 'ReactMemo 다시 빌드'의 경우, Client인 React에서 npm install을 한 후 ASP .NET Core에서 dotnet run을 해준 것과 동일하게 작용합니다. 이를 통해 React에 node_modules가 설치됩니다.

경과 시간: 00:16:48.56

========== 빌드: 1개 성공, 0개 실패, 0개 최신 상태, 0개 건너뜀 ==========

빌드되었습니다.

위와 같이 '빌드가 성공하였습니다.'라고 뜰 경우, Visual Studio 상단바의 '디버그' > '디버그하지 않고 시작'을 클릭하면 일정 시간이 지난 후 기본 .Net 프레임워크가 적용된 웹페이지를 확인할 수 있습니다.

참고

• [MicroSoft] 자습서: Visual Studio에서 React를 사용하여 ASP.NET Core 앱 만들기: https://learn.microsoft.com/ko-kr/visualstudio/javascript/tutorial-asp-net-core-with-react?view=vs-2022
• [Inflearn] 오픈 소스 자바스크립트 React 프로그래밍 입문