Comments
마크업 내의 텍스트 표기인 주석
Comment 인터페이스는 마크업 내의 텍스트 표기인 주석을 나타내며 주석은 화면에 보여지지 않지만 웹 페이지의 소스에서 확인할 수 있디.
코드는 개발자를 위한 문서이며 개발자 또한 사람이기 때문에 남이 작성한 코드를 알아보기는 쉽지 않다. 그래서 코드의 가독성, 이해를 도와주기 위해 주석(Comments)을 활용한다.
하지만 주석(Comments) 또한 너무 남용하게 된다면 오히려 코드의 양이 많아져 가독성을 해칠 수 있다. 그래서 주석을 사용할 때는 정말 필요한 경우인지 생각을 하고 사용하는 것이 좋다.
javascript에서 한줄로 주석을 작성할 때 //,를 사용하며 한줄 이상의 주석을 작성할 때는 /* 내용 */를 사용한다.
Comments 작성
- 할 일을 작성한다.
// TODO : 화면 출력기능 구현
function print() {
}- 코드의 수행과정을 자세하게 작성한 주석은 좋지 않다.
/**
* 주석은 코드 자체를 설명하는 것이 아니라,
* 왜(why)와 어떻게(HOW)를 설명하는것이 좋음
* (단, 정말 필요한 경우에만)
*/- 외부에서 자주 사용되는 함수 API인 경우
JSDoc을 사용
/**
* 주어진 두 인자를 더한 값을 반환함 -> 첫줄에는 함수의 기능 설명
* @param {*} a 숫자 1
* @param {*} b 숫자 2
* @returns a와 b를 더한값
*/
function add(a, b) {
return a + b;
}Modules
각각의 분리된 파일
개발하는 애플리케이션의 크기가 커져 파일을 여러 개로 분리할 때 분리된 파일 각각을 모듈(module)이라 부른다.
모듈은 대개 Class 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.
즉 모듈은 단지 파일 하나에 불과하다. 스크립트 하나는 모듈 하나이다.
모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능하다.
-
export: 지시자를 변수나 함수 앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근 (모듈 내보내기) -
import: 지시자를 사용하면 외부 모듈의 기능을 가져올 수 있다. (모듈 가져오기)
Modules 사용
기본적으로 브라우저상에서 모든 자바스크립트 파일들은 서로 참조할 수 있다.
우선 HTML의 링크된 자바스크립트 태그들을 type= "module"로 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding Training</title>
<script type="module" src="./counter.js"></script>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>그리고 공유할 파일의 요소를 export default한 뒤 사용할 파일의 import선언하여 가져오면 사용이 가능하다.
let count = 0;
export default function increase() {
count++;
console.log(count);
}import increase from './counter.js';
increase(); // 1가져온 요소의 이름을 변경할때는 as 키워드를 사용한다.
let count = 0;
export function increase() {
count++;
console.log(count);
}import { increase as increase1 } from './counter.js';
increase1(); // 1여러 요소를을 가져올 수도 있다.
let count = 0;
export function increase() {
count++;
console.log(count);
}
export function getCount() {
return count;
}import { increase, getCount } from './counter.js';
increase(); // 1
increase(); // 2
increase(); // 3
const count = getCount();
console.log(count); // 3모든 요소를 가져올 수도 있다. 이 때 가급적 변수의 공유는 하지 않는것이 좋다.
export let count = 0;
export function increase() {
count++;
console.log(count);
}
export function getCount() {
return count;
}import * as counter from './counter.js';
counter.increase(); // 1
counter.increase(); // 2
counter.increase(); // 3
console.log(counter.count); // 3참고 자료
Comment - Web API | MDN
JavaScript modules - MDN Web Docs
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼
