๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ฆฌ์•กํŠธ3

[React ์ž์Šต์„œ] Tic Tac Toe.. ํˆฌ๋‘๋ฆฌ์ŠคํŠธ๋ฅผ ์‹œ์ž‘ ํ•˜๊ธฐ์— ์•ž์„œ ๋ฆฌ์•กํŠธ๋ฅผ ๋„ˆ๋ฌด ๋ชจ๋ฅด๋Š”๊ฑฐ ๊ฐ™์•„, ๊ณต์‹๋ฌธ์„œ ์ž์Šต์„œ์˜ ํ‹ฑํƒํ† ๋ฅผ ๊ณต๋ถ€ํ•˜๊ณ ์žˆ๋‹ค. function Square(props) { return ( {props.value} ); } class Board extends React.Component { constructor(props){ super(props); this.state = { squares: Array(9).fill(null), xIsNext : true, }; } handleClick(i) { const squares = this.state.squares.slice(); if(calculateWinner(squares) || squares[i]){ return; } squares[i] = this.state.xIsNext ? '.. 2022. 2. 3.
์ฝ”๋“œ ์Šคํ…Œ์ด์ธ 36๊ธฐ Section 1 ํšŒ๊ณ ๋ก [๊ฒฝ์พŒํ•œ ์‹คํŒจ] ๋ณดํ˜ธ๋˜์–ด ์žˆ๋Š” ๊ธ€ ์ž…๋‹ˆ๋‹ค. 2021. 12. 9.
4W_JS_React Route ์‹œ๊ฐ„์ด ์ง„์งœ ์™œ์ด๋ ‡๊ฒŒ ๋นจ๋ฆฌ๊ฐ€๋Š”์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค. ๋ฉ”์„œ๋“œ ๊ณต๋ถ€ํ•˜๋‹ค ๊ฐ‘์ž๊ธฐ ๋ฆฌ์•กํŠธ๋กœ ๋Œ์•„์˜จ ๋ธ”๋กœ๊ทธ.. ๊ทธ์‚ฌ์ด์— ๊ต‰์žฅํžˆ ๋งŽ์€ ํ•™์Šต์ด ์ด๋ฃจ์–ด์กŒ์ง€๋งŒ, ์–ด์ œ ์˜ค๋Š˜ ๋ฆฌ์•กํŠธ ์ˆ˜์—…๋“ฃ๊ณ  ๊นจ๋‹ฌ์•˜๋‹ค. "..์•„! ์—ฌ๊ธฐ๊นŒ์ง€ ์˜จ๊ฒƒ์€ ๋‹ค ๋ฆฌ์•กํŠธ ๋ฐฐ์šฐ๋ ค๊ณ  ์˜จ๊ฑฐ๊ตฌ๋‚˜!! " ๊ทธ๋ž˜์„œ ๋งˆ์Œ์ด ํŽธํ•ด์กŒ๋‹ค. ๋’ค๋กœ ๊ตฌ๋ฅด๋“  ์˜†์œผ๋กœ ๊ตฌ๋ฅด๋“  ์–ด์จ‹๋“  ํ”„๋ก ํŠธ์—”๋“œ์˜ ๊ฝƒ, ๋ฆฌ์•กํŠธ๋งŒ ์ž˜ํ•ด๋„ ๋ฐ˜์€๊ฐ€๊ฒ ๊ตฌ๋‚˜..! (๋ฌผ๋ก  ๋ฆฌ์•กํŠธ ์ž˜ํ•˜๋ ค๋ฉด ์•ž์— ๋ฐฐ์šด๊ฑฐ ๋‹ค์ž˜ํ•ด์•ผํ•จ) ์—ฌํ•˜ํŠผ ์–ด์ œ์˜ ๊ธฐ๋ณธ๋ฌธ๋ฒ•์— ์ด์–ด ์˜ค๋Š˜์€ ๋ผ์šฐํ„ฐ๋ฅผ ๊ณต๋ถ€ํ–ˆ๊ณ , ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ์˜ ์ฃผ์š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฐฐ์šด๊ฒƒ ์œ„์ฃผ๋กœ ์ •๋ฆฌํ•ด๋ณด๋ คํ•œ๋‹ค. ๋จผ์ € ๋ผ์šฐํ„ฐ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— ๋ผ์šฐํ„ฐ ๋ชจ๋“ˆ์ด ๋“ค์–ด์žˆ๋Š” ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ๋”์„ ์„ค์น˜ํ•˜์—ฌ์•ผํ•œ๋‹ค. npm install react-router-dom@5.3.0 ์šฐ๋ฆฌ๋Š” ๋ฒ„์ „ 5.3.0์„ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ ์ตœ์‹ ๋ฒ„์ „ ๋ฐ›.. 2021. 12. 3.