์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
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 |
- REACT
- ๋ฐ๋ธ์ฝ์ค
- Props
- ์ฝ๋ฉํ ์คํธ
- ํ๋ก๊ทธ๋๋จธ์ค
- position
- history api
- ๋ธ๋ก๊ทธ
- useRef
- Flex
- ์๊ณ ๋ฆฌ์ฆ
- CSS
- float
- ํ๋ก ํธ์๋
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- Gatsby
- fetch API
- ์๋ฐ์คํฌ๋ฆฝํธ
- useEffect
- Today
- Total
Daehyunii's Dev-blog
1-01 ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑ์์น ~ 1-06 64๋นํธ๋ถ๋์์์ ๋ณธ๋ฌธ
1-01 ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑ์์น ~ 1-06 64๋นํธ๋ถ๋์์์
Daehyunii 2022. 6. 16. 19:14์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ณต๋ถํ๊ฒ ์์ ' ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive ' ์ฑ ๊ณผ inflearn ์ฌ์ดํธ๋ฅผ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ ์์์ ์ ์ฒญํ์ต๋๋ค.
์ฐ์ ํ์ด์ฌ๊ณผ๋ ๋ค๋ฅด๊ฒ ์ด๋ฒ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ ์์์ ๋จผ์ 1ํ๋ ์ ํ ํ์ ์ฑ ๊ณผ ๊ฐ์๋ฅผ ๋ณํํ๋ ๋ฐฉ๋ฒ์ผ๋ก ๊ณํ์ ์ธ์ ์ต๋๋ค.
'๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ Deep Dive' ์ฑ ์ ์๋น ๋ถ๋ถ ์ต๋ํ๊ฒ ๋๋ค๋ฉด ์ ๋ฐ์ ์ธ ํ๋ก๊ทธ๋๋ฐ ์ง์์ด ๋ง์ด ์์ผ ๊ฒ์ด๋ผ๋ ์ด์ผ๊ธฐ๋ฅผ ๋ค์๊ธฐ์
'์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ฌด์์ธ์ง' ๊ฐ์๋ฅผ ๋น ๋ฅด๊ฒ 1ํ๋ ๋ฃ๊ณ , ์ฑ ์ผ๋ก ๋์ด๊ฐ๋ ค๊ณ ํฉ๋๋ค.
*์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ๋ฌด์์ธ์ง ์ ๋๋ก ์ดํดํ์ง ๋ชปํ ์ํ์์ ๊ฐ์๋ฅผ ์งํํ๋ค ๋ณด๋, ์ ๊ฐ ์์ฑํ ๋ด์ฉ์ด ์ ํํ์ง ์๊ฑฐ๋
ํ๋ฆฐ ๋ถ๋ถ์ด ์์ ์๋ ์์ผ๋ฉฐ, ๋ฐฐ์ด ๋ด์ฉ๋ค์ ์ค์ฌ์ผ๋ก ๊ธฐ๋กํ๊ณ ์ ํฉ๋๋ค.
1-01 ์๋ฐ์คํฌ๋ฆฝํธ ์์ฑ ์์น
์ฐ์ , html์ ๊ตฌ์กฐ์ ๋ํด์ ๋ฐฐ์ ์ต๋๋ค.
html์ ๊ตฌ์กฐ๋ <html><head></head><body></body></html>์ ๊ตฌ์กฐ๋ก ๋๋ต์ ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๊ณ <body>์ <head>์ฌ์ด์
์ฝ๋๋ด์ฉ์ ์ ๋ ฅ ํ ์ ์๋ค๋ ๊ฒ์ ๋ฐฐ์ ์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ(?)์ ๋ณ๋๋ก ๋ง๋ค์ด html์ ๋ฃ์ ์ ์๋ค๋ ๊ฒ๋ ๋ฐฐ์ ์ต๋๋ค.
๋ณธ ๋ด์ฉ์ ๋ฐฐ์ฐ๋ฉด์ html๊ณผ JavaScript์ ๊ด๊ณ๊ฐ ๊ถ๊ธํ๊ณ , ์ ํํ ๊ตฌ์กฐ๋ฅผ ์ดํดํ๊ณ ์ถ์์ผ๋ ์ง๊ธ ๋จ๊ณ์์๋ ์ฐ์ ๋น ๋ฅด๊ฒ 1ํ๋ ์ ๋ชฉํ๋ก ๋์๊ธฐ ๋๋ฌธ์ ์์ธํ ๊ถ๊ธ์ฆ์ ๋ค์ ๊ณต๋ถํ๊ธฐ๋ก ํ๊ณ ๊ฐ์๋ฅผ ๊ณ์ ์ด์ด ๋๊ฐ์ต๋๋ค.
1-02 ์ฝ์
๊ฐ๋ฐ์ ๋๊ตฌ๋ ํฌ๋กฌ์ ํตํด console.log()๋ฅผ ํ์ฉ
(ํ์ด์ฌ์ ๋น๊ตํด ๋ณด์๋ฉด print()์ ๊ฐ์ ์ญํ ์ด์ง ์์๊น ํ๊ณ ์กฐ์ฌ์ค๋ฝ๊ฒ ๋น๊ตํด๊ฐ๋ฉฐ ๊ณต๋ถํ์ต๋๋ค.)
๊ฐ์์ ๋ด์ฉ์ ์์ธํ ์ค๋ช ์ ์์์ง๋ง, document.write()๋ฅผ ํตํด ์์ฑํ ๋ด์ฉ์ด ํ๋ฉด์ ์ถ๋ ฅ๋๋ ๊ฒ์ ํ์ธ
1-03 ์ฃผ์์ฒ๋ฆฌ
์ฃผ์ ์ฒ๋ฆฌ๋ ํ์ด์ฌ๊ณผ ๊ฐ์ ๊ฐ๋ ์ด๊ธฐ ๋๋ฌธ์ ํฌ๊ฒ ์ฝ๊ฒ ๋ฐ์ ๋ค์
ํ์ด์ฌ - #
html - //
์ฌ๋ฌ ๋ฌธ์ฅ ์ฃผ์ ์ฒ๋ฆฌ - /* ์ฌ๋ฌ ์ค์ ๋ด์ฉ ์ ๋ ฅ */
1-04 ๋ณ์์ ์ธ์
var : ๋์ผํ ์ด๋ฆ์ผ๋ก ๋ณ์๋ฅผ ์ฌ์ ์ธ ํ๋๊ฒ ๊ฐ๋ฅ
์ ์ธ๋ ๋ณ์์ ๊ฐ์ ์ฌํ ๋น ํ๋๊ฒ ๊ฐ๋ฅ
let : ๋์ผํ ์ด๋ฆ์ผ๋ก ๋ณ์๋ฅผ ์ฌ์ ์ธ ํ๋๊ฒ ๋ถ๊ฐ๋ฅ
์ ์ธ๋ ๋ณ์์ ๊ฐ์ ์ฌํ ๋น ํ๋๊ฒ ๊ฐ๋ฅ
const : ๋์ผํ ์ด๋ฆ์ผ๋ก ๋ณ์๋ฅผ ์ฌ์ ์ธ ํ๋๊ฒ ๋ถ๊ฐ๋ฅ
์ ์ธ๋ ๋ณ์์ ๊ฐ์ ์ฌํ ๋น ํ๋๊ฒ ๋ถ๊ฐ๋ฅ
1-05 ๋ฐ์ดํฐํ์
1. String : ๋ฌธ์์ด, " "๋ฅผ ํ์ฉ
2. Number : ์ซ์
3. undefined : ์๋ฌ๊ฐ ์๋ ํ๋์ ๋ฐ์ดํฐ ํ์ ์ผ๋ก ๋ด, ์กฐ๊ฑด๋ฌธ์์ ํ์ฉ ๊ฐ๋ฅํจ
4. Null : ์๋ฌ๊ฐ ์๋ ํ๋์ ๋ฐ์ดํฐ ํ์ ์ผ๋ก ๋ด, ์กฐ๊ฑด๋ฌธ์์ ํ์ฉ ๊ฐ๋ฅํจ
5. ์ค๋ธ์ ํธ : ํค์ ๋ฐธ๋ฅ๊ฐ์ ๊ฐ์ง๋ ๋ฐ์ดํฐ, { }๋ฅผ ํตํด ์ ์ธ(ํ์ด์ฌ์ ๋์ ๋๋ฆฌ์ ์ ์ฌ-์ฌ๊ฒฌ),
ex)var person = {}; ๋ผ ์ ์ธ ํ์๋, person.firstName = "์ด๋ฆ" ๊ณผ person[firstName] = "์ด๋ฆ" ๋ ๊ฐ์ง ๋ฐฉ์์ ํ์ฉ ํ ์ ์์
ํ์ด์ฌ๊ณผ ๋์ผํ๊ฒ ํค ๊ฐ์ด ์กด์ฌํ๋ ์ํ๋ก ๋ฐธ๋ฅ ๊ฐ์ ์ ๋ ฅํ๋ฉด ๋ฐธ๋ฅ ๊ฐ์ด ๋ณ๊ฒฝ๋๊ณ , ์๋ ํค๊ฐ์ ์ ๋ ฅํ ํ ๋ฐธ๋ฅ ๊ฐ์ ์ ๋ ฅํ๋ฉด ์๋กญ๊ฒ ํค์ ๋ฐธ๋ฅ ๊ฐ์ด ์ค๋ธ์ ํธ์ ์ถ๊ฐ ๋๋ ๊ฒ์ ํ์ธํจ
6. ๋ฐฐ์ด(Array) : ์ฌ๋ฌ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ง๋ ๋ฐ์ดํฐ, [ ]๋ฅผ ํตํด ์ ์ธ(ํ์ด์ฌ์ ๋ฆฌ์คํธ์ ์ ์ฌ-์ฌ๊ฒฌ),
๋ฐฐ์ด ๋ด๋ถ์๋ ๋ฌธ์์ด, ์ซ์, undefined, boolean ๋ฑ ๋ชจ๋ ๋ฐ์ดํฐ๊ฐ ๋ค์ด ์ฌ ์ ์์
๋ฐฐ์ด ๋ด ๋ฐ์ดํฐ ์ถ๊ฐ - .push()
๋ฐฐ์ด ๋ด ๋ฐ์ดํฐ ์นํ - ๋ฐฐ์ด๋ช [์ธ๋ฑ์ค๋ฒํธ] = ๋ณ๊ฒฝ ํ ๋ฐ์ดํฐ
๋ฐฐ์ด ๋ด element์ ํ์ธ - ๋ฐฐ์ด๋ช .length
7. Booloean : 'true','false' ๊ฐ ๋ง์ ๊ฐ์ง๋ ๋ฐ์ดํฐ ํ์
8.๋ฐ์ดํฐ ํ์ ์์๋ณด๊ธฐ : typeof ๋ฐ์ดํฐ๋ช
๋ฐฐ์ด๋ ์ค๋ธ์ ํธ ํ์ ์ผ๋ก ๋์ค๋ ์ ์ ์!
1-06 64๋นํธ๋ถ๋์์์
๊ฐ์๋ฅผ ๋ค์ผ๋ฉด์๋ ์ ํํ ๊ฐ๋ ์ ์ดํด ํ์ง ๋ชปํ์.
์๊ฐ ํ ๋ค์ ์ฑ ์ ํตํด ์์ธํ ์ค๋ช ์ ๋ค์ด๋ณด์์ผ ํ ๊ฒ ๊ฐ์
์ค๋์ ๋ง๋ฌด๋ฆฌ ํ๋ฉฐ :
JavaScript๋ผ๋ ์๋ก์ด ์ธ์ด๋ฅผ ๋ฐฐ์ด๋ค๊ณ ํ๋, ๊ฑฑ์ ๋ ๋ง์ด ๋๊ณ ๋ถ์ํ ๋ง์๋ ์์ง ์์ ์์์ง๋ง ํ์ด์ฌ์ ํตํด ์ธ์ด๊ฐ ๋ฌด์์ธ์ง ์ด๋์ ๋ ๊ฐ์ ์ก๊ณ ๋ค์ด์ค๋, ๋น๊ตํด ๊ฐ๋ฉฐ ๋ณผ ์ ์์ด ์ดํดํ๊ธฐ ์ฌ์ด ๋ถ๋ถ๋ ์์์ต๋๋ค. ๋ค๋ง ๋ฏธ์ธํ๊ฒ ์กฐ๊ธ์ฉ ๋ค๋ฅธ ๋ถ๋ถ๋ค์ด ๋ง๋ค๋๊ฒ ๋๊ปด์ ธ ์คํ๋ ค ํท๊ฐ๋ฆฌ์ง๋ ์์์ง ๊ฑฑ์ ์ด ๋๋ ๋ถ๋ถ๋ ์์ต๋๋ค.
'๐ Language & CS knowledge > JavaScript (๊ธฐ์ด)' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
3-14 Error ~ 4-04 ๋ฐ์ดํฐ ํ ์ด๋ธ (0) | 2022.06.19 |
---|---|
3-06 Template Literals ~ 3-13 ํด๋์ค (0) | 2022.06.17 |
2-07 JSON ~ 3-05 Arrow Function (0) | 2022.06.16 |
2-02 Number ๋ด์ฅํจ์ ~ 2-06 Math ๋ด์ฅํจ์ (0) | 2022.06.16 |
1-07 ์ฐ์ฐ์ ~ 2-01 String ๋ด์ฅํจ์ (0) | 2022.06.16 |