JavaScript Academy · 강의

트랜잭션과 CRUD

레코드를 추가하고, 읽고, 수정하고, 삭제합니다.

레슨 2/413개 단계

트랜잭션과 CRUD은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

모든 작업은 transaction

IndexedDB에서는 모든 읽기와 쓰기가 transaction 내부에서 이루어집니다. transaction은 여러 작업을 하나로 묶어 모두 성공하거나 모두 롤백되게 하므로 데이터의 일관성을 유지합니다.

transaction 시작하기

db.transaction(storeNames, mode)로 transaction을 생성합니다. mode는 기본값인 'readonly' 또는 수정을 위한 'readwrite'입니다.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');

객체 저장소 가져오기

transaction에서 tx.objectStore(name)을 통해 작업할 객체 저장소를 가져옵니다. 모든 생성·조회·수정·삭제 메서드는 이 저장소에 있습니다.

const tx = db.transaction('notes', 'readwrite');
const store = tx.objectStore('notes');
// store.add / get / put / delete

레코드 추가

store.add(value)는 새 레코드를 삽입합니다. 같은 키를 가진 레코드가 이미 있으면 실패하므로 실수로 기존 데이터를 덮어쓰는 일을 방지할 수 있습니다.

const store = tx.objectStore('notes');
const req = store.add({ id: 1, text: 'Buy milk' });
req.onsuccess = () => console.log('added with key', req.result);

레코드 읽기

store.get(key)은 키로 레코드 하나를 가져옵니다. 결과는 요청의 onsuccess에서 request.result로 도착하며, 찾지 못한 경우 undefined입니다.

const req = store.get(1);
req.onsuccess = () => {
  console.log('record:', req.result);
};

put으로 업데이트하기

store.put(value)은 레코드를 삽입하거나 교체합니다. add와 달리 같은 키를 가진 기존 레코드를 덮어쓰므로 업데이트에 적합합니다.

store.put({ id: 1, text: 'Buy milk and eggs' });
// Replaces the existing record with id 1.

레코드 삭제

store.delete(key)은 지정된 키의 레코드를 제거합니다. 해당 레코드가 없어도 성공합니다.

const req = store.delete(1);
req.onsuccess = () => console.log('deleted');

저장소 비우기

store.clear()는 객체 저장소의 모든 레코드를 한 번에 제거합니다. 캐시된 데이터를 초기화할 때 사용하십시오.

store.clear();
// All records in 'notes' are removed.

transaction 완료

모든 작업이 커밋되면 transaction 자체에서 oncomplete가 발생하고, 문제가 생기면 onerror 또는 onabort가 발생합니다. 데이터가 영구적으로 저장되었는지 확인하려면 oncomplete를 사용하십시오.

tx.oncomplete = () => console.log('all changes saved');
tx.onerror = () => console.log('transaction failed');

자동 커밋 동작

보류 중인 요청이 없고 제어가 이벤트 루프로 돌아가면 transaction이 자동으로 커밋됩니다. 관련 없는 비동기 작업을 await하는 동안 하나의 transaction을 계속 열어 둘 수 없으므로, 모든 store 작업을 함께 수행하십시오.

// Queue operations synchronously within the same tx:
store.add({ id: 2, text: 'A' });
store.add({ id: 3, text: 'B' });
// Both commit together when tx completes.

CRUD 요약

네 가지 핵심 작업은 다음과 같이 대응됩니다.

생성: add
읽기: get
수정: put
삭제: delete

모든 작업은 일관성을 보장하는 트랜잭션 안에서 수행됩니다.

빠른 확인

트랜잭션과 CRUD에 대한 이해도를 확인해 보세요.

인터랙티브 레슨에서 답해보세요

복습

트랜잭션과 CRUD를 배웠습니다.

db.transaction(store, mode)로 시작합니다.
tx.objectStore(name)으로 저장소를 가져옵니다.
add는 삽입하고, get은 읽고, put은 추가 또는 수정하고, delete는 삭제합니다.
각 요청의 onsuccess에서 결과를 받습니다.
tx.oncomplete은 변경 사항이 저장되었음을 확인합니다.

다음은 인덱스와 쿼리입니다.

무료로 시작

AI 튜터와 함께 JavaScript을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 59
레슨: 200

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“트랜잭션과 CRUD” 강의는 무료인가요?

네 — “트랜잭션과 CRUD” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“트랜잭션과 CRUD”에서 뭘 배우나요?

레코드를 추가하고, 읽고, 수정하고, 삭제합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“트랜잭션과 CRUD” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기