20230131 실습내용

my-app_20230131.zip

0.31MB

 

클래스형 컴포넌트 vs 함수형 컴포넌트

• component/MyComponentClass.js
• component/MyComponentFunction.js

 

신호등 모양 컴포넌트

• trafficlight/Lamp.js
• trafficlight/TrafficLight.js

 

댓글 컴포넌트

• comment/Comment.js
• comment/CommentList.js

 

프로젝트 생성 방법

1. 다운로드 받은 압축 파일을 압축 해제합니다.  

 

2. 명령 프롬프트에서 압축 해제한 폴더(package.json 파일이 존재하는 폴더)로 이동합니다.

C:\Users\myanj> cd c:\temp\my-app

c:\Temp\my-app> dir
 C 드라이브의 볼륨에는 이름이 없습니다.
 볼륨 일련 번호: 8CBD-6679

 c:\Temp\my-app 디렉터리

2023-02-01  오전 08:37    <DIR>          .
2023-02-01  오전 08:37    <DIR>          ..
2023-02-01  오전 08:37    <DIR>          node_modules
2023-01-31  오전 11:06         1,204,941 package-lock.json
2023-01-31  오전 11:06               809 package.json			<<< 확인
2023-02-01  오전 08:37    <DIR>          public
2023-01-31  오전 11:05             3,359 README.md
2023-02-01  오전 08:37    <DIR>          src
               3개 파일           1,209,109 바이트
               5개 디렉터리  111,921,664,000 바이트 남음

 

3. npm install 명령으로 애플리케이션 실행에 필요한 노드 모듈을 설치합니다. 

c:\Temp\my-app> npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1470 packages, and audited 1471 packages in 19s

231 packages are looking for funding
  run `npm fund` for details

6 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

 

4. code . 명령으로 VSCode를 실행합니다.

c:\Temp\my-app> code . 			<<< 현재 디렉터리를 의미하는 .을 반드시 입력

 

5. npm start 명령으로 개발서버를 실행합니다.

c:\Temp\my-app> npm start

> my-app@0.1.0 start
> react-scripts start

(node:12224) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:12224) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled with warnings.

[eslint]
src\App.js
  Line 4:1:  Block is redundant  no-lone-blocks

src\comment\Comment.js
  Line 37:17:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint]
src\App.js
  Line 4:1:  Block is redundant  no-lone-blocks

src\comment\Comment.js
  Line 37:17:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

webpack compiled with 1 warning