관리 메뉴

λͺ©λ‘λͺ¨λ˜μžλ°”μŠ€ν¬λ¦½νŠΈ (15)

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. 비동기 처리λ₯Ό μœ„ν•œ 콜백 νŒ¨ν„΄μ˜ 단점 콜백 ν—¬ 비동기 ν•¨μˆ˜λŠ” 비동기 처리 κ²°κ³Όλ₯Ό 외뢀에 λ°˜ν™˜ν•˜κ±°λ‚˜, μƒμœ„ μŠ€μ½”ν”„ λ³€μˆ˜μ— ν• λ‹Ήν•  수 μ—†λ‹€. λ”°λΌμ„œ 비동기 ν•¨μˆ˜ 처리 결과에 λŒ€ν•œ 후속 처리λ₯Ό 비동기 ν•¨μˆ˜ λ‚΄λΆ€μ—μ„œ μˆ˜ν–‰ν•΄μ•Ό ν•œλ‹€. 이 후속 처리λ₯Ό μœ„ν•΄ 주둜 콜백 ν•¨μˆ˜λ₯Ό μ „λ‹¬ν•˜λŠ” 것이 μΌλ°˜μ μ΄λ‹€. // 비동기 ν•¨μˆ˜μ˜ 처리 κ²°κ³Όλ₯Ό 닀루기 μœ„ν•΄ 콜백 ν•¨μˆ˜λ₯Ό..

19μž₯. ν”„λ‘œν† νƒ€μž…

19μž₯. ν”„λ‘œν† νƒ€μž… μžλ°”μŠ€ν¬λ¦½νŠΈλŠ” λͺ…λ Ήν˜•, ν•¨μˆ˜ν˜•, ν”„λ‘œν† νƒ€μž… 기반 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ„ μ§€μ›ν•˜λŠ” λ©€ν‹° νŒ¨λŸ¬λ‹€μž„ ν”„λ‘œκ·Έλž˜λ° 언어이닀. primitive type의 값을 μ œμ™Έν•œ λ‚˜λ¨Έμ§€ 값듀은 λͺ¨λ‘ 객체이닀. 19-1. 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ° 객체의 μ§‘ν•©μœΌλ‘œ ν”„λ‘œκ·Έλž¨μ„ ν‘œν˜„ν•˜λ €λŠ” ν”„λ‘œκ·Έλž˜λ° νŒ¨λŸ¬λ‹€μž„ λ‹€μ–‘ν•œ 속성 μ€‘μ—μ„œ ν”„λ‘œκ·Έλž¨μ— ν•„μš”ν•œ μ†μ„±λ§Œ κ°„μΆ”λ € λ‚΄μ–΄ ν‘œν˜„ν•˜λŠ”κ²ƒμ„ 좔상화(abstraction)라 ν•œλ‹€. 속성을 톡해 μ—¬λŸ¬ 개의 값을 ν•˜λ‚˜μ˜ λ‹¨μœ„λ‘œ κ΅¬μ„±ν•œ 볡합적인 자료ꡬ쑰λ₯Ό 객체라 ν•œλ‹€. κ°μ²΄λŠ” μƒνƒœ 데이터와 λ™μž‘μ„ ν•˜λ‚˜μ˜ 논리적인 λ‹¨μœ„λ‘œ 묢은 볡합적인 μžλ£Œκ΅¬μ‘°μ΄λ‹€. 19-2. 상속과 ν”„λ‘œν† νƒ€μž… 상속(inheritance)λŠ” 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ˜ 핡심 κ°œλ…μœΌλ‘œ, μ–΄λ–€ 객체의 ν”„λ‘œνΌν‹° λ˜λŠ” λ©”μ„œλ“œλ₯Ό λ‹€λ₯Έ 객체가 ..