๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
[D+82] immersive์ฝ”์Šค ๋‘๋ฒˆ์งธ ํ‰๊ฐ€ D+82 - immersive์ฝ”์Šค ๋‘ ๋ฒˆ์งธ ํ‰๊ฐ€ - (2nd Hiring Assessments) ์‹œ๊ฐ„์ด ์—„์ฒญ ๋นจ๋ฆฌ ํ๋ฅด๊ณ  ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๋ฒŒ์จ ๋‘ ๋ฒˆ์งธ ์‹œํ—˜์ด๋ผ๋‹ˆ... ์‚ฌ์‹ค ์ฒซ ๋ฒˆ์งธ์™€ ๋‘ ๋ฒˆ์งธ ์‹œํ—˜์€ ํ‰๊ฐ€ ๋˜๊ธฐ ๋ณด๋‹ค๋Š” ๋‚ด ์ž์‹ ์ด ์ œ๋Œ€๋กœ ํ•™์Šตํ•˜๊ณ  ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ํ•™์Šต์ ˆ์ฐจ? ๊ฐ™์€ ๊ณผ์ •์ด๊ธฐ ๋•Œ๋ฌธ์— ํฐ ๋ถ€๋‹ด๊นŒ์ง€ ๊ฐ€์งˆ ์ •๋„๋Š” ์•„๋‹ˆ๊ฑด๋งŒ.... ๊ทธ๋ž˜๋„ ์‹œํ—˜์€ ์–ธ์ œ๋‚˜ ๊ธด์žฅ๋˜๋˜ ์ˆœ๊ฐ„์ด์—ˆ๋‹ค. ์ด๋ฒˆ์—๋Š” ๋ฆฌ์•กํŠธ์™€ ์„œ๋ฒ„์— ๊ด€๋ จ๋œ ๊ฐœ๋…์„ ๊ฐ€์ง€๊ณ  ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ ์‚ฌ์‹ค ๋ฌธ์ œ๋ฅผ ํ’€๊ธฐ์ „์— ๋ฆฌ์•กํŠธ ์Šคํ”„๋ฆฐํŠธ๋ฅผ ๋ช‡๋ฒˆ์ด๋‚˜ ๋ฐ˜๋ณตํ–ˆ๋Š”์ง€ ๋ชจ๋ฅธ๋‹ค. ๊ทธ๋งŒํผ ์—ด์‹ฌํžˆ ๋ณด์•˜๋Š”๋ฐ, ์—ญ์‹œ๋‚˜... ํ…Œ์ŠคํŠธ๋ฅผ ๋น„๊ตํ•ด๊ฐ€๋ฉด์„œ ๊ฒฐ๊ณผ๋„ ํ™•์ธํ•˜๊ณ  ์‹œ์ž‘์ด ์ž˜ ๋˜๋Š”์ง€ ๊นŒ์ง€ ์ƒ๊ฐ๋ณด๋‹ค ๊ดœ์ฐฎ์œผ๋ฉด์„œ๋„ ์–ด๋ ค์› ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜์„œ ์™ ์ผ๋กœ 6์‹œ ์ด์ „์— ๊ณผ์ œ๊ฐ€ ๋‹ค ๋๋‚˜์„œ ์ œ์ถœ์„ ํ•˜๋ ค.. 2021. 1. 9.
[D+81] React Hook D+81 - React Hook - (React Hook) React Hook ๊ธฐ์กด์— ์šฐ๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ์—์„œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•ด์ฃผ๊ธฐ ์œ„ํ•ด์„œ๋Š” function์ด ์•„๋‹Œ Class๋ฅผ ์‚ฌ์šฉํ•ด ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•ด ์™”๋‹ค. Class๋กœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•ด์˜ค๋ฉด์„œ ๋Š๋‚€์ ์€ ์ดˆ๊ธฐ์ƒํƒœ๋ฅผ ์„ค์ •ํ•ด์ฃผ๊ณ  ํŠน์ • ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์œ„ํ•ด์„œ ์ƒํƒœ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ๋ถˆ๋Ÿฌ์˜จ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ณผ์ •์—์„œ ๊ฝค๋‚˜ ๋ณต์žกํ•œ ๊ณผ์ •์ด๋ผ๋Š” ๊ฒƒ์„ ๋Š๊ผˆ๋‹ค. ๋ฟ๋งŒ this์— ๋Œ€ํ•œ ๊ฐœ๋…์ด ์–ด๋Š์ •๋„ ์žˆ์–ด์•ผ ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— bind๋ฅผ ์‚ฌ์šฉํ•ด์ฃผ๊ณ , this๋ฅผ ์ž˜ ์‚ฌ์šฉํ•ด์•ผ๋งŒ ํฐ ์‹ค์ˆ˜ ์—†์ด ์ƒํƒœ๋ฅผ ์ œ๋Œ€๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฝค ๋ถˆํŽธํ•œ ์ ์„ ํ•ด์†Œํ•˜๊ธฐ ์œ„ํ•ด Hook์ด ๋“ค์–ด์˜ค๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ ์–ด๋–ป๊ฒŒ Hook์„ ์‚ฌ์šฉํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณด๋ ค๊ณ  ํ•œ๋‹ค. useState import React, { useSta.. 2021. 1. 8.
[D+80] ์•Œ๊ณ ๋ฆฌ์ฆ˜๋ฌธ์ œ 5๋ฒˆ D+80 - ์•Œ๊ณ ๋ฆฌ์ฆ˜๋ฌธ์ œ 5๋ฒˆ - (Toy Problem 5) # 05 2*n ๋ณด๋“œ์— 2*1ํฌ๊ธฐ์˜ ํƒ€์ผ์„ ๊ฐ€์ง€๊ณ  ๋ณด๋“œ๋ฅผ ์ฑ„์šฐ๋Š” ๋ฐฉ๋ฒ•์˜ ๊ฒฝ์šฐ์˜ ์ˆ˜๋ฅผ ๋ฆฌํ„ดํ•˜๋Š” ๋ฌธ์ œ์˜€๋Š”๋ฐ ์‚ฌ์‹ค ๋ฌธ์ œ๋ฅผ ์ดํ•ดํ•˜๋Š”๋ฐ ์—„์ฒญ ์˜ค๋ž˜๊ฑธ๋ ธ๋‹ค. (ํ•œ 30๋ถ„์ •๋„....ใ…Žใ…Ž) ๋ฌธ์ œ๋ฅผ ์ดํ•ดํ•˜๊ณ  ๋‚˜์„œ๋„ ๋ฌธ์ œ๋ฅผ ๊ฑด๋“œ๋ฆด ์ˆ˜๊ฐ€ ์—†์–ด์„œ Reference๋ฅผ ๋ณด๋Š”๋ฐ ๋ฌธ์ œ์—์„œ memo ๋ฐฐ์—ด ์•ˆ์— ๊ฐ’์„ ์™œ ์ €๋ ‡๊ฒŒ ๋„ฃ๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋„ ์ดํ•ดํ•˜๋Š”๋ฐ ์—„์ฒญ ์˜ค๋ž˜๊ฑธ๋ ธ๋‹ค.. ๋‚˜์ค‘์— ๋‚ด๊ฐ€ ์ดํ•ดํ•œ ๋ฐ”๋กœ๋Š” memo๋Š” ์ˆœ์„œ๋Œ€๋กœ 2*0, 2*1, 2*2์˜ ๊ฒฝ์šฐ์˜ ์ˆ˜๋ฅผ ํ‘œํ˜„ํ•œ๊ฑฐ๋กœ ์žฌ๊ท€์ ์ธ ํ•จ์ˆ˜๋ฅผ ํ’€๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๊ฒƒ์ด์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํƒ€์ผ์€ ์„ธ๋กœ๋‚˜ ๊ฐ€๋กœ๋กœ ๋†“๊ณ  ๋ณด๋“œ์˜ ํฌ๊ธฐ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ธฐ ๋•Œ๋ฌธ์— ํ•จ์ˆ˜๋ฅผ ์ชผ๊ฐœ ํ•œ๊ฐœ๊ฐ€ ์•„๋‹Œ ์—ฌ๋Ÿฌ๊ฐœ์˜ ์žฌ๊ท€๋ฅผ ํ†ตํ•ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด๋‚˜๊ฐ€๋Š” ๊ฒƒ์— ๋Œ€ํ•ด ์—„์ฒญ ๊ฐํƒ„ํ–ˆ๋‹ค. ์•„.. 2021. 1. 6.
[D+79] ์•Œ๊ณ ๋ฆฌ์ฆ˜๋ฌธ์ œ 3 - 4๋ฒˆ D+79 - ์•Œ๊ณ ๋ฆฌ์ฆ˜๋ฌธ์ œ 3 - 4๋ฒˆ - (Toy Problem 3 - 4) # 03 ๋‘๊ฐœ์˜ ๋ฐฐ์—ด์„ ์ž…๋ ฅ๋ฐ›์•„ sample์ด base์˜ ๋ถ€๋ถ„์ง‘ํ•ฉ์ธ์ง€๋ฅผ ๊ตฌ๋ณ„ํ•˜๋Š” ๋ฌธ์ œ์˜€๋Š”๋ฐ ๊ธฐ๋ณธ์ ์ธ ๋ฌธ์ œ๋“ค์€ ๋‹ค ์™„์„ฑํ–ˆ์ง€๋งŒ ์•„์‰ฝ๊ฒŒ๋„ Advancedํ•œ ๋ฌธ์ œ๋Š” ํ†ต๊ณผํ•˜์ง€ ์•Š์•˜๋‹ค. ์‚ฌ์‹ค Advancedํ•œ ๋ฌธ์ œ๋กœ ํ…Œ์ŠคํŠธ๊ฐ€ ์•„์˜ˆ ๋Œ์•„๊ฐ€์ง€ ์•Š์•„์„œ ์ฝ˜์†”์ฐฝ์—์„œ ํ…Œ์ŠคํŠธ๋ฅผ ๋Œ๋ ค๋ณด์•˜๋‹ค ใ…Žใ…Žใ…Ž ์‹œ๊ฐ„ ๋ณต์žก๋„๋ฅผ ๊ฐœ์„ ํ•ด์„œ ๋ฌธ์ œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ์‰ฝ์ง€ ์•Š์•˜๋‹ค. ๋ž˜ํผ๋Ÿฐ์Šค์ฝ”๋“œ๋ฅผ ๋ดค๋Š”๋ฐ๋„ ์ดํ•ดํ•˜๋Š”๋ฐ ์‰ฝ์ง€ ์•Š์•„์„œ ์ธํ„ฐ๋„ท์— ๊ฒ€์ƒ‰์„ ํ†ตํ•ด ๋‚ด๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋ฅผ ์ฐธ๊ณ ๋กœ ์ž‘์„ฑํ•ด ๋ณด์•˜๋‹ค. ํ™•์ธํ•ด ๋ณด๋‹ˆ ๋‚˜๋Š” index๋ฅผ ๋ณ€์ˆ˜๋กœ ๋”ฐ๋กœ ์ฃผ๋ฉด์„œ ๊ณ„์‚ฐํ•˜์ง€ ์•Š์•˜๋Š”๋ฐ ์ €๋ ‡๊ฒŒ ํ•˜์ง€ ์•Š์œผ๋ฉด ํ…Œ์ŠคํŠธ๊ฐ€ ๋Œ์•„๊ฐ€์ง€ ์•Š๋Š” ๋‹ค๋Š”๊ฑธ ์•Œ์•˜๋‹ค. ์•„๋ฌด๋ž˜๋„ ์‹œ๊ฐ„ ๋ณต์žก๋„ ๊ฐœ์„ ์„ ์œ„ํ•ด ๊ผญ ๊ฑฐ์ณ.. 2021. 1. 5.
[D+78] React Lifecycle D+78 - React Lifecycle - ( ๋ฆฌ์•กํŠธ ์ƒ๋ช…์ฃผ๊ธฐ ) Lifecycle ๋ฆฌ์•กํŠธ์—์„œ์˜ ๋ผ์ดํ”„์‹ธ์ดํด์€ ์šฐ๋ฆฌ์˜ ์ธ์ƒ๊ณผ๋„ ๋น„์Šทํ•œ ๋ฉด์ด ์žˆ๋Š”๋ฐ ์ธ์ƒ์— ์žˆ์–ด์„œ ์ค‘์š”ํ•œ ์ˆœ๊ฐ„์„ ์ ์–ด๋ณด์ž๋ฉด • ํƒœ์–ด๋‚  ๋•Œ • ์„ฑ์ธ์ด ๋  ๋•Œ • ๊ฒฐํ˜ผ์„ ํ•  ๋•Œ • ์ฃฝ์Œ์„ ์•ž๋‘๊ณ  ์žˆ์„ ๋•Œ ๋ณดํŽธ์ ์œผ๋กœ ์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์ด ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ๋‹ค. ์ด์ฒ˜๋Ÿผ ๋ฆฌ์•กํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ์—์„œ๋„ ์ค‘์š”ํ•œ ์ˆœ๊ฐ„์ด ์กด์žฌํ•˜๋Š”๋ฐ ํฌ๊ฒŒ 3๊ฐ€์ง€๋กœ ์ƒ์„ฑ, ์—…๋ฐ์ดํŠธ, ์ œ๊ฑฐ๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋‹ค. ์ด๋•Œ ์ปดํฌ๋„ŒํŠธ์—์„œ๋Š” ์ค‘์š”ํ•œ ์ˆœ๊ฐ„๋งˆ๋‹ค ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์ด๋ฅผ ๋‹ค์ด์–ด๊ทธ๋žจ์œผ๋กœ ํ‘œํ˜„ํ•œ ๊ทธ๋ฆผ์ด ๋ฐ”๋กœ ์ด ์‚ฌ์ง„์ด๋‹ค. ๋ฆฌ์•กํŠธ์—์„œ๋Š” ์ด 3๊ฐ€์ง€๋ฅผ ํ‘œํ˜„ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉํ•˜๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ์žˆ๋Š”๋ฐ ๋ฐ”๋กœ componentDidMount, componentDidUpdate, componentWillUnmo.. 2021. 1. 5.
[D+77] Immersive 5์ฃผ์ฐจ D+77 - Immersive 5์ฃผ ์ฐจ - ( ์ฝ”๋“œ์Šคํ…Œ์ด์ธ  ์ด๋จธ์‹œ๋ธŒ ์ฝ”์Šค 5์ฃผ ์ฐจ ) ์‹œ๊ฐ„์ด ์–ด์ฐŒ๋‚˜ ๋น ๋ฅธ์ง€... ๋ฒŒ์จ 5์ฃผ์ฐจ๊ฐ€ ๋˜์—ˆ๋‹ค. ์ด๋ฒˆ์ฃผ๋Š” ์‚ฌ์‹ค ์ด์ „์— ๋ฐฐ์› ๋˜ ๊ฐœ๋…๋“ค์— ๋Œ€ํ•ด์„œ๋„ ๊ณต๋ถ€ํ•˜๋Š๋ผ ์ •์‹ ์—†์—ˆ๋˜ ํ•œ ์ฃผ ์˜€๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ์ง€๊ธˆ์€ ๋ณต์Šตํ•œ๋‹ค๊ณ  ์ž๋ฃŒ๊ตฌ์กฐ์™€ ๋ฆฌ์•กํŠธ๋ฅผ ๋™์‹œ์— ๊ณต๋ถ€ํ•ด ๋‚˜๊ฐ€๊ณ  ์žˆ์ง€๋งŒ ์•„๋ฌด๋ž˜๋„ ํ‰์†Œ ํ•˜๋˜ ๊ฒƒ ๋ณด๋‹ค 2๋ฐฐ์ •๋„๊ฐ€ ๋Š˜์–ด๋‚˜๋‹ค ๋ณด๋‹ˆ ์ •์‹ ์—†๊ณ  ๋จธ๋ฆฌ๊ฐ€ ํ„ฐ์งˆ ๊ฒƒ ๊ฐ™๋‹ค. ๐Ÿคฏ ๊ทธ๋ž˜๋„ ์•„์˜ˆ ์•ˆ๋ณด๊ณ  ๋ฐ”๋กœ ๋ฌด์–ธ๊ฐ€๋ฅผ ํ•˜๋Š” ๊ฒƒ ๋ณด๋‹ค๋Š” ํ›จ์”ฌ ์•Œ์ฐจ๊ณ  ๋ณด๋žŒ์ฐฌ ์‹œ๊ฐ„์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค. (๋ฌผ๋ก  ๋‚ด ๋จธ๋ฆฟ์†๋„ ์•Œ์ฐจ๋‹ค!) ์ด๋ฒˆ์ฃผ๋Š” ์‚ฌ์‹ค ์œ ๋… ๋” ์—ด์‹ฌํžˆ ํ•œ ๋Š๋‚Œ์ธ๋ฐ ์™œ๋ƒํ•˜๋ฉด ์ง€๋‚œ ๊ธฐ์ˆ˜๋•Œ ์„œ๋ฒ„์—์„œ ๋ง‰ํ˜€๋ฒ„๋ฆฐ ์ดํ›„๋ถ€ํ„ฐ ๋‹ค๋ฅธ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๋Š”๋ฐ์—๋„ ๋ฌธ์ œ ํ•ด๊ฒฐ์— ์–ด๋ ค์›€์„ ๊ฒช์—ˆ๋˜ ๊ฒƒ์„ ๋˜‘๋˜‘ํžˆ ๊ธฐ์–ตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฒˆ์—๋Š” ์„œ๋ฒ„์— ๋Œ€ํ•ด ์ ˆ๋Œ€๋กœ ์–ด๋ ค.. 2021. 1. 4.