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

์ „์ฒด ๊ธ€85

[React] ํ›…(Hooks) ๐Ÿ“–๋ฆฌ๋‹ค๊ธฐ, ๊ณต์‹๋ฌธ์„œ, ๋…ธ๋งˆ๋“œ ์ฝ”๋”, ์ œ๋กœ์ดˆ๋‹˜์˜ ์˜์ƒ์„ ๋ณด๊ณ  ์ œ๊ฐ€ ์ดํ•ดํ•œ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ •๋ฆฌํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค.๐Ÿ“– ๋ฆฌ๋‹ค๊ธฐ์—์„œ 8์žฅ์— ํ›…์— ๋Œ€ํ•œ ์„ค๋ช…์ด ๋‚˜์˜จ๋‹ค. ์˜ˆ์ œ๋ฅผ ๋”ฐ๋ผํ•˜๋ฉด์„œ ํ•ด๋ณด์•˜์ง€๋งŒ 8์žฅ๊นŒ์ง€ ํœ˜๋šœ๋ฃจ๋งˆ๋šœ๋ฃจ ๋‹ฌ๋ ค์„œ ๊ทธ๋Ÿฐ๊ฐ€ ๋‡Œ์— ๊ณผ๋ถ€ํ™”๊ฐ€ ์™€์„œ ๋จธ๋ฆฌ๊ฐ€ ๋ฐ›์•„๋“ค์ด๊ธฐ๋ฅผ ๊ฑฐ๋ถ€๋ฅผ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋‹ค. ํ•˜์ง€๋งŒ, 8์žฅ๊นŒ์ง€ ํ–ˆ์„๋•Œ ์ด ๋ถ€๋ถ„์ด ๋น„์ค‘์ด ์žˆ๊ณ  ์ค‘์š”ํ•˜๋‹ค๊ณ  ๋А๊ปด์กŒ๊ธฐ ๋•Œ๋ฌธ์— ํ•˜๋ฃจ ์‰ฌ๊ณ  ํ•˜๋ฃจ ๋‹ค์‹œ ๋‚  ์žก์•„์„œ ๊ณต์‹๋ฌธ์„œ์™€ ์ฑ…, ์˜์ƒ์„ ๊ฐ€๋ฆฌ์ง€ ์•Š๊ณ  ์ฐพ์•„๋ณธ ๊ฒฐ๊ณผ ์–ด๋А ์ •๋„? ์กฐ๊ธˆ์€? ์ดํ•ด๋ฅผ ํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.๐Ÿ˜ฅ ์šฐ์„  ์ œ์ผ ์ค‘์š”ํ•œ ํฌ์ธํŠธ๋Š” ๊ฐœ๋…์„ ์–ด๋А ์ •๋„ ์ดํ•ด๋ฅผ ํ•˜๊ณ  ์˜ˆ์ œ๋ฅผ ๋‹ค์‹œ ํ•ด๋ณด๋Š”๊ฒƒ!์ด ์ดํ•ด๋ฅผ ํ•˜๋Š” ๋ฐ ๋งŽ์€ ๋„์›€์ด ๋๋‹ค. ๋˜, ๋…ธ๋งˆ๋“œ ์ฝ”๋”๋‹˜์˜ ์˜์ƒ๊ณผ ์ œ๋กœ์ดˆ๋‹˜์˜ ํ›…์— ๋Œ€ํ•œ ์˜์ƒ์ด ๋„์›€์ด ๋งŽ์ด ๋๋‹ค. ํ›…์€ ํ•จ์ˆ˜ํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ state.. 2021. 1. 6.
[Flutter #3] Xylophone & Quizzler ๐Ÿ“š์ด ํฌ์ŠคํŠธ๋Š” ์•ˆ์ ค๋ผ์˜ ์œ ๋ฐ๋ฏธ ํ”Œ๋Ÿฌํ„ฐ๊ฐ•์˜๋ฅผ ๋“ฃ๊ณ  ์ œ๊ฐ€ ์ฐพ์•„๋ณธ ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ž‘์„ฑํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค! ๐Ÿ“š ์˜ˆ์ „์— ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋…ธ์…˜์— ์ •๋ฆฌํ•ด๋†“์•˜๋˜๊ฑธ ๋‹ค์‹œ ๊ฐ€์ ธ์™€์„œ ์กฐ๊ธˆ ๋’ค์ฃฝ๋ฐ•์ฃฝํ•ด ๋ณด์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ•์˜์—์„œ ์“ฐ์˜€๋˜ ๊ฐœ๋… ์œ„์ฃผ์˜ ์งค๋ง‰์งค๋ง‰ํ•œ ์„ค๋ช…์ž…๋‹ˆ๋‹ค. ๐Ÿ˜“ Xylophone : Flutter Package ์‚ฌ์šฉ๋ฒ• Xylophone ํŒŒํŠธ์—์„œ๋Š” Flutter Package๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์œ„์ฃผ๋กœ ๋งŒ๋“ค์–ด์กŒ๋‹ค. Flutter Packages - text, sound, font ๋‹ค ๋„ฃ๋Š” ๋ฐฉ์‹ ๋™์ผํ•˜๋‹ค https://pub.dev/ ์—์„œ ์›ํ•˜๋Š” ํŒจํ‚ค์ง€๋ฅผ ๋‹ค์šด๋ฐ›๊ธฐ ๋‹ค์šด๋กœ๋“œ ์‚ฌ์ดํŠธ์— example๊ณผ ์„ค๋ช… ๋‹ค ์กด์žฌํ•˜๋‹ˆ๊นŒ ๊ทธ ์„ค๋ช…๋ณด๊ณ  ์•„๋ž˜์™€ ๊ฐ™์ด ์ฝ”๋“œ์— ์ž‘์„ฑํ•˜๋ฉด๋œ๋‹ค. dependencies: english_words : ^ 3.1.5.. 2021. 1. 5.
Input ํƒœ๊ทธ, ์†์„ฑ ์˜ค๋Š˜์€ ๊ทธ๋™์•ˆ ๋ฆฌ์•กํŠธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ ๋ฌด์ž‘์ • ๋”ฐ๋ผํ•˜๊ธฐ๋งŒ ๋ฐ”๋นด์—ˆ๋Š”๋ฐ, ์ญ‰ ์˜ˆ์ œ๋ฅผ ์ž‘์„ฑํ•ด์˜ค๋ฉด์„œ ๋น ์ง€์ง€์•Š๋Š” ํƒœ๊ทธ๋“ค์ด ์žˆ์—ˆ๋‹ค. inputํƒœ๊ทธ๊ฐ€ ์ฐธ ๋งŽ์ด ์“ฐ์˜€๋Š”๋ฐ ๊ณ„์† ์“ฐ๋ฉด์„œ ๊ณต๋ถ€๊ฐ€ ๋ถ€์กฑํ•ด์„œ ์ œ๋Œ€๋กœ ์“ฐ์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ์ข€ ์ฐพ์•„๋ดค๋‹ค. this.input = ref} type='password' value={this.state.password} onChange={this.handleChange} className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''} onKeyPress={this.onKeyPress} /> ์ด๋ ‡๊ฒŒ input ํƒœ๊ทธ๋ฅผ ์ž‘์„ฑํ• ๋•Œ ํƒœ๊ทธ ์•ˆ์— ์ž‘์„ฑ๋˜๋Š” ์†์„ฑ๋“ค์„ ๋” ๋‹ค์–‘ํ•˜๊ฒŒ ์•Œ๊ณ , ์ž˜ ํ™œ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋Š” ์ƒ๊ฐ์— ์ฐพ.. 2021. 1. 3.
[React] ์Šคํฌ๋กค๋ฐ•์Šค ์ฝ”๋“œ์— ์œ„์•„๋ž˜ ์ด๋™ ๊ธฐ๋Šฅ ๊ตฌํ˜„ ๐Ÿ“–๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ ๐Ÿ“– ์ฑ…์— ์žˆ๋Š” ref์˜ˆ์ œ์ธ ์Šคํฌ๋กค ๋ฐ•์Šค ์กฐ์ž‘ ์ฝ”๋“œ๋Š” '๋งจ๋ฐ‘์œผ๋กœ'๋ผ๋Š” ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์ž๋™์œผ๋กœ ์Šคํฌ๋กค์„ ๋งจ ๋ฐ‘์œผ๋กœ ๋‚ด๋ ค๊ฐ€๊ฒŒ ํ•ด์ฃผ๋Š” ๋‚ด์šฉ์ด๋‹ค. ํ•˜์ง€๋งŒ, ๋‚˜๋Š” ์—ฌ๊ธฐ์„œ ์‘์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ์Šคํฌ๋กค ๋ฐ•์Šค๊ฐ€ ์œ„, ์•„๋ž˜๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์—ˆ๋‹ค. ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃฌ์ง€ ์–ผ๋งˆ ๋˜์ง€ ์•Š์•„ ์ฒ˜์Œ์—๋Š” ์ด๋ฏธ ์ž‘์„ฑ๋˜์–ด์ ธ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์–ด๋””์„œ๋ถ€ํ„ฐ ์† ๋Œ€์•ผ ๋ ์ง€ ๋ง‰๋ง‰ํ–ˆ์ง€๋งŒ, ์•ž์—์„œ ํ–ˆ๋˜ ์˜ˆ์ œ๋“ค์„ ์ด์šฉํ•ด์„œ ๊ณง์žฅ ๋ฐฉ๋ฒ•์„ ์ฐพ์•„๋‚ผ ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ผ๋‹จ ์Šคํฌ๋กค์ด ๋‚ด๋ ค๊ฐ€์žˆ์„๋•Œ๋Š” ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ์˜ฌ๋ผ์™€์•ผํ•˜๊ณ , ์˜ฌ๋ผ๊ฐ€์žˆ์„ ๋•Œ๋Š” ๋‚ด๋ ค์™€์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒํ™ฉ์— ๋”ฐ๋ผ ๊ฐ’์ด ๋‹ฌ๋ผ์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ด์— ๋Œ€ํ•œ ์ดˆ๊ธฐ๊ฐ’๋“ค์„ ์„ค์ •ํ•ด์ค˜์•ผํ•œ๋‹ค. ์ด์— ๋”ฐ๋ผ ์•ž ์žฅ์—์„œ์˜ ์˜ˆ์ œ๋“ค์„ ๋– ์˜ฌ๋ ค์„œ state์— ๋Œ€ํ•œ ์ดˆ๊ธฐ๊ฐ’์„ App.js์— ์„ค์ •ํ•ด์ฃผ์—ˆ๋‹ค. s.. 2021. 1. 2.
[React] ref ์˜ค๋Š˜์€ ref์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€ํ•ด๋ณด์•˜๋‹ค. ๋ฆฌ์•กํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๊ธฐ์ˆ  ์ฑ…์„ ๋ณด๋ฉด์„œ ๊ณต๋ถ€๋ฅผ ํ•˜๋‹ค๊ฐ€ ref์— ๋Œ€ํ•ด์„œ ์ดํ•ด๊ฐ€ ๋ถ€์กฑํ•ด์„œ ๊ณต์‹๋ฌธ์„œ๋ฅผ ์ฐพ์•„๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค. ko.reactjs.org/docs/refs-and-the-dom.html ref(Reference) ref๋Š” ๋ ˆํผ๋Ÿฐ์Šค๋ผ๋Š” ๋œป์ธ๋ฐ, ์ด๋ฅผ ๋ฒˆ์—ญํ•˜๋ฉด ์ฐธ์กฐ๋ผ๋Š” ๋ง์ด๋‹ค. ๊ณผ์—ฐ ์ฝ”๋”ฉ์—์„œ ์ฐธ์กฐ๋ผ๋Š” ๊ฒƒ์€ ์–ด๋–ค ๊ฒƒ์„ ๋œปํ•˜๋Š” ๊ฒƒ์ผ๊นŒ? ์›๋ž˜ ๋‹ค๋ฅธ ์–ธ์–ด๋ฅผ ๋ฐฐ์šธ ๋•Œ, ์ฐธ์กฐ๋Š” ๋ณต์ œ์™€ ๋น„๊ต๊ฐ€ ๋˜์—ˆ์—ˆ๋‹ค. ๋ณต์ œ๋Š” ํŒŒ์ผ์„ ๋ณต์‚ฌํ•˜๋Š” ๊ฒƒ์ด๋ผ๋ฉด, ์ฐธ์กฐ๋Š” ๋ฐ”๋กœ๊ฐ€๊ธฐ๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ๊ณผ ๊ฐ™๋‹ค๊ณ  ๋น„์œ ๋˜์—ˆ๋‹ค. ์ฐธ์กฐ๋Š” ์›๋ณธ ํŒŒ์ผ์— ๋Œ€ํ•œ ์ฃผ์†Œ ๊ฐ’์ด ๋‹ด๊ฒจ์žˆ์–ด์„œ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ์ด ๋ฐ”๋กœ๊ฐ€๊ธฐ์— ์ ‘๊ทผํ–ˆ๋‹ค๋ฉด ์—ฌ๊ธฐ์— ์ €์žฅ๋œ ์›๋ณธ์˜ ์ฃผ์†Œ๋ฅผ ์ฐธ์กฐํ•ด์„œ ์›๋ณธ์˜ ์œ„์น˜๋ฅผ ์•Œ์•„๋‚ด๊ณ  ์›๋ณธ์— ๋Œ€ํ•œ ์ž‘์—…์„ ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•˜๋ฉด, ์›๊ฒฉ์œผ.. 2021. 1. 1.
Git branch ์˜ค๋ฅ˜ ํƒญ ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์Šคํ„ฐ๋””๋ฅผ ๋งŒ๋“ค๋ ค๊ณ  ์„ ๋ฐฐ๋ž‘ ๊นƒํ—™์— organization์„ ์ƒˆ๋กœ ํŒ ๋‹ค. ์„œ๋กœ ๊ณตํ†ต๋œ ๋ฌธ์ œ 2๊ฐœ๋ฅผ ์ผ์ฃผ์ผ๋™์•ˆ ๊ณ ๋ฏผํ•˜๊ณ  ํ’€์–ด๋ณด๋Š” ๊ณผ์ •์„ ํ†ตํ•ด ๋งŒ๋“ค์–ด ๋†“์€ ๊นƒํ—™ organization ๋ ˆํฌ ์•ˆ์— ์ž์‹ ์˜ ์ด๋ฆ„์ด ์žˆ๋Š” ํด๋” ์•ˆ์— ์ปค๋ฐ‹ํ•˜๊ธฐ๋กœ ๊ณ„ํšํ–ˆ๋‹ค! ๊ทธ๋ฆฌ๊ณ ๋Š” ๊ฐ์ž์˜ ๋ธŒ๋žœ์น˜๋กœ ์˜ฌ๋ ค์„œ ๋‚˜์ค‘์— mergeํ•˜๊ธฐ๋กœ ํ–ˆ๋Š”๋ฐ ์ด ๊ณผ์ •์—์„œ ์•„์ฃผ ๋งŽ์€ ์‹œํ–‰์ฐฉ์˜ค๋“ค์ด ์žˆ์—ˆ๋‹ค. ๊นƒํ—™์€ ํ˜‘์—…์˜ ํˆด์ด๋‹ค. ๊ทผ๋ฐ ์ฐธ ์–ด๋ ต๋‹ค....๐Ÿ˜Ÿ ์ฒ˜์Œ์—๋Š” PR์ด ์ œ๋Œ€๋กœ ๋˜๋Š” ๊ฒƒ ๊ฐ™์•˜๋Š”๋ฐ, ํ•œ ๋ฒˆ ์ถฉ๋Œ์ด ์ผ์–ด๋‚˜๋”๋‹ˆ ๊ณ„์† ๊ผฌ์˜€์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์„ ๋ฐฐ๋„ ๋‚˜๋„ ๊ณ„์† PR์„ ์‹œ๋„ํ–ˆ์ง€๋งŒ, PR์ด ์ œ๋Œ€๋กœ ์ผ์–ด๋‚˜์ง€ ์•Š๊ณ  ์žˆ์—ˆ๋‹ค. ๋จผ์ €, ์ €๋ฒˆ์— ์ž‘์„ฑํ•œ git PR์— ๋Œ€ํ•œ ํฌ์ŠคํŠธ์—๋Š” ๋ช…๋ น์–ด๋กœ ํ•˜์ง€ ์•Š๊ณ  ๊นƒํ—™ ํŽ˜์ด์ง€์—์„œ ํ–ˆ์—ˆ๋Š”๋ฐ ์ด๋ฒˆ์— ์ฒ˜์Œ์œผ๋กœ ๋ช…๋ น์–ด๋กœ ํ•ด๋ณด์•˜๋‹ค. ์ œ๊ฐ€ .. 2020. 12. 31.
๋ฐ˜์‘ํ˜•