🌐 Web 20

02. 소스코드 수정방법

1. 디렉토리의 구조 01. index.js src 폴더에서 index.js 파일이 있는데 이 파일은 입구 역할을 한다. npm start를 터미널에 입력하여 create-react-app을 구동시키면 index.js 파일을 찾고 그대로 동작하게 된다. 10행의 이라는 태그가 브라우저 UI의 전체이다. 그리고 이 태그의 파일은 App.js이다. 02. App.js App.js 는 UI를 만드는 역할을 한다. 따라서 App.js를 편집하면서 UI를 만드는 것이다. App.js파일로 이동하여 아래 그림처럼 입력하면 브러우저가 아래와 같이 보이게 된다. 그렇다면 Hello React! 가 가운데에 위치하는 이유는 뭘까? 그 이유는 App.css 때문이다. 03. App.css / index.css App.cs..

🌐 Web/React 2022.08.15

01. 실습환경 구축

https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크로 들어가 왼쪽, 오른쪽 둘 중 아무거나 클릭하여 node.js를 먼저 설치한다. Visual Studio Code를 열어 파일 - 폴더 열기 - 바탕화면에 react-app이라는 새로운 폴더를 만들어 열어준다. *폴더를 만들 때는 소문자 이용하기! 그리고 터미널 - 새터미널을 클릭하면 명령어로 Visual Studio를 제어할 수 있게 된다. 터미널에 npx create-react-app . 을 입력하여 설치해준다. 설치가 완료되면 npm start를 입력하여 react 개발 환경이 실행되면서..

🌐 Web/React 2022.08.15