๐ช Programming
[React] ๋ฆฌ์กํธ Strict Mode ์๊ฒฉ ๋ชจ๋์ ์ฌ์ด๋ ์ดํํธ
[React] ๋ฆฌ์กํธ Strict Mode ์๊ฒฉ ๋ชจ๋์ ์ฌ์ด๋ ์ดํํธ
2024.05.05์๊ฒฉ ๋ชจ๋์ ๊ธฐ๋ฅCRA๋ก ์์ฑํ React ํ๋ก์ ํธ์์ ์๊ฒฉ ๋ชจ๋(Strict Mode)๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฉ๋ผ ์๋ค. ์๊ฒฉ ๋ชจ๋๋ ์ดํ๋ฆฌ์ผ์ด์
์ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์์๋ด๊ธฐ ์ํด ๋ฆฌ์กํธ์์ ์ ๊ณตํ๋ ๋๊ตฌ๋ค. ๊ฐ๋ฐ ๋ชจ๋์์ ํจ์ ์ปดํฌ๋ํธ ๋ ๋๋ง / API ํธ์ถ ๋ฑ์ด ์ค๋ณตํด์ ๋ฐ์ํ๋ค๋ฉด ์๊ฒฉ ๋ชจ๋ ๋๋ฌธ์ ๊ทธ๋ด ๊ฐ๋ฅ์ฑ์ด ๋๋ค.import React from "react";import ReactDOM from "react-dom/client";import App from "./pages/App";const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement,);root.render({/* ... */}); ์๊ฒฉ ๋ชจ๋๋ ์๋ ๊ธฐ๋ฅ์ ์ ..
[React] ํค๋ณด๋๋ก ์กฐ์ํ ์ ์๋ ๋๋กญ๋ค์ด ์๋์์ฑ ๊ฒ์์ฐฝ ๊ตฌํํ๊ธฐ
[React] ํค๋ณด๋๋ก ์กฐ์ํ ์ ์๋ ๋๋กญ๋ค์ด ์๋์์ฑ ๊ฒ์์ฐฝ ๊ตฌํํ๊ธฐ
2024.05.05๊ฒ์์ฐฝ ์๋ ์์ฑ ๊ธฐ๋ฅ์ , ํ๊ทธ๋ฅผ ์ด์ฉํด ๋น ๋ฅด๊ฒ ๊ตฌํํ ์ ์๋ค(์ฐธ๊ณ ํฌ์คํ
). ํค๋ณด๋ ๋ฐฉํฅํค๋ก ์ต์
์ ์ ํํ ์๋ ์๋ค. ํ์ง๋ง ์ด ๋ฐฉ๋ฒ์ ๋ฆฌ์คํธ ์์์ ํด๋ฆญ ์ด๋ฒคํธ๋ฅผ ํ ๋นํ ์ ์๋ ๋จ์ ์ด ์๋ค(๊ฒ์์ ์ ๋ง ๋ง์ด ํด๋ดค์ง๋ง ๊ฒฐ๋ก ์ ๋ถ๊ฐ). ๊ฒ์์ฐฝ์ ํค์๋๋ฅผ ์
๋ ฅํ ํ ๋ชฉ๋ก์ ์๋ ๊ฐ ์ต์
()์ ํด๋ฆญํ ๋๋ง๋ค ํน์ ์ก์
์ ์ทจํด์ผ ํ๋ค๋ฉด ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ ์ ์๋ค. ๋์์ React Select ์ฒ๋ผ ์ ๋ง๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ฑฐ๋, ๋ช ๋
๊ฐ ์ ์ง ๋ณด์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ณด๋จ ์์ฑ๋๋ ์กฐ๊ธ ๋จ์ด์ง ์ ์์ง๋ง ์ง์ ๊ตฌํํ ์ ์๋ค. ์๋๋ ์ง์ ๊ตฌํํ ๋ด์ฉ์ ๊ธฐ๋กํ ๋ด์ฉ. ๊ตฌํ ๋ชฉํ๋ง์ฐ์ค๋ก ๋ฆฌ์คํธ ์ด๋ / ์ ํEnter ํค๋ก ์ ํ๋ฐฉํฅํค๋ก ๋ฆฌ์คํธ ์ด๋ (Keyboard navigate)์คํฌ๋กค์ด ์๊ธด ๋ชฉ๋ก์์ ๋ฐฉํฅ..
[HTML/CSS] Tailwind CSS ํด๋์ค ํจํด ์ฌํ์ฉ / ๊ธฐ๋ณธ ํ
๋ง ์์ &ํ์ฅ
[HTML/CSS] Tailwind CSS ํด๋์ค ํจํด ์ฌํ์ฉ / ๊ธฐ๋ณธ ํ ๋ง ์์ &ํ์ฅ
2024.05.05๋ฐ๋ณต์ ์ผ๋ก ์ฌ์ฉํ๋ Tailwind CSS ํด๋์ค ํจํด์(ํน์ ์์์ ์ ์ํ ํด๋์ค ๊ทธ๋ฃน์ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉํ ๋) ํ๋์ ์ปค์คํ
ํด๋์ค๋ก ์ถ์ถํด์ ์ฌ์ฉํ ์ ์๋ค ๋ฐฐ๊ฒฝ ์ง์ — Tailwind CSS 3๊ณ์ธตTailwind๋ CSS ์ฐ์ ์์๋ฅผ ์ ์ดํ๊ธฐ ์ํด base, components, utilities 3๊ฐ์ ๊ณ์ธต(layer)์ผ๋ก ๊ตฌ๋ถํ๋ค. ์ด๋ ๊ฒ ๊ณ์ธต์ ๊ตฌ๋ถํด๋๋ฉด ๊ฐ ์คํ์ผ์ด ์ด๋ป๊ฒ ์ํธ์์ฉํ๋์ง ๋ ์ฝ๊ฒ ์ดํดํ ์ ์์ผ๋ฉฐ, @layer ์ง์๋ฌธ(ํด๋น ์คํ์ผ์ด ์ด๋ค ๊ณ์ธต์ ์ํ ์ง ์ง์ )์ ์ฌ์ฉํด ์ํ๋ ๋ฐฉ์์ผ๋ก ์ ์ธ ์์๋ฅผ ์ ์ดํ ์ ์๊ฒ ๋๋ค. — ์ฐธ๊ณ base์ผ๋ฐ HTML ์์์ ์ ์ฉ๋๋ ์ฌ์ค์ ๊ท์น(reset rules) / ๊ธฐ๋ณธ ์คํ์ผ์ ์ํ ๋ ์ด์ด. base ๊ณ์ธต์ ํน์ ์๋ฆฌ๋จผํธ์ ๊ธฐ๋ณธ ์คํ..
[React] ๋ฆฌ์กํธ ๋๋๊ทธ์ค๋๋กญ ํ์ผ ์
๋ก๋ ๊ตฌํ
[React] ๋ฆฌ์กํธ ๋๋๊ทธ์ค๋๋กญ ํ์ผ ์ ๋ก๋ ๊ตฌํ
2024.05.05์์ฆ ๋๋ถ๋ถ ์น์ฌ์ดํธ์์ ํ์ผ์ ์
๋ก๋ํ ๋ ๋ง์ฐ์ค๋ก ์ํ๋ ํ์ผ์ ๋์ด ๋๋ ๋๋๊ทธ&๋๋กญ ๊ธฐ๋ฅ์ ์ง์ํ๋ค. ๋ฆฌ์กํธ์์ React DnD ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์๋ ์์ง๋ง HTML5์์ ์ ๊ณตํ๋ ๋๋๊ทธ ๋๋กญ API๋ฅผ ์ด์ฉํด์ ์ง์ ๊ตฌํํ ์ ์๋ค. ์๊ฐ๋ณด๋ค ์ด๋ ต์ง๋ ์๋ค. ๊ธฐ๋ณธ ๊ตฌ์กฐ๋๋ณด๊ธฐexport interface IFileTypes { id: number; object: File; // File ๊ฐ์ฒด}const DragDrop = ( { /* ... */ },) => { const [isDragging, setIsDragging] = useState(false); const [files, setFiles] = useState([]); const fileId = useRef(0);..
[HTML/CSS] width ์์ฑ ์๋ ๋งค์ปค๋์ฆ
[HTML/CSS] width ์์ฑ ์๋ ๋งค์ปค๋์ฆ
2024.05.05์๋ฆฌ๋จผํธ์ ๋๋น๋ฅผ ์ ์ดํ๊ธฐ ์ํด CSS์ width ์์ฑ์ ์ฌ์ฉํ๋ค. ํ์์ ์์ฃผ ์ฌ์ฉํ๋ ์์ฑ์ด์ง๋ง ์ข
์ข
์๊ฐํ๋๋ก ์๋ํ์ง ์์ ๋๊ฐ ์๋ค. width๋ โ์ ๋๊ฐ โ์๋๊ฐ โํค์๋ ํฌ๊ฒ 3๊ฐ์ง ์ค์ ์ผ๋ก ๊ตฌ๋ถ๋๋ฉฐ, ๊ฐ ์ค์ ์ ๋ฐ๋ผ ๋๋น๊ฐ ๋ค๋ฅด๊ฒ ๊ฒฐ์ ๋๋ค. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ์ ๋๊ฐsection { width: 200px; height: 200px; border: 1px solid gray;} /* ๋ถ๋ชจ */p { width: 300px; background: Khaki; mar..
[TS] ํ์
์คํฌ๋ฆฝํธ ๋งต๋ ํ์
/ ์ ํธ๋ฆฌํฐ ํ์
/ Enum
[TS] ํ์ ์คํฌ๋ฆฝํธ ๋งต๋ ํ์ / ์ ํธ๋ฆฌํฐ ํ์ / Enum
2024.05.05ํ์
์คํฌ๋ฆฝํธ์ ๋งต๋ ํ์
(Mapped Types)์ ๊ธฐ์กด ํ์
์ ์๋ก์ด ํ์
์ผ๋ก ๋ณํํด์ฃผ๋ ๋ฌธ๋ฒ์ด๋ค. ์๋ฐ์คํฌ๋ฆฝํธ์ map ๋ฐฐ์ด ๋ฉ์๋๋ฅผ ํ์
์ ์ ์ฉํ ๊ฒ๊ณผ ๋น์ทํ๋ค(๊ทธ๋์ ์ด๋ฆ์ด Mapped Types๋ค). ๋งต๋ ํ์
๊ฐ๋
ํบ์๋ณด๊ธฐ์๋ ๋๋ฐ์ด์ค ๋ธ๋๋๋ฅผ ๋ํ๋ด๋ ์ ๋์จ ํ์
Devices๊ฐ ์๋ค. ์ฌ๊ธฐ์ ๊ฐ ๋๋ฐ์ด์ค ๋ธ๋๋์ ๊ฐ๊ฒฉ ์ ๋ณด๊ฐ ํฌํจ๋ ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ์ถ์ ๋ ๋งต๋ ํ์
์ ํ์ฉํ ์ ์๋ค.type Devices = 'APPLE' | 'OPPO' | 'XIAOMI'; // ๋๋ฐ์ด์ค ๋ธ๋๋๋ฅผ ๋ํ๋ด๋ ์ ๋์จ ํ์
type DevicePrices = { [P in Devices]: number }; // ๋๋ฐ์ด์ค ๋ธ๋๋ ํ์
์ ์ํํด์ key๋ก ์ ์๋๋ ๋งต๋ ํ์
const deviceInfo: Devi..
[TS] ํ์
์คํฌ๋ฆฝํธ - ํ์
ํธํ
[TS] ํ์ ์คํฌ๋ฆฝํธ - ํ์ ํธํ
2024.05.04ํ์
ํธํ Type Compatibility๐ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ด๋ ์ต๋ช
ํจ์ ๋ฑ์ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ๋ช
์์ ์ผ๋ก ํ์
์ ์ง์ ํ๋ ๊ฒ๋ณด๋ค ์ฝ๋์ ๊ตฌ์กฐ ๊ด์ ์์ ํ์
์ ์ง์ ํ๋๊ฒ ๋ ์ ์ด์ธ๋ฆด ์๋ ์๋ค. ํ์
์คํฌ๋ฆฝํธ์์ ๋ค๋ฅธ ํ์
๊ฐ์ ํธํ ์ฌ๋ถ๋ฅผ ์ ๊ฒํ๋ ๊ฒ์ ํ์
ํธํ์ด๋ผ๊ณ ํ๋ค. ์๋ Avengers ํด๋์ค๋ Ironman ์ธํฐํ์ด์ค๋ฅผ ์์๋ฐ์ ๊ตฌํํ ๊ฒ ์๋๋ฐ๋ ์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋๋ค. ํ์
์คํฌ๋ฆฝํธ์์ ํ์
์ ์ ์๋์ด ์๋ ์์ฑ์ ํ์
์ ๊ฐ์ง๊ณ ์ฝ๋๊ฐ ํธํ๋๋์ง ํ์ธํ๊ธฐ ๋๋ฌธ์ด๋ค.interface Ironman { name: string;}class Avengers { name: string;}let ironMan: Ironman;ironMan = new Avengers(); // ok..
[DevTools] ์ธ๋ถ์์ ๋ก์ปฌ ์๋ฒ ์ ์ํ๊ธฐ — ngrok
[DevTools] ์ธ๋ถ์์ ๋ก์ปฌ ์๋ฒ ์ ์ํ๊ธฐ — ngrok
2024.05.04๋ก์ปฌ ์๋ฒ๋ฅผ ๋์๋๊ณ ์์
์ค์ธ ๋ด์ฉ์ด ์ธ๋ถ ๋คํธ์ํฌ์์ ์ด๋ป๊ฒ ์๋ํ๋์ง ํ
์คํธํ๊ณ ์ถ์ ๋๊ฐ ์๋ค. ์ธ๋ถ์์ ์ ์ํ๋ ค๋ฉด ๋ก์ปฌ ์๋ฒ์์ ์ฌ์ฉํ๋ ํฌํธ๋ฅผ(3000, 8080 ๋ฑ...) ์ด์ด์ผ ๋๋๋ฐ ๋ณด์์ ์ข์ง ์๊ณ , AWS์ ์ฌ๋ฆฌ์๋ ๋ฒ๊ฑฐ๋กญ๋ค. ์ด๋ ngrok๋ผ๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ฉด ๋๋ค. ngrok๋ ๋ฐฉํ๋ฒฝ ๋ท๋จ์ ์๋ ๋ก์ปฌ ์๋ฒ๋ฅผ ๋ณด์ ํฐ๋์ ํตํด ๊ณต์ฉ ์ธํฐ๋ท์ ๋
ธ์ถ๋๋๋ก ํด์ค๋ค. Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels. ์คํ ๋ฐฉ๋ฒโถ ngrok ํ์๊ฐ์
๋ฐ Authtoken ๋ณต์ฌ(๋์๋ณด๋ ์ข์ธก Getting Started → Your Authtoken) โท ngrok ์ค..
[React] Blur ํจ๊ณผ๋ฅผ ํ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ Image Lazy Loading
[React] Blur ํจ๊ณผ๋ฅผ ํ์ฉํ ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋ฉ Image Lazy Loading
2024.05.04์นํ์ด์ง์์ ์ฑ๋ฅ์ ์ํฅ์ ๊ฐ์ฅ ๋ง์ด ์ฃผ๋ ๋ถ๋ถ์ด ์ด๋ฏธ์ง / ๋น๋์ค ๊ฐ์ ๋ฏธ๋์ด ์์๋ค. ํนํ ์ด๋ฏธ์ง๋ ๋ฐฐ๋, ์ ํ ์ฌ์ง, ๋ก๊ณ ๋ฑ ํ์ด์ง ๊ตฌ์๊ตฌ์์์ ์ฌ์ฉํ๋ค. HTTP Archive Data์ ๋ฐ๋ฅด๋ฉด ์ ์ฒด ์นํ์ด์ง ์ฉ๋์ 45%๋ฅผ ์ด๋ฏธ์ง๊ฐ ์ฐจ์งํ๋ค๊ณ ํ๋ค. ์ด๋ฏธ์ง๋ฅผ ์ฌ์ฉํ์ง ์๋๊ฑด ๋ถ๊ฐ๋ฅํ์ง๋ง, ํ๋ฉด์ ๋
ธ์ถ๋ ๋๋ง ์ด๋ฏธ์ง๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ผ๋ก ํ์ด์ง ๋ก๋ฉ ์๊ฐ์ ๋จ์ถ์ํฌ ์ ์๋ค. ์ด๋ฐ ๋ฐฉ์์ Lazy Loading์ด๋ผ๊ณ ํ๋ค. Lazy Loading ๊ตฌํ ๋ฐฉ๋ฒ๐ก Lazy Loading์ด ์ ์ฉ๋ ์ด๋ฏธ์ง๊ฐ ๋ทฐํฌํธ์ ๊ทผ์ ํด์ ์ด๋ฏธ์ง๋ฅผ ๋ก๋ํ๋ฉด ์ฝํ
์ธ ๊ฐ ๋ฐ๋ ค๋๋ ํ์์ด ๋ฐ์ํ๋ค. ์ด๋ฅผ ๋ฐฉ์งํ๋ ค๋ฉด ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ธ๋ ์ปจํ
์ด๋ ์์์ ๋์ด / ๋๋น๋ฅผ ์ง์ ํ๋ฉด ๋๋ค. Lazy Loading์ ํฌ๊ฒ Chrome Na..
[React] ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
[React] ๋ ๊ฐ์ง ๋ฐฉ๋ฒ์ผ๋ก ๊ตฌํํด๋ณด๋ ๋ฌดํ ์คํฌ๋กค Infinite Scroll
2024.05.041) ์คํฌ๋กค ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ ๋ฐฉ๋ฒ๋ฌดํ ์คํฌ๋กค์ ํ์ฌ ํ์ด์ง์์ ์คํฌ๋กค๋ฐ๊ฐ ๋ง์ง๋ง ์ฝํ
์ธ ์ง์ ์ ์์ ๋ ๋ค์ ์ฝํ
์ธ ๋ฅผ ์๋์ผ๋ก ๋ถ๋ฌ์ค๋ ๊ตฌํ ๋ฐฉ์์ ๋งํ๋ค. โ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์์ญ์ ๋์ด์ โํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ด๋ฅผ ๋ํ ๊ฐ์ด โ์ ์ฒด ๋ฌธ์์ ๋์ด์ ๊ฐ๋ค๋ฉด ํ์ฌ ์คํฌ๋กค์ด ๊ฐ์ฅ ํ๋จ ๋์ ๋๋ฌํ๋ค๋ ๊ฑธ ์ ์ ์๋ค. ์์์ผ ํ ๊ธฐํ ํ๋กํผํฐ โถ ์คํฌ๋กคํด์ ๊ฐ๋ ค์ง ์ฝํ
์ธ ์์ญ์ ๋์ด : document.documentElement.scrollTop โท ํ์ฌ ํ๋ฉด(๋ทฐํฌํธ)์ ๋์ดwindow.innerHeight : ์คํฌ๋กค๋ฐ ํฌํจdocument.documentElement.clientHeight : ์คํฌ๋กค๋ฐ ์ ์ธ โธ ์ ์ฒด ๋ฌธ์์ ๋์ด// ๋ฌธ์์ ์ ํํ ์ ์ฒด ๋์ด๋ฅผ ๊ตฌํ๊ธฐ ์ํ ์ฝ๋const scrollHei..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ํํ์ ํ๊ฐ ์์์ ๊ฒฐํฉ์ฑ
2024.05.03ํํ์์ ํ๊ฐ ์์let foo = { n: 1 };let bar = foo; // foo ๊ฐ์ฒด์ ์ฐธ์กฐ ์ฃผ์๊ฐ bar ๋ณ์์ ํ ๋น๋จfoo.x = foo = { n: 2 }; // ๊ฐ์ ๋ฐํํ๋ ํ ๋น ์ฐ์ฐ์console.log(foo.x); // ? ์ ๋ฌธ์ ๋ฅผ ์ผํ๋ณด๋ฉด foo.x์ ๊ฒฐ๊ณผ๋ { n: 2 }์ผ ๊ฒ ๊ฐ์ง๋ง ์๋๋ค. foo.x๋ undefined๋ฅผ ์ถ๋ ฅํ๋ค. ์ ์ฝ๋์ ์ฐ์ฐ ๊ณผ์ ์ ํ๋ํ๋ ํ์ด๋ณด๋ฉด ์๋์ ๊ฐ๋ค. ์ผ์ชฝ ํํ์ ํ๊ฐ์ฐ์ธก ํํ์์ด ํ๊ฐํ ๊ฐ์ด ํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo.x๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์ค๋ฅธ์ชฝ ํํ์ ํ๊ฐํ ๋น๋ ๊ณณ์ ๊ฒฐ์ ํ๊ธฐ ์ํด foo ๋ณ์๊ฐ ํ์ฌ ์ฐธ์กฐํ๋ ๊ฐ์ฒด { n: 1 } ํ์ธ์๋ก์ด ๊ฐ์ฒด { n: 2 }๊ฐ foo ๋ณ์์ ํ ๋น๋๊ณ ํด๋น ๊ฐ์ฒด ๋ฐํ..
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
[JS] ์๋ฐ์คํฌ๋ฆฝํธ ์ ๋๋ ์ดํฐ Generator ์ด ์ ๋ฆฌ
2024.05.03์ ๋๋ ์ดํฐ๋ ES6์ ๋์
๋ ํน์ํ ํจ์๋ค. ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๊ณ , ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์๋ ์๋ค. ์ด๋ฐ ํน์ง ๋๋ฌธ์ ์ ๋๋ ์ดํฐ ํจ์์์ ์ฝ๋ ๋ธ๋ก์ ์คํ์ ์ ์ ๋ฉ์ท๋ค๊ฐ ํ์ํ ์์ ์ ์ฌ๊ฐํ ์ ์๋ค. ์ผ๋ฐ ํจ์๋ 0~1๊ฐ ๊ฐ๋ง ๋ฐํํ ์ ์์ง๋ง, ์ ๋๋ ์ดํฐ ํจ์๋ ์ฌ๋ฌ๊ฐ์ ๊ฐ์ ํ์์ ๋ฐ๋ผ ํ๋์ฉ ๋ฐํํ ์ ์๋ค. ์ ๋๋ ์ดํฐ ํจ์์ ํน์งํจ์ ํธ์ถ์์๊ฒ ํจ์ ์คํ์ ์ ์ด๊ถ์ ์๋(yield)ํ ์ ์๋ค์ผ๋ฐ ํจ์ : ํจ์ ํธ์ถ์(caller)๋ ํจ์๋ฅผ ํธ์ถํ ์ดํ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค.์ ๋๋ ์ดํฐ ํจ์ : ํจ์ ํธ์ถ์๊ฐ ํจ์ ์คํ์ ์ ์ดํ ์ ์๋ค(ํจ์ ์คํ ์ผ์ ์ ์ง / ์ฌ๊ฐ)ํจ์ ํธ์ถ์์ ํจ์ ์ํ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ค์ผ๋ฐ ํจ์ : ๋งค๊ฐ๋ณ์๋ฅผ ํตํด ๊ฐ์ ์ ๋ฌ๋ฐ..