201003 [Day11] JavaScript 주요 문법 (8)

자바스크립트 코드 트릭

변수 swap - 구조 분해 할당 이용

let a = 10, b = 26;
[a, b] = [b, a];

 

범위 루프 - 함수형 프로그래밍

let sum = 0;
for (let i = 5; i < 10; i += 1) {
    sum += i;
}

const sum = Array
    .from(new Array(5), (_, k) => k + 5)
    .reduce((acc, cur) => acc + cur, 0);

 

배열 내 같은 요소 제거 : set 이용

const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const setNames = Array.from(new Set(names));
const setArrayNames = [...new Set(names)];

 

객체 병합 - Spread 연산자 이용

const person = {
	name: 'Lee jin ah',
	familyName: 'Lee',
	givenName: 'jin ah'
};

const school = {
	name: 'Seoul',
	address: 'Seoul'
};

const jinah = { ...person, ...school };
console.log(jinah);
// {
//   address: “Seoul”
//   familyName: “Lee”
//   givenName: “jin ah”
//   name: "Seoul" // 같은 키는 우선 순위에 따라 정해진다.
// }

 

&&, || 활용하기

/// ||
// 기본값을 넣어주고 싶을 때 사용할 수 있습니다.
// participantName이 0, undefined, 빈 문자열, null일 경우 'Guest'로 할당됩니다.
const name = participantName || 'Guest';

/// &&
// flag가 true일 경우에만 실행됩니다.
flag && func();

// 객체 병합에도 이용할 수 있습니다.
const makeCompany = (showAddress) => {
  return {
    name: 'Cobalt. Inc.',
    ...showAddress && { address: 'Seoul' }
  }
};
console.log(makeCompany(false));
// { name: 'Cobalt. Inc.' }
console.log(makeCompany(true));
// { name: 'Cobalt. Inc.', address: 'Seoul' }

 

구조분해 할당 (객체에서 필요한 것만 꺼내쓴다.)

const person = {
	name: 'Lee jin ah',
	familyName: 'Lee',
	givenName: 'jin-ah'
	school: 'Seoul Univ',
	address: 'Seoul',
}

const { familyName, givenName } = person;

 

객체 생성 키 생략

const name = 'Lee jin-ah';
const school = 'Seoul';
const person = {
  name, // Lee jin-ah
  school // Seoul
}

 

비 구조화 할당 - 함수에 객체를 넘길 경우 필요한 것만 꺼내쓰기

const makeSchool = ({ name, address, class }) => {
  return {
    name,
    address,
    class
  }
};
const Univ = makeSchool({ name: 'Seoul', address: 'Seoul', class: 'ComputerScience' });

 

동적 속성 이름

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'jinah',
  [emailKey]: 'kitty@naver.com'
};
console.log(person);
// {
//   name: 'jinah',
//   email: 'kitty@naver.com'
// }

 

 !! 연산자를 이용하여 0, null, 빈 문자열, undefined, NaN을 false로 그 외에는 true로 변경 가능

function check(variable) {
  if (!!variable) {
    console.log(variable);
  } else {
    console.log('잘못된 값');
  }
}
check(null); // 잘못된 값
check(3.14); // 3.14
check(undefined); // 잘못된 값
check(0); // 잘못된 값
check('Good'); // Good
check(''); // 잘못된 값
check(NaN); // 잘못된 값
check(5); // 5

 

HTML과 CSS

HTML

• Hyper Text Markup Language
• 마크업 : 어떠한 표시(Mark)를 뜻함, 문서를 구조적으로 표시하기 위한 것
• 마크업 언어 : 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어 지칭

 

HTML5 

• 음성/영상 처리를 위한 멀티미디어 요소 추가됨
• 구조적 요소(header, nav, article 등) 추가
• 표현을 담당하던 태그가 삭제되고, 의미를 담은 태그 추가 
• ex) s => del, b => strong

 

CSS

• 어디에 어떻게 어떤 스타일을 적용할 건지에 대해 기술
• 스타일 참고 : https://codepen.io
• id와 class의 차이점
  • id는 한페이지에 하나의 정의로 하나의 태그만 사용할 수있다. ex) 로고, 헤더, 푸터
  • class는 한 페이지에 반복적으로 사용되는 스타일 정의 ex) 반복되는 스타일 요소
• css 선택자 종류

 

DOM

• Document Object Model
• Model : 추상화를 거쳐 만들어진 것
• JS와 같이 등장함(html과 상호작용이 가능하게 되었음)
• 트리구조로 되어 있음(document노드, element노드, 속성노드, 텍스트노드)

 

DOM 트리 순회 방법

• 전순위 순회 방식

 

브라우저 렌더링 방식 (DOM + CSSOM => Render Tree)

• 브라우저가 HTML을 읽고 파싱한 후에 돔 트리 구성
• 스타일 시트를 파싱하고 스타일을 입힌다.(Attachment)
• Render Tree 만듬 : 돔 노드의 위치를 정해준다.
• 실제 화면에 그림 

 

Virtual Dom

• 돔 조작시 계속해서 브라우저는 렌더링을 수행하기에 성능의 문제가 야기됨
• 실제 돔트리를 자바스크립트 객체로 만든 것으로 필요한 객체만 담아 만들어짐

 

Virtual DOM 의 오해

• Virtual Dom이 실제 DOM보다 빠른 것은 아님. 대부분의 유스케이스에서 충분히 빠를 뿐이다.
• 브라우저 렌더링 수는 줄여주지만 탐색, 메모리 부분에서 두배를 차지한다.

document.createDocumentFragment란?

• 새로운 빈 DocumentFragment 를 생성 (다른 노드들을 담는 임시 컨테이너 역할)
• DocumentFragments 는 dom 노드들로서 메인 DOM 트리의 일부가 아닌 추가되는 형식
  • 메인 DOM에 영향을 주지 않고(재랜더링 되지 않음) 메모리에서만 정의가 된다. (메모리상에서만 존재하는 빈 템플릿)

let ul = document.getElementsByTagName("ul")[0];
let docfrag = document.createDocumentFragment();
const browserList = ["Internet Explorer", "Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  const li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);

•  docfrag가 아닌 일반 element를 만들어서 추가한 후 ul에 추가하는 방식과의 차이
  • DocumentFragment는 ul에 추가하면 안에있던 요소가 이전 되어 docfrag에 남아있지 않다.
  • 반면 일반 elememnt는 추가 전후의 div element가 동일하다

 

간단한 에디터 만들기

<!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>Simple Editor</title>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="toolbar">
    <button data-commend="bold">Bold</button>
    <button data-commend="italic">Italic</button>
    <button data-commend="justifyLeft">Left</button>
    <button data-commend="justifyCenter">Center</button>
    <button data-commend="justifyRight">Right</button>
    <button data-commend="underLine">Underline</button>
    <button data-commend="strikeThrough">Strike Through</button>
  </div>
  <div  class="editor" contenteditable="true"></div>
  <script src="index.js"></script>
</body>
</html>

(() => {
  document.querySelectorAll('.toolbar button')
  .forEach((ele) => {
    ele.addEventListener('click', (e) => {
      const command = e.target.getAttribute("data-commend");
      document.execCommand(command);
    });
  });
})();

.toolbar {
  width: 600px;
  height: 40px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 4px;
  background-color: bisque;
}

.toolbar button {
  height: 24px;
  border: 2px solid black;
  cursor: pointer;
  background-color: white;
}

.toolbar button:hover {
  background-color: gray;
}

.editor {
  width: 600px;
  height: 600px;
  border: 2px solid black;
  border-radius: 4px;
  margin-top: 8px;
  box-sizing: border-box;
  outline: none;
  padding: 16px;
  font-size: 12px;
}