관리 메뉴

λͺ©λ‘2022/05 (9)

kingsubin

43μž₯. Ajax

43μž₯. Ajax 43-1. Ajaxλž€? Ajax(Asynchronous JavaScript and XML)λž€ JSλ₯Ό μ‚¬μš©ν•˜μ—¬ λΈŒλΌμš°μ €κ°€ μ„œλ²„μ—κ²Œ 비동기 λ°©μ‹μœΌλ‘œ 데이터λ₯Ό μš”μ²­ν•˜κ³ , μ„œλ²„κ°€ μ‘λ‹΅ν•œ 데이터λ₯Ό μˆ˜μ‹ ν•˜μ—¬ μ›ΉνŽ˜μ΄μ§€λ₯Ό λ™μ μœΌλ‘œ κ°±μ‹ ν•˜λŠ” ν”„λ‘œκ·Έλž˜λ° 방식을 λ§ν•œλ‹€. 전톡적인 방식 단점 λ³€κ²½ν•  ν•„μš”κ°€ μ—†λŠ” λΆ€λΆ„κΉŒμ§€ ν¬ν•¨λœ HTML을 맀번 λ‹€μ‹œ 전솑받기에 λΆˆν•„μš”ν•œ 데이터 톡신이 λ°œμƒν•œλ‹€. λ³€κ²½ν•  ν•„μš”κ°€ μ—†λŠ” λΆ€λΆ„κΉŒμ§€ μ²˜μŒλΆ€ν„° λ‹€μ‹œ λ Œλ”λ§ν•œλ‹€. ν™”λ©΄ μ „ν™˜μ΄ μΌμ–΄λ‚˜λ©΄ 화면이 μˆœκ°„μ μœΌλ‘œ κΉœλΉ‘μž„. μ„œλ²„λ‘œλΆ€ν„° 응닡이 μžˆμ„ λ•ŒκΉŒμ§€ λ‹€μŒ μ²˜λ¦¬λŠ” λΈ”λ‘œν‚Ήλœλ‹€. Ajax 방식 μž₯점 λ³€κ²½ν•  뢀뢄을 κ°±μ‹ ν•˜λŠ” 데 ν•„μš”ν•œ λ°μ΄ν„°λ§Œ μ„œλ²„λ‘œλΆ€ν„° 전솑받기에 λΆˆν•„μš”ν•œ 데이터 톡신 λ°œμƒν•˜μ§€ μ•ŠλŠ”λ‹€. λ³€κ²½ν•  ν•„μš”κ°€ μ—†λŠ” λΆ€λΆ„ λ‹€μ‹œ λ Œλ”λ§ ..

42μž₯. 비동기 ν”„λ‘œκ·Έλž˜λ°

42μž₯. 비동기 ν”„λ‘œκ·Έλž˜λ° 42-1. 동기 μ²˜λ¦¬μ™€ 비동기 처리 JS 엔진은 단 ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ„ 가진닀. λ™μ‹œμ— 2개 μ΄μƒμ˜ ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•  수 μ—†λ‹€λŠ” 것을 μ˜λ―Έν•œλ‹€. JS 엔진은 ν•œ λ²ˆμ— ν•˜λ‚˜μ˜ νƒœμŠ€ν¬λ§Œ μ‹€ν–‰ν•  수 μžˆλŠ” μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€. μ‹±κΈ€ μŠ€λ ˆλ“œ λ°©μ‹μ—μ„œ μ²˜λ¦¬μ— μ‹œκ°„μ΄ κ±Έλ¦¬λŠ” νƒœμŠ€ν¬λ₯Ό μ‹€ν–‰ν•˜λŠ” 경우 λΈ”λ‘œν‚Ήμ΄ λ°œμƒν•œλ‹€. ν˜„μž¬ μ‹€ν–‰ 쀑인 νƒœμŠ€ν¬κ°€ μ’…λ£Œν•  λ•ŒκΉŒμ§€ λ‹€μŒμ— 싀행될 νƒœμŠ€ν¬κ°€ λŒ€κΈ°ν•˜λŠ” 방식을 synchronous 처리 ν˜„μž¬ μ‹€ν–‰ 쀑인 νƒœμŠ€ν¬κ°€ μ’…λ£Œλ˜μ§€ μ•Šμ€ μƒνƒœλΌλ„ λ‹€μŒ νƒœμŠ€ν¬λ₯Ό κ³§λ°”λ‘œ μ‹€ν–‰ν•˜λŠ” 방식을 asynchronous 처리 setTimeout, setInterval, HTTP μš”μ²­, 이벀트 ν•Έλ“€λŸ¬λŠ” 비동기 처리 λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€. 42-2. 이벀트 루프와 νƒœμŠ€ν¬ 큐..

41μž₯. 타이머

41μž₯. 타이머 41-1. 호좜 μŠ€μΌ€μ€„λ§ 일정 μ‹œκ°„μ΄ 경과된 이후에 ν˜ΈμΆœλ˜λ„λ‘ ν•¨μˆ˜ ν˜ΈμΆœμ„ μ˜ˆμ•½ν•˜λ €λ©΄ 타이머 ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œλ‹€. 이λ₯Ό 호좜 μŠ€μΌ€μ€„λ§(scheduling a call) 이라 ν•œλ‹€. 타이머 ν•¨μˆ˜λŠ” ECMAScript 사양에 μ •μ˜λœ 빌트인 ν•¨μˆ˜ μ•„λ‹ˆλ‹€. λΈŒλΌμš°μ € ν™˜κ²½κ³Ό Node.js ν™˜κ²½μ—μ„œ λͺ¨λ‘ μ „μ—­ 객체의 λ©”μ„œλ“œλ‘œμ„œ 타이머 ν•¨μˆ˜λ₯Ό μ œκ³΅ν•œλ‹€. JS 엔진은 단 ν•˜λ‚˜μ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ„ κ°–κΈ° λ•Œλ¬Έμ— 두 가지 μ΄μƒμ˜ νƒœμŠ€ν¬ λ™μ‹œ μ‹€ν–‰ν•  수 μ—†λ‹€. μ‹±κΈ€ μŠ€λ ˆλ“œλ‘œ λ™μž‘ν•œλ‹€. 이런 이유둜 νƒ€μ΄λ¨Έν•¨μˆ˜λŠ” 비동기 μ²˜λ¦¬λ°©μ‹μœΌλ‘œ λ™μž‘ν•œλ‹€. 41-2. 타이머 ν•¨μˆ˜ delay ms λ‹¨μœ„ delay default: 0 타이머가 λ§Œλ£Œλ˜μ—ˆλ‹€κ³  콜백 ν•¨μˆ˜ μ¦‰μ‹œ ν˜ΈμΆœμ„ 보μž₯ν•˜μ§„ μ•ŠλŠ”λ‹€. νƒœμŠ€ν¬ 큐에 콜백 ν•¨μˆ˜λ₯Ό λ“±λ‘ν•˜λŠ” ..

45μž₯. ν”„λ‘œλ―ΈμŠ€

45μž₯. ν”„λ‘œλ―ΈμŠ€ JSλŠ” 비동기 처리λ₯Ό μœ„ν•œ ν•˜λ‚˜μ˜ νŒ¨ν„΄μœΌλ‘œ 콜백 ν•¨μˆ˜λ₯Ό μ‚¬μš©ν•œλ‹€. 콜백 νŒ¨ν„΄μ€ 콜백 ν—¬λ‘œ 인해 가독성이 λ‚˜μ˜λ‹€. 비동기 처리 쀑 λ°œμƒν•œ μ—λŸ¬μ˜ μ²˜λ¦¬κ°€ κ³€λž€ν•˜λ‹€. μ—¬λŸ¬ 개의 비동기 처리λ₯Ό ν•œ λ²ˆμ— μ²˜λ¦¬ν•˜λŠ”λ° ν•œκ³„κ°€ μžˆλ‹€. ES6μ—μ„œλŠ” 비동기 처리λ₯Ό μœ„ν•œ 또 λ‹€λ₯Έ νŒ¨ν„΄μœΌλ‘œ Promise λ₯Ό λ„μž…ν–ˆλ‹€. Promise에 λŒ€ν•˜μ—¬ μ•Œμ•„λ³΄μž... 45-1. 비동기 처리λ₯Ό μœ„ν•œ 콜백 νŒ¨ν„΄μ˜ 단점 콜백 ν—¬ 비동기 ν•¨μˆ˜λŠ” 비동기 처리 κ²°κ³Όλ₯Ό 외뢀에 λ°˜ν™˜ν•˜κ±°λ‚˜, μƒμœ„ μŠ€μ½”ν”„ λ³€μˆ˜μ— ν• λ‹Ήν•  수 μ—†λ‹€. λ”°λΌμ„œ 비동기 ν•¨μˆ˜ 처리 결과에 λŒ€ν•œ 후속 처리λ₯Ό 비동기 ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μˆ˜ν–‰ν•΄μ•Ό ν•œλ‹€. 이 후속 처리λ₯Ό μœ„ν•΄ 주둜 콜백 ν•¨μˆ˜λ₯Ό μ „λ‹¬ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€. // 비동기 ν•¨μˆ˜μ˜ 처리 κ²°κ³Όλ₯Ό 닀루기 μœ„ν•΄ 콜백 ν•¨μˆ˜λ₯Ό..