https://technical-writing.dev/static/js/async/124.47ff47dc.js

1"use strict";(self.webpackChunktechnical_writing=self.webpackChunktechnical_writing||[]).push([["124"],{7877:function(e,t,a){a.r(t),a.d(t,{default:()=>p});let p={before:{code:`# React 시작하기  
2
3React는 컴포넌트 기반으로 UI를 만들 수 있는 라이브러리예요. 여기서는 가장 기본적인 React 프로젝트를 실행해보고 동작 방식을 이해해요.
4
5## React 실행하기
6
7### 1️. 프로젝트 만들기
8
9npx create-react-app my-app
10cd my-app
11npm start
12
13개발 서버가 실행된 후, 브라우저에서 \`http://localhost:3000\`을 열어 React 기본 화면을 확인하세요.
14
15## React에서 화면을 만드는 방법
16
17React에서는 컴포넌트라는 개념을 사용해서 화면을 구성해요. 컴포넌트는 UI의 가장 작은 단위예요.
18
19### 기본 컴포넌트 만들기
20
21\`src/App.js\` 파일을 열고 내용을 아래처럼 바꿔보세요.
22
23function App() {
24  return <h1>안녕하세요! React를 시작해 봅시다.</h1>;
25}
26
27export default App;
28
29파일을 저장한 후, 브라우저를 새로고침하면 React 기본 화면 대신 "안녕하세요! React를 시작해 봅시다."라는 문구가 표시됩니다.
30
31## 직접 컴포넌트 만들기
32
331. \`src\` 폴더 안에 \`Welcome.js\` 파일을 생성하세요.
342. 다음 코드를 입력하고 저장하세요.
35
36function Welcome({ name }) {
37  return <h2>안녕하세요, {name}님!</h2>;
38}
39
40export default Welcome;
41
42이제 \`App.js\`에서 새로운 \`Welcome\` 컴포넌트를 추가해보세요.
43
44import Welcome from "./Welcome";
45
46function App() {
47  return (
48    <div>
49      <h1>React 학습을 시작해봅시다!</h1>
50      <Welcome name="주연" />
51    </div>
52  );
53}
54
55export default App;`,sections:[{code:`# React 시작하기  
56
57React는 컴포넌트 기반으로 UI를 만들 수 있는 라이브러리예요. 가장 기본적인 React 프로젝트를 실행해보고 동작 방식을 이해해요.`,explanation:`필수 개념과 기본 사용법을 안내해요. 문서의 학습 목표를 명확히 제시해야 해요.`,lineStart:1,lineEnd:3},{code:`### 1️. 프로젝트 만들기
58
59npx create-react-app my-app
60cd my-app
61npm start`,explanation:`가장 기본적인 설치 및 기본 설정을 안내해요. 실행 후 결과를 확인하는 방법도 알려주세요.`,lineStart:7,lineEnd:13},{code:`### 기본 컴포넌트 만들기
62
63\`src/App.js\` 파일을 열고 내용을 아래처럼 바꿔보세요.
64
65function App() {
66  return <h1>안녕하세요! React를 시작해 봅시다.</h1>;
67}
68
69export default App;`,explanation:`사용자가 최소한의 코드로 바로 실행할 수 있도록 구성해요. 실행 결과를 확인하는 방법도 알려주세요. 각 단계를 잘 완료했을 때 기대할 수 있는 결과를 명확히 알려줘야 독자 스스로 각 단계를 성공했는지 확인할 수 있어요.`,lineStart:23,lineEnd:29}]},after:{code:`# React 시작하기
70
71이 문서는 React를 처음 시작하는 사용자를 위해 기본적인 설치 및 설정 방법을 안내합니다.
72
73## 학습 목표
74
75- React 프로젝트를 설치하고 실행하는 방법을 배워요.
76- 컴포넌트를 만들어 보고 기본 개념을 익혀요.
77- 최소한의 코드로 바로 실행할 수 있도록 실습해요.
78
79## 1단계: 프로젝트 생성 및 실행
80
81터미널에서 다음 명령어를 실행하세요.
82
83\`\`\`bash
84npx create-react-app my-app
85cd my-app
86npm start
87\`\`\`
88
89브라우저에서 \`http://localhost:3000\`을 열어 React 기본 화면을 확인하세요.
90
91## 2단계: 기본 컴포넌트 만들기
92
93\`src/App.js\` 파일을 열고 아래처럼 수정하세요.
94
95\`\`\`jsx
96function App() {
97  return <h1>안녕하세요! React를 시작해 봅시다.</h1>;
98}
99
100export default App;
101\`\`\`
102
103파일을 저장한 후, 브라우저를 새로고침하여 변경 사항을 확인하세요.
104
105## 3단계: 새로운 컴포넌트 추가하기
106
1071. \`src/Welcome.js\` 파일을 생성하고 아래 코드를 입력하세요.
108
109\`\`\`jsx
110function Welcome({ name }) {
111  return <h2>안녕하세요, {name}님!</h2>;
112}
113
114export default Welcome;
115\`\`\`
116
1172. \`App.js\`에서 \`Welcome\` 컴포넌트를 불러와 사용하세요.
118
119\`\`\`jsx
120import Welcome from "./Welcome";
121
122function App() {
123  return (
124    <div>
125      <h1>React 학습을 시작해봅시다!</h1>
126      <Welcome name="주연" />
127    </div>
128  );
129}
130
131export default App;
132\`\`\`
133
134브라우저에서 "안녕하세요, 주연님!"이라는 문구가 보이면 컴포넌트가 정상적으로 추가된 것입니다.`,sections:[{code:`## 학습 목표
135
136- React 프로젝트를 설치하고 실행하는 방법을 배워요.
137- 컴포넌트를 만들어 보고 기본 개념을 익혀요.
138- 최소한의 코드로 바로 실행할 수 있도록 실습해요.`,explanation:`필수 개념과 기본 사용법을 안내해요.  
139학습 목표를 명확히 정의하여 독자가 기대할 수 있는 내용을 파악할 수 있도록 개선했어요.`,lineStart:3,lineEnd:7}

139,{code:`## 1단계: 프로젝트 생성 및 실행
140
141터미널에서 다음 명령어를 실행하세요.
142
143\`\`\`bash
144npx create-react-app my-app
145cd my-app
146npm start
147\`\`\`
148
149브라우저에서 \`http://localhost:3000\`을 열어 React 기본 화면을 확인하세요.`,explanation:`가장 기본적인 설치 및 기본 설정을 안내해요.  
150실행 결과를 확인하는 방법을 명시하여 학습자의 이해도를 높였어요.`,lineStart:8,lineEnd:16},{code:`## 2단계: 기본 컴포넌트 만들기
151
152\`src/App.js\` 파일을 열고 아래처럼 수정하세요.
153
154\`\`\`jsx
155function App() {
156  return <h1>안녕하세요! React를 시작해 봅시다.</h1>;
157}
158
159export default App;
160\`\`\`
161
162파일을 저장한 후, 브라우저를 새로고침하여 변경 사항을 확인하세요.`,explanation:`사용자가 최소한의 코드로 바로 실행할 수 있도록 구성해요.  
163실행 후 변경 사항을 확인하는 단계를 추가했어요.`,lineStart:17,lineEnd:27},{code:`## 3단계: 새로운 컴포넌트 추가하기
164
1651. \`src/Welcome.js\` 파일을 생성하고 아래 코드를 입력하세요.
166
167\`\`\`jsx
168function Welcome({ name }) {
169  return <h2>안녕하세요, {name}님!</h2>;
170}
171
172export default Welcome;
173\`\`\``,explanation:`필수 개념과 기본 사용법을 안내해요.  
174Props의 개념을 더 명확히 설명하여, 독자가 쉽게 이해할 수 있도록 개선했어요.`,lineStart:28,lineEnd:38}]}}}}]);