[React] 리액트 닷넷으로 시작하기

.NET 설치

Download .NET (Linux, macOS, and Windows)

위 링크에서 위를 클릭해 닷넷SDK를 설치해준다.

설치가 되었는지, 버전을 확인해 본다.

dotnet new -l 를 통해 생성가능한 프로젝트의 리스트를 본다.

11번째 라인에 ASP.NET 코어를 통해 리액트를 만들어준다는 것을 확인한다.

프론트엔드단은 React.js를 백엔드단은 ASP.NET을 사용하여 프로젝트를 진행한다.

 

프로젝트 생성

dotnet new react -o ReactTest >> react프로젝트를 만드는데 아웃풋은 'ReactTest'디렉토리로 지정한다.

 

프로젝트가 생성될 디렉토리가 만들어졌다.

현재 프로젝트는 ReactTest라는 이름의 C#프로젝트이며 ClientApp이라는 이름의 리액트 앱이 만들어져 있다.

 

React앱 실행 - FrontEnd

ClientApp으로 들어가서 내용을 확인하고

npm i 로 모듈을 인스톨해준다.

.net으로 프로젝트 생성 시 리액트 부분은 ClientApp이고 여기서 npm start를 한다면 프론트 부분만 실행이 된다.

npm start를 통해 열린 서버의 주소로 찾아간다.

44466포트의 주소로 찾아가니 아직 백엔드가 활성화되지 않아 로딩이 뜨는 것을 볼 수 있다.

 

닷넷 실행 - FullStack

 

ctrl + c를 눌러 작업을 종료 시켜주고

전체 프로젝트가 위치한 상위 디렉토리로 이동한 뒤

dotnet run 커맨드를 통해 프로젝트를 실행해주고 해당 주소로 이동한다.

해당 주소로 이동하니 아까의 44466포트로 리다이렉션이 되는 것을 확인했다.

리액트 앱을 실행했을 때는 Fetch data메뉴의 데이터가 로딩이 되지 않았는데

이번엔 백엔드까지 닷넷으로 실행시켰기 때문에 

데이터가 로드되는 것을 볼 수 있다.