Study: DeveloperTools(DevTool)/DevTool: IDE

[IDE] VSCode React + .Net ๊ฐœ๋ฐœํ™˜๊ฒฝ ์„ค์ • (MacOS M1)

DrawingProcess 2023. 1. 16. 23:37
๋ฐ˜์‘ํ˜•
๐Ÿ’ก ๋ณธ ๋ฌธ์„œ๋Š” '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

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์ธ ํ”„๋กœ์ ํŠธ๊ฐ€ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค. 

์ดํ›„ ์›น ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ…œํ”Œ๋ฆฟ์„ ์„ ํƒํ•˜๋ผ๊ณ  ํ•˜๋Š”๋ฐ, ์ด๋•Œ '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 ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ์ ์šฉ๋œ ์›นํŽ˜์ด์ง€๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฐธ๊ณ 

๋ฐ˜์‘ํ˜•