index.html

Download
html 207 lines 6.6 KB 
  1<!DOCTYPE html>
  2<html lang="ko">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>๋น„๋™๊ธฐ JavaScript ์˜ˆ์ œ</title>
  7    <style>
  8        body {
  9            font-family: 'Segoe UI', Tahoma, sans-serif;
 10            max-width: 900px;
 11            margin: 0 auto;
 12            padding: 20px;
 13            background: #f5f5f5;
 14        }
 15        h1 { text-align: center; color: #333; }
 16        h2 { color: #2c3e50; border-bottom: 2px solid #e74c3c; padding-bottom: 10px; }
 17        .section {
 18            background: white;
 19            padding: 20px;
 20            margin: 20px 0;
 21            border-radius: 8px;
 22            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
 23        }
 24        button {
 25            background: #e74c3c;
 26            color: white;
 27            border: none;
 28            padding: 10px 20px;
 29            border-radius: 4px;
 30            cursor: pointer;
 31            margin: 5px;
 32        }
 33        button:hover { background: #c0392b; }
 34        button:disabled { background: #bdc3c7; cursor: not-allowed; }
 35        .output {
 36            background: #2c3e50;
 37            color: #2ecc71;
 38            padding: 15px;
 39            border-radius: 4px;
 40            font-family: monospace;
 41            white-space: pre-wrap;
 42            min-height: 100px;
 43            max-height: 300px;
 44            overflow-y: auto;
 45        }
 46        pre {
 47            background: #ecf0f1;
 48            padding: 15px;
 49            border-radius: 4px;
 50            overflow-x: auto;
 51        }
 52        .loading {
 53            display: inline-block;
 54            width: 20px;
 55            height: 20px;
 56            border: 3px solid #f3f3f3;
 57            border-top: 3px solid #e74c3c;
 58            border-radius: 50%;
 59            animation: spin 1s linear infinite;
 60            margin-left: 10px;
 61            vertical-align: middle;
 62        }
 63        @keyframes spin {
 64            0% { transform: rotate(0deg); }
 65            100% { transform: rotate(360deg); }
 66        }
 67        .user-card {
 68            display: inline-block;
 69            background: #fff;
 70            border: 1px solid #ddd;
 71            border-radius: 8px;
 72            padding: 15px;
 73            margin: 10px;
 74            width: 200px;
 75            text-align: center;
 76        }
 77        .user-card img {
 78            width: 80px;
 79            height: 80px;
 80            border-radius: 50%;
 81        }
 82        .user-card h4 { margin: 10px 0 5px; }
 83        .user-card p { color: #666; font-size: 0.9em; margin: 0; }
 84    </style>
 85</head>
 86<body>
 87    <h1>๋น„๋™๊ธฐ JavaScript ์˜ˆ์ œ</h1>
 88
 89    <!-- 1. ์ฝœ๋ฐฑ ํ•จ์ˆ˜ -->
 90    <div class="section">
 91        <h2>1. ์ฝœ๋ฐฑ ํ•จ์ˆ˜</h2>
 92        <button onclick="runCallback()">์ฝœ๋ฐฑ ์‹คํ–‰</button>
 93        <button onclick="runCallbackHell()">์ฝœ๋ฐฑ ์ง€์˜ฅ ์˜ˆ์‹œ</button>
 94        <div class="output" id="callbackOutput">๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
 95        <pre>
 96// ์ฝœ๋ฐฑ ํŒจํ„ด
 97function fetchData(callback) {
 98    setTimeout(() => {
 99        callback("๋ฐ์ดํ„ฐ ๋กœ๋“œ ์™„๋ฃŒ");
100    }, 1000);
101}
102
103fetchData((result) => {
104    console.log(result);
105});
106        </pre>
107    </div>
108
109    <!-- 2. Promise -->
110    <div class="section">
111        <h2>2. Promise</h2>
112        <button onclick="runPromise()">Promise ์‹คํ–‰</button>
113        <button onclick="runPromiseChain()">Promise ์ฒด์ด๋‹</button>
114        <button onclick="runPromiseError()">์—๋Ÿฌ ์ฒ˜๋ฆฌ</button>
115        <div class="output" id="promiseOutput">๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
116        <pre>
117// Promise ์ƒ์„ฑ
118const promise = new Promise((resolve, reject) => {
119    setTimeout(() => {
120        resolve("์„ฑ๊ณต!");
121        // reject(new Error("์‹คํŒจ!"));
122    }, 1000);
123});
124
125// Promise ์‚ฌ์šฉ
126promise
127    .then(result => console.log(result))
128    .catch(error => console.error(error))
129    .finally(() => console.log("์™„๋ฃŒ"));
130        </pre>
131    </div>
132
133    <!-- 3. async/await -->
134    <div class="section">
135        <h2>3. async/await</h2>
136        <button onclick="runAsyncAwait()">async/await ์‹คํ–‰</button>
137        <button onclick="runAsyncError()">์—๋Ÿฌ ์ฒ˜๋ฆฌ</button>
138        <div class="output" id="asyncOutput">๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
139        <pre>
140async function fetchData() {
141    try {
142        const response = await fetch(url);
143        const data = await response.json();
144        return data;
145    } catch (error) {
146        console.error(error);
147    }
148}
149        </pre>
150    </div>
151
152    <!-- 4. Promise.all, Promise.race -->
153    <div class="section">
154        <h2>4. Promise.all, Promise.race</h2>
155        <button onclick="runPromiseAll()">Promise.all</button>
156        <button onclick="runPromiseRace()">Promise.race</button>
157        <button onclick="runPromiseAllSettled()">Promise.allSettled</button>
158        <div class="output" id="promiseAllOutput">๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
159    </div>
160
161    <!-- 5. Fetch API -->
162    <div class="section">
163        <h2>5. Fetch API</h2>
164        <button onclick="fetchUsers()" id="fetchUsersBtn">์‚ฌ์šฉ์ž ๋ชฉ๋ก ๊ฐ€์ ธ์˜ค๊ธฐ</button>
165        <button onclick="fetchPost()">๊ฒŒ์‹œ๊ธ€ ๊ฐ€์ ธ์˜ค๊ธฐ</button>
166        <div id="fetchOutput" class="output" style="min-height: 150px;">
167            API ๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
168        </div>
169    </div>
170
171    <!-- 6. POST ์š”์ฒญ -->
172    <div class="section">
173        <h2>6. POST ์š”์ฒญ</h2>
174        <input type="text" id="postTitle" placeholder="์ œ๋ชฉ">
175        <input type="text" id="postBody" placeholder="๋‚ด์šฉ">
176        <button onclick="createPost()">๊ฒŒ์‹œ๊ธ€ ์ƒ์„ฑ</button>
177        <div class="output" id="postOutput">๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
178    </div>
179
180    <!-- 7. ์—๋Ÿฌ ์ฒ˜๋ฆฌ ํŒจํ„ด -->
181    <div class="section">
182        <h2>7. ์—๋Ÿฌ ์ฒ˜๋ฆฌ ํŒจํ„ด</h2>
183        <button onclick="testErrorHandling()">์—๋Ÿฌ ์ฒ˜๋ฆฌ ํ…Œ์ŠคํŠธ</button>
184        <button onclick="testNetworkError()">๋„คํŠธ์›Œํฌ ์—๋Ÿฌ ํ…Œ์ŠคํŠธ</button>
185        <div class="output" id="errorOutput">๊ฒฐ๊ณผ๊ฐ€ ์—ฌ๊ธฐ์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.</div>
186    </div>
187
188    <!-- 8. ์‹ค์ „ ์˜ˆ์ œ: ์‚ฌ์šฉ์ž ์นด๋“œ -->
189    <div class="section">
190        <h2>8. ์‹ค์ „ ์˜ˆ์ œ: ์‚ฌ์šฉ์ž ์นด๋“œ</h2>
191        <button onclick="loadUserCards()" id="loadCardsBtn">์‚ฌ์šฉ์ž ์นด๋“œ ๋กœ๋“œ</button>
192        <div id="userCards" style="margin-top: 15px;"></div>
193    </div>
194
195    <!-- 9. setTimeout, setInterval -->
196    <div class="section">
197        <h2>9. setTimeout, setInterval</h2>
198        <button onclick="startTimer()">ํƒ€์ด๋จธ ์‹œ์ž‘</button>
199        <button onclick="stopTimer()">ํƒ€์ด๋จธ ์ค‘์ง€</button>
200        <button onclick="runDebounceDemo()">Debounce ํ…Œ์ŠคํŠธ</button>
201        <div class="output" id="timerOutput">ํƒ€์ด๋จธ: 0</div>
202    </div>
203
204    <script src="script.js"></script>
205</body>
206</html>