8일차 배운 것 정리 (1)

목차

1. 코딩테스트 준비 방법

1-1. 알고리즘 잘 배우는 법

1-2. 마음가짐

1-3. 코딩테스트 잘 보는 법

• 미리 생각하고 수도코드를 작성해야 더 잘풀리는 사람?

• 일단 코드를 작성해야 생각이 더 잘 풀리는 사람?

• 긴장하면 풀다가 놓칠 수 있다.

• 풀이과정과 순서도 기록하기

• 내가 예상한대로 동작이 안된다면 디버깅할 것

• 로직 중간에 console.log()를 통해 확인

• 외부 IDE 사용가능하다면 nodejs 디버깅 모드 사용해보기

• 문제를 잘 읽는 것에 익숙해지기 (라인코테 2번 문제 잘못읽어서 날림..)

• 시간복잡도 계산에 익숙해지기 (입출력보고 알고리즘 방향 선택가능)

• 엣지케이스 있다는 것 익숙해지기

1.4 문제유형 추측하기

• 10,000,000(천만이상) : O(n)
• 동적계획법(DP)
• 그리디

• 100,000(십만~백만): O(nlogN)
• 동적계획법(DP)
• 정렬
• 힙, 우선순위 큐
• 위상정렬
• 다익스트라 알고리즘

• 2,000(이천~만): O(n^2)
• n*n의 2차원 리스트 모두 순회하는 문제

• 500 : O(n^3)
• 완전탐색
• 백트래킹

• 지도가 주어지고, 채워진 영역을 찾아야하는 경우
• BFS, DFS
• FloodFill(기본), 전염병문제(변형), 치즈문제(변형)

• 최단 거리 찾기
• 가장빠른길, 최단 거리, x비용 내로 갈 수 있는 길 찾기
• DFS, BFS, 다익스트라 사용가능

• 최소 신장 트리
• “가장 저렴한 방법으로 모든 경로 연결하기”
• 통신망, 전송시간, 회로, 배관등 + “가장 싸게 연결”
• 크루스칼, 프림 알고리즘 이용

• 위상정렬
• 순서를 정해야할 때 사용 - “순서”, “차례”

• 결정문제로, 파라메트릭 서치 사용

• 우선순위 큐 / 힙 으로 구현

• 완전탐색 가능한 시간복잡도는 아닌데, 특별한 알고리즘이 없을 때 DP 가능성 높다.

• 문제따라 초기값 적기 → 모든 상태값 적기 → 현재상태에서 다음값 구할 수 있는지 판단 → 이전상태를 통해 현재 값 구할 수 있는지 판단

• 구현 문제일 가능성 높다.

• 최적의 선택을 하는 그리디 문제

1.5 엣지케이스 찾는 법

1.6 좋은 코드를 만드는 법

• 변수,함수의 이름을 명확히 했는가

• 중복 코드를 제거했는가

• 함수형프로그래밍(고차함수-map, reduce, filter)

• 성능개선을 고려했다는 점에서 좋은 평가 받을 수 있다.

• 구조분해 할당, ...오퍼레이터

• 변수명 정책

• snake_case, camelCase 확인하기

2. JS의 9가지 코드 트릭

2-1. 구조분해 할당을 통한 swap

let a = 5, b = 10;
[a,b] = [b, a]
log(a,b) // 10, 5

2-2. 배열 생성으로 루프 제거하기

• Array.from( Array(), () ⇒ ) 로 반복 가능

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

// 함수형 프로그래밍
const sum = Array
						.from(new Array(10), (_, i) => i+1);
						.reduce((acc, cur) => acc + cur, 0);

2-3. 배열 내 같은 요소 제거하기

• Array.from(), Set, [...Set]

const names = ['Lee', 'Kim', 'Park', 'Lee', 'Kim'];
const uniqueNameWithArrayFrom = Array.from(new Set(names));
// ['Lee', 'Kim', 'Park']
const uniqueNamesWithSpread = [...new Set(names)];
// ['Lee', 'Kim', 'Park']

2-4. Spread 연산자를 통한 객체 병합

const person = {
	name: "Outwater",
	gender: "male"
}

const company = {
	name : "DevCourse"
	address : "Seoul"
}

const insoo = {...person, ...company}
// { name: 'DevCourse', gender: 'male', address: 'Seoul' }

• 키가 값다면 뒤에 것이 우선순위가 되어 오버라이드 된다.

2-5. 단축평가 (&&와 || 사용)

단축평가란 논리연산자, 삼항연산자를 통해 어디까지 값이 계산되는지를 파악하고, 최대한 계산량을 줄이는 것.

true && true && "도달 O";
true && false && "도달 X";
false || false || "도달 O";
true || false || "도달 X"; // false 리턴
true || true || "도달 X";

• or연산자(||)는 default값이 정해져있을 때 사용하기 편리하다.

• return 할당되는값 || default값

function fetchDate() {
if (state.data) {
	return state.data;
} else {
	return "Fetching...";
}}

function fetchDate() {
  return state.data ? state.data : "Fething...";
}

function fetchDate() {
  return state.data || "Fetching...";
}

function favoriteDog(someDog) {
  let favoriteDog;
  if (someDog) {
    favoriteDog = someDog;
  } else {
    favoriteDog = "냐옹";
  }

  return favoriteDog + "입니다";
}

function favoriteDog(someDog) {
  return (someDog || "냐옹") + "입니다";
}

const getActiveUserName = (user, isLogin) => {
  if(isLogin){
    if(user){
      if(user.name){
        return user.name
      } else {
        return '이름없음'
      }
    }
  }
}

const getActiveUserName = (user, isLogin) => {
  if(isLogin && user){
    if(user.name){
      return user.name
    } else {
      return '이름없음'
    }
  }
}

const getActiveUserName = (user, isLogin) => {
  if(isLogin && user){
      return user.name || '이름없음'
    }
  }

2-6. 구조 분해 할당 사용하기

• 필요한 속성만 꺼내서 사용

const person = {
	name: 'Lee Sun-Hyoup',
	familyName: 'Lee',
	givenName: 'Sun-Hyoup'
	company: 'Cobalt. Inc.',
	address: 'Seoul',
}

const { familyName, givenName } = person;

2-7. 객체 생성 시 키 생략하기

• 객체를 생성할 때 프로퍼티 키를 변수 이름으로 생략할 수 있습니다.

const name = 'Lee Sun-Hyoup';
const company = 'Cobalt';
const person = {
  name,
  company
}
console.log(person);
// {
//   name: 'Lee Sun-Hyoup'
//   company: 'Cobalt',
// }

2-8. 동적 속성 이름

• ES6에 추가 된 기능으로, 객체의 키를 동적으로 생성가능

const nameKey = 'name';
const emailKey = 'email';
const person = {
  [nameKey]: 'Lee Sun-Hyoup',
  [emailKey]: 'kciter@naver.com'
};
console.log(person);
// {
//   name: 'Lee Sun-Hyoup',
//   email: 'kciter@naver.com'
// }

2-9. !!연산자를 사용하여 Boolean값으로 바꾸기

• !!연산자 는 falsy값인 경우 false를 리턴, 그 외는 true를 리턴한다.

• falsy값 : 0, null, undefined, NaN, 빈 문자열

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

3.HTML 과 CSS

4. DOM과 virtualDOM

• js 탄생과 같이 등장

• form요소를 다루는 것에서 시작

• 문서노드

• 요소노드

• 속성노드 (not 자식노드)

• 텍스트 노드 (자식요소를 가질 수 없음)

• 1) html 파싱 (DOM)

• 2) css 파싱 (CSSOM)

• 3) 렌더트리 구성

• 4) 실제화면에 페인팅

4.1 DOM 예약어

• ...

• querySelector

• windiw.[id[

• parentNode

• firstElementNode (없다면 null)

• children (모든 자식요소, 없다면 [] )

• hasAttribute(-)

• getAttribute() (없다면 null)

• textContent

• innerHTML (XSS위험요소)

• createElement

• appendChild

• removeChild

4.2 Virtual DOM이란?

• DOM을 수정할 경우, 모든 렌더트리가 다시 그려지며 많은 시간을 소요하는 문제를 해결하기 위해 등장한 방법

• 실제 DOM Tree를 필요한 부분만 골라 js의 객체형식으로 만들어놓은 트리

• virtualDOM은 DOM 보다 빠르다?
• 항상은 아니다.
• 탐색량도 많고, 메모리를 많이 사용한다. 다만 개발편의성, 렌더트리의 변경을 줄이기 위해 사용

5.DOM 조작 실습 - 간단한 에디터 만들기

• html 태그 중 contenteditable =”true”
해당 요소안에서, 글 작성이 가능해진다.

• document.execCommand() 🔗링크
• 내부의 텍스트에 대하여 css관련 여러 명령어를 적용시키는 예약어
• 이벤트리스너와 함께 사용
• 단, 현재 deprecated 된 상태로 연습용으로만 사용

// 텍스트 bold 처리하기
document.querySelector(".bold").addEventListner("click", () => {
	document.execCommand("bold); 
}