[Day 8] JavaScript 주요 문법 (8)

자료구조&알고리즘 - 코딩 테스트 준비 방법

 

1. 알고리즘을 잘 공부하는 법

 

1) 문제 풀 때 중요한 것

• 항상 여러가지 풀이법이 있음을 기억
• 항상 예외가 있을 수 있음
• 내 답이 베스트인지 의심
• 시행착오는 기록 !
• 다른 사람의 코드를 많이 보자
• 너무 쉽게 포기하진 말고, 너무 오래 끌지도 말자

 

 

2. 코딩 테스트 준비 방법

 

1) 나의 성향 파악

• 미리 생각하고 의사 코드를 작성해야 잘 풀리는 사람
• 일단 코드를 작성하면서 풀어야 잘 풀리는 사람 ( 나 )

2) 메모하기 : 코드에 주석을 달거나, 노트에 메모하면서 풀자

3) 디버깅 하면서 풀기 

 

3. 좋은 코드를 만드는 방법

 

1) 간결하고 가독성 좋은 코드 

• 변수, 함수 이름 잘 정하기
• 중복 코드 제거
• 함수형 프로그래밍(고차 함수 이용하기)

2) 가지치기

3) 자바스크립트 문법 잘 활용하기 

4) 일관성 유지

• var, let 혼용 
• 통일성 없는 변수/함수 이름 

 

가이드

 

1. 입출력 제한

• 입력이 100 이하인 경우 O(n^3)  : 완전 탐색, 백트래킹
• 입력이 10,000 이하인 경우 O(n^2), O(n^2 log n) : n*n 2차원 리스트를 모두 순회해야하는 문제 등
• 입력이 1,000,000 이하인 경우 O(n log n) : 힙, 우선순위 큐, 정렬,, DP, 위상 정렬, 다익스트라
• 입력이 100,000,000 이하인 경우 O(n) : 동적 계획법, 그리디
• 그 이상인 경우 O(log n) : 이진탐색 등

2. 문제 유형

• 입력값이 작은 문제 : 완전 탐색 혹은 백트래킹 문제 (구현력)
• 지도가 주어지고 채워진 영역 찾기 :  BFS, DFS 문제
• 그래프 그림 : 최단 거리 찾기, 최소 신장 트리, 위상정렬
• X라는 조건을 만족하는 가장 최대/최소값을 찾아라 : 파라메트릭 서치
• 실시간으로 정렬 : 우선순위 큐 혹은 힙
• 문자열 : 구현
• 현재 상황에서 가장 최적인 선택 : 그리디

3. 엣지 케이스 찾기

• 입력 값의 크기가 굉장히 작은 케이스 (대부분의 입력 값이 최대값 언저리인 경우)
• 입력 값의 크기가 굉장히 큰 케이스 (대부분의 입력 값이 최소값 언저리인 경우)
• 입력 값의 범위가 넒은 케이스 (A는 최소값이고 B가 최대값인 경우)
• 음수 입력이 허용된 경우 음수만 입력받는 케이스
• 리스트를 입력 받을 때 값이 없거나 하나만 있는 케이스
• 그래프에서 사이클(cycle)이 발생하는 경우
• 길찾기 문제에서 지그재그로 움직일 경우
• 부동소수점 오차

 

4. 자바스크립트 코드 트릭

 

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

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

 

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

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);

 

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

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

 

4) 객체 병합 - Spread 연산자 이용

const person = {
	name: 'Kim eun a',
	familyName: 'Kim',
	givenName: 'eun a'
};

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

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

* 우선 순위 : 오름차순(뒤에 있는게 앞에 걸 덮어씀)

 

5) &&, || 활용하기

 

6) 구조분해 할당 - 객체에서 필요한 것만 꺼내쓰기

const person = {
	name: 'Kim eun-a',
	familyName: 'Kim',
	givenName: 'eun-a'
	school: 'Catholic Univ',
	address: 'Seoul',
}

const { familyName, givenName } = person;

 

7) 객체 생성 키 생략

const name = 'Kim eun-a';
const school = 'Catholic';
const person = {
  name, // Kim eun-a
  school // Catholic
}

 

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

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

 

9) 동적 속성 이름

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

 

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

function check(variable) {
  if (!!variable) {
    console.log(variable);
  } else {
    console.log('InValid');
  }
}

 

 

HTML과 CSS

 

1. HTML 

- Hyper Text Markup Language

⭐ 마크업이란 ? : 어떠한 표시(Mark)를 뜻함, 문서를 구조적으로 표시하기 위한 것

⭐ 마크업 언어 : 태그를 이용하여 문서나 데이터의 구조를 명시하는 언어 지칭

 

1) HTML5 

- 음성/영상 처리를 위한 멀티미디어 요소 추가됨

- 구조적 요소(header, nav, article 등) 추가

- 표현을 담당하던 태그가 삭제되고, 의미를 담은 태그 추가 

ex) s => del, b => strong

 

2. CSS

- 어디에 어떻게 어떤 스타일을 적용할 건지에 대해 기술

* 어떤 스타일 적용해야할 지 막막할 때

CodePen: Online Code Editor and Front End Web Developer Community

CodePen

 

✅ id와 class의 차이점

- id는 한페이지에 하나의 정의로 하나의 태그만 사용할 수있다. ex) 로고, 헤더, 푸터

- class는 한 페이지에 반복적으로 사용되는 스타일 정의 ex) 반복되는 스타일 요소

 

✅ css 선택자 종류

[CSS] 10_CSS 고급 선택자 (tistory.com)

[CSS] 10_CSS 고급 선택자

 

DOM

 

1. DOM

- Document Object Model 

* Model : 추상화를 거쳐 만들어진 것

- JS와 같이 등장함(html과 상호작용이 가능하게 되었음)

- 트리구조로 되어 있음(document노드, element노드, 속성노드, 텍스트노드)

 

1) DOM 트리 순회 방법

- 전순위 순회 방식으로 이루어진다.

 

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

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

[JS] 17_문서 객체 모델(DOM) (tistory.com)

[JS] 17_문서 객체 모델(DOM)

 

 

Virtual DOM

 

1. Virtual Dom

- 돔 조작시 계속해서 브라우저는 렌더링을 수행하기에 성능의 문제가 야기됨

- 실제 돔트리를 자바스크립트 객체로 만든 것으로 필요한 객체만 담아 만들어짐

 

1) Virtual DOM 의 오해

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

2) 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가 동일하다

 

+ innerHTML VS DocumentFragment 속도 차이

출처 : Javascript - DocumentFragment를 사용해보자 [성능 최적화] (tistory.com)

한마디로 위 메서드는 성능 최적화에 도움을 준다.

 

 

 

 

💡 실습 - 에디터 만들기

<!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;
}