Skip to content

Latest commit

Β 

History

History
57 lines (48 loc) Β· 2.5 KB

File metadata and controls

57 lines (48 loc) Β· 2.5 KB

[22.03.03.Thu] - Day 20

Vue.js

  • v-if λŠ” μ‹€μ œ νƒœκ·Έ μžμ²΄κ°€ DOMμ—μ„œ λ³΄μ˜€λ‹€ 사라짐

    • μ‹€μ œ HTML μš”μ†Œ μ™„μ „νžˆ μ‚­μ œν–ˆλ‹€κ°€ λ‹€μ‹œ 생성
    • ν™”λ©΄ λ‘œλ”©λ˜λŠ” μˆœκ°„ A, M, G κΆŒν•œμ²˜λŸΌ 이미 κ²°μ •λ˜λŠ” 것은 v-if μ‚¬μš©!
    • μ‚¬μš©μž 수 κ³ λ €ν•΄μ„œ G-M-A 순으둜 ꡬ성
  • v-showλŠ” display none으둜 처리됨

    • λ³΄μ˜€λ‹€ μ•ˆλ³΄μ˜€λ‹€ ν•˜λŠ” νƒ­ 같은 자주 ν΄λ¦­ν•˜λŠ” μš”μ†Œλ“€μ€ v-show μ‚¬μš©
    • μ „ν˜€ μ“°μ§€ μ•Šμ€ 것듀을 λΆˆν•„μš”ν•˜κ²Œ display none μ²˜λ¦¬ν•  ν•„μš” μ—†μŒ
  • computed

    • κ³„μ‚°ν•΄μ„œ data μ•ˆμœΌλ‘œ λ„£λŠ” 효과 (μƒˆλ‘œμš΄ 데이터 ν‚€ λ§Œλ“¦)
    • μ–‘λ°©ν–₯ 바인딩 지원
    • 변경사항 μ‹€μ‹œκ°„ 감지 κ°€λŠ₯ν•œ 큰 μž₯점
    • 싀무) λ‘œκ·ΈμΈν•œ μ‚¬μš©μž λ‹΄λŠ” 데이터 ν‚€ λ°˜ν™˜, 둜그인 μΌμ–΄λ‚˜λ©΄ κ°μ§€ν•΄μ„œ 각각 ν™”λ©΄ μ‚¬μš© μœ„ν•¨
    • 둜그인 μ‚¬μš©μž μ •λ³΄λŠ” μ‹œμŠ€ν…œ 거의 λͺ¨λ“  ν™”λ©΄μ—μ„œ ν•„μš”ν•¨
  • watch

    • 값이 λ³€κ²½λ˜κ³  μžˆλŠ”μ§€ κ°μ§€ν•˜κ³  μ‹ΆμŒ
    • 데이터 킀와 λ™μΌν•œ μ΄λ¦„μœΌλ‘œ ν•¨μˆ˜ λ§Œλ“¦
    • κΈ°μ‘΄ κ°’ -> μƒˆλ‘œμš΄ κ°’ 바뀐 νžˆμŠ€ν† λ¦¬ μ•Œ 수 있음
    • ν•˜λ‚˜μ˜ ν•„λ“œμ— λŒ€ν•œ 변동 사항 관리
      • μ‚¬μš©μž 행동 νŒ¨ν„΄ 뢄석 κ°€λŠ₯
    • 유튜브 μ‹œμ²­ 기둝 같은 것은 ν΄λ¦­ν•˜λŠ” μˆœκ°„ λ‹€ DB에 λ”°λ‘œ μ €μž₯함
  • μ»΄ν¬λ„ŒνŠΈ 폴더에 λ§Œλ“  것은 λΌμš°ν„° 등둝 μ•ˆν•¨

    • μž‘μ€ λ‹¨μœ„ 쑰각
    • λΌμš°ν„°μ— λ“±λ‘ν•˜λŠ” 것은 μ‹€μ œ νŽ˜μ΄μ§€
    • μ»΄ν¬λ„ŒνŠΈ 이름λͺ…(파일λͺ…) μ§“λŠ” κ·œμΉ™ 닀름
  • λΆ€λͺ¨λ‘œλΆ€ν„° 전달받은 propsλŠ” μžμ‹μ—μ„œλŠ” readonly, λΆ€λͺ¨μ—μ„œλ§Œ λ³€κ²½ κ°€λŠ₯

  • μžμ‹ μ»΄ν¬λ„ŒνŠΈ μž…μž₯μ—μ„œλŠ” μ–΄λŠ λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈμ—μ„œ λ°›μ•„μ˜¨μ§€λŠ” λͺ¨λ¦„

    • μžμ‹μ—μ„œ λΆ€λͺ¨ μ»΄ν¬λ„ŒνŠΈλ‘œ 데이터 전달은 κ°€λŠ₯
  • νŽ˜μ΄μ§€ 타이틀 같은 μž‘μ€ λ‹¨μœ„λ„ λ‹€ μ»΄ν¬λ„ŒνŠΈλ‘œ λ§Œλ“¦

    • ν˜‘μ—… μ‹œ + μŠ€νƒ€μΌ λ³€κ²½ν•  λ•Œ 유용
  • μ»΄ν¬λ„ŒνŠΈλͺ… μžλ™μœΌλ‘œ μΌ€λ°₯ μΌ€μ΄μŠ€λ‘œ μ‚¬μš© κ°€λŠ₯

  • μž¬μ‚¬μš© κ·ΉλŒ€ν™”

    • μ»΄ν¬λ„ŒνŠΈ
    • mixin
    • ν”ŒλŸ¬κ·ΈμΈ
    • μ»€μŠ€ν…€ λ””λ ‰ν‹°λΈŒ ex. v-for, v-if, ...

[Note]

  • κ°œλ°œμ„ μ§„μ •μœΌλ‘œ μž˜ν•˜λŠ” μ‚¬λžŒμ€ μ‚¬μš©μžλ₯Ό 잘 κ³ λ €ν•œ μ‚¬λžŒ
  • κ°œλ°œμžλŠ” μ½”λ“œλ₯Ό 잘 μ„€κ³„ν•˜κ³  잘 μ •λ¦¬ν•˜λŠ” 것 뿐만이 μ•„λ‹˜
    • μ‚¬μš©μžκ°€ μ‹€μ œλ‘œ 이 μ‹œμŠ€ν…œμ„ μ‚¬μš©ν•˜λ©΄μ„œ μ–΄λ–€ κ²½ν—˜μ„ ν•˜λŠ”μ§€ νŒŒμ•…!
  • FE ν”„λ ˆμž„μ›Œν¬
    • μ»΄ν¬λ„ŒνŠΈ μž¬μ‚¬μš©μ„± 뛰어남
  • 검색과 쑰희의 의미 닀름
    • ν•˜λ‚˜λ‘œ 톡일 해야함