1st Month. In Boot Camp!

sanghun Leeยท2020๋…„ 8์›” 15์ผ
2

์œ„์ฝ”๋“œ

๋ชฉ๋ก ๋ณด๊ธฐ
2/3

1st Week

๐Ÿ˜œDay1. ํƒœ์–ด๋‚˜ ์ฒ˜์Œ๊ฐ€๋ณธ ๋ถ€ํŠธ์บ ํ”„์™€ ๊ณต์œ ์˜คํ”ผ์Šค

ํšŒ์‚ฌ๋ฅผ ๊ทธ๋งŒ๋‘๊ณ  ๋‘๋‹ฌ๋™์•ˆ์˜ ๋ฐฑ์ˆ˜์ƒํ™œ๋™์•ˆ ๋ฌด๋„ˆ์ง„ ์ƒํ™œํŒจํ„ด์„ ๋ฌผ๋ฆฌ์น˜๊ณ  10์‹œ์— ๋งž์ถฐ ์œ„์›Œํฌ ๊ณต์œ ์˜คํ”ผ์Šค 10์ธต์— ๋“ค์–ด๊ฐ”๋‹ค.

์ƒ๋‹ด์„ ๋ฐ›์„๋•Œ์™€๋Š” ๋‹ค์†Œ ๋‹ค๋ฅธ๋Š๋‚Œ์œผ๋กœ ๋‹ค๊ฐ€์™”์œผ๋ฉฐ ๋‚˜์—๊ฒŒ ์ฃผ์–ด์ง„ ํ‹ฐ์…”์ธ ์™€ ์Šคํ‹ฐ์ปค ๋“ฑ๋“ฑ์˜ ๊ธฐ๋…ํ’ˆ์ด ์žˆ์—ˆ๊ณ  ๋Œ€ํ‘œ๋‹˜(์‹ค๋ช…๊ณต๊ฐœ๋Š” ์ข€ ๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๐Ÿ™ƒ)๊ณผ ์—ฌ๋Ÿฌ ๋ฉ˜ํ† ๋‹˜๋“ค์ด ํ™˜์˜(์„ค๋ช…)ํ•˜๋Š” ์ž๋ฆฌ์—์„œ ๊ฐ์ž์˜ ์ด๋ฆ„๊ณผ ์งํ•จ(์—ญํ• )๋“ฑ์„ ์„ค๋ช…ํ•ด์ฃผ์…จ๋‹ค.

์ฃผ์–ด์ง„ Replit ์ž๋ฃŒ(Html,css)๋“ค์„ ํ’€๋ฉฐ ์ต์ˆ™ํ•œ๊ฐœ๋…๋“ค๊ณผ ์‹ ๊ธฐํ•œ ๊ฐœ๋…๋“ค์„ ์ ์‘ํ•ด ๋‚˜๊ฐ€๋ฉฐ ๋™์‹œ์— ์•ž์œผ๋กœ 3๊ฐœ์›”๋™์•ˆ(2๊ฐœ์›”์ธ๊ฐ€) ๋™๊ฑฐ๋™๋ฝํ•˜๊ฒŒ ๋  ๋ฏธ๋ž˜์˜ ๊ฐœ๋ฐœ์ž ๋™๊ธฐ๋‹˜๋“ค๊ณผ ํ•จ๊ป˜ ์ˆ˜๋‹ค๋„ ๋–จ๋ฉฐ ์ง€๋‚˜๊ฐ”๋‹ค.

๋†๋‹ด๋ฐ˜ ์ง„๋‹ด๋ฐ˜์œผ๋กœ ์‚ฌ์ „์Šคํ„ฐ๋”” ํŒ€์›๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผํ–ˆ๋Š”๋ฐ ์˜ค๋Š˜ ๊ท€๊ฐ€์‹œ๊ฐ„์ด ์•ž์œผ๋กœ 3๊ฐœ์›” ๋™์•ˆ ์ œ์ผ ๋น ๋ฅผ๊ฒƒ ๊ฐ™๋‹ค๋Š” ๋ง์„ ํ–ˆ๋Š”๋ฐ .. ์ง„์งœ์˜€๋‹ค.(10์‹œ 30๋ถ„์ด์—ˆ๋‹ค๐Ÿ’€)

๐Ÿ˜ขDay2~4. ๊ณต๋ถ€๋Š” ์–ด์ฐŒํ•ด์•ผํ•˜๋Š”๊ฑด๊ฐ€..

์ฃผ์–ด์ง„ ์ž๋ฃŒ๋ฅผ ํ’€๋ฉฐ ๊ธ‰๊ธ‰ํ•˜๊ฒŒ ์ง€๋‚˜๊ฐ”๋˜ ์–ด์ œ๋ฅผ ๋’ค๋กœ ํ•˜๊ณ  ์„ธ์…˜๋“ค์„ ๋ช‡๊ฐ€์ง€๋“ค์œผ๋ฉฐ ์ƒˆ๋กœ์šด ์ •๋ณด๋“ค์„ ์Šต๋“ํ•˜๋ฉฐ ๋˜ ์ฃผ์–ด์ง„ ์ž๋ฃŒ๋ฅผ ํ’€๊ณ  ๋ธ”๋กœ๊ทธ ์ •๋ฆฌ๋ฏธ์…˜์„ ํ†ตํ•ด ๊ฐœ๋…์„ ์ž ๊น ๋‹ค์žก๊ณ  ๋˜ ๋‹ค์‹œ ๋ฌธ์ œ๋ฅผ ํ’€๊ณ  ํ•˜๋ฉฐ ์›๋ž˜ ํด๋กœ๋‹์„ํ•˜๋ฉฐ ๋งŒ๋“  ์˜๋ฏธ๋„ ๋ชฐ๋ž๋˜ ํฌ๋กค๋ง ํŽ˜์ด์ง€๋ฅผ ๋ช‡๋ฒˆ์ด๋‚˜ ๋‹ค์‹œ๋ดค๋‹ค. ๊ทธ ์ฝ”๋“œ๋“ค์„ ๋ณด๋ฉฐ ๊ณผ์—ฐ ๋‚ด๊ฐ€ ์ด๋Ÿฐ๊ฒƒ์„ ๋งŒ๋“œ๋Š”๊ฒƒ์ด ๋‚˜์—๊ฒŒ ๋งŒ์กฑ๊ฐ์„ ์ค„๊ฒƒ์ธ๊ฐ€ ์‹œ๊ฐ์ ์œผ๋กœ ๋ณด์—ฌ์ฃผ๋Š” ์ด๋ฒคํŠธ๋“ค์„ ๋งŒ๋“ค๊ณ  (๋‚˜๋ฆ„ ๊ณผ์‹œํ•  ์ˆ˜๋„ ์žˆ์œผ๋‹ˆ)ํ•˜๋Š” ๊ฒƒ์ด ๋‚˜์—๊ฒŒ ๋งž๋Š”๊ฒƒ์ธ๊ฐ€๋ผ๋Š” ์ƒ๊ฐ์„ ๋ฐ˜๋ณตํ•˜์˜€๋‹ค.

๊ทธ๋ ‡๊ฒŒ Html,css ๊ธฐ๋ณธ๋ฌธ์ œ๋ฅผ ํ’€๊ณ  ๋ณธ๋ž˜ ๊ณต๋ถ€ํ•ด์™”๋˜ Python์˜ ์ž๋ฃŒ๋ฅผ ๋ฐ›๋Š”๊ฒƒ์ด ์•„๋‹Œ Js์˜ ๋ฌธ์ œ๋ฅผ ๋ฐ›๊ณ  ํ”„๋ก ํŠธ์—”๋“œ๋กœ์˜ ๊ธธ์„ ๊ฒฐ์ •ํ–ˆ๋‹ค.

๊ฒฐ์ •ํ•˜๊ณ  ๋‹ค์Œ๋‚  ํ”„๋ก ํŠธ ๊ด€๋ จ ์„ธ์…˜์„ ๋“ค์œผ๋ฉฐ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์–ด์—ฌ์œ(์ง„์‹ฌ)์‚ฌ์ดํŠธ๋“ค์„ ๋งŽ์ด ๋ณด๋ฉฐ ์ž˜ ๊ฒฐ์ •ํ–ˆ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

์‚ฌ์‹ค, ๋‚ด๊ฐ€ ํ•ด์™”๋˜ ์ผ์ด ์กฐ๊ธˆ ๋” ๋ฐฑ์—”๋“œ์Šค๋Ÿฌ์šด ๋ฉด๋ชจ๊ฐ€ ๋งŽ์•˜๊ธฐ์— ๋”์šฑ ๊บผ๋ ค์กŒ๋˜๋Š๋‚Œ๋„ ์žˆ๋‹ค.(๊ทธ๋ฆฌ๊ณ  node.js๋กœ ๊ฐ„๋‹จํ•œ ๋ฐฑ์—”๋“œ ์‹œ์Šคํ…œ์€ ๊ตฌํ˜„๊ฐ€๋Šฅํ•œ ์„ธ์ƒ์ด๋‹ˆ๊นŒ)

๐Ÿ˜จDay5~7. ์ด๋Œ€๋กœ๋Š” ์•ˆ๋œ๋‹ค.

์ฃผ์–ด์ง„ ์ž๋ฃŒ(Js)๋Š” ๊ฐœ์ธ์ ์œผ๋กœ ์นœํ–ˆ๋˜ ์–ธ์–ด๋„ ์•„๋‹ˆ๊ณ  Python์˜ ๋ช‡๋ช‡ ๊ฐœ๋…๋“ค๊ณผ ํ˜ผ๋™์ด ๋˜์–ด ๊ฐœ๋…์ •๋ฆฝ์— ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
(๋ฌผ๋ก , ์ด ์‚ฌ์ด์— ์—ฌ๋Ÿฌ ๋™๊ธฐ๋‹˜๋“ค๊ณผ ๋ฐฅ๋„ ๋งŽ์ด ๊ฐ™์ด ๋จน๊ณ  ์ด์•ผ๊ธฐ๋„ ๋งŽ์ด ๋‚˜๋ˆ„๋ฉฐ ํ˜ผ์ž ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ์˜๋ฏธ์žˆ๊ณ  ํž˜์ด๋‚ฌ๋‹ค.)

์šฐ์„  ๊ธฐ๋ณธ์ ์œผ๋กœ Python์˜ list๋Š” js์˜ array์ด๋ฉฐ dictionary๋Š” Object์ด๋‹ค.

์—ฌ๊ธฐ์„œ๋ถ€ํ„ฐ ์ ์ฐจ ๊ผฌ์—ฌ๊ฐ”๋˜ ๊ฐœ๋…๋“ค์„ ์ •๋ฆฌํ•˜๋Š”๋ฐ๋งŒ 2์ผ์ •๋„๋ฅผ ์‚ฌ์šฉํ•œ ๊ฒƒ๊ฐ™๋‹ค.

๋˜ ๋„ˆ๋ฌด ๋ฌธ์ œํ‘ธ๋Š” ๊ฒƒ์— ๊ธ‰๊ธ‰ํ•˜์—ฌ ๊ณ„์† ์ง€์‹์ด ํœ˜๋ฐœ๋˜๋Š” ๋Š๋‚Œ์ด๋“ค์–ด ๊ณ„์†ํ•ด์„œ velog๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ ๊ฐœ๋…์„ ์ •๋ฆฌํ•˜๊ณ  ์ •๋ฆฌํ•œ ํ”์ ์„ ๋‚จ๊ฒจ ๋‹ค์‹œ ์˜๋ฌธ์ด ๋“ค ๋•Œ ์ฐพ์•„๋ณด๋„๋ก ๋…ธ๋ ฅํ–ˆ๋‹ค.(์จ๋†“๊ณ  ์•„์ง ์ •๋…์„ ํ•œ๋ฒˆ๋„ ํ•˜์ง€ ์•Š์•˜๋‹ค.)

์—ฌํŠผ ์ด๋ ‡๊ฒŒ ๋‚˜์˜ 1์ฃผ์ฐจ๊ฐ€ ๋๋‚ฌ๋‹ค.

๊ทธ๋ ‡๊ฒŒ 11์‹œ ๊ท€๊ฐ€๋Š” ์ผ์ƒ์ด ๋˜์—ˆ๋‹ค ๐Ÿ˜‰

2nd Week

๐Ÿ˜จDay8~10. ํ™œ์šฉ์˜ ์‹œ์ž‘.

ํŠน์ • ์‚ฌ์ดํŠธ์˜ ํด๋กœ๋‹ ํ”„๋กœ์ ํŠธ๊ฐ€ ์‹œ์ž‘๋˜์—ˆ๋‹ค. ๋น ๋ฅด์‹ ๋ถ„๋“ค์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์ง„์ฆ‰์— ์ •๋ฆฌ๋ฅผ ํ•˜๊ณ  ๊ฐœ๋…์„ ํ™•๋ฆฝํ•˜๊ณ (์‚ฌ์ „์Šคํ„ฐ๋””๋•Œ ์—ด์‹ฌํžˆ ํ•ด์•ผํ•˜๋Š” ์ด์œ ๊ฐ€ ์—ฌ๊ธฐ์„œ ๋‚˜ํƒ€๋‚˜๋Š”๊ฒƒ๊ฐ™๋‹ค(๋‚˜๋Š” ํŒŒ์ด์ฌ์„ ํ›„...))

์—ฌํŠผ ์—ฌ์ฐจ์ €์ฐจ ํŠน์ •์‚ฌ์ดํŠธ์˜ ๊ตฌ์กฐ์™€ ๊พธ๋ฐˆ์„ ์œ„ํ•ด Html,Css๋ฅผ ์ด์šฉํ•˜์—ฌ ํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์—ˆ๊ณ  ๊ทธ ์™€์ค‘์— ์ƒˆ๋กญ๊ฒŒ ์•Œ๊ฒŒ๋œ ๋‹ค์–‘ํ•œ ๊ฐœ๋…๋“ค์„ ํ•˜๋‚˜์”ฉ ์ •๋ฆฌํ–ˆ๋‹ค(overflow-x ๋ผ๋˜์ง€.. ์•„๋งˆ ๋งž์„๋“ฏ.) ๊ทธ๋ฆฌ๊ณ  Sticky๋‚˜ position fixed,absoulte์˜ ๊ฐœ๋…์ด ํ•œ๊ป ์™€๋‹ฟ์•˜๋‹ค.
๋งˆ์ง€๋ง‰์œผ๋กœ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ์˜ ์ดํ•ด์™€ ์ ์šฉ์„ ์œ„ํ•ด ์• ์จ๋ณธ๊ฒƒ ๊ฐ™๋‹ค( ์‚ฌ์‹ค ๋‚˜์ค‘์— ๋‹ค ๊ฐˆ์•„์—Ž๊ธดํ–ˆ๋‹ค.)

๐Ÿ˜จDay9~11. Damn JS

๋ถ€๋žด๋ถ€๋žด ๊ตฌ์„ฑํ•œ html,css๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•˜์—ฌ js๋ฅผ ํ†ตํ•ด ํ•„์ˆ˜๋กœ ๊ตฌํ˜„ํ•ด์•ผ ํ•˜๋Š” ๋ช‡๊ฐ€์ง€ ๊ธฐ๋Šฅ๋“ค์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด eventlistener์˜ ๊ฐœ๋…์„ ์ฐพ์•„๋ณด๊ณ  ์ ์šฉํ•˜๋Š”๋ฐ ์‹œ๊ฐ„์ด ๋งŽ์ด ๋“ค์—ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค ์ฒ˜์Œ์จ๋ณด๋Š” ๊ฐœ๋…์ด๊ณ  ์ต์ˆ™์น˜ ์•Š์€ ๋ฉ”์„œ๋“œ๊ฐ€ ๋งŽ์•„ ์ ์‘์— ์• ๋ฅผ ๋จน์—ˆ๋‹ค.

์—ฌ๋Ÿฌ ๋™๊ธฐ๋ถ„๋“ค์ด ๋„์™€์ฃผ์‹ ๊ฒƒ๋“ค๋„ ์žˆ๊ณ  ํ˜ผ์ž์„œ ์‚ฝ์งˆํ•œ๊ฒƒ๋„ ๋งŽ๊ณ  .. ๋ญ ๊ทธ๋ ‡๊ฒŒ ๊ฒฐ๊ตญ์€ ๊ตฌ์„ฑํ•˜๊ฒŒ ๋˜๋Š” ๋‚˜์ž์‹ ์ด ์‹ ๊ธฐํ–ˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  git&github/ linux์˜ ๊ฐœ๋…์„ ๋ฐฐ์šฐ๋ฉฐ github repository์— commit๋„ ์‹œ์ž‘ํ•˜์˜€๋Š”๋ฐ ์ด๋•Œ๋ถ€ํ„ฐ ์ƒํ™ฉ์ด ํ•˜๋ฃจ์ •๋„ ์‹ฌ๊ฐํ•ด์กŒ๋‹ค.
์ด์œ ์ธ ์ฆ‰์Šจ ๋‚˜๋Š” ์‚ฌ์‹ค semantic์„ ์ž˜ ์•ˆ์ป๊ธฐ์— ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ๊ฐˆ์•„ ์—Ž๋Š” ๋ถˆ์ƒ์‚ฌ๊ฐ€ ์ƒ๊ฒผ๊ณ  ํ•˜๋ฃจ์ •๋„๋ฅผ ๊ทธ๋ ‡๊ฒŒ refactoringํ•˜๋Š” ์‹œ๊ฐ„์œผ๋กœ ์‚ฌ์šฉํ–ˆ๋‹ค.

๋ช‡์ผ์ง€๋‚œ ์ง€๊ธˆ ๋Œ์ด์ผœ ์ƒ๊ฐํ•ด๋ณด๋ฉด ๊ทธ ๊ณผ์ •์—์„œ ์ •๋ง ๋งŽ์€ ๊ณต๋ถ€๊ฐ€ ๋˜์—ˆ์ง€๋งŒ( ์ฐจ๋ผ๋ฆฌ ๋ฏธ๋ฆฌ ์ข€ ์•Œ๋ ค์คฌ์œผ๋ฉด.. ์•„๋‹ˆ ์•Œ๋ ค์คฌ๋Š”๋ฐ ๋‚ด๊ฐ€ ์•ˆํ•œ๊ฑฐ์ง€)ํž˜์€ ๋“ค์—ˆ๋‹ค.

๐Ÿ˜จDay12~14. Damn JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ๊ฐ€์ง€(๋ฒ„ํŠผํ™œ์„ฑํ™”, ์ข‹์•„์š”๊ธฐ๋Šฅ ์‚ญ์ œ๊ธฐ๋Šฅ ๋Œ“๊ธ€๊ธฐ๋Šฅ) ๋“ฑ์„ ๊ตฌํ˜„ํ•จ์— ์žˆ์–ด ๋‹ค๋ฅธ ๋™๊ธฐ๋ถ„๋“ค(์•„์ฃผ ์ƒ๊ฐ์ด ๋น„์ƒํ•˜๋‹ค ๋‹ฎ๊ณ ์‹ถ๋‹ค!!!)์˜ ๋„์›€์„ ๋ฐ›๊ณ  ๋˜! ์‚ฝ์งˆ์˜ ๊ณผ์ •์„ ๊ฒช์œผ๋ฉฐ ํ•˜๋‚˜ํ•˜๋‚˜์”ฉ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ 12~13์ผ์ฐจ๊ฐ€ ์†Œ๋ชจ๋œ๊ฒƒ๊ฐ™๋‹ค.
14์ผ์ฐจ๋Š” ๊ฐ„๋‹จํ•˜๊ฒŒ css์™€ html์˜ ๋ถˆํ•„์š”ํ•œ ์ฃผ์„์ด๋‚˜ tag๋“ค์„ ์ •๋ฆฌํ•˜๊ณ  ๋งˆ์ง€๋ง‰ ์ปค๋ฐ‹์„ ํ‘ธ์‰ฌํ•˜๊ณ  ์ง‘์—์™€์„œ ์ผ์ฐ์ด ์‰ฌ๊ณ ์žˆ๋‹ค.

2์ฃผ๊ฐ„ ๊ฒฝํ—˜ํ•œ ๋Š๋‚Œ์€ ํž˜๋“ ๋ฐ .. ๋ฐฉ์น˜๋œ ๋Š๋‚Œ์ธ๋ฐ .. ๋ง‰์ƒ ๋‹ค๊ฐ€์˜ฌ ๋ฆฌ์•กํŠธ๋ฅผ ๋ณด๋ฉด ์ง€๊ธˆ ๊ทธ๋‚˜๋งˆ ์—ฌ์œ ๋ฅผ ์ฃผ๋Š”๊ตฌ๋‚˜๋ผ๋Š” ์ƒ๊ฐ๋ฐ–์— ๋“ค์ง€ ์•Š๋Š”๋‹ค

๊ทธ๋ฆฌ๊ณ  ์ƒˆ๋กœ์ด ์•Œ๊ฒŒ๋œ(๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค ๋™๊ธฐ๋‹˜) ๋ชจ๋˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ผ๋Š” ์‚ฌ์ดํŠธ ๋ฅผ ์•ž์œผ๋กœ ํ•˜๋ฃจ์— 1์‹œ๊ฐ„์ด์ƒ์”ฉ์€ ๊ณต๋ถ€ํ•ด๋ณผ ์˜ˆ์ •์ด๋‹ค(๊ณ„ํš์€ ์–ธ์ œ๋‚˜ ์ˆ˜์ •๋œ๋‹ค) ์ด์œ ์ธ ์ฆ‰์Šจ
ํŒŒ์ด์ฌ์„ ๊ณต๋ถ€ํ• ๋•Œ ์ฝ”๋”ฉ๋„์žฅ์ด๋ผ๋Š” ์‚ฌ์ดํŠธ ์ •๋…์„ ํ†ตํ•ด ์–ธ์–ด๊ฐ€ ์–ด๋–ป๊ฒŒ ํ˜๋Ÿฌ๊ฐ€๋Š”์ง€์— ๋Œ€ํ•œ ๊ฐ์„ ์žก๊ณ  ์ž์ฃผ์‚ฌ์šฉ๋˜๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ๋„ˆ๋ฌด ์ข‹์€ ๋ฐฉ์‹์œผ๋กœ ์•Œ๊ฒŒ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค
๋”ฐ๋ผ์„œ ๋ฌด์กฐ๊ฑด.. 1์‹œ๊ฐ„์€ ํ• ๊ฒƒ์ด๋‹ค. :)

3rd Week

๐Ÿ˜‰15~ 17. React??..

React๋ผ๋Š”๊ฒƒ์„ ์ฒ˜์Œ ๋ฐฐ์› ๋‹ค
๋ฐฐ์šด๊ฒƒ์„ ํ†ตํ•ด JS DOM์„ ์‘์šฉํ•˜์—ฌ ์ž‘์„ฑํ•˜์˜€๋˜ ์ฝ”๋“œ๋ฅผ React๋กœ ์˜ฎ๊ฒจ componentํ™” ์‹œํ‚ค๋ผ๊ณ  ํ•˜์‹ ๋‹ค

๋‹น์ตœ ๋ญ”์†Œ๋ฆฐ์ง€ ๋ชจ๋ฅด๊ฒ ์—ˆ์œผ๋‚˜ .. ํ•˜๋‹ค๋ณด๋‹ˆ ๋˜ ํ• ๋งŒํ•œ ๊ฒƒ ๊ฐ™๊ธฐ๋„ํ•˜๋‹ค

์ค‘์š”ํ•œ ๊ฒƒ์€ Js ๊ธฐ๋ณธ์ง€์‹๊ณผ HTML/CSS๊ธฐ๋ณธ์ง€์‹์€ ์–ด๋””๊ฐ€์ง€ ์•Š๋Š” ๊ฒƒ์ธ๋ฐ
์ด ๊ฐœ๋…๋“ค์„ ์•ž์œผ๋กœ๋„ ์ž˜ ๊ฐ€์ง€๊ณ  ๊ฐˆ ์ˆ˜ ์žˆ์„์ง€ ์˜๋ฌธ์ด ๋“ ๋‹ค :) ..

๊ทธ๋ฆฌ๊ณ  ๋ฉ€๋ฆฌํ•˜๋ คํ–ˆ๋˜ ๋งฅ์ฃผ๋ฅผ ๋งค์ผ ๋งˆ์‹œ๊ณ  ์žˆ๋Š” ๊ธฐ์ดํ•œ(๋‹น์—ฐํ•œ)ํ˜„์ƒ์ด ๋‚˜ํƒ€๋‚œ๋‹ค.
์ƒ๊ฐ๋ณด๋‹ค ์ง€๊ฐ‘์ด ๋นจ๋ฆฌ ๋น„๋Š” ํ˜„์ƒ์ด ๋ฐœ์ƒํ•˜์—ฌ ๋”์šฑ ๊ณต์งœ๋ฅผ ์ฐพ๊ฒŒ ๋˜๋Š”๊ฒƒ์ธ๊ฐ€ ์‹ถ๊ธฐ๋„ํ•˜๋‹ค.

๐Ÿšด๐Ÿฝ18~19. Sass Component Router

Router์™€ Sass์˜ ๊ฐœ๋…์„ ๋ฐฐ์›Œ css์—๋„ ๋ณ€์ˆ˜๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ๋˜์—ˆ๋‹ค. ์–ธ์ œ ์จ๋จน์–ด๋ณผ๊นŒ ์‹ถ๊ธดํ•œ๋ฐ .. ๊ทธ๋ฆฌ๊ณ  ์‹ ๊ฒฝ์“ฐ์ด๋Š” ๋ช‡๋ช‡๊ฐ€์ง€์˜ ๋ณ€๊ฒฝ๋œ ํƒœ๊ทธ์™€ ์˜ˆ๋ฏผํ•œ React์˜ ๋ฐ˜์‘ ๋•๋ถ„์— ์†๋ณผ๊ฒŒ ๋งŽ์•„์ง€๊ณ  ๊ทธ๋ ‡๋‹ค.

์‹ค์ˆ˜๋ฅผ ์žก์•„์ฃผ๋‹ˆ ์ข‹์€๊ฒƒ์ด๋ผ ํ•ด์•ผํ• ์ง€๋„ ๋ชจ๋ฅด๊ฒ ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋ชจ๋˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊พธ์—ญ๊พธ์—ญ ์ฝ์–ด๋‚ด๊ณ  ์žˆ๋‹ค

์—ฌํŠผ ํŽ˜์ด์Šค๋ถ์€ ๋Œ€๋‹จํ•˜๋‹ค.

  • state,props๋Š” ๋„๋Œ€์ฒด ์™œ ์จ๋จน๋Š”๊ฒƒ์ผ๊นŒ Dom์ฒ˜๋Ÿผ ๊ณง๋ฐ”๋กœ ์žก์•„์„œ ์“ฐ๋ฉด ์•ˆ๋ ๊นŒ ? ์ œ๋ฐœ ??

๐Ÿšก20~21. ๊ณ ํ–ฅ๋ฐฉ๋ฌธ

๋Œ€๊ตฌ์— ๋ณผ์ผ์ด ์žˆ์–ด ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ ๊ธˆ์š”์ผ์ €๋…์ผ์ฐ ๋Œ€๊ตฌ๋กœ ๋‚ด๋ ค๊ฐ”๋‹ค
๊ฐ„๊น€์— 2์ผ์ •๋„ ์‰ฌ๊ณ  ๋Œ์•„์™”๋‹ค. ์‰ฌ๋ฉด์„œ ์ด๋Ÿฐ์ €๋Ÿฐ ์ƒ๊ฐ์„ ํ–ˆ๋Š”๋ฐ ๋‚˜๋ฆ„ ์ •๋ฆฌ๊ฐ€ ๋œ๊ฒƒ ๊ฐ™๊ธฐ๋„ํ•˜๋‹ค :0..๋ฆฌํ”„๋ ˆ์‹œ๊ฐ€ ๋œ ๊ฒƒ ๊ฐ™์œผ๋‹ˆ ๋‚จ์€ 9์ฃผ๋„ ์—ด์‹ฌํžˆ ํ•ด๋ด์•ผ๊ฒ ๋‹ค:)...

4th Week

๐Ÿšต๐Ÿพโ€โ™‚๏ธ22~23. React..REact.. REACT!!!!

state์™€ props๋ฅผ ์–ด๋Š์ •๋„ ํ™œ์šฉํ•˜๊ฒŒ ๋œ ๊ฒƒ ๊ฐ™์€ ์‹œ๊ฐ„์ด๋‹ค.
DOM์€ ์ง๊ด€์ ์ด๋‚˜ ์—ฌ๋Ÿฌ ์ค„๋กœ ์—‰์ผœ ์žˆ๋Š” flow๋ฅผ ๊ฐ€์กŒ๋‹ค๋ฉด state๋Š” ์ผ๊ด€์ ์ธflow๋ฅผ ์œ ์ง€ํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜๋„ ์•„์ง์€ ํ•œ๋ฒˆ์”ฉ ๋‹ต๋‹ตํ•˜์ง€๋งŒ ๋‹ค๋ฃจ๋Š” ๋ฒ”์œ„๊ฐ€ ์ปค์ง„๋‹ค๋ฉด state, props๊ฐ€ ํ›จ์”ฌ ์œ ๋ฆฌํ• ๊ฒƒ์ด๋ผ๋Š” ์ƒ๊ฐ์ด ํ™•์‹ ์ด ๋˜์—ˆ๋‹ค.

๋ฌด์—‡์ด๋“  ๊พธ์—ญ๊พธ์—ญ ๋งŒ๋“ค์–ด๋‚ด๋Š” ๋Š๋‚Œ์ด ์—†์ง€ ์•Š์•„ ์žˆ์œผ๋‚˜ ๊ทธ๋ž˜๋„ ์ผ๋‹จ ๋˜๋‹ˆ๊นŒ .. ๋ผ๋Š” ๋งˆ์Œ์œผ๋กœ ์•ˆ์œ„๋ฅผ ์ฐพ์•„๋ณด๋Š”๋ฐ ๋ถˆ์•ˆํ•˜๊ธฐ๋Š” ๋งคํ•œ๊ฐ€์ง€๋‹ค.

๊ทธ๋ž˜์„œ ๋”์šฑ์ด ์‹œ๊ฐ„์„ ์ชผ๊ฐœ์„œ ๋ชจ๋˜์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ณด๊ณ  ์žˆ๋‚˜ ์‹ถ๊ธฐ๋„ํ•˜๋‹ค.

์‚ฌ๊ณ ๊ฐ€ ์กฐ๊ธˆ์€ ํ™•์žฅ ๋œ ๊ฒƒ๊ฐ™๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์ฝ”๋“œ์นดํƒ€์˜ ๋ฌธ์ œ๋ฅผ ์‹ค ์„œ๋น„์Šค์—์„œ ์ ์šฉํ•˜๋ฉด ์–ด๋–ค ๋ฌธ์ œ์—์„œ ์“ฐ๊ฒŒ ๋ ๊นŒ๋ผ๋Š” ์ƒ๊ฐ์„ ์ž์ฃผํ•˜๊ฒŒ ๋œ๋‹ค.

๐Ÿ„๐Ÿฝโ€โ™‚๏ธ24~25. CDM, Fetch

์ด์ œ ์„œ๋ฒ„์™€ ํ•จ๊ป˜ ๊ฐ„๋‹ค.

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ๋ฐฑ์ด๋ž‘ ๋ญ”๊ฐ€๋ฅผ ํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ SUCCESS๋ผ๋Š” ๋ฌธ์ž๋ฅผ ์ฝ˜์†”์ฐฝ์—์„œ ๋ณด๊ธฐ๋„ ํ•ด๋ณด๊ณ  ํ† ํฐ์„ ๋ฐ›์•„๋ณด๊ธฐ๋„ ํ–ˆ๋‹ค.

componentDidMount์—์„œ fetch๋ฅผ ํ†ตํ•ด API๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ณ  ๊ทธ ํ˜•ํƒœ๋ฅผ ๋‚ด๊ฐ€ ํ•„์š”ํ•œ ํ˜•ํƒœ๋กœ ๊ฐ€๊ณตํ•˜์—ฌ state์— ์ €์žฅํ•œ๋‹ค.

๊ทธ๊ฒƒ์„ ๋ฐ˜๋ณต์ด ํ•„์š”ํ•œ ๊ณณ์— map์ด๋ผ๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ์จ์„œ ํ™œ์šฉํ•œ๋‹ค

์ฐธ ์‹ ๊ธฐํ•˜๋‹ค..

ํ•œ๋‹ฌ ์ „๋งŒํ•ด๋„ ํŒŒ์ด์ฌ ๊ธฐ์ดˆ100์ œ ๊ฒจ์šฐ ํ’€๋˜ ๋‚˜์˜€๋Š”๋ฐ JS์˜ ์ €๋Ÿฐ ๋ฉ”์„œ๋“œ๋ฅผ ๊ทธ๋ž˜๋„ ์ž…์— ๋‹ด์•„๋‚ด๊ณ  ์žˆ์œผ๋‹ˆ ๋ง์ด๋‹ค.

๐Ÿ…26~27. 9๊ธฐ!

9๊ธฐ๊ฐ€ ์ˆ˜๋ฃŒ๋ฅผ ํ–ˆ๋‹ค. ์•ž์œผ๋กœ ๊ทธ๋“ค์˜ ํ–‰๋ณด๊ฐ€ ๋‚˜์˜ ๋ฏธ๋ž˜์˜ reference๊ฐ€ ๋  ๊ฒƒ์„ ์ƒ๊ฐํ•˜๋‹ˆ ์ž˜ ๋˜์—ˆ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค ใ…‹..

๋‚˜๋Š” ๋‘๋‹ฌ๋’ค์— ์–ด๋–ป๊ฒŒ ๋˜์–ด์žˆ์„๊นŒ ๊ถ๊ธˆํ•˜๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ผ์ฐจ ํ”„๋กœ์ ํŠธ์˜ ์ง„ํ–‰์„ ์œ„ํ•ด Foundation(1st month)๊ฐ€ ๋งˆ๋ฌด๋ฆฌ ๋˜์—ˆ๋‹ค. ๊ทธ ์—ฌํŒŒ๋กœ ๋งŽ์€ ๋ถ„๋“ค์ด ์ฃผ๋ง์— ๋‚˜์˜ค์ง€ ์•Š๋Š”๋‹ค :)...

๋‹ค๋“ค ์ž๊ธฐ ์ •๋น„ ๋ฐ ํœด์‹์„ ์ทจํ•˜์‹œ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

๋งˆ๋ฌด๋ฆฌ ๊ณผ์ œ?๋กœ ๋Š๋‚€์ ๊ณผ ์ฝ”๋“œ๋“ฑ์„ ์ •๋ฆฌํ•ด๋ณด๋ผ๊ณ  ํ•˜์‹ ๋‹ค. ๊ธ€์ด ๋„ˆ๋ฌด ๊ธธ์–ด์ง€๋‹ˆ ๋‹ค๋ฅธ๊ธ€์— ์˜ฎ๊ฒจ์•ผ๊ฒ ๋‹ค :) ...

์—ฌํŠผ ์ด๋ ‡๊ฒŒ ์ฒซ๋ฒˆ์งธ ๋‹ฌ์ด ๋งˆ๋ฌด๋ฆฌ๊ฐ€ ๋˜์—ˆ๋‹ค.

profile
์•Œ๊ณ ๋ฆฌ์ฆ˜ ํ’€์ด๋ฅผ ๋‹ด์€ ๋ธ”๋กœ๊ทธ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€