[JavaScript]모듈(Module)이란?
리팩토링(refactoring)이란?
소프트웨어 공학에서 ‘결과의 변경 없이 코드의 구조를 재조정함’을 뜻한다. 주로 코드의 가독성을 높이고 유지보수를 편하게 합니다. 하지만 버그를 없애거나 새로운 기능을 추가하는 행위는 아니다. 사용자가 보는 외부 화면은 그대로 두면서 내부 논리나 구조를 바꾸고 개선하는 유지보수 행위이다. 리팩토링의 잠재적인 목표는 소프트웨어의 설계, 구조 및 구현을 개선하는 동시에 기능을 보존하는 것이다. 코드의 가독성을 향상시키고 복잡성을 감소시키는 효과를 가진다.
리팩토링을 하는 때
1) 유사내용이 세번 이상 중복(반복)될 때, 리팩토링을 고려
2)새로운 기능을 추가해야 할 때
3)버그를 수정해야 할 때
4)코드리뷰를 할 때
리팩토링을 하기 전에 코드가 제대로 작동해야 하는 것은 필수!!
모듈(module)이란?
자바스크립트의 코드의 크기가 점점 커질수록 파일을 여러개로 분리해야 하는 시점이 온다. 이때 분리된 파일을 각각을 '모듈'이라고 한다. 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.모듈은 단지 파일 하나에 불과하다. 즉, 스크립트 하나는 모듈 하나인 것이다.
모듈 활용
- export 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.(모듈 내보내기).
- import 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다.(모듈 가져오기) ex) import { . . . } from '경로'
export 지시자를 사용해 파일 sayHi.js 내부의 함수 sayHi를 외부로 내보냄
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}이제 import 지시자를 사용해 main.js에서 함수 sayHi를 사용할 수 있게 해봄
// 📁 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // 함수
sayHi('John'); // Hello, John!위 예시에서 import 지시자는 상대 경로(./sayHi.js) 기준으로 모듈을 가져오고 sayHi.js에서 내보낸 함수 sayHi를 상응하는 변수에 할당한다.
이제 브라우저에서 모듈이 어떻게 동작하는지 예시를 이용해 알아보자
모듈은 특수한 키워드나 기능과 함께 사용되므로 <script type="module"> 같은 속성을 설정해 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있게 아래와 같이 해줘야 한다.
<!doctype html>
<script type="module">
import {sayHi} from './say.js';
document.body.innerHTML = sayHi('John');
</script>브라우저가 자동으로 모듈을 가져오고 평가한 다음, 이를 실행한 것을 확인.
모듈의 핵심 기능
엄격 모드로 실행됨
-모듈은 항상 use strict로 실행된다.
모듈 레벨 스코프
-모듈은 자신만의 스코프가 있다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근이 불가하다.
단 한 번만 평가됨
-동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행된다. 실행 후 결과는 이 모듈을 가져가려는 모든 모듈에 내보내 진다.
IndexedDB API
-IndexedDB는 파일/BLOB을 포함하여 많은 양의 구조화된 데이터를 클라이언트 측에 저장하기 위한 저수준 API이다. IndexedDB는 SQL 기반 RDBMS와 같은 트랜잭션 데이터베이스 시스템이다. 다만 고정 열 테이블을 사용하는 SQL 기반 RDBMS와 달리 IndexedDB는 자바스크립트 기반 객체 지향 데이터베이스이다. 또한 IndexedDB를 사용하여 수행되는 작업은 비동기식으로 수행된다.
＃트랜잭션 데이터베이스란 - 열이 아닌 행 저장 형식으로 디스크에 저장된다. 이점으로는 짧은 지연 시간이 있다.