1. Scripts async / defer
HTML 파일에 자바스크립트 파일 연결하기
방법 1. Insert Script in the <head> section
<!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>Document</title>
<script src="test.js"></script>
</head>
<body></body>
</html>브라우저가 상단부터 한줄씩 html을 파싱하다가 <head> 태그 안에서 <script> 태그를 만나면 test.js 파일을 다운받기 시작한다. 다운로드가 완료되면 다음 줄로 넘어가 다시 파싱한다.
자바스크립트 파일의 사이즈가 클 경우 첫 페이지 로드에 많은 시간이 소요되므로 좋지 않은 방식이다.
방법 2. Insert Script in the <body>
<!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>Document</title>
</head>
<body>
<div></div>
<script src="test.js"></script>
</body>
</html><body> 태그 내 최하단에 스크립트를 추가하는 방법이다. <body>내부가 모두 파싱 된 이후에 test.js를 다운 받으므로 첫 화면 로딩이 지체되지 않는다.
그러나 사용자에게 의미있는 컨텐츠가 자바스크립트의 내용에 의존하고 있다면, 결국 스크립트 다운로드 및 실행 이후에 정상적으로 작동할 것이다.
방법 3. Insert Script with async attribute in the <head> section
<!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>Document</title>
<script async src="test.js"></script>
</head>
<body>
</body>
</html>이 경우, 브라우저가 html을 파싱하다가 <script>를 만나면 파싱을 멈추지 않고 스크립트를 다운로드 한다. 다운로드가 완료되면 자바스크립트 파일을 실행한 뒤에 다시 남은 html을 파싱한다.
<body>에 넣는 것 보다 다운로드가 더 빨리 시작되므로 시간이 더 절약된다.
그러나 스크립트가 html보다 더 빨리 실행될 수도 있기 때문에, 자바스크립트 파일이 html요소에 의존하는 부분에서 문제가 생길 수 있다.
방법 4. Insert Script with defer attribute in the <head> section
<!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>Document</title>
<script defer src="test.js"></script>
</head>
<body>
</body>
</html>html을 파싱하다가 <script>를 만나면 다운로드를 시작해두고, html을 끝까지 파싱한다. 그 이후에 다운로드 되어있는 자바스크립트 파일을 실행한다. 가장 안전하고 효율적인 옵션이다.
🔗 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+)
2. 모듈화
(현재 작업 중인 UI builder 사용 시에 특히) 함수 내부에 함수 사용을 되도록 하지 말 것. 흐름 상 자연스럽지 않을 뿐 아니라 다른 컴포넌트에서 재사용 하지도 않으므로 함수로 묶어둘 필요가 없다. 언제나 모듈화가 필요한 것은 아니다.
3. 빈 객체 체크하기(ES6)
Object.keys(obj).length === 0
// 모든 예외 사항을 고려하면
obj && // null 또는 undefined 체크
Object.keys(obj).length === 0 &&
obj.constructor === Object // Object.keys(new Date()).length === 0; 보완🔗 How do I test for an empty JavaScript object?
4. Distructuring inside a Loop
const arr = [{name: "lee", age: "21"}, {name: "kim", age: "22"}];
const nameList = arr.map(el => el.name)
// ["lee", "kim"]
const nameList = arr.map(({name}) => name)
// ["lee", "kim"] 