HTML 구성
HTML에서
> 기호는 하위에 있는 태그를 의미
+ 기호는 같은 레벨에 존재하는 태그를 의미
태그명.클래스명 이런식으로 . 를 통해 태그와 클래스명 구분
index.html 에서 <head> 안에 다음 코드를 넣어 자바스크립트 파일이 연결됨
HTML문서는 위에서부터 순차적으로 load하지만 defer 키워드를 통해 HTML 문서가
전부 load된 다음 자바스크립트 파일을 load한다.
createElement
HTML 태그를 생성한다.
const modalEl = document.createElement('div');새로 만든 <div> 태그를 modalEl이라고 선언.
setAttribute
지정된 요소의 속성 값을 설정한다.
modalEl.setAttribute('class', 'modal__layout');modalEl 에 class=”modal__layout” 이라는 속성 추가.
removeChild
document.body.removeChild(modalEl);modalEl 노드를 삭제.
FileReader
참조
[JavaScript] 파일 입출력 (FileReader)
[JavaScript]파일 접근 API(FileList 객체, File 객체, FileReader 객체)
웹 애플리케이션이 자바스크립트로 로컬 컴퓨터에 있는 파일 데이터에 직접 접근할 수 있도록 해주는 API
다음과 같이 FileReader객체를 생성하여 사용한다.
let reader = new FileReader();readAsDataURL() 로 파일 내용을 읽어 Data URL형식의 문자열로 변환하여 result 속성값에 저장한다.
reader.readAsDataURL(inputElement.files[0]);input태그가 type=”file” 이면, input 요소에 files로 접근하여 선택한 파일의 정보를 얻을 수 있다
FileReader에 readAsDataURL 메서드를 실행하여 파일을 읽은 후, onload 메서드에 함수를 넣어 흐름을 제어한다.
reader.onload = function() {
const imageBase64 = reader.result;
}파일을 읽다가 에러가 발생하면 onerror 메서드에 함수를 넣어 흐름을 제어한다
reader.error = function(error) {
alert("error", error);
document.body.removeChild(modalEl);
}indexedDB
참조
indexedDB는 클라이언트 스토리지, 즉 브라우저가 제공하는 저장소이다.
비슷하게 localStorage, cookies, indexedDB가 있다.
데이터베이스를 생성하고
Object store를 생성하여
transaction을 한다
데이터베이스 생성
const request = indexedDB.open(databaseName, version);indexDB객체에서 open 메서드로 데이터베이스 이름과 버전을 저장해준다. 버전은 정수만 가능.
open 메서드가 실행되고나서 IDBOpenDBRequest 객체가 리턴된다.
리턴되는 IDBOpenDBRequest 객체 프로퍼티
onupgradeneeded: open메서드를 사용할 때(새로운 데이터베이스를 만들었을때), 현재 버전보다 높은 버전을 사용할때 실행됨. 초기 설정.onsuccess: indexedDB의 모든 요청이 끝나면 설정한 함수가 실행됨.
Object Store 생성하기
indexedDB가 데이터베이스 아래 객체 스토어라는 이름으로 다시 객체를 만들수 있음.
객체 스토어가 모여서 하나의 데이터베이스를 이룬다.
보통 onupgradeneeded 메서드에서 새로운 객체 스토어 생성함.
request.onupgradeneeded = function () {
// 요청의 결과를 리턴합니다.
const db = request.result;
//posts라는 객체 스토어를 생성합니다.
db.createObjectStore("posts", { autoIncrement: true });
};객체 스토어란 자바스크립트 객체를 생각하면 된다.
autoIncrement는 자동으로 객체 프로퍼티에 정수로 1부터 부여.
Object Store에 데이터 저장하기
const request = indexedDB.open(databaseName, version);
request.onsuccess = function () {
const db = request.result;
const transaction = db.transaction("posts", "readwrite");
const store = transaction.objectStore("posts");
store.add(content).onsuccess = cb;
};indexedDB를 열고 성공적이면 transaction 메서드를 이용해 posts 객체 스토어를 readwrite 읽고 쓰는 권한을 설정함.
objectStore를 통해 객체 스토어를 가져오고 해당 스토어에 add 메서드로 데이터를 저장한다.
Object Store에서 데이터 모두 가져오기
const request = indexedDB.open(databaseName, version);
request.onsuccess = function () {
const db = request.result;
const store = db.transaction("posts").objectStore("posts");
store.getAll().onsuccess = function (res) {
console.log(res.target.result);
};
};objectStore 로 객체 스토어를 가져와 getAll 메서드를 이용해 데이터를 모두 가져온다.
Object Store에서 데이터를 수정
export function updateIndexedDB(databaseName, version, objectStore, id, data, cb) {
if (window.indexedDB) {
const request = indexedDB.open(databaseName, version);
const key = Number(id);
request.onsuccess = function () {
const store = request.result
.transaction(objectStore, "readwrite")
.objectStore(objectStore);
store.get(key).onsuccess = function (response) {
let value = response.target.result;
value.content = data;
store.put(value, key).onsuccess = function () {
cb();
}
};
};
}
}put(key, value) 메서드로 데이터를 수정 할 수 있다.
Object Store에서 데이터 삭제
export function deleteIndexedDB(databaseName, version, objectStore, id, cb) {
if (window.indexedDB) {
const request = indexedDB.open(databaseName, version);
const key = Number(id);
request.onsuccess = function () {
const store = request.result
.transaction(objectStore, 'readwrite')
.objectStore(objectStore);
store.delete(key).onsuccess = function () {
cb();
};
};
}
}delete(key) 메서드로 삭제한다
모듈화
함수를 분리하여 별개의 .js 파일에 넣고
export로 내보내기,
함수를 사용하는 지점에서는 import 로 들여와서 사용한다.
모듈화를 하면 파일 구조가 바뀌고 좀 더 명확하고 확장하기 유연한 구조가 된다.
- 파일을 내보내는 방법은
export키워드를 사용한다 - 파일을 불러오는 방법은
import { ... } from '경로' - 중괄호 없이 출력하고 싶다면
export default키워드를 사용한다.
그러면import ... from '경로'와 같이 사용할 수 있습니다.
하지만default키워드는 기본값을 지정하는 것이므로 하나의 값 혹은 객체만 지정해야한다.
