์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- branch ์ญ์
- ์ฝ๋๋ธ๋ก
- ๋ธ๋์น ํ์ธ
- branch ์์ฑ
- branch ํ์ธ
- Git๋ช ๋ น์ด
- ๋ธ๋์น ์์ฑ
- ์ฝ๋๋ธ๋ญ
- ![rejected]
- ๋ธ๋์น ์ญ์
- ๋งํฌ๋ค์ด
- markdown
- Today
- Total
๋ชฉ๋ก๐ค TIL(Today I Learned) (39)
DevLog
๐ป ์ค๋ ํ ์ผ React State & Props ๊ณต๋ถ React ์ด๋ฒคํธ์ฒ๋ฆฌ, ๋ฐ์ดํฐ ํ๋ฆ ๊ณต๋ถ ๐ค ์ค๋ ๋ฐฐ์ด ๊ฒ ๋งค์๊ฐ ์ง์คํ ๊ฒ ์ฒด๋ ฅ์ ๋ญ๋นํ์ง ๋ง ๊ฒ โ ๋ด์ผ ํด์ผ ํ ๊ฒ Twittler ์ ๊ณผ์ ์ดํดํ๋ฉฐ ๋ณต์ตํ๊ธฐ ์ ์ฒด ์ ๋ฆฌ
๐ป ์ค๋ ํ ์ผ 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๋ฅผ ๊ตฌํํด๋ณด๋ ๋ณด๊ธฐ์ ๊ทธ๋ด์ธํ ์นํ์ด์ง๋ฅผ ๋ง๋ค์ด ๋ณผ ์ ์์ด์ ๋ฌด์ฒ ๋ฟ๋ฏํ..
๐ป ์ค๋ ํ ์ผ React ๊ฐ๋ ๊ณต๋ถ(React์ 3๊ฐ์ง ํน์ง, JSX, React์ปดํฌ๋ํธ) React ์ด์ฉํ ํธ์ํ๋ฌ ์ปดํฌ๋ํธ ๊ตฌํ, ์กฐ๊ฑด๋ถ ๋ ๋๋ง ๊ธฐ์ ๊ตฌํ ๐ค ์ค๋ ๋ฐฐ์ด ๊ฒ React๋ (์ ์ธํ, ์ปดํฌ๋ํธ ๊ธฐ๋ฐ, ๋ฒ์ฉ์ฑ) ์ธ๊ฐ์ง ํน์ง์ ๊ฐ์ง๊ณ ์๋ค React๋ฅผ ์ฌ์ฉํ๋ฉด ๊ธฐ์กด์ DOM๊ณผ ๋ค๋ฅด๊ฒ CSS,JSX ๋ฌธ๋ฒ๋ง์ ๊ฐ์ง๊ณ ์น๊ฐ๋ฐ์ ํ ์ ์๊ฒ ๋์ด DOM ์ฝ๋๋ณด๋ค ๋ช ์์ ์ผ๋ก ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ฒ๋๋ค. React๋ JavaScript ๋ฌธ๋ฒ๊ณผ HTML ๋ฌธ๋ฒ์ ๋์์ ์ด์ฉํด ๊ธฐ๋ฅ๊ณผ ๊ตฌ์กฐ๋ฅผ ํ ๋์ ํ์ธํ ์ ์์ด ์ฝ๋ ๊ฐ๋ ์ฑ์ด ์ข์์ง๋ค. ๋ฆฌ์ํธ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ฐ์ ํ๊ฒ ๋๋ค๋ฉด ์ข ๋ ํจ์จ์ ์ผ๋ก ์ ์ง๋ณด์์ฑ ์ข๊ฒ ๊ฐ๋ฐ์ ํ ์ ์์ ๊ฒ ๊ฐ๋ค. โ ๋ด์ผ ํด์ผ ํ ๊ฒ ๋ฏธ๋ค๋ ์ฝํ๋ฆฟ ํ๊ธฐ ๋ฆฌ์ํธ ๊ณต๋ถ
๐ป ์ค๋ ํ ์ผ ๊ณ ์ฐจํจ์(์ฝ๋ฐฑํจ์) ๊ณต๋ถ ๊ณ ์ฐจํจ์ ์ฝํ๋ฆฟ, ์๊ณ ๋ฆฌ์ฆ ๊ณต๋ถ ๐ค ์ค๋ ๋ฐฐ์ด ๊ฒ ์์ ๋ฐฐ์ด ๊ฐ๋ ๋ค์ ๋ฐฐ์ด ์งํ์ ์ ๋ฆฌํ์ง ์๊ณ ๋ฏธ๋ค๋๋ ์ ์ ์์ฌ์ ์ดํ์ ์ฌํ๋๋ ๊ฐ๋ ๊ธฐ์ด๊ฐ ํ๋ค๋ฆฐ๋ค ใ ใ ๋ฐฐ์ด ๊ฒ์ ๋ฐ๋ก๋ฐ๋ก ์ดํดํ๊ณ ์ ๋ฆฌํ๋ ์ต๊ด์ ๊ฐ์ง์! ๊ณ ์ฐจํจ์๋ ์์ ๋ฐฐ์ด ์ค์ฝํ, ํด๋ก์ ๊ฐ๋ ์ ํ์คํ๊ฒ ์ง๊ณ ๋์ด๊ฐ์ผ ํ์คํ๊ฒ ์ดํดํ ์ ์์ ๊ฒ ๊ฐ๋ค. โ ๋ด์ผ ํด์ผ ํ ๊ฒ ๊ณ ์ฐจํจ์ ์ฝํ๋ฆฟ ํ๊ธฐ ๊ณ ์ฐจํจ์(์ฝ๋ฐฑํจ์) ๊ฐ๋ ์ ๋ฆฌ ํด๋ก์ , ์ค์ฝํ ๊ณต๋ถ ๋ฐ ์ ๋ฆฌ DOM ๋ณต์ต
๐ป ์ค๋ ํ ์ผ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ด์ฉํ ํ์๊ฐ์ ์ฐฝ ๊ฐ๊ตฌํ ๐ค ์ค๋ ๋ฐฐ์ด ๊ฒ ๋ฌด์๋ณด๋ค ์ค์ํ ๊ฑด ์ฒด๋ ฅ์ธ ๊ฒ ๊ฐ๋ค, ์ฒด๋ ฅ์ด ๋จ์ด์ง๋ ์ง์ค๋ ฅ๋ ๊ฐ์ด ๋จ์ด์ง๋ค ๋ชธ ๊ด๋ฆฌ์ ์ข ๋ ๋ ธ๋ ฅ์ ๊ธฐ์ธ์ฌ์ผ๊ฒ ๋ค. โ ๋ด์ผ ํด์ผ ํ ๊ฒ ์ ์ฒด์ ์ธ ๋ณต์ต ๊ณํ ์๋ฆฝ ๋ชธ ๊ด๋ฆฌ ์ ํ๊ธฐ
๐ป ์ค๋ ํ ์ผ javascript DOM์ ๊ฐ๋ ํ์ต DOM์ CRUD ์ฌ์ฉ๋ฒ ํ์ต ์ ํจ์ฑ ๊ฒ์ฌ ํ์ต ๐ค ์ค๋ ๋ฐฐ์ด ๊ฒ innerHTML๊ณผ textContent์ ์ฐจ์ด - ์ ์์๋ณด์ง ์๊ณ ์ฌ์ฉํ๋ค๊ฐ๋ ๋ณด์์ ์ทจ์ฝ์ฑ์ ๋ ธ์ถ๋ ์ ์์์ ๋๊ผ๋ค โ ๋ด์ผ ํด์ผ ํ ๊ฒ ํ๋ฃจ ๋ณต์ต์ ๊ผญ ํ๊ณ ๋ฐฐ์ด ๊ฒ๋ค ๊ผญ ๋ธ๋ก๊ทธ์ ์ ๋ฆฌํ์ ๋ชธ๊ด๋ฆฌ ์ ํ๊ธฐ
๐ป ์ค๋ ํ ์ผ javascript koans ๊ณผ์ ์งํ์ ํตํด ๋ณ์ ์ ์ธ๋ถํฐ ๊ตฌ์กฐ ๋ถํด ํ ๋น ๊น์ง ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ์ด ์ ๋ฐ์ ๋ํด ๊ณต๋ถํจ. Spread, Rest, ๊ตฌ์กฐ๋ถํด ๊ฐ๋ ๊ฐ๋จ ์ ๋ฆฌ ๐ค ์ค๋ ๋ฐฐ์ด ๊ฒ javascript koans๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ์ ๋ํด ์์ ์ฝ๋์ ์ฃผ์๋ค์ ํตํด ์์ธํ๊ฒ ์ค๋ช ๋์ด ์์ผ๋ ๋๊ณ ๋๊ณ ๊บผ๋ด์ ์ฝ์ด ๋ด์ผ๊ฒ ๋ค. ํ์ดํ๋ก๊ทธ๋๋ฐ์ ํ๋ฉด์ ์ค๋ ฅ์ด ๋ฐ์ด๋ ๋๋ฃ๋ค์ด ๋ง์ด ๋ณด๋ ๊ฒ ๊ฐ๋ค. ๊ทธ๋ด ๋ ๋ง๋ค ๋ถ์กฑํ ๋ด ๋ชจ์ต์ ๋ณด๋ฉฐ ๋ด์ฌ ์์ํ๊ธฐ๋ ํ์ง๋ง ๋๋ฃ๋ค์ ํตํด ์๊ทน์ ๋ฐ์ ๋ ์ฑ์ฅํ ์ ์์ ๊ฒ ๊ฐ๋ค. โ ๋ด์ผ ํด์ผ ํ ๊ฒ ๋ฐ๋ฆฐ ๊ฐ๋ ์ ๋ฆฌ (๋ฐฐ์ด, ๊ฐ์ฒด) ํ๋ฃจ ๋ณต์ต(DOM ๊ฐ๋ ) ์ฌ์ ๋ ๋ ์ ๋ณด์ฒ๋ฆฌ ๊ธฐ์ฌ ๊ณต๋ถ