์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- ํ๋ก ํธ์๋
- useEffect
- ์ฝ๋ฉํ ์คํธ
- ์๋ฐ์คํฌ๋ฆฝํธ
- Flex
- history api
- ๋ธ๋ก๊ทธ
- ์๊ณ ๋ฆฌ์ฆ
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- ํ๋ก๊ทธ๋๋จธ์ค
- Props
- REACT
- position
- Gatsby
- useRef
- ๋ฐ๋ธ์ฝ์ค
- float
- fetch API
- CSS
- Today
- Total
๋ชฉ๋ก์ ์ฒด ๊ธ (311)
Daehyunii's Dev-blog
1.1 ํ๋ก๊ทธ๋๋ฐ์ด๋? 1.2 ํ๋ก๊ทธ๋๋ฐ ์ธ์ด 1.3 ๊ตฌ๋ฌธ๊ณผ ์๋ฏธ ์ ์ผ ์ค์ํ๊ฑฐ ES6 ํ์ค์ด ์ ๋นํ๊ฐ? ์ธ์ด๋? ์ ๋๊ตฐ๊ฐ ์ธ์์ ์ผ๋ก>? ์ด๊ฒ์ด ์ ๋นํ๊ฐ ES6๋ ๋ง์ ๊ฐ์ ์ด ์์๋ค. ๊ณผ๊ฑฐ์๋ ํํ์ด ์์๋ค ๋๋. ์ ํ๋ฆฌ๋ ๊ฒฝ์ฐ๊ฐ ๋ฒ์ ์ ๊ทธ๋ ์ด๋์ ์ํด ์๋ค ๋๊ฒฉ๋ณ ex6 es6๊ฐ ์ ์ผ ์ค์ ajax, jquery ํ๋ฌผ ๊ฐ ์น ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋ ์ ์ผํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ค ๋ผ๋ ๊ฒ ๊ฐ์ฅ ์ค์ ์ธํฐํ๋ฆฌํฐ ์ธ์ด ์ปดํ์ผ๋ฌ ๋ฉํฐ ํจ๋ฌ๋ค์ ์ ์์ฆ ๋ค ๊ทธ๋ผ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์ด ์์ฆ ํธ๋ ๋๋ก ๋ ์ค๋ฆ(ํจ์ฌ๋๋ค๋ ๋ง์) ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์์ด๋์ด ์ค๋ฌด ๋ง์ด ์ฌ์ฉ ํ๋กํ ํ์ ๊ธฐ๋ฐ 03 ๊ฐ๋ฐ ํ๊ฒฝ ์ค์ vs ์ฝ๋ ๊ทธ๋ ํ ์ด์ผ๊ธฐ vs ์ฝ๋ ๋ฉ๋ชจ์ฅ ๊ฐ์ ๋๋ ์ฝ๋๊ฐ ์น ๋ธ๋ผ์ฐ์ ๋์๊ฐ๊ณ , vs๊ฐ ์์๊ฑฐ๋ผ ์๊ฐํ์ ์น ..
-๋จํญ ์ฐ์ ์ฐ์ฐ์ ๋จํญ ์ฐ์ ์ฐ์ฐ์ +,-๋ ์ซ์ ๊ฐ์ผ๋ก ํ๊ฐ๋์ง ์๋ ํํ์์ ๋ถ์ด๋ฉด ์ซ์ ๊ฐ์ผ๋ก ์๋ฌต์ ํ์ ๋ณํ์ด ์ผ์ด๋๋ค. console.log(+'1') // ์ซ์ ๊ฐ 1 console.lop(+true) // ์ซ์ ๊ฐ 1 console.lop(+false) // ์ซ์ ๊ฐ 0 console.lop(+undefined) // ์ซ์ ๊ฐ NaN ๊ทธ๋ฐ๋ฐ ์ดํญ ์ฐ์ ์ฐ์ฐ์๋ก ๋์ํ๋ ์ซ์ ๊ฐ์ผ๋ก ํ๊ฐ๋์ง ์๋ ํํ์์ ์ซ์ ๊ฐ์ผ๋ก ์๋ฌต์ ํ์ ๋ณํ์ด ์ผ์ด๋๋๋ฐ, ๊ทธ ๋ก์ง์ด ๊ถ๊ธํ๋ค. (๋ฌธ์์ด์ด 1๊ฐ ์ด์์ด๋ฉด ๋ฌธ์์ด ์ฐ๊ฒฐ ์ฐ์ฐ์๋ก ๋์ํ๊ธฐ ๋๋ฌธ์ ๋ฌธ์์ด ์ฐ๊ฒฐ ์ฐ์ฐ์๋ฅผ ์ ์ธํ ex) true, false, null) console.log(1+true) // ์ซ์ ๊ฐ 2 ์ ์ฝ๋ ์ฒ๋ผ true๋ ์ซ์ ๊ฐ 1..
-์ผํญ ์กฐ๊ฑด ์ฐ์ฐ์ var x = ์กฐ๊ฑด์(๋ถ๋ฆฌ์ธ ๊ฐ์ผ๋ก ํ๊ฐ๋๋ ํํ์) ? true๋ก ํ๊ฐ๋ ๋ ๋ฐํํ ๊ฐ : false๋ก ํ๊ฐ๋ ๋ ๋ฐํํ ๊ฐ ์ด๋, ์กฐ๊ฑด์์ด ๋ถ๋ฆฌ์ธ ๊ฐ์ผ๋ก ํ๊ฐ๋์ง ์์ผ๋ฉด ์๋ฌต์ ํ์ ๋ณํ์ ํ๊ฒ ๋๋๋ฐ, 1์ด์์ ์ซ์๋ true๋ก, 0์ false๋ก ๋ณํ๋๋ค. ๋ํ null, undefined๋ false๋ก ํ์ ๊ฐ์ ๋ณํ์ด ์ผ์ด๋๋๋ฐ, ๊ทธ ๋ก์ง์ด ๊ถ๊ธํ๋ค. 1) null์ ์ซ์๋ก ํ๋ณํ ํ๋ฉด 0์ด ๋๋๋ฐ, ๊ทธ๋ ๋ค๋ฉด null > 0 > false๋ก ๊ฐ๋๊ฒ์ธ์ง? 2) undefined์ ์ซ์๋ก ์๋ฌต์ ํ์ ๋ณํ ํ๋ฉด NaN์ด ๋๋๋ฐ, ์ด๋ป๊ฒ false๊ฐ์ผ๋ก ๋ณํ๋๋์ง? ๋ต : ์ผํญ ์กฐ๊ฑด ์ฐ์ฐ์์์ ์๋ฌต์ ํ์ ๋ณํ์ ์กฐ๊ฑด์์ด ๋ถ๋ฆฌ์ธ ๊ฐ์ผ๋ก ํ๊ฐ๋์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ์ด๋ค์ง๋ ๊ฒ์ด๋ค. ์ฆ..
08์ฅ ์ ์ด๋ฌธ ์ ์ด๋ฌธ์ ์กฐ๊ฑด์ ๋ฐ๋ผ ์ฝ๋ ๋ธ๋ก์ ์คํ ํ๊ฑฐ๋ ๋ฐ๋ณต ์คํ ํ ๋ ์ฌ์ฉํ๋ค. ์ผ๋ฐ์ ์ผ๋ก ์ฝ๋์ ํ๋ฆ์ ์์์ ์๋ ๋ฐฉํฅ์ผ๋ก ์คํ๋์ง๋ง, ์ ์ด๋ฌธ์ ์ฌ์ฉํ๋ฉด ์ฝ๋์ ์คํ ํ๋ฆ์ ์ธ์์ ์ผ๋ก ์ ์ดํ ์ ์๋ค. (์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ) 8.1 ๋ธ๋ก๋ฌธ === ์ฝ๋๋ธ๋ก === ๋ธ๋ก ๋ธ๋ก๋ฌธ์ 0๊ฐ ์ด์์ ๋ฌธ์ ์ค๊ดํธ('{ }')๋ก ๋ฌถ์ ๊ฒ์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ธ๋ก๋ฌธ์ ํ๋์ ์คํ ๋จ์๋ก ์ทจ๊ธํ๋ค. ๋ธ๋ก๋ฌธ์ ๋จ๋ ์ผ๋ก ์ฌ์ฉํ ์๋ ์์ผ๋ ์ผ๋ฐ์ ์ผ๋ก ์ ์ด๋ฌธ(์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ)์ด๋ ํจ์๋ฅผ ์ ์ํ ๋ ์ฌ์ฉํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค. ์ด๋ฌํ ๋ธ๋ก๋ฌธ์ ์์ฒด ์ข ๊ฒฐ์ฑ์ ๊ฐ๊ธฐ ๋๋ฌธ์ ๋ธ๋ก๋ฌธ์ ๋์๋ ์ธ๋ฏธ์ฝ๋ก ( ; )์ ๋ถ์ด์ง ์๋๋ค. 8.2 ์กฐ๊ฑด๋ฌธ ์กฐ๊ฑด๋ฌธ์ ์ฃผ์ด์ง ์กฐ๊ฑด์์ ํ๊ฐ ๊ฒฐ๊ณผ์ ๋ฐ๋ผ ์ฝ๋ ๋ธ๋ก์ ์คํ์ ๊ฒฐ์ ํ๋ค.(์กฐ๊ฑด์์ ๋ถ๋ฆฌ์ธ..
07์ฅ ์ฐ์ฐ์ ์ฐ์ฐ์๋ ํ๋ ์ด์์ ํํ์์ ๋์์ผ๋ก ์ฐ์ , ํ ๋น, ๋น๊ต, ๋ ผ๋ฆฌ, ํ์ , ์ง์ ์ฐ์ฐ ๋ฑ์ ์ํํด ํ๋์ ๊ฐ์ ๋ง๋ ๋ค. ํผ์ฐ์ฐ์๋ ๊ฐ์ผ๋ก ํ๊ฐ ๋ ์ ์๋ ํํ์์ด์ด์ผ ํ๋ฉฐ, ํผ์ฐ์ฐ์์ ์ฐ์ฐ์์ ์กฐํฉ์ผ๋ก ์ด๋ค์ง ์ฐ์ฐ์ ํํ์๋ ๊ฐ์ผ๋ก ํ๊ฐ๋ ์ ์๋ ํํ์์ด๋ค. 7.1 ์ฐ์ ์ฐ์ฐ์ ์ฐ์ ์ฐ์ฐ์๋ ํผ์ฐ์ฐ์๋ฅผ ๋์์ผ๋ก ์ํ์ ๊ณ์ฐ์ ์ํํด ์๋ก์ด ์ซ์ ๊ฐ์ ๋ง๋ ๋ค.(์ฐ์ ์ด ๋ถ๊ฐ๋ฅํ ๊ฒฝ์ฐ ์ซ์ ๊ฐ NaN์ ๋ฐํํ๋ค.) 7.1.1 ์ดํญ ์ฐ์ ์ฐ์ฐ์ ์ดํญ ์ฐ์ ์ฐ์ฐ์๋ 2๊ฐ์ ํผ์ฐ์ฐ์๋ฅผ ์ฐ์ ์ฐ์ฐํ์ฌ ์ซ์ ๊ฐ์ ๋ง๋ ๋ค. ์ดํญ ์ฐ์ ์ฐ์ฐ์๋ ํผ์ฐ์ฐ์์ ๊ฐ์ ๋ณ๊ฒฝํ๋ ๋ถ์ ํจ๊ณผ๋ ์๋ค. ์ดํญ ์ฐ์ ์ฐ์ฐ์ ์๋ฏธ ๋ถ์ ํจ๊ณผ + ๋ํ๊ธฐ ์์ - ๋นผ๊ธฐ ์์ * ๊ณฑํ๊ธฐ ์์ / ๋๋๊ธฐ ์์ % ๋๋จธ์ง ๋๋๊ธฐ ์..
05์ฅ ํํ์๊ณผ ๋ฌธ 5.1 ๊ฐ ๊ฐ์ด๋ ํํ์์ด ํ๊ฐ๋์ด ์์ฑ๋ ๊ฒฐ๊ณผ๋ฅผ ๋งํ๋ค. ํ๊ฐ๋ ์์ ํด์ํด์ ๊ฐ์ ์์ฑํ๊ฑฐ๋ ์ฐธ์กฐํ๋ ๊ฒ์ ์๋ฏธํ๋ค. var sum 10 + 20; // 30 //10 + 20์ ํ๊ฐ๋์ด ์ซ์ ๊ฐ 30์ ์์ฑํ๊ณ ์ซ์ ๊ฐ 30์ด ๋ณ์ sum์ ํ ๋น๋๋ค. ๋ณ์๋ ํ๋์ ๊ฐ์ ์ ์ฅํ๊ธฐ ์ํด ํ๋ณดํ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ ์์ฒด ๋๋ ๊ทธ ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ์๋ณํ๊ธฐ ์ํด ๋ถ์ธ ์ด๋ฆ์ด๋ผ๊ณ ํ๋๋ฐ, ๋ฐ๋ผ์ ๋ณ์์ ํ ๋น๋๋ ๊ฒ์ '๊ฐ'์ด๋ค. ๊ฐ์ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ์์ฑํ ์ ์๋ค. ์ ์์ ์ฒ๋ผ ์์ผ๋ก ์์ฑํ ์๋ ์์ง๋ง ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋ฐฉ๋ฒ์ '๋ฆฌํฐ๋ด'์ ์ฌ์ฉํ๋ ๊ฒ์ด๋ค. 5.2 ๋ฆฌํฐ๋ด ๋ฆฌํฐ๋ด์ด๋ ์ฌ๋์ด ์ดํดํ ์ ์๋ ๋ฌธ์ ๋๋ ์ฝ์๋ ๊ธฐํธ๋ฅผ ์ฌ์ฉํด ๊ฐ์ ์์ฑํ๋ ํ๊ธฐ๋ฒ์ ๋งํ๋ค. //์ซ์ ๋ฆฌํฐ๋ด 3 var n..
04์ฅ ๋ณ์ 4.1 ๋ณ์๋ ๋ฌด์์ธ๊ฐ? ์ ํ์ํ๊ฐ? ๋ณ์๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ธฐ ์ํ ํต์ฌ ๊ฐ๋ ์ด๋ค. ์ฌ๋์ ๋ชจ๋ ๊ธฐ์ต์ ๋๋์์ ํ๋ค. ํ์ง๋ง ์ปดํจํฐ๋ ์ฐ์ฐ๊ณผ ๊ธฐ์ต์ ์ํํ๋ ๋ถํ์ด ๋๋ ์ ธ ์๋ค. ์ฐ์ฐ์ CPU๋ฅผ ์ฌ์ฉํด์, ๊ธฐ์ต์ ๋ฉ๋ชจ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ค. ๋ฉ๋ชจ๋ฆฌ๋ ๋ฉ๋ชจ๋ฆฌ ์ ์ ์งํฉ์ฒด์ด๋ค. ๋ฉ๋ชจ๋ฆฌ ์ ํ๋์ ํฌ๊ธฐ๋ 1๋ฐ์ดํธ(8๋นํธ)์ด๋ฉฐ, ์ปดํจํฐ๋ 1๋ฐ์ดํธ ๋จ์๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅ ํ๊ฑฐ๋ ์ฝ์ด ๋ค์ธ๋ค. ๊ฐ ๋ฉ๋ชจ๋ฆฌ ์ ์ ๊ณ ์ ์ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๋ฅผ ๊ฐ๋๋ค. ์ปดํจํฐ๋ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ 2์ง์๋ก ์ฒ๋ฆฌํ๋ค(๋์์ , ์ด๋ฏธ์ง ๋ฑ๊ณผ ๊ฐ์ ๋ฐ์ดํฐ์ ์ข ๋ฅ์ ๋ฌด๊ดํ๊ฒ ์ ๋ถ 2์ง์๋ก ์ฒ๋ฆฌํจ) ex) 10 + 20; ์ด๋ผ๋ ์์, ์ซ์ ๊ฐ '10' '20' ์ ๊ณ ์ ์ ๋ฉ๋ชจ๋ฆฌ ์ฃผ์๋ฅผ ๊ฐ๊ณ ๋ฉ๋ชจ๋ฆฌ ์์์ ์์น์ 2์ง์๋ก ์ ์ฅ๋๊ณ , ..
์ฑ ์ฝ๊ธฐ ์์ ์ : ๊ฐ์๋ฅผ ํตํด ์ ๋ฐ์ ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ๊ด๋ จ ๋ด์ฉ๋ค์ ๋น ๋ฅด๊ฒ ์์๋ดค์ผ๋ฏ๋ก, ์ด์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ธฐ์ด ๊ฐ๋ ๋ฐ ๋์ ์๋ฆฌ๋ฅผ ์ค์ฌ์ผ๋ก ํ์ตํ๊ธฐ ์ํด ๋ณธ ์ฑ ์ ์ฝ์ด ๋๊ฐ๋ณด๋ ค ํฉ๋๋ค! 01์ฅ ํ๋ก๊ทธ๋๋ฐ 1.1 ํ๋ก๊ทธ๋๋ฐ์ด๋? : ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ์ฌ์ฉํด ์ปดํจํฐ์๊ฒ ์คํ์ ์๊ตฌํ๋ ์ผ์ข ์ ์ปค๋ฎค๋์ผ์ด์ ์ด๋ค. ๋ฌธ์ ํด๊ฒฐ ๋ฅ๋ ฅ์ ๋ฐํ์ผ๋ก ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ์์ ์ ์ํ ํ, ์ ํํ๊ณ ์์ธํ๊ฒ ์๊ตฌ์ฌํญ์ ์ปดํจํฐ์๊ฒ ์ค๋ช ํ๋ ์ผ๋ จ์ ๊ณผ์ ์ด๋ฉฐ, ๊ทธ ๊ฒฐ๊ณผ๋ฌผ์ด ์ฝ๋์ด๋ค. ์ด๋ฌํ ๊ณผ์ ์ ์ ์ฒ๋ฆฌํด ๋๊ฐ๊ธฐ ์ํด์๋ Computational thinking, ์ฆ ์ปดํจํ ์ฌ๊ณ ๋ฐฉ์์ด ํ์ํ๋ค. 1.2 ํ๋ก๊ทธ๋๋ฐ ์ธ์ด : ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ๋ฌธ์ ํด๊ฒฐ ๋ฐฉ์์ ๊ธฐ๊ณ์ด๋ก ์ปดํจํฐ์๊ฒ ์ ๋ฌํด์ผ ํ๋ค. ํ์ง๋ง, ๊ธฐ๊ณ์ด๋ ์ฌ๋๋ค์..