๐ก ๋ณธ ๋ฌธ์๋ 'React + .Net ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ถํ๊ธฐ (feat. Visual Studio for Mac)'์ ๋ํด ์ ๋ฆฌํด๋์ ๊ธ์ ๋๋ค.
React + .Net ๊ฐ๋ฐ ํ๊ฒฝ์ ๊ตฌ์ถํ๋ ๊ณผ์ ์ ์ ๋ฆฌํ์์ผ๋ ์ฐธ๊ณ ํ์๊ธฐ ๋ฐ๋๋๋ค. ์ฌ๊ธฐ์ Window์ Mac์์์ ๊ฐ๋ฐ ํ๊ฒฝ ๊ตฌ์ถ๊ณผ์ ์ด ์ผ๋ถ ์ฐจ์ด๊ฐ ์์ผ๋ ์ฐธ๊ณ ํ์๊ธฐ ๋ฐ๋๋๋ค.
1. React ์ค์นํ๊ธฐ
1.1 node.js ๋ฐ npm ๋ค์ด๋ก๋: https://nodejs.org/en/
Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
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
![](https://blog.kakaocdn.net/dn/dN8QRO/btrWqCJhh7k/1lDVsF07wItB9tZVxtXlj1/img.png)
2. .Net ์ค์นํ๊ธฐ
2.1 Visual Studio ๋ค์ด๋ก๋: https://visualstudio.microsoft.com/ko/
- Window: Visual Studio
- Mac: Visual Studio for Mac
Visual Studio: ์ํํธ์จ์ด ๊ฐ๋ฐ์ ๋ฐ Teams์ฉ IDE ๋ฐ ์ฝ๋ ํธ์ง๊ธฐ
Visual Studio ๊ฐ๋ฐ ๋๊ตฌ ๋ฐ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ฉด ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๋ชจ๋ ํ๋ซํผ ๋ฐ ์ธ์ด๋ก ์ฑ์ ์ฝ๊ฒ ๊ฐ๋ฐํ ์ ์์ต๋๋ค. ๋ฌด๋ฃ๋ก ์ด๋์๋ ์ฝ๋ ํธ์ง๊ธฐ ๋๋ IDE๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐํ์ธ์.
visualstudio.microsoft.com
2.2 ASP .NET Core ํ๋ก์ ํธ ์์ฑํ๊ธฐ
2.2.1 Window์ ๊ฒฝ์ฐ
ํ๋ก์ ํธ ์์ฑ์, ASP .Net core ํ๋ก์ ํธ ์์ฑํ๊ธฐ๋ฅผ ์คํํ ๊ฒฝ์ฐ ๋ฐ๋ก React๋ฅผ ํด๋ผ์ด์ธํธ๋ก ๊ฐ์ง๊ณ ์๋ฒ๊ฐ .Net์ธ ํ๋ก์ ํธ๊ฐ ๊ตฌ์ฑ๋ฉ๋๋ค.
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 ํ๋ก๊ทธ๋๋ฐ ์ ๋ฌธ