Section2 Unit3 [JS/Node] ๋น๋๊ธฐ - ๋น๋๊ธฐ์ฒ๋ฆฌ (callback, promise, async/await)
๐ Chapter2. ๋น๋๊ธฐ
• ๋๊ธฐ(synchronous)๋ ์์ฐจ์ ์ผ๋ก ์คํ๋๋ฉฐ, ์ด๋ค ์์
์ด ์ํ ์ค์ด๋ฉด ๋ค์ ํ์คํฌ๋ ๋๊ธฐํ๊ฒ ๋๋ค.
• ๋น๋๊ธฐ(asynchronous)๋ ํ์คํฌ๊ฐ ์ข
๋ฃ๋์ง ์์ ์ํ๋ผ ํ๋๋ผ๋ ๋๊ธฐํ์ง ์๊ณ ์ฆ์ ๋ค์ ํ์คํฌ๋ฅผ ์คํํ๋ค.
• ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฑ๊ธ ์ค๋ ๋ ๊ธฐ๋ฐ์ ๋๊ธฐ์ ์ผ๋ก ์๋ํ๋ ์ธ์ด์ด์ง๋ง, ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค.
• ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํด ์ฝ๋ฐฑํจ์, Promise, async/await ๋ฑ์ ์ฌ์ฉํ ์ ์๋ค.
→ Promise, async/await๋ฅผ ๋ฐ๋ก ์ ๋ฆฌ๋ฅผ ํด๋ณด์๋ค.
์ฝ๋ฐฑํจ์์ ์ฝ๋ฐฑํฌ ๋ฑ์ ๋ฌธ์ ์์ ๋ฒ์ด๋๊ธฐ ์ํด ES6์์๋ Promise๊ฐ ๋์ ๋์๊ณ , ES8์์๋ async/await๊ฐ ๋์ ๋์๋ค. Promise๋ฅผ ์ด์ฌํ ๊ณต๋ถ๋ฅผ ํ๋ค๊ฐ ๋ฌธ๋ async๊ฐ ์๋๋ฐ Promise๋ฅผ ๊ตณ์ด ๊ณต๋ถํด์ผํด? ๋ผ๋ ์๊ฐ์ด ๋ค์ด์ chatGPTํํ ๋ฌผ์ด๋ดค์๋ค.
Q. js์์ async await๋ ๋์๋๋ฐ promise๋ฅผ ํ์ตํ ํ์๊ฐ ์๋์?
A. ๋ค, JavaScript์์ async/await๋ Promise๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋์ํฉ๋๋ค. Promise๋ ๋น๋๊ธฐ ์์ ์ ์ฒ๋ฆฌํ๊ธฐ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ด์ฅ ๊ฐ์ฒด์ ๋๋ค. Promise๋ ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋์์ ๋ ๊ฒฐ๊ณผ๋ฅผ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋์์ฃผ๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํฉ๋๋ค.
async/await๋ Promise์ ํธ๋ฆฌํ ๊ตฌ๋ฌธ์ ์ธ ๊ฐ์ธ๊ธฐ ๋ฐฉ์์ ๋๋ค. async ํจ์๋ ํญ์ Promise๋ฅผ ๋ฐํํ๋ฉฐ, await ํค์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋น๋๊ธฐ ์์ ์ด ์๋ฃ๋ ๋๊น์ง ํจ์์ ์คํ์ ์ผ์ ์ค๋จํ ์ ์์ต๋๋ค. ์ด๋ฅผ ํตํด ์ฝ๋๋ฅผ ๋ ์ฝ๊ธฐ ์ฝ๊ณ ๋๊ธฐ์ ์ผ๋ก ์์ฑํ ์ ์์ต๋๋ค.
๊ทธ๋ฌ๋ async/await๋ Promise๋ฅผ ๋์ฒดํ๋ ๊ฒ์ด ์๋๋ผ Promise๋ฅผ ๋ณด๋ค ์ฝ๊ฒ ์ฌ์ฉํ ์ ์๋๋ก ๋ง๋ ๊ตฌ๋ฌธ์ ์ธ ๊ฐ์ ์ ๋๋ค. ๋ฐ๋ผ์ async/await๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด Promise์ ๊ธฐ๋ณธ ๋์ ๋ฐ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค. ๋ํ, ์ค์ ๋ก Promise๋ฅผ ์ฌ์ฉํด์ผ ํ ๊ฒฝ์ฐ๋ ์์ ์ ์์ผ๋ฏ๋ก Promise๋ฅผ ํ์ตํ๋ ๊ฒ์ด ์ฌ์ ํ ์ค์ํฉ๋๋ค.
๊ฒฐ๋ก ์ ์ผ๋ก, async/await๋ฅผ ์ฌ์ฉํ๋ฉด Promise๋ฅผ ์ฌ์ฉํ๋ ๊ฒ๋ณด๋ค ์ฝ๋๋ฅผ ๋ ๊ฐ๊ฒฐํ๊ฒ ์์ฑํ ์ ์์ง๋ง, Promise์ ๋์๊ณผ ์ฌ์ฉ๋ฒ์ ๋ํ ์ดํด๋ ์ฌ์ ํ ํ์ํฉ๋๋ค.
์คํ async ํจ์๊ฐ Promise๋ฅผ ๋ฐํํ๋ Promise๋ฅผ ๊ณต๋ถํ๋๊ฑด ํ์ํ ์ผ์ด์๋ค๋ ๊ฒฐ๋ก ์ ์ด๋ฅด๋ ๋ค.
๐ Chapter3. Node.js
• "๋น๋๊ธฐ ์ด๋ฒคํธ ๊ธฐ๋ฐ JavaScript ๋ฐํ์”
• ๋ชจ๋์ด๋ ์ด๋ค ๊ธฐ๋ฅ์ ์กฐ๋ฆฝํ ์ ์๋ ํํ๋ก ๋ง๋ ๋ถ๋ถ. fs(File System) ๋ชจ๋์, PC์ ํ์ผ์ ์ฝ๊ฑฐ๋ ์ ์ฅํ๋ ๋ฑ์ ์ผ์ ํ ์ ์๊ฒ ๋์์ค๋ค.
• Node.js ๋ด์ฅ ๋ชจ๋ ๋ชฉ๋ก: Node.js v16.14.2 Documentation
Node.js ๋ถ๋ถ์ ์ฐ์ ์ ๋ฆฌ๋ ์ํด๋๊ณ ํ๋ฒ ํ์ด๋ณด๊ธฐ๋ง ํ๋ค..! ๋์ค์ ์ข ๋ ์ต์ํด์ง๋ฉด ์ ๋ฆฌํด๋ด์ผ์ง.
โญ๏ธ ๊ณผ์ . Part 1 - ํ์ด๋จธ API
• callback, promise, async/await ํค์๋๋ฅผ ์ด์ฉํ ๋น๋๊ธฐ ํ๋ฆ ์ ์ด๋ฅผ ์ฝ๋๋ฅผ ํตํด ์ดํด๋ณด๋ ์๊ฐ ๐
→ ์ธ ๊ฐ์ง ํจํด์ ๋น๋๊ธฐ ์ฝ๋๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ฐจ์ด ํ์ตํ๋ค. (์ธ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํ ์ฝ๋๋ ๋ชจ๋ ๊ฐ์ ๋์์ ํ๋ค.) ํ์ด๋จธ API ๊ณผ์ ๋ฅผ ํ๋ฉด์ promise์ async/await ์ ๋ํด ๋ ์ ์ดํดํ ์ ์๋ ๊ณ๊ธฐ๊ฐ ๋์๋ค.
→ ์ธ ๊ฐ์ง ํจํด์ ๋ํ ํ์ต์ด ๋์ด์๋ค๋ฉด ์ดํดํ๋๋ฐ ์ด๋ ต์ง๋ ์์ ๊ณผ์ ์๋ค.
โญ๏ธ ๊ณผ์ . Part 2 - fs ๋ชจ๋
• fs ๋ชจ๋ ๊ณผ์ ๋ ์งํ์ค! ์ฒซ ์์๋ถํฐ ํค๋งค์ ์ ์ํ๋ ธ๋๋ฐ, ์ฌ์ค ์์ฒญ ๊ฐ๋จํ ๋ถ๋ถ์ ํค๋งค๊ณ ์์๋ค๋ ๊ฑฐ... ๐ญ ๊ทธ๋๋ ๋น๋๊ธฐ ํจํด์ ๋ํด ์ข ๋ ๊ณต๋ถํ๊ณ ๋ณด๋ฉด ์ข์ ๊ฒ ๊ฐ์์ ๋ด์ผ ํ์ด ์๊ฐ์ ๋ง๋ฌด๋ฆฌํ๊ธฐ๋ก ํ๋ค..!
๐ ์ค๋์ ํ๊ณ
์ค๋๋ ์ด์ ๋ ๋น์ทํ๊ฒ ์์ ์ง๋ ๋ฐ๋ผ๊ฐ๊ณ ๊ณผ์ ํ๋ค๊ณ ์ ์ ์ด ์์๋ค. ์์ ๋ถํฐ ์ด๋ ต๋ค๊ณ ์๊ฐํ๋ ๋น๋๊ธฐ ๊ฐ๋ ์ ์ค๋ ๋ค์ ๊ณต๋ถํด๋ณด๋ ์ด์ ์กฐ๊ธ ์ ๊ฒ ๊ฐ๊ธฐ๋ ํ๋ค. Node.js๋ ์ฝ์ง ์์๋๋ฐ, fs ๋ชจ๋์ ์ฌ์ฉํด์ ๊ณผ์ ๋ฅผ ํ๋๋ฐ ๊ฐ์ด ์์กํ์ ์ด๋ ค์ ๋ค. ๋ด์ผ๊น์ง ์ด๋ฒ ์ ๋์ ๋ง๋ฌด๋ฆฌํ๋ฉด ๋ ๊ฒ ๊ฐ์์ ์ ๋ ์ ๊ฐ์ธ ๊ณต๋ถ๋ฅผ ํ๋ฉฐ ๋ณด์ถฉ์ ํด์ผํ ๊ฒ ๊ฐ๋ค. ๋งค์ผ ๊พธ์คํ ๋ธ๋ก๊น ๋ ํด์ผ ํ๋๋ฐ, ๋งค์ผ ๋ฐฐ์ด ๋ด์ฉ์ ์ ๋ฆฌํ๊ธฐ์๋ ์ด์ ์ ์ ์๊ฐ์ด ๋ถ์กฑํด์ง๊ณ ์๋ค. ์ด๋ฒ ์ฃผ, ์๋ฏธ๋ค์ง๊ณ ์ ํ ์ ์์๊น.
'Frontend Dev > ๐ฅ ์ฝ๋์คํ ์ด์ธ FE ๋ถํธ์บ ํ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Section2 Unit4 [React] Intro (0) | 2023.05.18 |
---|---|
Section2 Unit3 JS/Node ๋น๋๊ธฐ - fetchAPI (0) | 2023.05.17 |
Section2 Unit3 JS/Node ๋น๋๊ธฐ - ๊ณ ์ฐจํจ์ ๋ฆฌ๋ทฐ & underbar ๊ณผ์ (0) | 2023.05.15 |
Section2 Unit2 JavaScript ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ - ํ๋กํ ํ์ (0) | 2023.05.12 |
Section2 Unit2 JavaScript ๊ฐ์ฒด ์งํฅ ํ๋ก๊ทธ๋๋ฐ - OOP์ ํด๋์ค ๋ฌธ๋ฒ (0) | 2023.05.11 |