๋ชฉ๋ก๐Ÿค” TIL(Today I Learned) (39)

DevLog

TIL(6/7)

๐Ÿ’ป ์˜ค๋Š˜ ํ•œ ์ผ React SPA(Single-Page Application) ๊ฐœ๋… ๊ณต๋ถ€ Single-Page Application : SPA๋Š” ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์™„์ „ํžˆ ์ƒˆ๋กœ์šด ํŽ˜์ด์ง€๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ํ™”๋ฉด์„ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ๋ฐ์ดํ„ฐ๋งŒ ์„œ๋ฒ„์—์„œ ์ „๋‹ฌ๋ฐ›์•„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•˜๋Š” ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋‚˜ ์›น ์‚ฌ์ดํŠธ๋ฅผ ๋งํ•ฉ๋‹ˆ๋‹ค. ์™€์ด์–ดํ”„๋ ˆ์ž„๊ณผ ๋ชฉ์—… ๊ฐœ๋… ๊ณต๋ถ€ React์—์„œ npm์œผ๋กœ React Router DOM์„ ์„ค์น˜(npm install react-router-dom)ํ•˜๊ณ  ์‚ฌ์šฉ React Router DOM๋ฅผ ์ด์šฉํ•˜์—ฌ SPA๋ฅผ ๊ตฌํ˜„ ๐Ÿค” ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ React Router DOM๋ฅผ ์‚ฌ์šฉํ•ด์„œ SPA๋ฅผ ๊ตฌํ˜„ํ•ด๋ณด๋‹ˆ ๋ณด๊ธฐ์— ๊ทธ๋Ÿด์‹ธํ•œ ์›นํŽ˜์ด์ง€๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ์ˆ˜ ์žˆ์–ด์„œ ๋ฌด์ฒ™ ๋ฟŒ๋“ฏํ•˜..

TIL(6/4)

๐Ÿ’ป ์˜ค๋Š˜ ํ•œ ์ผ React ๊ฐœ๋… ๊ณต๋ถ€(React์˜ 3๊ฐ€์ง€ ํŠน์ง•, JSX, React์ปดํฌ๋„ŒํŠธ) React ์ด์šฉํ•œ ํŠธ์œ„ํ‹€๋Ÿฌ ์ปดํฌ๋„ŒํŠธ ๊ตฌํ˜„, ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง ๊ธฐ์ˆ  ๊ตฌํ˜„ ๐Ÿค” ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ React๋Š” (์„ ์–ธํ˜•, ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜, ๋ฒ”์šฉ์„ฑ) ์„ธ๊ฐ€์ง€ ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ์กด์˜ DOM๊ณผ ๋‹ค๋ฅด๊ฒŒ CSS,JSX ๋ฌธ๋ฒ•๋งŒ์„ ๊ฐ€์ง€๊ณ  ์›น๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์–ด DOM ์ฝ”๋“œ๋ณด๋‹ค ๋ช…์‹œ์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ๋œ๋‹ค. React๋Š” JavaScript ๋ฌธ๋ฒ•๊ณผ HTML ๋ฌธ๋ฒ•์„ ๋™์‹œ์— ์ด์šฉํ•ด ๊ธฐ๋Šฅ๊ณผ ๊ตฌ์กฐ๋ฅผ ํ•œ ๋ˆˆ์— ํ™•์ธํ•  ์ˆ˜ ์žˆ์–ด ์ฝ”๋“œ ๊ฐ€๋…์„ฑ์ด ์ข‹์•„์ง„๋‹ค. ๋ฆฌ์—‘ํŠธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ฐœ๋ฐœ์„ ํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์ข€ ๋” ํšจ์œจ์ ์œผ๋กœ ์œ ์ง€๋ณด์ˆ˜์„ฑ ์ข‹๊ฒŒ ๊ฐœ๋ฐœ์„ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. โœ… ๋‚ด์ผ ํ•ด์•ผ ํ•  ๊ฒƒ ๋ฏธ๋ค„๋‘” ์ฝ”ํ”Œ๋ฆฟ ํ’€๊ธฐ ๋ฆฌ์—‘ํŠธ ๊ณต๋ถ€

TIL(6/3)

๐Ÿ’ป ์˜ค๋Š˜ ํ•œ ์ผ ๊ณ ์ฐจํ•จ์ˆ˜(์ฝœ๋ฐฑํ•จ์ˆ˜) ๊ณต๋ถ€ ๊ณ ์ฐจํ•จ์ˆ˜ ์ฝ”ํ”Œ๋ฆฟ, ์•Œ๊ณ ๋ฆฌ์ฆ˜ ๊ณต๋ถ€ ๐Ÿค” ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ ์•ž์„œ ๋ฐฐ์šด ๊ฐœ๋…๋“ค์„ ๋ฐฐ์šด ์งํ›„์— ์ •๋ฆฌํ•˜์ง€ ์•Š๊ณ  ๋ฏธ๋ค„๋‘๋‹ˆ ์ ์  ์Œ“์—ฌ์„œ ์ดํ›„์— ์‹ฌํ™”๋˜๋Š” ๊ฐœ๋… ๊ธฐ์ดˆ๊ฐ€ ํ”๋“ค๋ฆฐ๋‹ค ใ…œใ…œ ๋ฐฐ์šด ๊ฒƒ์€ ๋ฐ”๋กœ๋ฐ”๋กœ ์ดํ•ดํ•˜๊ณ  ์ •๋ฆฌํ•˜๋Š” ์Šต๊ด€์„ ๊ฐ€์ง€์ž! ๊ณ ์ฐจํ•จ์ˆ˜๋Š” ์•ž์„œ ๋ฐฐ์šด ์Šค์ฝ”ํ”„, ํด๋กœ์ € ๊ฐœ๋…์„ ํ™•์‹คํ•˜๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐ€์•ผ ํ™•์‹คํ•˜๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. โœ… ๋‚ด์ผ ํ•ด์•ผ ํ•  ๊ฒƒ ๊ณ ์ฐจํ•จ์ˆ˜ ์ฝ”ํ”Œ๋ฆฟ ํ’€๊ธฐ ๊ณ ์ฐจํ•จ์ˆ˜(์ฝœ๋ฐฑํ•จ์ˆ˜) ๊ฐœ๋… ์ •๋ฆฌ ํด๋กœ์ €, ์Šค์ฝ”ํ”„ ๊ณต๋ถ€ ๋ฐ ์ •๋ฆฌ DOM ๋ณต์Šต

TIL(5/31)

๐Ÿ’ป ์˜ค๋Š˜ ํ•œ ์ผ javascript koans ๊ณผ์ œ ์ง„ํ–‰์„ ํ†ตํ•ด ๋ณ€์ˆ˜ ์„ ์–ธ๋ถ€ํ„ฐ ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น ๊นŒ์ง€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ์ „๋ฐ˜์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•จ. Spread, Rest, ๊ตฌ์กฐ๋ถ„ํ•ด ๊ฐœ๋… ๊ฐ„๋‹จ ์ •๋ฆฌ ๐Ÿค” ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ javascript koans๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ•์— ๋Œ€ํ•ด ์˜ˆ์‹œ ์ฝ”๋“œ์™€ ์ฃผ์„๋“ค์„ ํ†ตํ•ด ์ž์„ธํ•˜๊ฒŒ ์„ค๋ช…๋˜์–ด ์žˆ์œผ๋‹ˆ ๋‘๊ณ ๋‘๊ณ  ๊บผ๋‚ด์„œ ์ฝ์–ด ๋ด์•ผ๊ฒ ๋‹ค. ํŽ˜์–ดํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•˜๋ฉด์„œ ์‹ค๋ ฅ์ด ๋›ฐ์–ด๋‚œ ๋™๋ฃŒ๋“ค์ด ๋งŽ์ด ๋ณด๋Š” ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋Ÿด ๋•Œ ๋งˆ๋‹ค ๋ถ€์กฑํ•œ ๋‚ด ๋ชจ์Šต์„ ๋ณด๋ฉฐ ๋‚ด์‹ฌ ์†์ƒํ•˜๊ธฐ๋„ ํ•˜์ง€๋งŒ ๋™๋ฃŒ๋“ค์„ ํ†ตํ•ด ์ž๊ทน์„ ๋ฐ›์•„ ๋” ์„ฑ์žฅํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. โœ… ๋‚ด์ผ ํ•ด์•ผ ํ•  ๊ฒƒ ๋ฐ€๋ฆฐ ๊ฐœ๋… ์ •๋ฆฌ (๋ฐฐ์—ด, ๊ฐ์ฒด) ํ•˜๋ฃจ ๋ณต์Šต(DOM ๊ฐœ๋…) ์—ฌ์œ  ๋  ๋•Œ ์ •๋ณด์ฒ˜๋ฆฌ ๊ธฐ์‚ฌ ๊ณต๋ถ€

๐Ÿค” TIL(Today I Learned) 2021. 5. 31. 23:56