1. 리팩토링이란?
결과물의 변경 없이 코드의 구조를 재조정한다는 의미로 코드의 가독성과
편리한 유지보수를 하기 위해 진행하는 행위를 의미한다.
( 버그를 없애거나 새로운 기능을 추가하는 행위와는 다르다! )
- 리팩토링은 왜 해야할까?
1 ) 나 뿐만 아니라 다른 사람들과 다 함께 일하며 만드는 코드이므로 코드의 가독성을 높이기 위해!
→ 잘 만든 코드는 내가 봐도 남이봐도 읽기 쉬운 코드라고 들었던 기억이난다.
2) 코드 검토를 통해 발생할 수 있는 버그를 체크 할 수 있다.
3) 더 빠르고 수행되거나 더 적은 메모리로 프로그램을 사용하기 위해!
→ 단순히 깔끔하기만 한 코드 보다도 엔지니어는 늘 성능 향상을 위해 고민해야하고 좋은 품질을 제공하기 위해 개선 사항을 고민해야한다.
즉, 현재 코드를 바탕으로 더 이해하기 쉽고 확장하기 쉽도록 만들어야
개발속도가 좋아진다는것을 기억하자!
2. 모듈(module) 이란?
프로그램을 구성하는 요소로, 관련된 데이터와 함수를 하나로 묶은 기능 단위를 의미한다.
- 보통 하나의 파일에 모두 작성하기 보다는 함수 기능 단위로 파일로 분리하여 작성한다.
(모듈 코드 파일화 작업)Ex) main.js 라는 모듈을 기준으로 insert.js , update.js 등의 각 기능이 담긴 파일을 import / export 하여 하나의 프로그램을 만드는 형식으로 이해했다.
3. 인스타그램 리팩토링 (앨리스 트랙)
기존의 instagram 페이지는 main.js에 모든 기능을 넣어 indexedDB 에 이미지 저장 업로드가 되는것까지 확인되었었다.
-- 여기서는 createIndexedDB 함수 내 새로운 DataBase 버전과 ObjectStore를 만들고
FileReader 객체를 사용하여 파일을 읽어오고 이것을 활용해 들어온 data(인자)를 기반으로
데이터를 조회,수정,삭제하는 기능을 만들어보는 작업을 진행하였다.
- IndexedDB 알아보기
window.indexedDB 가 있다면
1. 데이터 베이스를 연다.
// open() 함수 호출 시 이벤트 처리 결과(성공 상태)
var request = window.indexedDB.open("MyTestDatabase");
2. 객체 저장소 (ObjectStore) 생성.
/* - 데이터를 담는 공간으로 여러개의 레코드(key-value)를 가진다.
- ObjectStore 라는 이름은 고유하다.
- IDBRequest.createObjectStore() 함수로 만들어진다.
*/
// ObjectStore를 만들때 해당 이벤트 내에서 진행된다. (데이터베이스 버전 생성 or 업데이트 시)
request.onupgradeneeded = function (event) {
var db = event.target.result;
var objectstore = db.createObjectStore(’MyTest’, { keyPath: ‘id’ });
};
3. 트랜잭션(Transaction) 시작, 데이터 추가 및 읽기 등의 데이터베이스 작업을 요청한다.
// 성공하면!
request.onsuccess = function () {
// person ObjectStore에 readwrite(읽기,쓰기) 권한으로 transaction 생성!
db.transaction([“customers”], "readwrite")
console.log(‘done~!’)
};
4. 앞의 Transaction 에 대한 요청이 성공했다는 가정하에 Dom 이벤트 리스너를 사용해 요청이 완료될때까지 기다린다.
transaction.oncomplete = function (event) {
alert("All done!");
};
transaction.onerror = function (event) {
console.log("error");
};
var objectStore = transaction.objectStore("customers");
for (var i in customerData) {
var request = objectStore.add(customerData[i]);
request.onsuccess = function (event) {
// event.target.result == customerData[i].ssn
};
}
5. 요청 객체에서 찾은 결과를 가지고 무언가를 한다.
[ 데이터 베이스로부터 데이터 가져오기 ]
var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
// get()을 활용해 key를 가져온다
var request = objectStore.get("444-44-4444");
request.onerror = function (event) { // 에러 발생 시
// Handle errors!
};
request.onsuccess = function (event) { // 성공 시
/* store가 하나이기 때문에 나의 트랜잭션에서 필요한 objectStore들의
리스트를 보낼 필요없이 String 형태로 이름만 보내면됨! */
db
.transaction("customers")
.objectStore("customers")
.get("444-44-4444").onsuccess = function (event) {
alert("Name for SSN 444-44-4444 is " + event.target.result.name);
};
};
- PostId()의 key의 값이 2부터 시작했던 이유
인스타그램 클론코딩 강의에서의 postId에서는 const postId = pathArray[]라는
배열 형태로하여 keyIndexDB(= getAllKeysIndexedDB)를 가져오는 메소드가
IndexedDB의 ObjectStore에서 키를 가져올때 키의 순서를 보장하지 않기때문에
키 값이 2로 나왔던 것이었다.
즉, keys 배열을 반복문으로 순회하는 과정에서 첫번째 key가 2가 된것인데 키 배열의
첫번째 요소는 항상 ObjectStore에서 가장 먼저 추가된 키가 아닐수도 있다.
그 이유는 IndexedDB의 내부 동작 방식에 따른 것이며, 개발자가 직접 키의 순서를
제어할 수는 없어서라고 한다.
- 만약 key의 순서를 제어하고 싶다면?
→ 앞선 keyIndexDB를 가져오는 메소드를 호출한 후에 키 배열을 정렬하여 순서를 보장하면된다.
예를 들어, keys 배열을 오름차순으로 정렬하면 첫 번째 키가 2일 경우에도 순서를 보장할 수 있다.
keys.sort((a, b) => a - b);