Vue Intermediate

JSONPlaceholder μ‚¬μš©ν•˜κΈ°

https://jsonplaceholder.typicode.com/

Array concat vs spread operator vs push

https://www.measurethat.net/Benchmarks/Show/4223/0/array-concat-vs-spread-operator-vs-push

Vue instance lifecycle hooks

image-20200526102745634

Scrollmonitor μ‚¬μš©ν•˜κΈ°

cdn

<script src="https://cdn.jsdelivr.net/npm/scrollmonitor@1.2.0/scrollMonitor.min.js"></script>

Declarative vs Imperative

Declarative (μ„ μ–Έν˜•)

μœ μ‚°μŠ¬μ„ λ§Œλ“€μ–΄μ€˜

(λŒ€μ‹ ν•΄μ„œ 절차λ₯Ό μˆ˜ν–‰ -> Framework)

  • Vue.js

    • λ°μ΄ν„°μ˜ 변화에 맞좰 UIλ₯Ό λ³€κ²½

    • UI 단계 (Hook)

  • == django 의 url('/articles') -> views (list_article())

  • == JS μ½”λ“œκ°€ 처음 생성 λ˜μ—ˆμ„ λ•Œ (hook) -> function()

Imperative (λͺ…λ Ήν˜•, 절차적)

직접 μš”λ¦¬ (μ–Έμ œ / 무엇을)

λ ˆμ‹œν”Ό (절차적)

  • DOM EventListener

v-for:key

  • Vueμ—μ„œ κ°œλ³„ DOM λ…Έλ“œλ“€μ„ μΆ”μ ν•˜κ³  κΈ°μ‘΄ μ—˜λ¦¬λ¨ΌνŠΈλ₯Ό μž¬μ‚¬μš©, μž¬μ •λ ¬ν•˜κΈ° μœ„ν•΄μ„œ v-for의 각 ν•­λͺ©λ“€μ— κ³ μœ ν•œ key 속성을 μ œκ³΅ν•΄μ•Ό 함

  • v-bindλ₯Ό μ‚¬μš©ν•˜μ—¬ 동적 값에 바인딩 해야함

  • λ°˜λ³΅λ˜λŠ” DOM λ‚΄μš©μ΄ λ‹¨μˆœν•œ κ²½μš°λ‚˜ μ˜λ„μ μΈ μ„±λŠ₯ ν–₯상을 μœ„ν•΄ κΈ°λ³Έ λ™μž‘μ— μ˜μ‘΄ν•˜μ§€ μ•ŠλŠ” 경우λ₯Ό μ œμ™Έν•˜λ©΄, κ°€λŠ₯ν•˜λ©΄ μ–Έμ œλ‚˜ v-for에 keyλ₯Ό μΆ”κ°€ν•˜λŠ” 것이 μ’‹λ‹€!

ex)

      <li v-for="todo in todoByStatus()" :key="todo.id :class="{isCompleted: todo.completed}"> 
        <input type="checkbox" v-model="todo.completed">
        {{ todo.content }} 
      </li>

λ™μΌν•œ λ…Έλ“œμ— v-for 와 v-if κ°€ ν•¨κ»˜ μžˆμ„ λ•Œ

  • v-for κ°€ v-ifμš°μ„  μˆœμœ„κ°€ λ†’μœΌλ©°, v-if λŠ” λ§€ λ£¨ν”„λ§ˆλ‹€ μ‹€ν–‰λœλ‹€.

  • ν•˜μ§€λ§Œ Vue κ³΅μ‹λ¬Έμ„œμ— μ˜ν•˜λ©΄ 두 directiveλ₯Ό ν•¨κ»˜ μ‚¬μš©ν•˜λŠ” 것을 μ§€μ–‘ν•˜λŠ” 것이 μ’‹λ‹€κ³  ν•œλ‹€.

    • v-ifκ°€ v-forλ₯Ό κ°μ‹ΈλŠ” ν˜•νƒœλ‘œ μ‚¬μš©ν•˜λŠ” 것을 κΆŒκ³ ν•œλ‹€

watch vs computed

  • watch (angular)

    • 데이터 λ³€ν™”λ₯Ό μ§€μΌœλ³΄λŠ” hook

    • νŠΉμ • 데이터가 λ³€ν™” λ˜μ—ˆμ„ λ•Œ, 데이터 λ³€κ²½ & render

    • imperative

  • computed

    • 데이터 λ³€ν™”λ₯Ό λ”°λ‘œ μ§€μΌœλ³΄μ§€ μ•Šκ³ ,

    • ν”„λ ˆμž„μ›Œν¬κ°€ 데이터가 λ³€ν™”ν•˜μ˜€μ„ λ•Œ, 데이터 λ³€κ²½ & render

    • declarative

      • watch둜 μ“°λ©΄ 직접 μ§œμ•Όλ˜λŠ” 것을 computedμ—μ„œλŠ” ν”„λ ˆμž„μ›Œν¬κ°€ ν•΄μ€€λ‹€!!

+

Same Origin Policy & Cross Origin Resource Sharing

header에 정보가 λ‹΄κ²¨μžˆμŒ

Same Origin Policy

  • 같은 Server resource (μ›μ²œ)

Cross Origin Resource Sharing (CORS)

  • λ‹€λ₯Έ Sourceμ—μ„œ μ˜€λŠ” 것도 ν—ˆμš© ν•˜λŠ” μ§€ μ—¬λΆ€

Last updated

Was this helpful?