Session 3. JavaScript

minj9_6Β·2021λ…„ 8μ›” 19일
0

TIL, WeCode, CourseΒ 

λͺ©λ‘ 보기
15/48
post-thumbnail

*πŸ”Study Keyword :

  • μ›Ή νŽ˜μ΄μ§€μ—μ„œ πŸ”‘JavaScript의 역할을 μ•Œμ•„λ³΄κ³  πŸ”‘λ³€μˆ˜ μ„ μ–Έ, ν•¨μˆ˜, 쑰건문, 반볡문 λ“±μ˜ syntax와 πŸ”‘λ°μ΄ν„° 자료ꡬ쑰 쀑 겍체와 λ°°μ—΄λ₯Ό μ΅μˆ™ν•΄μ Έλ³΄μž

- JavaScript?

1. JavaScript의 μ—­ν• ?

-WHY USE❔❕

-μ›ΉνŽ˜μ΄μ§€ λ‚΄μ—μ„œ μ‚¬μš©μžμ™€ μ†Œν†΅ν•˜κΈ° μœ„ν•΄μ„œ JavaScriptλ₯Ό μ‚¬μš©ν•œλ‹€.

πŸ‘¬[μƒν˜Έμž‘μš©]

  • μ‚¬μš©μžμ™€ μ†Œν†΅μ„ ν•˜κΈ° μœ„ν•΄μ„  JavaScriptλ₯Ό μ‚¬μš©ν•΄ μ›ΉνŽ˜μ΄μ§€μ™€ μƒν˜Έμž‘μš©μ„ ν•΄μ•Όν•©λ‹ˆλ‹€.
  • JavaScript에선 μƒν˜Έμž‘μš©μ„ μœ„ν•΄μ„  크게 1>μ΄λ²€νŠΈμ™€ 2>ν•¨μˆ˜λ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€.

1>이벀트

  • μ΄λ²€νŠΈλŠ” μ‚¬μš©μžμ— μ˜ν•΄ λ°œμƒν•˜λŠ”λ° μ‚¬μš©μžκ°€ μ›ΉνŽ˜μ΄μ§€ λ‚΄μ—μ„œ ν–‰ν•˜λŠ” 것이 λ°œμƒν–ˆμ„ 'λ•Œ'λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€.
  • ex> 이벀트의 μ’…λ₯˜- 클릭 ν–ˆμ„ λ•Œ, 마우슀둜 λ“œλž˜κ·Έ ν–ˆμ„ λ•Œ, μŠ€ν¬λ‘€μ„ 내렸을 λ•Œ, ν‚€λ³΄λ“œλ₯Ό λˆŒλ €μ„ λ•Œ

2>ν•¨μˆ˜

  • ν•¨μˆ˜λŠ” μ–΄λ– ν•œ λ™μž‘μ΄ μΌμ–΄λ‚˜λ„λ‘ 미리 μ •μ˜ν•˜μ—¬ 미리 μ€€λΉ„λ₯Ό ν•΄λ‘” μƒνƒœλ‘œ μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ μ€€λΉ„ν•΄λ‘” ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•œλ‹€.

-μ΄λ²€νŠΈμ™€ ν•¨μˆ˜μ˜ 관계

이처럼 μ΄λ²€νŠΈμ™€ ν•¨μˆ˜λŠ” μ΄λ²€νŠΈκ°€ λ°œμƒν–ˆμ„ λ•Œ μ •μ˜ν•΄ λ‘”ν•¨μˆ˜κ°€ μ‹€ν–‰λ˜λŠ” 관계λ₯Ό λ§Ίκ³  μžˆλ‹€.
=> λ”°λΌμ„œ μ•žμœΌλ‘œ JavaScriptμ—μ„œ μ½”λ“œλ₯Ό 지 λ•Œ μ΄λ²€νŠΈμ™€ ν•¨μˆ˜λ‘œ 각각 λ‚˜λˆ μ„œ 생각해보고 이λ₯Ό κ³Όμ •μœΌλ‘œ λ‚˜νƒ€λ‚΄ μ •λ¦¬ν•΄λ³΄μž.

LIKE λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄(이벀트):
	λ²„νŠΌμ— 뢈이 λ“€μ–΄μ˜¨λ‹€.(ν•¨μˆ˜)
    λ²„νŠΌμ— λ°°κ²½ 색이 바뀐닀.

2. λ³€μˆ˜ μ™œ μ“°λŠ”κ°€?

  • JavaScriptλ₯Ό 크게 ν•¨μˆ˜μ™€ 이벀트둜 κ΅¬λΆ„ν•˜λ©΄ μ΄λ²€νŠΈκ°€ λ°œμƒ μ‹œ μ‹€ν–‰ 될 ν•¨μˆ˜ μ•ˆμ— λ‹€μ–‘ν•œ 정보λ₯Ό 효율적으둜 μ²˜λ¦¬ν•˜κΈ° μœ„ν•΄ κΌ­ ν•„μš”ν•œ 것듀이 μžˆλ‹€.

-WHAT IS❓

  • ν•¨μˆ˜ μ•ˆμ—μ„œ λ§Žμ€ 정보λ₯Ό μ²˜λ¦¬ν•˜λŠ”λ° μ΄λŸ¬ν•œ λ§Žμ€ 데이터λ₯Ό 효율적으둜 μ €μž₯ν•˜κ³  μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œ λ³€μˆ˜κ°€ μ‘΄μž¬ν•œλ‹€.

-WHY USE❔❕

  • λ³€μˆ˜κ°€ ν•„μš”ν•œ 이유λ₯Ό μ„€λͺ…ν•˜λŠ” κ°€μž₯ μ μž˜ν•œ λ‹¨μ–΄λŠ” μœ μ§€/λ³΄μˆ˜μ΄λ‹€.
  • λ§Œμ•½ λ‹€λ₯Έ κ³³μ—μ„œ 같은 데이터λ₯Ό ν•œ 번 더 μ‚¬μš©ν•œλ‹€λ©΄ λ³€μˆ˜μ— λ‹΄μ•„μ„œ μ‚¬μš©ν•΄μ•Όν•œλ‹€.
  • μ΄λ•Œ μœ μ§€μ™€ 보수 μ°¨μ›μ—μ„œ aλΌλŠ” 값을 μ“°λ‹€κ°€ 값이 b둜 바뀐 경우 1>λ³€μˆ˜λ₯Ό 생성(μ„ μ–Έ)ν•˜κ³  2>λ³€μˆ˜μ— 값을 ν• λ‹Ήν•˜λ©΄ μ—¬κΈ°μ €κΈ° μ‚¬μš©λ˜λŠ” λ³€μˆ˜λ₯Ό ν•œ λ²ˆμ— μˆ˜μ •ν•  수 μžˆλ‹€.
  • λ˜ν•œ λ³€μˆ˜λŠ” μ€‘λ³΅μ˜ μ œκ±°μ— μžˆμ–΄μ„œλ„ 맀우 μ€‘μš”ν•˜λ‹€.
  • λ”°λΌμ„œ let, const둜 μ„ μ–Έλœ λ³€μˆ˜λŠ” 쀑볡 μ„ μ–Έ λΆˆκ°€λŠ₯ν•˜λ‹€.
  • const,let 차이?
  • μž¬ν• λ‹Ή κ°€λŠ₯ μ—¬λΆ€λ‘œ constλŠ” μƒμˆ˜λ‘œ λ³€μˆ˜μ— 값이 ν•œ 번 ν• λ‹Ήλ˜λ©΄ μž¬ν• λ‹Ήμ΄ λΆˆκ°€λŠ₯ν•˜μ§€λ§Œ let은 μž¬ν• λ‹Ήμ΄ κ°€λŠ₯ν•˜λ‹€.
  • 상황에 맞게 λ³€μˆ˜ ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•˜μž.
    λ³€μˆ˜μ— 값을 μ˜μ›νžˆ μˆ˜μ •ν•  일 μ—†λ‹€λ©΄ const!
    값이 ν•œ λ²ˆμ΄λΌλ„ μˆ˜μ •λ˜λ©΄ let!
  • λ°˜λ³΅λ¬Έμ„ 돌릴 λ•Œλ₯Ό μ œμ™Έν•˜κ³€ 거의 constλ₯Ό μ“΄λ‹€λŠ” 관희 λ©˜ν† λ‹˜ κΏ€νŒπŸ””!

πŸ“›ν•­μƒ λͺ…심 또 μ£Όμ˜πŸ“›) λ³€μˆ˜λͺ… μž‘μ„±!

  • λ³€μˆ˜μ˜ 넀이밍을 ν•  땐 λˆ„κ°€ 봐도 λ‹¨λ²ˆμ— μΆ”μΈ‘ κ°€λŠ₯ν•œ λ³€μˆ˜λͺ…을 μ§€μ–΄μ•Όν•œλ‹€.
  • 즉 의미 좔츑이 κ°€λŠ₯ν•œ λ³€μˆ˜λͺ…을 λ§Œλ“€κΈ° μœ„ν•œ μŠ΅κ΄€κ³Ό λ…Έλ ₯을 λ“€μ—¬μ•Όν•œλ‹€.
    πŸ™†β€β™€οΈ) JavaScript에선 camelCase ν‘œκΈ°λ²•μ΄ ꡭ룰인거 μ•Œμ₯¬?

3.JavaScript 데이터 μ’…λ₯˜

  • κΈ°λ³Έν˜•μ—” 사칙연산 κ°€λŠ₯ν•œ number, 문자λ₯Ό ν‘œν˜„ν•˜λŠ”string, μ°Έκ³Ό κ±°μ§“μ˜ Boolean 등이 μžˆλ‹€.
    μ°Έμ‘°ν˜• νƒ€μž…μΈ Object와 객체의 ν•˜λ₯˜ λΆ€λ₯˜μΈ Array, function 등이 μžˆλ‹€.
  • string μ‚¬μš©μ‹œ string + number 연산은 무쑰건 string으둜 μžλ™ν˜• λ³€ν™˜λ˜λŠ” 점 주의!
  • μ—¬λŸ¬ 데이터 νƒ€μž…μ˜ boolean κ°’ λ³€ν™˜μ— λŒ€ν•΄ μ•Œμ•„λ‘λ©΄ 쑰건을 μ‚¬μš©ν•˜λŠ” 문법을 μ“Έ λ•Œ μœ μš©ν•˜λ‹€.
  • truthy와 falsy둜
    βœ”οΈ 항상 true 둜 λ³€ν™˜λ˜λŠ” κ°’: (2 > 1, 1 === 1, "ν•œ κΈ€μž 이상")
    βœ”οΈ 항상 false 둜 λ³€ν™˜λ˜λŠ” κ°’ (3 > 4, 1 === "1". 0, "")
    => 사싀 falsyκ°€ μ•„λ‹ˆλ©΄ μ „λΆ€ truthyμ΄λ‹ˆ falsy의 μ’…λ₯˜λ§Œ μΈμ§€ν•˜λ©΄ 끝 μ†Œν—Œ λ©˜λ‹˜ κΏ€νŒπŸ””!

4. 객체와 객체 ν•˜μœ„ λΆ„λ₯˜μΈ λ°°μ—΄

-4_1. 객체

  • 객체가 ν•„μš”ν•œ μ΄μœ λŠ” λ‹€μ–‘ν•œ 정보λ₯Ό λ¬Άμ–΄μ„œ μ €μž₯ν•˜κΈ° μœ„ν•΄μ„œμ΄λ‹€.
  • κ°μ²΄λŠ” ν”„λ‘œνΌν‹°μ˜ 속성과 값을 ν•œ 곳에 λͺ¨μ•„λ‘” μžλ£Œκ΅¬μ‘°μ΄λ‹€.
  • 객체에 값을 μ‚¬μš©ν•˜κΈ° μœ„ν•΄ μ ‘κ·Όν•˜λŠ” 법dot notationκ³Ό braket notation이 μžˆλ‹€.
  • braket notation을 μ‚¬μš©ν•˜λ©΄ 값이 λ°”λ€” 수 μžˆλŠ” λ³€μˆ˜λ₯Ό λΈŒλΌμΌ“ 내뢀에 λ„£μ–΄μ„œ 객체의 ν”„λ‘œνΌν‹°μ—λ„ μ ‘κ·Όν•  μˆ˜λ„ μžˆλ‹€!
  • EX> input을 ν•¨μˆ˜ ν˜•νƒœλ‘œ λ§Œλ“€μ–΄ ν•œκ°œμ˜ input으둜 둜그인 창을 κ΅¬ν˜„ν•˜κ³€ ν•˜λŠ”λ°
    braket notation을 μ‚¬μš©ν•˜λ©΄ λ³€μˆ˜λ‘œ 객체의 ν”„λ‘œνΌν‹°μ— μ ‘κ·Ό κ°€λŠ₯ν•΄ 값을 λ°”κΏ€ 수 μžˆμ–΄ μœ μš©ν•˜λ‹€

QUIZ1> μƒν’ˆ ν•˜λ‚˜μ— λŒ€ν•œ μ„€λͺ…을 객체둜 κ΄€λ¦¬ν•œλ‹€λ©΄?!

  • μ‹€μ œλ‘œλŠ” λ°μ΄ν„°μ˜ 값을 μ„œλ²„λ‘œλΆ€ν„° λ°›μ•„μ„œ 데이터λ₯Ό λ³΄μ—¬μ£ΌλŠ” ν˜•νƒœμ΄κΈ°μ— μ–΄λ–€ 자료의 ν˜•νƒœκ°€ 객체의 κ°’μœΌλ‘œ λ“€μ–΄μ˜¬μ§€ 받을지 μ•Œ 수 μ—†λ‹€κ³  ν•˜μ‹ λ‹€.
<script>
// λ‚΄κ°€ μ§  μ½”λ“œ
const  product = {
 price : 4980000,
 reviewRate : 4.2,
 sumReviews:21,                      sale: 10,                            
 productName: 'μ—μŠ€λ”B μˆ˜λ‚©ν˜• μΉ¨λŒ€(λ§€νŠΈν¬ν•¨ ) SS/Q',
 brand: '에λͺ¬μŠ€,
 isPossibleDeliveryFree: true,
 isPossibleBigSale: true,
}
</script>
<script>
// μ›κ΅­λ‹˜κ³Ό λ‹€λ₯Έ μŠ€ν„°λ”” 원듀 μ½”λ“œ 쀑 일뢀
 {
 imgURL: 'htts://....jpg',
  displayAvgRate() { ... },
  countReview() { ... },
  displayTags() { ... }
  tags : {
  	isfreeShipping : true,
    isSales: true
  }
}
</script>
  • μ΄λ ‡κ²Œ μ΄λ―Έμ§€μ˜ URL을 λ°›κ³  객체 λ‚΄μ—μ„œ νƒœκ·Έμ™€ 리뷰와 κ΄€λ ¨λœ 처리λ₯Ό ν•˜λŠ” ν•¨μˆ˜λ₯Ό λ„£μœΌμ…¨λŠ”λ° μƒλ‹Ήνžˆ μ‹ μ„ ν•˜κ³  λ©‹μ‘Œλ‹€..!
  • 또 νƒœκ·Έμ™€ κ΄€λ ¨λœ 배솑, νŠΉκ°€ λΆλ§ˆν¬κ°™μ€ νƒœκ·Έλ₯Ό λ‹€μ‹œ 객체둜 λ¬Άμ–΄ κ΄€λ¦¬ν•˜μ‹œλŠ” λΆ„λ“€ μ½”λ“œλ„ 쒋은 λ°œμƒμΈ 것 κ°™λ‹€!

-4_2. λ°°μ—΄

  • 배열은 μ—°κ΄€μ„±μžˆλŠ” 데이터듀을 ν•œ 곳에 μ €μž₯ν•  수 μžˆλŠ” μžλ£Œκ΅¬μ‘°λ‹€.
  • 사싀 배열도 객체인데 배열은 μˆœμ„œκ°€ μžˆλŠ” 객체둜 λ‹¨μˆœνžˆ 배열에선 ν‚€κ°€ μˆœμ„œλ₯Ό λ‚˜νƒ€λ‚΄λŠ” 인덱슀 값을 가진닀.
  • 배열에 데이터 μ ‘κ·Ό(μ°Έμ‘°)ν•  λ•ŒλŠ” bracket notation에 μ ‘κ·Όν•˜κ³ μž ν•˜λŠ” κ°’μ˜ 인덱슀λ₯Ό λ„£μ–΄μ€€λ‹€.
    => **객체 와 λ°°μ—΄ 쀑 μ–΄λ–€ μƒν™©μ—μ„œ μ–΄λ– ν•œ 자료ꡬ쑰λ₯Ό μ‚¬μš©ν•  지 κ³ λ €ν•΄μ•Όν•œλ‹€.
  • μˆœμ„œλ₯Ό 가진 데이터듀을 μ²˜λ¦¬ν•΄μ•Όν•  땐 배열을 μ‚¬μš©ν•˜μž
<script>
const categoryList = ['가ꡬ','패브릭','ν™ˆλ°μ½”','μˆ˜λ‚©/정리','μƒν™œμš©ν’ˆ','κ°€μ „','μ£Όλ°©','그릇/ν™ˆμ„ΈνŠΈ','μ‘°λͺ…']
</script>
  • μΉ΄ν…Œκ³ λ¦¬ 리슀트λ₯Ό ν‘œν˜„ν•  땐 사싀 이미지 정보도 ν‘œν˜„μ„ ν•΄μ€˜μ•Όν•œλ‹€
  • ν•˜λ‚˜μ— μΉ΄ν…Œκ³ λ¦¬μ— 데이터(μΉ΄ν…Œκ³ λ¦¬λͺ…κ³Ό 이미지) 2가지 이상 λ“€μ–΄κ°ˆ 땐 μš”μ†Œλ‘œ 객체λ₯Ό μ‚¬μš©ν•˜λŠ” 것이 μ’‹λ‹€.
  • EX> [{},{},{},{},{}]; 이처럼 λ°°μ—΄μ•ˆμ— μš”μ†Œκ°€ 객체λ₯Ό λ‚˜μ—΄ν•˜λŠ” 경우λ₯Ό 많이 μ ‘ν•  것이라 ν•˜μ…¨μŒ!

*πŸ’‘conclusion

  • μ‚¬μš©μžμ™€ μ†Œν†΅ν•˜κΈ° μœ„ν•΄ μ›ΉνŽ˜μ΄μ§€μ™€ μƒν˜Έμž‘μš©ν•  수 μžˆλŠ” μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μ—­ν• 
  • μƒν˜Έμž‘μš© 쀑 ν•˜λ‚˜μΈ ν•¨μˆ˜μ™€ 이벀트의 관계에 λŒ€ν•΄ 그리고 이λ₯Ό 항상 λ‚˜λˆ„μ–΄ μƒκ°ν•˜λŠ” μŠ΅κ΄€
  • λ³€μˆ˜, ν•¨μˆ˜, 쑰건문, 반볡문 λ“±μ˜ syntaxκ°€ μ„œλ‘œ μ–΄λ–€ 관계가 있으며 μ–΄λ–»κ²Œ ν™œμš©ν•  수 μžˆμ„μ§€

#πŸ“‘Study Source

  • WeCode λ©˜ν†  κ΄€ν¬λ‹˜ 깔끔 λ‚΄μš© 쀑:>
profile
자기 μ‹ λ’°μ˜ νž˜μ„ λ―Ώκ³  μ‹€μ²œν•˜λŠ” κ°œλ°œμžκ°€ λ˜κ³ μžν•©λ‹ˆλ‹€.

0개의 λŒ“κΈ€