๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๋ฐ˜์‘ํ˜•

์ƒํ™œ์ฝ”๋”ฉ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.
๋ฐ˜์‘ํ˜•