Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
비동기 JavaScript와 데이터 | Reporch
목록
학습 경로
비동기 JavaScript와 데이터
Promise와 fetch부터 로딩·오류·빈 상태, 요청 취소와 서버 페이지네이션까지 실제 데이터 화면의 흐름을 익힙니다.
0 / 16
0%
01
동기 코드와 비동기 작업의 실행 순서
5
## 이번 단계에서 배울 내용 JavaScript는 현재 실행 중인 동기 코드를 먼저 끝낸 뒤, 준비된 비동기 작업을 처리합니다. `setTimeout`의 지연 시간이 0이어도 현재 호출 스택보다 먼저 실행되지는 않습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript console.log('첫째'); setTimeout(() => console.log('셋째'), 0); console.log('둘째'); ``` ## 해야 할 일 실행 버튼을 누르면 목록에 `동기 시작`, `동기 끝`, `비동기 완료`가 실제 실행 순서대로 나타나게 하세요. ## 완성 조건 - 동기 메시지 두 개가 먼저 표시됩니다. - `setTimeout` 콜백의 메시지가 마지막에 표시됩니다. - 실행할 때마다 이전 결과를 지우고 같은 순서를 다시 만듭니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
50.00%
02
콜백 작업을 Promise로 감싸기
5
## 이번 단계에서 배울 내용 Promise는 미래에 끝날 작업을 값처럼 전달할 수 있게 합니다. 작업이 성공하면 `resolve`, 실패하면 `reject`를 호출합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript function wait(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } ``` ## 해야 할 일 `wait` 함수를 Promise로 구현하고 버튼을 누른 뒤 잠시 후 완료 문구가 나타나게 하세요. ## 완성 조건 - `wait`는 Promise를 반환합니다. - 버튼을 누르면 먼저 기다리는 중이라고 표시합니다. - Promise가 완료되면 `준비 완료`로 바뀝니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
50.00%
03
Promise 결과를 then으로 이어받기
5
## 이번 단계에서 배울 내용 Promise는 대기 중에서 성공 또는 실패 상태로 한 번만 바뀝니다. `then`은 성공한 값을 받아 다음 화면 작업으로 연결합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript Promise.resolve(7) .then((value) => value * 2) .then(console.log); ``` ## 해야 할 일 점수 Promise가 전달하는 숫자에 10을 더하고 최종 점수를 화면에 표시하세요. ## 완성 조건 - Promise의 성공 값을 첫 번째 then에서 가공합니다. - 다음 then에서 `최종 점수: 90`을 표시합니다. - 중간 값을 전역 변수에 저장하지 않습니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
50.00%
04
순서가 필요한 비동기 작업 연결하기
5
## 이번 단계에서 배울 내용 서로 의존하는 작업은 Promise 체인에서 각 작업을 반환해 순서를 보장합니다. 반환을 빠뜨리면 다음 단계가 너무 일찍 시작될 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript loadUser() .then((user) => loadCourses(user.id)) .then(renderCourses); ``` ## 해야 할 일 사용자 정보를 받은 뒤 그 사용자의 강의를 요청하고 제목 두 개를 목록에 표시하세요. ## 완성 조건 - 사용자 요청이 먼저 실행됩니다. - 첫 번째 then에서 강의 요청 Promise를 반환합니다. - 강의 제목 `HTML`, `CSS`를 순서대로 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
50.00%
05
catch와 finally로 실패 정리하기
5
## 이번 단계에서 배울 내용 `catch`는 작업 실패를 사용자에게 설명하고, `finally`는 성공과 실패 모두에서 필요한 정리를 수행합니다. 로딩 표시 해제처럼 공통인 작업은 finally에 둡니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript loadData() .catch(showError) .finally(hideLoading); ``` ## 해야 할 일 실패하는 요청을 처리해 오류 문구를 표시하고 다시 버튼을 사용할 수 있게 하세요. ## 완성 조건 - 요청 중에는 버튼이 비활성화됩니다. - HTTP 오류를 Error로 바꾸어 catch에서 처리합니다. - finally에서 버튼을 다시 활성화합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
50.00%
06
독립 요청을 병렬로 처리하기
5
## 이번 단계에서 배울 내용 서로 의존하지 않는 요청은 동시에 시작할 수 있습니다. 모두 성공해야 다음 단계로 갈 때는 `Promise.all`, 각 결과를 모두 살펴봐야 할 때는 `Promise.allSettled`가 적합합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const [profile, stats] = await Promise.all([ loadProfile(), loadStats(), ]); ``` ## 해야 할 일 프로필과 학습 통계를 동시에 요청하고 두 결과가 모두 준비되면 요약을 표시하세요. ## 완성 조건 - 두 fetch를 Promise.all 배열 안에서 시작합니다. - 이름과 완료 문제 수를 한 문장으로 표시합니다. - 두 API를 각각 한 번만 요청합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
async와 await로 읽기 쉬운 흐름 만들기
5
## 이번 단계에서 배울 내용 `async` 함수 안에서는 Promise가 끝날 때까지 `await`로 기다릴 수 있습니다. 비동기 순서를 위에서 아래로 읽을 수 있지만 오류 처리는 여전히 필요합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript async function load() { const response = await fetch('/api/items'); return response.json(); } ``` ## 해야 할 일 async 함수에서 추천 강의를 불러와 화면에 제목을 표시하세요. ## 완성 조건 - 이벤트 처리 함수를 async로 작성합니다. - fetch와 response.json 결과를 각각 await합니다. - 추천 강의 제목 `웹 접근성`을 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
fetch 응답 상태를 안전하게 확인하기
5
## 이번 단계에서 배울 내용 fetch는 네트워크 연결 자체가 실패할 때 reject되며, 404나 500 응답은 정상적으로 resolve될 수 있습니다. 따라서 JSON을 읽기 전에 `response.ok`를 확인해야 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status}`); ``` ## 해야 할 일 존재하지 않는 강의를 요청했을 때 성공 화면 대신 `강의를 찾을 수 없습니다.`를 표시하세요. ## 완성 조건 - response.ok를 JSON 변환 전에 확인합니다. - 404 응답을 오류 흐름으로 보냅니다. - 사용자에게 이해할 수 있는 오류 문구를 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
초기·로딩·성공·오류 상태 설계하기
5
## 이번 단계에서 배울 내용 데이터 화면은 결과만 있는 것이 아닙니다. 요청 전 초기 상태, 기다리는 로딩 상태, 데이터가 도착한 성공 상태, 실패한 오류 상태를 구분해야 사용자가 현재 상황을 이해할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript status.textContent = '불러오는 중'; try { /* success */ } catch { /* error */ } ``` ## 해야 할 일 불러오기 버튼으로 과제 목록을 요청하고 로딩 중에는 상태 문구와 비활성 버튼을, 완료 후에는 목록을 표시하세요. ## 완성 조건 - 처음에는 안내 문구가 보입니다. - 요청 중에는 `불러오는 중`을 표시하고 버튼을 비활성화합니다. - 완료 후 두 과제를 표시하고 버튼을 다시 활성화합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
빈 결과와 재시도 경험 만들기
5
## 이번 단계에서 배울 내용 요청이 성공해도 결과가 비어 있을 수 있습니다. 빈 상태는 오류와 구분하고, 오류 상태에서는 사용자가 같은 작업을 다시 시도할 수 있는 동작을 제공해야 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript if (items.length === 0) { showEmpty('아직 항목이 없습니다.'); } ``` ## 해야 할 일 첫 요청 실패 후 재시도 버튼을 표시하고, 두 번째 요청의 빈 배열에는 `저장한 글이 없습니다.`를 표시하세요. ## 완성 조건 - 첫 실패 뒤 오류 문구와 재시도 버튼이 보입니다. - 재시도 버튼은 같은 API를 다시 요청합니다. - 성공한 빈 배열은 오류가 아닌 빈 상태 문구로 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
JSON 데이터를 POST로 저장하기
5
## 이번 단계에서 배울 내용 서버에 데이터를 만들 때는 요청 메서드, `Content-Type`, 직렬화한 본문을 함께 보냅니다. 폼 입력은 검증한 뒤 JSON으로 바꿔 전송합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript fetch('/api/items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data), }); ``` ## 해야 할 일 제목 입력값을 JSON POST 요청으로 저장하고 서버가 돌려준 id를 성공 문구에 표시하세요. ## 완성 조건 - 빈 제목은 요청하지 않습니다. - POST 메서드와 application/json 헤더를 사용합니다. - `{"title":"Promise 복습"}` 본문을 전송하고 `저장 완료: 31`을 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
2
50.00%
12
URLSearchParams로 검색 조건 보내기
5
## 이번 단계에서 배울 내용 검색어, 정렬, 페이지 같은 값은 쿼리 문자열로 표현할 수 있습니다. `URLSearchParams`는 인코딩을 직접 처리하지 않아도 안전한 URL을 만듭니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const query = new URLSearchParams({ q: 'html', page: '1' }); fetch(`/api/search?${query}`); ``` ## 해야 할 일 검색 폼의 검색어와 정렬 기준을 URLSearchParams로 만들고 결과 제목을 표시하세요. ## 완성 조건 - 검색어 앞뒤 공백을 제거합니다. - q와 sort 쿼리 값을 URLSearchParams로 만듭니다. - 정확한 쿼리로 한 번 요청하고 결과 `HTML 문서 구조`를 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
디바운스로 검색 요청 줄이기
5
## 이번 단계에서 배울 내용 입력할 때마다 즉시 요청하면 빠른 타이핑 중 불필요한 요청이 쌓입니다. 디바운스는 마지막 입력 이후 일정 시간이 지나야 작업을 실행합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript clearTimeout(timer); timer = setTimeout(search, 300); ``` ## 해야 할 일 검색 입력에 200ms 디바운스를 적용해 빠르게 입력해도 마지막 검색어로 한 번만 요청하세요. ## 완성 조건 - input 이벤트마다 이전 타이머를 취소합니다. - 마지막 입력 200ms 뒤 검색을 실행합니다. - `promise` 검색어로 API를 정확히 한 번 요청합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
AbortController로 오래된 요청 취소하기
5
## 이번 단계에서 배울 내용 검색어가 바뀌었는데 이전 요청이 늦게 도착하면 최신 결과를 덮어쓸 수 있습니다. 새 요청 전에 이전 `AbortController`를 취소하면 최신 의도만 화면에 반영할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript controller?.abort(); controller = new AbortController(); fetch(url, { signal: controller.signal }); ``` ## 해야 할 일 느린 첫 검색을 취소하고 빠른 두 번째 검색 결과만 표시하세요. ## 완성 조건 - 새 검색 전에 이전 controller의 abort를 호출합니다. - fetch에 새 signal을 전달합니다. - AbortError는 사용자 오류로 표시하지 않고 최신 검색 결과만 남깁니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
서버 페이지네이션 구현하기
5
## 이번 단계에서 배울 내용 데이터가 많으면 페이지 단위로 요청합니다. 현재 페이지와 전체 페이지 수를 상태로 관리하고, 범위를 벗어나는 이동 버튼을 비활성화해야 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript fetch(`/api/items?page=${page}&limit=2`); ``` ## 해야 할 일 첫 페이지를 불러오고 다음 버튼으로 두 번째 페이지를 요청하며 페이지 상태와 버튼을 갱신하세요. ## 완성 조건 - 페이지 번호와 limit을 쿼리로 전송합니다. - 각 페이지의 두 항목과 `현재 / 전체` 문구를 표시합니다. - 첫 페이지에서는 이전, 마지막 페이지에서는 다음 버튼을 비활성화합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
비동기 데이터 탐색 화면 완성하기
5
## 이번 단계에서 배울 내용 실제 데이터 화면은 검색, 페이지, 로딩, 오류, 빈 상태와 요청 취소를 함께 다룹니다. 상태를 한곳에서 관리하고 렌더링 책임을 나누면 복잡한 흐름도 예측할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript state = { query: '', page: 1, status: 'idle', items: [] }; render(state); ``` ## 해야 할 일 검색어와 페이지를 서버 요청에 연결하고, 로딩 상태와 빈 결과를 처리하는 강의 탐색 화면을 완성하세요. ## 완성 조건 - 초기에는 1페이지 강의 두 개를 표시합니다. - 검색하면 페이지를 1로 초기화하고 쿼리를 포함해 다시 요청합니다. - 검색 결과가 비면 `검색 결과가 없습니다.`를 표시하고 다음 버튼을 비활성화합니다. - 요청 중에는 상태 문구를 표시하고 이전 요청을 취소합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%