You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
React는 처음부터 점진적인 도입을 가정하여 설계되었습니다. **그래서 React는 필요한 만큼만 사용하면 됩니다.** 아마 기존 페이지에 "상호작용"이라는 조미료를 첨가하기만 하고 싶을 수도 있습니다. 이럴 때 React 컴포넌트를 쓰면 좋습니다.
13
+
React는 처음부터 점진적으로 도입할 수 있게 설계되었습니다. **그래서 React는 필요한 만큼만 사용하면 됩니다.** 아마 기존 페이지에 "상호작용"이라는 조미료를 첨가하기만 하고 싶을 수도 있습니다. 이럴 때 React 컴포넌트를 쓰면 좋습니다.
14
14
15
-
오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없습니다. **빌드 도구도 없이 몇 줄의 코드만으로** 웹사이트의 작은 부분에 먼저 React를 도입해보세요. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있습니다.
15
+
오늘날 웹사이트의 대부분은 싱글 페이지가 아니고 그래야 할 필요도 없습니다. **빌드 도구 없이 몇 줄의 코드만으로** 웹사이트의 작은 부분에 먼저 React를 도입해보세요. React의 비중을 천천히 늘릴 수도 있고 아니면 동적인 위젯을 몇 개 추가하는 것으로 끝낼 수도 있습니다.
16
16
17
17
---
18
18
@@ -25,7 +25,7 @@ React는 처음부터 점진적인 도입을 가정하여 설계되었습니다.
25
25
26
26
복잡한 도구를 쓰거나 뭔가를 따로 설치해야 할 필요도 없습니다. **약간의 시간과 함께 인터넷만 연결 되어 있다면 이 문서에서 다루는 것을 모두 해볼 수 있습니다.**
27
27
28
-
Optional: [예제의 전체 소스코드 다운로드 (2KB로 압축됨)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
28
+
선택사항: [예제의 전체 소스코드 다운로드 (2KB로 압축됨)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
29
29
30
30
### 1단계: HTML 파일에 DOM 컨테이너 설치 {#step-1-add-a-dom-container-to-the-html}
31
31
@@ -53,7 +53,7 @@ Optional: [예제의 전체 소스코드 다운로드 (2KB로 압축됨)](https:
53
53
<!-- ... 다른 HTML ... -->
54
54
55
55
<!-- React를 실행. -->
56
-
<!-- 참고: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
56
+
<!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
이제 어떤 `<script>` 태그에서든 `type="text/babel"`성질을 추가하면 JSX를 사용할 수 있습니다. 이 [JSX를 사용한 예제 HTML 파일](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html)로 여러 가지 작업들을 해보세요.
163
163
164
-
이런 식의 접근 방법은 공부 목적이나 간단한 데모 사이트를 만들기 위함이라면 괜찮습니다. 그러나, 이 방법은 사이트를 느리게 만들고 **생산 모드와는 맞지 않습니다.** 한 단계 앞으로 나아갈 준비가 되었다면 새로 추가한 `<script>` 태그와 `type="text/babel"`속성을 제거해보세요. 다음 차례에서는 `<script>` 태그를 자동으로 변환시켜줄 JSX 전처리기를 만들 겁니다.
164
+
이런 식의 접근 방법은 공부 목적이나 간단한 데모 사이트를 만들기 위함이라면 괜찮습니다. 그러나, 이 방법은 사이트를 느리게 만들고 **프로덕션에서는 맞지 않습니다.** 한 단계 앞으로 나아갈 준비가 되었다면 새로 추가한 `<script>` 태그와 `type="text/babel"`어트리뷰트를 제거해보세요. 다음 차례에서는 `<script>` 태그를 자동으로 변환시켜줄 JSX 전처리기를 만들 겁니다.
165
165
166
166
### 프로젝트에 JSX 추가하기 {#add-jsx-to-a-project}
167
167
@@ -174,7 +174,7 @@ JSX를 프로젝트에 추가하는 데에는 복잡한 번들러나 개발 서
174
174
175
175
>팁
176
176
>
177
-
>**JSX 전처리기를 설치할 때 npm은 여기서만 쓰면 됩니다.** 다른 단계에서는 npm이 쓰일 일이 없습니다. React와 어플리케이션 코드는 둘다 똑같이 `<script>` 태그로 유지할 수 있습니다.
177
+
>**JSX 전처리기를 설치할 때 npm은 여기서만 쓰면 됩니다.** 다른 단계에서는 npm이 쓰일 일이 없습니다. React와 애플리케이션 코드는 둘다 똑같이 `<script>` 태그로 유지할 수 있습니다.
178
178
179
179
축하합니다! 당신은 프로젝트에 **프로덕션 준비가 된 JSX 설정**을 끝마쳤습니다.
180
180
@@ -187,9 +187,9 @@ JSX를 프로젝트에 추가하는 데에는 복잡한 번들러나 개발 서
0 commit comments