본문 바로가기

JavaScript168

[생활코딩-React] Component 파일로 분리하기 [출처 : Youtube - 생활코딩] https://youtu.be/8hGqznPGVc0?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi src 디렉토리 안에 components 디렉토리를 생성한다. components 디렉토리 안에는 TOC.js라는 파일을 생성한다. TOC.js 파일에다가 App.js의 TOC 클래스를 복붙한다. 아래의 코드도 같이 복붙한다. import React, { Component } from 'react'; 'react라는 라이브러리에서 Component라고 하는 클래스를 로딩한다' 라는 뜻이다. 리액트를 사용할 땐 필수적으로 넣어야하는 코드라고 생각하면 된다. TOC라는 클래스를 외부에서 사용할 것을 허용하는 코드도 작성한다. export defau.. 2021. 5. 29.

[생활코딩-React] props [출처 : Youtube - 생활코딩] https://youtu.be/pPCC2JWbPgk?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi Subject 클래스를 리팩토링 해준다. import './App.css'; import React, { Component } from 'react'; class Subject extends Component { render() { return ( {this.props.title} {this.props.sub} ); } } class TOC extends Component { render() { return ( HTML CSS JavaScript ); } } class Content extends Component { render() { ret.. 2021. 5. 29.

[생활코딩-React] 컴포넌트 만들기 2 [출처 : Youtube - 생활코딩] https://youtu.be/J3WQKH35f0M?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi src/App.js import './App.css'; import React, { Component } from 'react'; class Subject extends Component { render() { return ( WEB world wide web! ); } } class TOC extends Component { render() { return ( HTML CSS JavaScript ); } } class Content extends Component { render() { return ( HTML HTML is HyperText.. 2021. 5. 28.

[생활코딩-React] 컴포넌트 만들기 1 [출처 : Youtube - 생활코딩] https://youtu.be/wzii1e_QWgc?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 먼저 public 폴더 안에 pure.html과 src 폴더 안에 App.js를 연다. ※주의 : Class 이름은 대문자로 시작해야한다. ※주의 : 컴포넌트 안에는 반드시 render() 함수가 포함되어야 한다. 콘솔로 실행하면 문법 에러가 뜬다. 왜냐하면 태그를 표현하는 < 같은 것들이 그대로 나타나있기 때문임. 2021. 5. 28.

[생활코딩-React] 리액트가 없다면 [출처 : Youtube - 생활코딩] https://youtu.be/QG4RxNHz-bc?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 아래의 코드를 WEB world wide web! 이렇게 바꾸면 훨씬 더 편리할 것이다. 이것을 해주는 기술이 React이다. 2021. 5. 28.

[생활코딩-React] 배포하는법 [출처 : Youtube - 생활코딩] https://youtu.be/E_-ua6uCQOU?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi '캐시 비우기 및 강력 새로고침'을 누른다. 전체 용량이 1.7MB나 된다. (React가 개발의 편의성을 위해 여러가지 기능을 추가해놔서 create-react-app은 파일의 무게가 상당히 무겁다) 그러나 용량이 커서 보안쪽의 문제가 생길 수 있어서 완성한 후에는 npm run build 라는 명령어를 쓴다. 터미널에 npm run build를 입력하면 build라는 폴더가 생성된다. build 폴더 안에 index.html 파일로 들어가면 아래와 같이 공백이 하나도 없는 복잡한 코드가 있다. 이유는 create-react-app이 inde.. 2021. 5. 28.

이전 1 ··· 7 8 9 10 11 12 13 ··· 28 다음

티스토리툴바