Skip to content

Commit 88eb7fd

Browse files
Add react to an existing project (reactjs#1181)
# ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— React ์ถ”๊ฐ€ํ•˜๊ธฐ ์ค‘๋ณต ์‚ฌํ•ญ ์ œ๊ฑฐ ์•ˆ๋…•ํ•˜์„ธ์š”. ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— React ์ถ”๊ฐ€ํ•˜๊ธฐ ๋ฌธ์„œ์—์„œ ์›๋ณธ๊ณผ ๋ฒˆ์—ญ๋ณธ์ด ์ค‘๋ณต๋˜์–ด ์žˆ๋Š” ์‚ฌํ•ญ์ด ์žˆ์–ด ์›๋ณธ์„ ์ œ๊ฑฐํ•˜๋Š” ์ž‘์—…์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ## ์ด์ „ ![image](https://github.com/user-attachments/assets/35907bb7-9c1b-43d1-822a-eeff11d19b0a) ![image](https://github.com/user-attachments/assets/7b005015-4829-4bf0-aa0e-95559d434ae1) ## ์ดํ›„ ![image](https://github.com/user-attachments/assets/eafa902a-c1af-482f-8312-d3be7a2544a2) ![image](https://github.com/user-attachments/assets/591bb9a4-7bbc-43ff-adc8-f6120d8f3052) ## ํ•„์ˆ˜ ํ™•์ธ ์‚ฌํ•ญ - [x] [๊ธฐ์—ฌ์ž ํ–‰๋™ ๊ฐ•๋ น ๊ทœ์•ฝ<sup>Code of Conduct</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CODE_OF_CONDUCT.md) - [x] [๊ธฐ์—ฌ ๊ฐ€์ด๋“œ๋ผ์ธ<sup>Contributing</sup>](https://github.com/reactjs/ko.react.dev/blob/main/CONTRIBUTING.md) - [x] [๊ณตํ†ต ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ<sup>Universal Style Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/universal-style-guide.md) - [x] [๋ฒˆ์—ญ์„ ์œ„ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€<sup>Best Practices for Translation</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/best-practices-for-translation.md) - [x] [๋ฒˆ์—ญ ์šฉ์–ด ์ •๋ฆฌ<sup>Translate Glossary</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/translate-glossary.md) - [x] [`textlint` ๊ฐ€์ด๋“œ<sup>Textlint Guide</sup>](https://github.com/reactjs/ko.react.dev/blob/main/wiki/textlint-guide.md) - [x] [๋งž์ถค๋ฒ• ๊ฒ€์‚ฌ<sup>Spelling Check</sup>](https://nara-speller.co.kr/speller/) ## ์„ ํƒ ํ™•์ธ ์‚ฌํ•ญ - [ ] ๋ฒˆ์—ญ ์ดˆ์•ˆ ์ž‘์„ฑ<sup>Draft Translation</sup> - [ ] ๋ฆฌ๋ทฐ ๋ฐ˜์˜<sup>Resolve Reviews</sup> --------- Co-authored-by: ๋ฃจ๋ฐ€LuMir <rpfos@naver.com>
1 parent b61f160 commit 88eb7fd

File tree

1 file changed

+2
-6
lines changed

1 file changed

+2
-6
lines changed

โ€Žsrc/content/learn/add-react-to-an-existing-project.mdโ€Ž

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,7 @@ title: ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— React ์ถ”๊ฐ€ํ•˜๊ธฐ
4646

4747
* **์ด๋ฏธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด `import` ๋ฌธ์„ ์ด์šฉํ•ด ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌํ•˜๊ณ  ์žˆ๋‹ค๋ฉด** ๊ธฐ์กด์— ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์„ค์ •์„ ์ด์šฉํ•ด ๋ณด์„ธ์š”. JS ์ฝ”๋“œ์—์„œ `<div />`๋ฅผ ์ž‘์„ฑํ•˜๋ฉด ๋ฌธ๋ฒ• ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋Š”์ง€ ํ™•์ธํ•ด ๋ณด์„ธ์š”. ๋ฌธ๋ฒ• ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค๋ฉด [Babel์„ ์ด์šฉํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ๋ณ€ํ™˜](https://babeljs.io/setup)์ด ํ•„์š”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, JSX๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด [Babel React ํ”„๋ฆฌ์…‹](https://babeljs.io/docs/babel-preset-react)์„ ํ™œ์„ฑํ™”ํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.
4848

49-
* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend.
50-
51-
* **์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ์„ ์ปดํŒŒ์ผํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ์กด ์„ค์ •์ด ์—†๋‹ค๋ฉด,** [Vite](https://vitejs.dev/)๋ฅผ ์ด์šฉํ•˜์—ฌ ์„ค์ •ํ•˜์„ธ์š”. Vite ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” Rails, Django, Laravel์„ ํฌํ•จํ•œ [๋‹ค์–‘ํ•œ ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์™€์˜ ํ†ตํ•ฉ](https://github.com/vitejs/awesome-vite#integrations-with-backends)์„ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ์ค‘์ธ ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋ชฉ๋ก์— ์—†๋‹ค๋ฉด [๊ฐ€์ด๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ](https://vitejs.dev/guide/backend-integration.html) Vite ๋นŒ๋“œ๋ฅผ ๋ฐฑ์—”๋“œ์™€ ์ˆ˜๋™์œผ๋กœ ํ†ตํ•ฉํ•˜์„ธ์š”.
49+
* **์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ชจ๋“ˆ์„ ์ปดํŒŒ์ผํ•˜๊ธฐ ์œ„ํ•œ ๊ธฐ์กด ์„ค์ •์ด ์—†๋‹ค๋ฉด,** [Vite](https://vite.dev/)๋ฅผ ์ด์šฉํ•˜์—ฌ ์„ค์ •ํ•˜์„ธ์š”. Vite ์ปค๋ฎค๋‹ˆํ‹ฐ๋Š” Rails, Django, Laravel์„ ํฌํ•จํ•œ [๋‹ค์–‘ํ•œ ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์™€์˜ ํ†ตํ•ฉ](https://github.com/vite/awesome-vite#integrations-with-backends)์„ ์ง€์›ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ ์ค‘์ธ ๋ฐฑ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋ชฉ๋ก์— ์—†๋‹ค๋ฉด [๊ฐ€์ด๋“œ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ](https://vite.dev/guide/backend-integration.html) Vite ๋นŒ๋“œ๋ฅผ ๋ฐฑ์—”๋“œ์™€ ์ˆ˜๋™์œผ๋กœ ํ†ตํ•ฉํ•˜์„ธ์š”.
5250

5351
์„ค์ •์ด ์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋ ค๋ฉด ํ”„๋กœ์ ํŠธ ํด๋”์—์„œ ์•„๋ž˜ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•˜์„ธ์š”.
5452

@@ -88,9 +86,7 @@ root.render(<h1>Hello, world</h1>);
8886

8987
<Note>
9088

91-
์ฒ˜์Œ์œผ๋กœ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ๋ชจ๋“ˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์„ ํ†ตํ•ฉํ•˜๊ธฐ๋Š” ๋‹ค์†Œ ์–ด๋ ค์›Œ ๋ณด์ผ ์ˆ˜ ์žˆ์œผ๋‚˜, ๊ทธ๋งŒํ•œ ๊ฐ€์น˜๊ฐ€ ์žˆ๋Š” ์ผ์ž…๋‹ˆ๋‹ค! ์–ด๋ ค์›€์„ ๊ฒช๋Š” ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด [์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ์†Œ์Šค](/community)๋‚˜ [Vite ์ฑ„ํŒ…](https://chat.vitejs.dev/)์„ ์ด์šฉํ•ด ๋ณด์„ธ์š”.
92-
93-
Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/).
89+
์ฒ˜์Œ์œผ๋กœ ๊ธฐ์กด ํ”„๋กœ์ ํŠธ์— ๋ชจ๋“ˆ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ™˜๊ฒฝ์„ ํ†ตํ•ฉํ•˜๊ธฐ๋Š” ๋‹ค์†Œ ์–ด๋ ค์›Œ ๋ณด์ผ ์ˆ˜ ์žˆ์œผ๋‚˜, ๊ทธ๋งŒํ•œ ๊ฐ€์น˜๊ฐ€ ์žˆ๋Š” ์ผ์ž…๋‹ˆ๋‹ค! ์–ด๋ ค์›€์„ ๊ฒช๋Š” ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด [์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฆฌ์†Œ์Šค](/community)๋‚˜ [Vite ์ฑ„ํŒ…](https://chat.vite.dev/)์„ ์ด์šฉํ•ด ๋ณด์„ธ์š”.
9490

9591
</Note>
9692

0 commit comments

Comments
ย (0)