jpg의 끄적끄적

"react는 사용자 정의 태그를 만드는 기술이다." 우선 이전 실습 내용을 정리하기 위해 public폴더의 index.html에서 31행의 style~을 지워주고, app.css를 다 지운다. 그리고 App.js를 아래와 같이 코드를 수정한다. import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html html html Welcome Hello, WEB ); } export default App; 그리고 브라우저를 다음과 같이 만든다. 사용자 정의 태그는 함수를 정의하여 만든다. 그리고 반드시 대문자로 시작해야 한다. import logo from './logo.svg'; import './App.css'; ..

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..

https://nodejs.org/en/ Node.jsNode.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 . 을 입력하여 설치해준다.뒤에 점은 현재 폴더에 개발환경을 설치해준다는 의미이다. 즉, 방금 한 것과 같이 폴더를 ..