Skip to content

Files

Latest commit

1bcdb06 Β· Jul 1, 2020

History

History
67 lines (46 loc) Β· 1.94 KB

AsynchronousProcessing.md

File metadata and controls

67 lines (46 loc) Β· 1.94 KB

동기식 처리 λͺ¨λΈ vs 비동기식 처리 λͺ¨λΈ

written by sohyeon, hyemin πŸ’‘


1. 동기식 처리 λͺ¨λΈ

νƒœμŠ€ν¬λ₯Ό 순차적으둜 μ‹€ν–‰ν•˜κ³  λ¨Όμ € μ‹€ν–‰ 쀑인 μž‘μ—…μ΄ 있으면 λ‹€μŒ μž‘μ—…μ€ λŒ€κΈ°ν•˜κ²Œ λœλ‹€.

예λ₯Ό λ“€μ–΄ μ„œλ²„μ—μ„œ 데이터λ₯Ό κ°€μ Έμ™€μ„œ 화면에 ν‘œμ‹œν•˜λŠ” μž‘μ—…μ„ μˆ˜ν–‰ν•  λ•Œ, μ„œλ²„μ— 데이터λ₯Ό μš”μ²­ν•˜κ³  데이터가 응닡될 λ•Œ κΉŒμ§€ 이후 νƒœμŠ€ν¬λ“€μ€ λΈ”λ‘œν‚Ή λœλ‹€.

1-1. 예제

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  console.log('func2');
  func3();
}

function func3() {
  console.log('func3');
}

func1();

2. 비동기식 처리 λͺ¨λΈ

λ¨Όμ € μ‹€ν–‰λœ νƒœμŠ€ν¬κ°€ μ’…λ£Œλ˜μ§€ μ•Šμ€ μƒνƒœλΌ ν•˜λ”λΌλ„ λŒ€κΈ°ν•˜μ§€ μ•Šκ³  λ‹€μŒ νƒœμŠ€ν¬λ₯Ό μ‹€ν–‰ν•œλ‹€. λ³‘λ ¬μ μœΌλ‘œ νƒœμŠ€ν¬λ₯Ό μˆ˜ν–‰ν•˜κ²Œ λœλ‹€.

μ„œλ²„μ— 데이터λ₯Ό μš”μ²­ν•œ 이후 μ„œλ²„λ‘œλΆ€ν„° 데이터가 응닡받을 λ•ŒκΉŒμ§€ λŒ€κΈ°ν•˜μ§€ μ•Šκ³  μ¦‰μ‹œ λ‹€μŒ νƒœμŠ€ν¬λ₯Ό μˆ˜ν–‰ν•œλ‹€. 이후 μ„œλ²„λ‘œλΆ€ν„° μ‘λ‹΅λ˜λ©΄ μ΄λ²€νŠΈκ°€ λ°œμƒν•˜κ³  이벀트 ν•Έλ“€λŸ¬κ°€ 데이터λ₯Ό 가지고 μˆ˜ν–‰ν•  νƒœμŠ€ν¬λ₯Ό 계속해 μˆ˜ν–‰ν•œλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λŒ€λΆ€λΆ„μ˜ DOM 이벀트 ν•Έλ“€λŸ¬μ™€ Timer ν•¨μˆ˜(setTimeout, setInterval), Ajax μš”μ²­μ€ 비동기식 처리 λͺ¨λΈλ‘œ λ™μž‘ν•œλ‹€.

2-1. 예제

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function() {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

μœ„ 예제λ₯Ό μ‹€ν–‰ν•˜λ©΄ setTimeout λ©”μ†Œλ“œμ— λ‘λ²ˆμ§Έ 인수 μΈν„°λ²Œμ„ 0초둜 μ„€μ •ν•˜μ—¬λ„ μ½˜μ†”μ— β€œfunc1 func2 func3β€μ˜ μˆœμ„œλ‘œ λ‘œκ·Έκ°€ 좜λ ₯λ˜μ§€ μ•ŠλŠ”λ‹€. μ΄λŠ” setTimeout λ©”μ†Œλ“œκ°€ 비동기 ν•¨μˆ˜μ΄κΈ° λ•Œλ¬Έμ΄λ‹€.


Reference & Additional Resources