μΌ | μ | ν | μ | λͺ© | κΈ | ν |
---|---|---|---|---|---|---|
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 |
- λ°λΈμ½μ€
- νλ‘κ·Έλλ¨Έμ€
- history api
- useEffect
- float
- Gatsby
- λ°λΈμ½μ€3κΈ°
- μκ³ λ¦¬μ¦
- position
- REACT
- useRef
- λΈλ‘κ·Έ
- Props
- CSS
- μ½λ©ν μ€νΈ
- μλ°μ€ν¬λ¦½νΈ
- νλ‘ νΈμλ
- fetch API
- Flex
- Today
- Total
Daehyunii's Dev-blog
04μ₯ λ³μ λ³Έλ¬Έ
04μ₯ λ³μ
Daehyunii 2022. 6. 22. 21:0804μ₯ λ³μ
4.1 λ³μλ 무μμΈκ°? μ νμνκ°?
λ³μλ νλ‘κ·Έλλ° μΈμ΄μμ λ°μ΄ν°λ₯Ό κ΄λ¦¬νκΈ° μν ν΅μ¬ κ°λ μ΄λ€.
μ¬λμ λͺ¨λ κΈ°μ΅μ λλμμ νλ€. νμ§λ§ μ»΄ν¨ν°λ μ°μ°κ³Ό κΈ°μ΅μ μννλ λΆνμ΄ λλ μ Έ μλ€. μ°μ°μ CPUλ₯Ό μ¬μ©ν΄μ, κΈ°μ΅μ λ©λͺ¨λ¦¬λ₯Ό μ¬μ©νλ€. λ©λͺ¨λ¦¬λ λ©λͺ¨λ¦¬ μ μ μ§ν©μ²΄μ΄λ€. λ©λͺ¨λ¦¬ μ νλμ ν¬κΈ°λ 1λ°μ΄νΈ(8λΉνΈ)μ΄λ©°, μ»΄ν¨ν°λ 1λ°μ΄νΈ λ¨μλ‘ λ°μ΄ν°λ₯Ό μ μ₯ νκ±°λ μ½μ΄ λ€μΈλ€. κ° λ©λͺ¨λ¦¬ μ μ κ³ μ μ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό κ°λλ€. μ»΄ν¨ν°λ λͺ¨λ λ°μ΄ν°λ₯Ό 2μ§μλ‘ μ²λ¦¬νλ€(λμμ , μ΄λ―Έμ§ λ±κ³Ό κ°μ λ°μ΄ν°μ μ’ λ₯μ 무κ΄νκ² μ λΆ 2μ§μλ‘ μ²λ¦¬ν¨)
ex) 10 + 20; μ΄λΌλ μμ, μ«μ κ° '10' '20' μ κ³ μ μ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό κ°κ³ λ©λͺ¨λ¦¬ μμμ μμΉμ 2μ§μλ‘ μ μ₯λκ³ , μλ°μ€ν¬λ¦½νΈ μμ§μ ν΅ν νκ° κ²°κ³ΌμΈ μ«μ κ° '30' λ κ³ μ μ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό κ°κ³ λ©λͺ¨λ¦¬ μμμ μμΉμ 2μ§μλ‘ μ μ₯λλ€.
μ μμμ νκ° κ²°κ³ΌμΈ μ«μ κ° '30'μ μ¬μ¬μ©ν μ μλ€. μ«μ κ° '30'μ μ¬μ¬μ©νκΈ° μν΄μλ ν΄λΉ λ©λͺ¨λ¦¬ 곡κ°μ μ§μ μ κ·Όνλ κ² μΈμλ λ°©λ²μ΄ μλ€. νμ§λ§ μ΄λ λ§€μ° μνν λ°©λ²μ΄κΈ° λλ¬Έμ μλ°μ€ν¬λ¦½νΈμμλ κ°λ°μμ μ§μ μ μΈ λ©λͺ¨λ¦¬ μ μ΄λ₯Ό νμ©νμ§ μλλ€. μ΄λ₯Ό μν΄ 'λ³μ'λΌλ λ©μ»€λμ¦μ μ 곡νλ€. λ³μλ, νλμ κ°μ μ μ₯νκΈ° μν΄ ν보ν λ©λͺ¨λ¦¬ κ³΅κ° μ체 λλ κ·Έ λ©λͺ¨λ¦¬ 곡κ°μ μλ³νκΈ° μν΄ λΆμΈ μ΄λ¦μ λ§νλ€. μ¦ κ°μ μμΉλ₯Ό κ°λ¦¬ν€λ μμ§μ μΈ μ΄λ¦μ΄λ€.
var result = 10 + 20;
μμ μ°μ°μ κ²°κ³ΌμΈ μ«μ κ° '30'μ κ³ μ ν λ©λͺ¨λ¦¬ μ£Όμλ₯Ό κ°κ³ μμμ λ©λͺ¨λ¦¬ 곡κ°μ μ μ₯λλλ°, μ΄λ μ μ₯λ μμμ λ©λͺ¨λ¦¬ 곡κ°μ 'result'λΌλ μμ§μ μΈ μ΄λ¦μ λΆμΈ κ²μ΄ λ°λ‘ λ³μλ€.
@κΈ°μ΄κ°λ
-λ³μλͺ : λ©λͺ¨λ¦¬ 곡κ°μ μ μ₯λ κ°μ μλ³ν μ μλ κ³ μ ν μ΄λ¦
-λ³μ κ° : λ³μμ μ μλ κ°
-ν λΉ : λ³μμ κ°μ μ μ₯νλ κ²
-μ°Έμ‘° : λ³μμ μ μ₯λ κ°μ μ½μ΄ λ€μ΄λ κ²
4.2 μλ³μ
λ³μ μ΄λ¦μ 'μλ³μ'λΌκ³ λ νλ€. μλ³μλ μ΄λ€ κ°μ ꡬλ³ν΄μ μλ³ν μ μλ κ³ μ ν μ΄λ¦μ λ§νλ€. μλ³μλ κ° κ·Έ μμ²΄κ° μλλΌ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό κΈ°μ΅νκ³ μλ€.μ¦, μλ³μκ° κΈ°μ΅νκ³ μλ λ©λͺ¨λ¦¬ μ£Όμλ₯Ό ν΅ν΄ λ©λͺ¨λ¦¬ 곡κ°μ μ μ₯λ κ°μ μ κ·Όνλ λ©μ»€λμ¦μ΄λ€.μλ³μλΌλ μ΄λ¦μ λ³μ μ΄λ¦μλ§ κ΅νν΄μ μ¬μ©νμ§ μλλ€. λ³μ, ν¨μ, ν΄λμ€ λ±μ μ΄λ¦μ λͺ¨λ μλ³μλ€. μ¦, λ©λͺ¨λ¦¬ μμ μ‘΄μ¬νλ μ΄λ€ κ°μ μλ³ν μ μλ μ΄λ¦μ λͺ¨λ μλ³μλΌκ³ λΆλ₯Έλ€. λ³μ, ν¨μ, ν΄λμ€ λ±μ μλ³μλ λ€μ΄λ° κ·μΉμ μ€μν΄μΌ νλ©°, μ μΈμ μν΄ μλ°μ€ν¬λ¦½νΈ μμ§μ μλ³μμ μ‘΄μ¬λ₯Ό μλ¦°λ€.
4.3 λ³μ μ μΈ
λ³μ μ μΈμ΄λ, κ°μ μ μ₯νκΈ° μν λ©λͺ¨λ¦¬ 곡κ°μ ν보νκ³ λ³μ μ΄λ¦κ³Ό ν보λ λ©λͺ¨λ¦¬ 곡κ°μ μ£Όμλ₯Ό μ°κ²°ν΄μ κ°μ μ μ₯ν μ μκ² μ€λΉνλ κ²μ΄λ€. λ³μλ₯Ό μ¬μ©νλ €λ©΄ var, let, const ν€μλλ₯Ό μ¬μ©νμ¬ λ°λμ μ μΈμ΄ νμνλ€.
var score; // λ³μ μ μΈ
μλ°μ€ν¬λ¦½νΈ μμ§μ λ³μ μ μΈμ 2λ¨κ³μ κ±°μ³ μννλ€
1λ¨κ³ - μ μΈλ¨κ³ : λ³μ μ΄λ¦μ λ±λ‘νκ³ μλ° μ€ν¬λ¦½νΈ μμ§μ λ³μμ μ‘΄μ¬λ₯Ό μλ¦°λ€.
2λ¨κ³ - μ΄κΈ°νλ¨κ³ : κ°μ μ μ₯νκΈ° μν λ©λͺ¨λ¦¬ 곡κ°μ ν보νκ³ μ묡μ μΌλ‘ undefinedλΌλ 'κ°'μ ν λΉνμ¬ μ΄κΈ°ννλ€.(J/Sμ νΉμ§)
μ΄κΈ°νλ₯Ό νλ μ΄μ λ μ°λ κΈ° κ°μ΄ λμ€λ κ²μ λ°©μ§νκΈ° μν¨μ΄λ€. λ³μλ λ°λμ μ μΈμ΄ νμνλ°, μ μΈνμ§ μμ μλ³μμ μ κ·Όνλ©΄ ReferenceError(μ°Έμ‘°μλ¬)κ° λ°μνλ€.
@κΈ°μ΄κ°λ
-ν€μλ : μλ°μ€ν¬λ¦½νΈ μμ§μ΄ μνν λμμ κ·μ ν μΌμ’ μ λͺ λ Ήμ΄λ€. μλ°μ€ν¬λ¦½νΈμμ§μ ν€μλλ₯Ό λ§λλ©΄ μμ μ΄ μνν΄μΌ ν μ½μλ λμμ μννλ€. ex) var ν€μλλ₯Ό λ§λλ©΄ var λ€μ μλ λ³μ μ΄λ¦μΌλ‘ μλ‘μ΄ λ³μλ₯Ό μ μΈνλ€.
-undefined : μμ νμ μ 'κ°'μ΄λ€.
-μ΄κΈ°ν : μΌλ°μ μΌλ‘ μΉκΈ°νλ λ³μκ° μ μΈλ μ΄ν μ΅μ΄λ‘ κ°μ ν λΉνλ κ²μ λ§νλ€.
-ReferenceError : μλ³μλ₯Ό ν΅ν΄ κ°μ μ°Έμ‘°νλ € νμ§λ§ μλ°μ€ν¬λ¦½νΈ μμ§μ΄ λ±λ‘λ μλ³μλ₯Ό μ°Ύμ μ μμ λ λ°μνλ μλ¬λ€.
@var ν€μλ
var ν€μλμ κ°μ₯ λνμ μΈ λ¨μ μ€ νλλ λΈλ‘ λ 벨 μ€μ½νλ₯Ό μ§μνμ§ μκ³ , ν¨μ λ 벨 μ€μ½νλ₯Ό μ§μνλ€λ κ²μ΄λ€. μ΄λ‘ μΈν΄ μλμΉ μκ² μ μ λ³μκ° μ μΈλμ΄ μ¬κ°ν λΆμμ©μ΄ λ°μνκΈ°λ νλ€.(μμΈν건 νμ )
4.4 λ³μ μ μΈμ μ€ν μμ κ³Ό λ³μ νΈμ΄μ€ν
console.log(score); // undefined
var score; // λ³μ μ μΈλ¬Έ
λ³μ μ μΈλ¬Έλ³΄λ€ λ³μλ₯Ό μ°Έμ‘°νλ μ½λκ° μμ μλ€. ReferenceErrorκ° λ°μν κ²μ²λΌ 보μ΄μ§λ§, undefinedκ° μΆλ ₯λλ€. κ·Έ μ΄μ λ λ³μ μ μΈμ΄ μμ€μ½λκ° ν μ€μ© μμ°¨μ μΌλ‘ μ€νλλ μμ , μ¦ λ°νμμ΄ μλλΌ κ·Έ μ΄μ λ¨κ³μμ λ¨Όμ μ€νλκΈ° λλ¬Έμ΄λ€. μλ°μ€ν¬λ¦½νΈ μμ§μ μμ€μ½λλ₯Ό ν μ€μ© μμ°¨μ μΌλ‘ μ€ννκΈ°μ μμ λ¨Όμ μμ€μ½λμ νκ° κ³Όμ μ κ±°μΉλ©΄μ μμ€μ½λλ₯Ό μ€ννκΈ° μν μ€λΉλ₯Ό νλ€. μ΄λ μλ°μ€ν¬λ¦½νΈ μμ§μ λ³μ μ μΈμ ν¬ν¨ν λͺ¨λ μ μΈλ¬Έμ μμ€μ½λμμ μ°Ύμ λ¨Όμ μ€ννλ€. κ·Έ ν λͺ¨λ μ μΈλ¬Έμ μ μΈνκ³ μμ€μ½λλ₯Ό ν μ€μ© μμ°¨μ μΌλ‘ μ€ννλ€. μ΄λ₯Ό 'λ³μ νΈμ΄μ€ν 'μ΄λΌ νλ€.
4.5 κ°μ ν λΉ
λ³μμ κ°μ ν λΉ ν λλ ν λΉ μ°μ°μ '='μ μ¬μ©νλ€. ν λΉ μ°μ°μλ μ°λ³μ 'κ°'μ μ’λ³μ λ³μμ ν λΉνλ€.
var score; //λ³μ μ μΈ
score = 80; //κ°μ ν λΉ
λ³μ μ μΈκ³Ό κ°μ ν λΉμ νλμ λ¬ΈμΌλ‘ λ¨μΆ ννν μλ μλ€.
var score = 80; //λ³μ μ μΈκ³Ό κ°μ ν λΉ
κ·Έλ¬λ, νλμ λ¬ΈμΌλ‘ λ¨μΆ νννλλΌλ μλ°μ€ν¬λ¦½νΈ μμ§μ λ³μ μ μΈκ³Ό κ°μ ν λΉμ 2κ°μ λ¬ΈμΌλ‘ λλμ΄ κ°κ° μ€ννλ€.
κ·Έλ¬λ―λ‘ λ³μ μ μΈμ μμ€μ½λ νκ°κ³Όμ μμ λ¨Όμ μ€νλκ³ , κ°μ ν λΉμ λ°νμμ μ€νλλ€. κ·Έλ¬λ―λ‘ λ³μμ undefinedκ° μ΄κΈ°νλλ κ²μ λ³ν¨μ΄ μλ€.
4.6 κ°μ μ¬ν λΉ
μ¬ν λΉμ΄λ μ΄λ―Έ κ°μ΄ ν λΉλμ΄ μλ λ³μμ μλ‘μ΄ κ°μ λλ€μ ν λΉνλ κ²μ λ§νλ€.
(κ°μ μ¬ν λΉ ν μ μλ λ³μ μ μΈ ν€μλλ var, letμ΄λ€.)
var score = 80; //λ³μ μ μΈ λ° κ°μ ν λΉ
score = 90; //κ°μ μ¬ν λΉ
μ¬ν λΉμ νμ¬ λ³μμ μ μ₯λ κ°μ λ²λ¦¬κ³ μλ‘μ΄ κ°μ μ μ₯νλ κ²μ΄λ€. λ§μ½ κ°μ μ¬ν λΉν μ μμ΄μ λ³μμ μ μ₯λ κ°μ λ³κ²½ν μ μλ€λ©΄ λ³μκ° μλλΌ 'μμ'λΌ νλ€. (const ν€μλλ₯Ό μ¬μ©νλ©΄ μμλ₯Ό ννν μ μλ€.)
μ£Όμν΄μΌ ν μ μ, μμ μμμ²λΌ κΈ°μ‘΄μ μ μ₯λ κ° '80'μ μ§μ°κ³ κ·Έ λ©λͺ¨λ¦¬ 곡κ°μ μ¬ν λΉ λ κ° '90'μ μλ‘κ² μ μ₯νλ κ²μ΄ μλλΌ μλ‘μ΄ λ©λͺ¨λ¦¬ 곡κ°μ ν보νκ³ κ·Έ λ©λͺ¨λ¦¬ 곡κ°μ μ«μ κ° '90'μ μ μ₯νλ κ²μ΄λ€.
κ·Έλ λ€λ©΄ κ°'80'μ μ΄λ€ μλ³μμλ μ°κ²°λμ΄ μμ§ μλ€. μ΄λ¬ν λΆνμν κ°λ€μ κ°λΉμ§ μ½λ ν°μ μν΄ λ©λͺ¨λ¦¬μμ μλ ν΄μ λλ€.
@κΈ°μ΄κ°λ
-κ°λΉμ§ μ½λ ν° : μ ν리μΌμ΄μ μ΄ ν λΉν λ©λͺ¨λ¦¬ 곡κ°μ μ£ΌκΈ°μ μΌλ‘ κ²μ¬νμ¬ λ μ΄μ μ¬μ©λμ§ μλ λ©λͺ¨λ¦¬λ₯Ό ν΄μ νλ κΈ°λ₯μ λ§νλ€.
μλ°μ€ν¬λ¦½νΈλ κ°λΉμ§ μ½λ ν°λ₯Ό λ΄μ₯νκ³ μλ 맀λμ§λ μΈμ΄λ‘μ κ°λΉμ§ μ½λ ν°λ₯Ό ν΅ν΄ λ©λͺ¨λ¦¬ λμλ₯Ό λ°©μ§νλ€.
-μΈλ§€λμ§λ μΈμ΄ vs 맀λμ§λ μΈμ΄ : μΈμ΄μ λ©λͺ¨λ¦¬ κ΄λ¦¬ λ°©μμ λ°λΌ λλλ€.
μ½κ² λ§ν΄, μΈλ§€λμ§λ μΈμ΄λ κ°λ°μκ° λ©λͺ¨λ¦¬ μ μ΄λ₯Ό μ£Όλν μ μκ³ , κ°λ°μμ μλμ λ°λΌ μ΅μ μ μ±λ₯μ ν보ν μ μμ§λ§ κ·Έ λ°λμ κ²½μ° μΉλͺ μ μ€λ₯λ₯Ό μμ°ν μλ μλ€. 맀λμ§λ μΈμ΄λ κ°λ°μμ μ§μ μ μΈ λ©λͺ¨λ¦¬ μ μ΄λ₯Ό νμ©νμ§ μκ³ κ°λΉμ§ μ½λ ν°κ° μ΄λ₯Ό μννλ€.
4.7 μλ³μ λ€μ΄λ° κ·μΉ
μλ³μλ λ€μκ³Ό κ°μ λ€μ΄λ° κ·μΉμ μ€μν΄μΌ νλ€.
-λ¬Έμ, μ«μ, μΈλμ€μ½μ΄(_), λ¬λ¬κΈ°νΈ($)λ₯Ό ν¬ν¨ν μ μλ€.(κ·Έ μΈμ νΉμλ¬Έμλ λΆκ°)
-μλ³μλ λ¬Έμ, μΈλμ€μ½μ΄(_), λ¬λ¬κΈ°νΈ($)λ‘ μμν΄μΌ νλ€.(μ«μλ‘ μμνλ κ²μ λΆκ°)
-μμ½μ΄λ μλ³μλ‘ μ¬μ©ν μ μλ€.
μ°Έκ³ λ‘ μλ°μ€ν¬λ¦½νΈλ λ/μλ¬Έμλ₯Ό ꡬλΆνλ―λ‘, λ³μλͺ Appleκ³Ό λ³μλͺ appleλ λ³κ°μ λ³μμ΄λ€.
@κΈ°μ΄κ°λ
-μμ½μ΄ : νλ‘κ·Έλλ° μΈμ΄μμ μ¬μ©λκ³ μκ±°λ μ¬μ©λ μμ μΈ λ¨μ΄λ₯Ό λ§νλ€.
-λ€μ΄λ° 컨벀μ : νλ μ΄μμ μμ΄ λ¨μ΄λ‘ ꡬμ±λ μλ³μλ₯Ό λ§λ€ λ κ°λ μ± μ’κ² λ¨μ΄λ₯Ό νμ μ ꡬλΆνκΈ° μν΄ κ·μ ν λͺ λͺ κ·μΉμ΄λ€.
//μΉ΄λ© μΌμ΄μ€(μλ°μ€ν¬λ¦½νΈμμλ μΌλ°μ μΌλ‘ λ³μ, ν¨μμ μ΄λ¦μ μ¬μ©)
var firstName;
//μ€λ€μ΄ν¬ μΌμ΄μ€
var first_name;
//νμ€μΉΌ μΌμ΄μ€(μλ°μ€ν¬λ¦½νΈμμλ μΌλ°μ μΌλ‘ μμ±μ ν¨μ, ν΄λμ€μ μ΄λ¦μ μ¬μ©)
var FirstName;
'π Language & CS knowledge > JavaScript (λͺ¨λμλ°μ€ν¬λ¦½νΈ Deep Dive)' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
09μ₯ νμ λ³νκ³Ό λ¨μΆ νκ° (0) | 2022.06.28 |
---|---|
08μ₯ μ μ΄λ¬Έ (0) | 2022.06.27 |
07μ₯ μ°μ°μ (0) | 2022.06.25 |
05μ₯ ννμκ³Ό λ¬Έ, 06μ₯ λ°μ΄ν° νμ (0) | 2022.06.23 |
01μ₯ νλ‘κ·Έλλ°, 02μ₯ μλ°μ€ν¬λ¦½νΈλ? (0) | 2022.06.21 |