본문 바로가기

생활코딩85

[생활코딩-WEB1] 웹사이트 완성 [출처 : Youtube - 생활코딩] https://youtu.be/w5S0GACgL3U?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb 우리가 만든 웹페이지들을 엮어서 하나의 웹사이트로 만들어보자. index.html See the Pen eYvoRxL by 이윤경 (@yunkyung-creator) on CodePen. 1.html See the Pen xxqerBN by 이윤경 (@yunkyung-creator) on CodePen. 2.html See the Pen dyvLzoY by 이윤경 (@yunkyung-creator) on CodePen. 3.html See the Pen OJpGjVg by 이윤경 (@yunkyung-creator) on CodePen. 2021. 6. 20.

[생활코딩-React] State 사용 [출처 : Youtube - 생활코딩] https://youtu.be/e2c1EUcW7oo?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 오늘 배우는건 이해하려하지말고 그냥 그렇구나 하고 받아들이는게 편하다고 한다... ※주의 : 리액트에서는 props에 따옴표를 쓰면 문자로 인식을 한다. 문자가 아니라 자바스크립트의 코드로서 실행하게하고싶으면 중괄호{}를 사용하면 된다. src/App.js import './App.css'; import TOC from "./components/TOC"; import Content from "./components/Content"; import Subject from "./components/Subject"; import React, { Com.. 2021. 5. 29.

[생활코딩-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.

이전 1 2 3 4 ··· 15 다음

티스토리툴바