20201026~20201101

20201026

delete 연산자

• let과 const로 선언한 속성은 어느 스코프에 정의되어 있건 삭제 할 수 없습니다.

——————————

JavaScript 객체의 속성을 제거할 때 delete 연산자보다 undefined 나 null 값으로 만드는 것이 낫다
Operator delete is unexpectedly slow!
Delete is the only true way to remove object’s properties without any leftovers, but it works ~ 100 times slower, compared to it’s “alternative”, setting object[key] = undefined. Use setting to undefined, when you care about performance. It can give a serious boost to your code. The key remains on its place in the hashmap, only the value is replaced with undefined. Understand, that for..in loop will still iterate over that key. There is no way to force garbage collection in JavaScript, and you don’t really need to. x.y = null; and delete x.y; both eliminate x’s reference to the former value of y. The value will be garbage collected when necessary. The only time I can think of where you would prefer delete is if you were going to enumerate over the properties of x. If you null out a property, it is still considered ‘set’ on the object and will be enumerated.

————

Tree

자식노드의 개수가 최대 2개면 Binary tree, 세개면 Ternary Tree, 루트 기준 왼쪽 자식들은 무조건 루트보다 작은 data가 모여있고, 오른쪽은 큰 data만. 모여있는 것이(루트기준) binary search treec아니면 그냥 binary tree.

루트 기준 왼쪽, 오른쪽이 어느정도 밸런스가 맞으면, balanced tree, 아니면 unbalanced.

Balanced에는 Red-binary tree, AVL tree가 있다.

완전 이진 트리(complete binary tree)

모든 레벨의 개수가 맞고, 맨 마지막 노드가 왼쪽부터 채워져있으면 완전 이진 트리 complete binary tree

Full binary tree : 자식노드가 없든가, 두개인 binary tree.

Perfect binary tree : level의 개수를 n이라고 했을 때, 2^n -1개의 노드를 갖는게 Perfect binary tree;

Binary search traversal

1. Indoor => 1.Left 2.Rooot 3.Right
2. Preorder = > 1.Root 2.Left 3.Right
3. Postorder => 1.Left 2.Right 3.Root

깊이 우선 검색 Depth-First-Search(DFS)

1.자식노드가 있냐없냐? 검사해보고 재귀로 들어가야겠네?? 없으면 loop 혹은 재귀로 찾기.
있으면, 리턴, 없으면 나와서 다시, null or undefined를 변수에 저장하고 나중에 리턴해야겠구나(다 찾지도 않았는데. null을 리턴할까봐)

넓이 우선 탐색 Breadth-First Search(BFS)

맨 왼쪽 자식노드를 한번보고 그 자식노드의 sibling들을 한번 싹 loop 혹은 재귀로 조회하고
그 다음 레벨의 자식노드를 쭉 검색하고, // 그런데 어떻게 자기 형제노드가 있는 것을 알지? //

Bit O 표기법

O(1)

입력데이터의 크기에 상관없이, 언제나 일정한 시간이 걸리는 알고리즘을 말하는 것.

O(1)의 시간복잡도를 가진다.

(Time)
^
|
|- - - - - - - - - - - - -
|
|
|—————————> (Data)

데이터크기에 상관없이 처리시간 일정

0(n)

입력데이터의 크기에 비례해서 처리시간이 걸리는 알고리즘

0(n2) (예를들면 2중 for문)

처음에는 데이터크기에 비례하여 조금씩 처리시간이 늘다가, 나중에는 거의 수직상승하듯이 늘어나는 알고리즘.

O(nm)

예를들면 2중 for문인데, 처음 포문에서는 i < n.length; 두번째 포문에서는 i < m.length. 이렇게 첫번재 작업과, 두번째 작업대상이 다를 때.

———

자료구조를 설명해봐라!

막상 말로 하려니까 잘 안된다.

넓이우선 탐색에 큐가 쓰임

노드js - 이벤트 드리븐 아키텍쳐 - 이벤트루프, 메세지큐라는 곳에 쓰인다 선입 선출

—

자료의 삽입과 삭제에 있어 링크드리스트가 배열보다 훨씬 더 쉬운연산이다.

배열은 파일을 추가, 삭제할 때, 전체 배열순서가 바뀌거나, 밀리지만
링크드리스트는 노드 링크필드만 바꿔주면 되기에 훨씬 쉽습니다.

———

해쉬 함수

임의의 길이의 데이터를 고정된 길이의 데이터로 맵핑하는 함수

Deterministic

x = y => h(x) = h(y)

——————————————————————————————

아래 3가지를 가지면 암호학적이라고 한다.

Collision resistance
같은 결과값을 갖는 서로. 다른 입력값을 찾기가 실질적으로 불가능

x != y => h(x) != h(y)

Hiding 결과값을 가지고 입력값을 찾기가 실직적으로 불가능

Puzzle friendliness

무작위로 찾는게 현재로선 최선

———————————————————————————————

컴퓨터의 특성상 메모리는 한정적

프로그래밍은 데이터를 다루는 것.

————

Zero Knowledge Proof;

영지식 증명(零知識 證明, 영어: zero-knowledge proof) 또는 제로 널리지 프로토콜(영어: zero-knowledge protocol)은 암호학에서 누군가가 상대방에게 어떤 사항(statement)이 참이라는 것을 증명할 때, 그 문장의 참 거짓 여부를 제외한 어떤 것도 노출되지 않는 interactive한 절차를 뜻한다.

어떤 문장이 참이라는 것을 증명하려는 쪽을 증명자(證明者, prover)라 하고, 증명 과정에 참여하여 증명자와 정보를 주고 받는 쪽을 검증자 (檢證者, verifier)라고 한다. 영지식 증명에 참여하는 당사자들이 상대방을 속이려는 목적으로 프로토콜을 임의로 변경하는 경우, 당사자들이 부정직하다 또는 정직하지 않다 (dishonest, 혹은 cheating)고 한다. 그 외의 경우에는, 정직하다고 한다.

영지식 증명은 다음과 같은 세가지 성질을 만족시켜야 한다.

완전성(完全性, completeness): 어떤 문장이 참이면, 정직한 증명자는 정직한 검증자에게 이 사실을 납득시킬 수 있어야 한다.
건실성(健實性, soundness): 어떤 문장이 거짓이면, 어떠한 부정직한 증명자라도 정직한 검증자에게 이 문장이 사실이라고 납득시킬 수 없어야 한다.
영지식성 (零知識性, zero-knowledgeness): 어떤 문장이 참이면, 검증자는 문장의 참 거짓 이외에는 아무것도 알 수 없어야 한다.

출처: 위키백과

왜 해시함수는 25퍼센트, 75퍼센트 기준으로 공간 축소, 늘리기를 하는걸까?

20대 80법칙
Long Tail 법칙

예를들면 황금비 이런것?

컴퓨터에도 이런 비슷한 규칙들이 반영이되있는 경우가 많다.

해싱의 사이즈 늘리기줄이기는 현재 있는 엘레멘트의 개수 기준

——

면접 때 해쉬테이블을 구현해봐라 라는 사람은 많이 없지만, 원리를 설명해봐라는 많이 할 듯.

———

콜백함수가 뭐에요?

다른함수의 인자로 전달되는 함수. 콜백이라고 부르는 이유는
함수 내에서 불리우기 떄문에 콜백이고
함수의 연산이 다 끝나고난 마지막에 불려지기에 콜 백이라 불리웁니다

클로져가 뭐에요?

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.

- 말로 설명못하면 아는것 같아도 아닌게 아니야!
자꾸 말해보고 대답해보고 해야 정확히 아는 거야!!

질문하고 답하고 연습을 해야 할듯??

——

문제를 보고 한글로 안풀리면, 코드로 풀수가 없다.

모듈러스 기호: 나머지 연산자

————

알고리즘 = 문제를 해결하는 방법
문제를 다양하게 해결할 수 있다.
코드가 없어도 해결하는 방법은 찾을 수 있다.

코드없이, 이 문제가 중학교 때 수해평가 또는 논술시험에 나왔다고 가정하고 나에게 가장 편한언어로 문제를 풀어보자.

구주 이배(알고리즘 풀 때)

구 하는게 뭘까?
주 주어진게 뭘까? (조건)
이 걸 어떻게 활용할까?
배 운걸 어떻게 활용할까?

———
알고리즘 시험에서 가장많이 나오는 것이 그래프,
그 다음이 트리

——

Tuple : 순서 쌍. 순서가 달라지만 다른값이 된다.

자바스크립트안에는 튜플이라느 것이 제공되지 않는다.

———————————————

Graph

인접그래프 인접행렬(Graph adjacent matrix) 의 공간 복잡도 = V^2
공간복잡도 노테이션에서 상수가 있으면 생략한다고 보면된다. 제곱수 빼고.

• 간선(edge)의 추가와 삭제가 빈번한경우에는 [인접행렬] 방식이 효율적이다 => 왜??

  => 0,1 숫자만 바꿔주면 되니까

• 정점의 추가는 [인접 리스트가] 효율적이다. => 왜??

=> 인접행렬은 칸을 하나를 더만들어서 0 행렬 개수 만큼 추가해줘야 한다.
=> 리스트는 표를 다시 만들 필요없이. node하나만 만들고, edge만 추가해주면 된다.

• 한마디로 edge를 관리하기에는 인접 행렬이, vertex를 관리하기에는 인접 리스트가 좋다.

———————————————

Tree

트리는 그래프의 한 종류이다.

트리는 하나의 부모노드만 가질 수 있다

트리는 순환구조를 가질 수 없다.

트리는 자식노드를 임의의개수로 가질 수 있다. 2개씩만 가지고 있는 것은 Binary Tree.

트리의 높이를 구할 때는 Zero indexing 적용. leaf부터 하나 둘 셋 위로 올라간다.

깊이와 높이의 차이는 출발점.

Leaf는 가장 하위 level에 있는 노드만 말하는 것이 아니고, 각 노드의 끝자락 부분이 다 leaf라고 부른다. 더 이상 하위 노드가 없는 부분을 leaf라 한다.

Preoder 전위순회 루트 왼 오
Inorder 중위순회 왼 루트 오
Postorder 후위순회 왼 오 루트

이진 탐색트리에서 노드의 추가, 삭제, 조회의 시간복잡도는. 0(n)이다.
———————————————

내가 자바스크립트를 쓰다가, C언어를 쓰면서 느낀. 기분은 C언어는 약간 아주 무뚝뚝한 모습이 느껴진다.
———————————————

해시 함수는 임의의 길이의 데이터를 고정된 길이의 데이터로 맵핑하는 함수

20201027

알고리즘 문제 때, 시간, 공간 복잡도가 짧게 풀었나도 신경 씀.

알고리즘 시간 복잡도에서 constant Time은 아주 Awesome한 것이다!

Big-O notation = 최악의 경우를 적어두는 것.

한번에 찾을 수 있는 것은 0(1);

시간복잡도에서 상수를 떼고 O( ) 괄호안에 넣어주면 된다!

배열의 시간복잡도는

Insert: O(n)
Lookup: O(1)
Assign: O(1)
Remove: O(1)
Find(value): O(n)

Linked List

특정 메모리에 접근을 못하게 되면, 가비지 콜렉션으로 인해 그 메모리는 삭제됨

Binary search tree가 sorted array 보다 알고리즘 효율 측면에서 더 좋다.

시간복잡도 유용한 사이트

https://www.bigocheatsheet.com
desmos.com

기업 인터뷰:
leetcode.com

!!<그래프(bfs로 순회, bfs는 큐로 구현이 된다), 큐랑, 트리는 무조건 해야 한다. 구현, 원리, 다!>!!

해시테이블, 링크드리스트, 스택 - 말로 할 정도 구현직전까지 말로 설명할 정도.

“해시테이블을 거기서 왜쓰시는데요?”

"아 여기 이 자료구조에 적합한 것 같아서 씁니다."

자료구조면접은 수도 코드나, 그림 그리기 등으로 한다 말로 설명.

자료구조가 필요없는데 일부러 쓸 필요는 없다.

메세지브로커가 어떻게 쓰였냐? (큐)

시스템 디자인
배민 기술 블로그
네이버 기술 블로그
넷플릭스 기술 블로그
링크드인 기술 블로그
8 bitmen

시간이 없다 확률이 높은 공부를 해야 한다.

목표가 뚜렷한 경우에는 공부하는 방법이 정해져있다.
나오는걸 공부해야 합니다.

장수생들보면 모범적인 수험생이 되려고 하는 사람이많다

기출문제를 주로 봐야 하는데,
어느정도 깊이있게 들어가면 멈추어야 한다.

정의, 구현하는 법,

체크포인트 이해 남한테 설명할 수준으로 되면 뒤도돌아보지 말고 앞으로 나아가라

자료구조 직접적으로 구현할 일이 없다.

두시간정도 고민하다가 덮어라.

제곱근 : 4 = 2^ 2
9 = 3^2 (여기서 3은 밑, pow) log

log는 한번 실행했을 때 경우의 수가 얼마나 빠르게 감소하느냐 의 용어

Log n : n이 커지면 커질 수록 속도차이가 많이 나지 않아서 그냥 log n이라고 한다.
생선머리 자르고, 생선 꼬리 짜르고 몸통 수색 이렇게 빠르게 찾을 수 있는 방법이 log n






———————
함수의 Input을 입력받을 때,

let base = userInput || 10;

이런것은 보통 default값을 쓸 때 표현을 한다.

ES6에서는 default parameter 사용 가능

———————

Default parameter

Function compute(base = 10) {
  let input = base || 10; 
  input * 10;
}

20201028

객체지향의 다형성과 상속

객체지향의 4가지 특성을 이해할 수 있다.
인스턴스를 생성하는(instantiation)다양한 방법 중 수도클래식한 방법, class키워드 이용한 방법을 알 수 있다.
객체 지향 프로그래밍(OOP)의 다형성과, 상속의 개념을 이해하고 코드로 작성할 수 있다.
상속관계를 가진 현실 새계의 모델을 코드로 작성할 수 있다.
Class의 상속의 원리를 이해할 수 있다.

• 실행컨텍스트가(this)가 어떻게 전달되는지
• prototype chain을 이해하고 설명할 수 있다.

컴퓨터 프로그래밍: 알고리즘의 모음 => 알고리즘은 process의 모임.

프로그래밍 언어의 종류 : 머신 랭귀지, 어셈블리 랭귀지, 하이-레벨 랭귀지

Low-level에 갈수록 머신 랭귀지에 가깝고, high-level로 갈 수록 사람의 언어에 가깝다.

머신 랭귀지:
0과1로 이루어진 컴퓨터의 언어. 사람이 0과1만 가지고 프로그래밍하기 어려움.

어샘블리어의 탄생 (어샘블리어 설명에 대해 더 봐야될듯)
CPU계열에 따라 다르다.
어샘블리어로 만들어놓은 함수를 사용할 수 있게끔 만들어놓은게 프로그래밍 언어.

대표적으로 C.

Levels of programming language.

우리가 쓰는 프로그래밍 언어 => compiling 과정을 통해 어샘블리어로 번역 => Assembling이라는 과정을 통해 기계어로 번역됨.

High-level 프로그래밍 언어로 갈수록 :

사용이 쉬워지고(사람의 언어와 가깝기 때문), 유연성이 올라가고, portability 즉 이식성이 좋아진다(https://m.blog.naver.com/PostView.nhn?blogId=knix008&logNo=220098970726&proxyReferer=https:%2F%2Fwww.google.com%2F)

Assembly어로 갈 수록 :

1. 언어의 실행속도가 올라가고(번역과정이 줄어들기 때문)
2. 코드 작성밀도(density)가 적어지고, 코드양이 압축된다.
3. 특정 머신에 종속화 된다.

High-level languages

1. Syntax of HL language is similar to English
2. Interpreter - Executes high level language programs without compilation
3. Historically, we divide HL languages into two groups: 
- Procedural - 절차지향적 언어 
- Object-Oriented - Language(OOP) 객체지향 적 언어 .

———

개발자로 효율을 높이기 위해서는,

우선순위를 정하고,
코드를 잘짜는 것 확장성 있게 짜는 것 모두 좋다. 하지만 코드를 다듬으면서 전전긍긍하고 있는 것 보다. 먼저 보내고 피드백 받아서 하는게 빠를 수 있다.

어떤 프로젝트를 진행할 때 그 기술 스택을 얼마나 깊이
알 것인가 결정하는것도 효율성 측면에서는 중요하다.

일단 프로그램실행이 중요하고, 테스트가 우선이면 가져다 쓰면 되고, 그 분야에 전문성있게 나갈거면 더 들여다 보는게 좋다.

OOP

Object - 객체지향이라 번역하지만 사실은, 물체 지향적언어(thing), 그것(thing)들의 조합. 모든 것들(함수,변수 등 다)을 다 물체로 만들고, 그것들 물체처럼 자유롭게 다루는 것.
재사용 성이 높고, 자유자재로 다룰 수 있다.

• OOP는 프로그램 디자인 철학
• 자동차 : 자동차의 속성 : 몇인승, 최고속력, 색상, 마력 이런것들은 공통적으로 모든자동차가 공유하는 속성.

자동차라는 객체를 하나 만들어 두면,
우리가 만든 자동차는 색상은 이렇고, 최고속력, 마력은 이런식이야라고 여러가지의 자동차를 그 객체하나로부터 뽑아낼 수있다.

OOP의 기본 컨셉

오브젝트 안에 속성들을 모아두는 것

Encapsulation.

위가 절차지향, 아래가 객체지향,

상속 Inheritance

베이스 객체의 특징을 물려받는 것.
예) 모든 HTML TAG들은 HTML Element를 부모로 두고 있다.
질문. 위 사진에서, extends는 베이스 클래스의 속성을 덮어 씌우는가? Overwrite 하는가? 위에느 그런 것 같은데.

추상화 Abstraction

내부구조는 복잡하지만, 사용자가 보여질 때는 중요한부분만 보여지는 것.

전화를 쓸 때, 전화가 안이 어떤 구조인지 알고 있어야 되나? 그렇지 않아도 사용자는 전화 잘 쓰고 듣고 한다.

장점: 인터페이스 간단해짐, 사용자가 내부에 접근이 안되니 고장위험도 적어짐.

Polymorphism

여러가지 형태 라는 뜻.

객체지향을 한마디로 : 사람이 보는 세계를 보고 이해하는 방법을 흉내낸 방법론

——————————————————————————————————

20201029

프로그래머스
리트코드
—————

HTML할 때, 큰 섹션은 <section>으로
<section>안에 타이틀, 부 타이틀은 <h1>, <h3>로

그안에 이미지, 한 block단위 콘텐츠는 div로, 그 안에 길게 나열한 text들이 있다면, <p>로 
Text와 그 것을 작성한 사람의 이름이  각각 \n으로 분리되어 있다면 다른 <p>로 구분지어 준다. 

—————

function A () {
  this.name = 'A';
}

function B () {
  this.name = 'B';
}

function C () {
  this.name = 'C';
}

B.prototype = Object.create(A.prototype);
B.prototype.constructor = B;

C.prototype = Object.create(B.prototype);
C.prototype.constructor = C;

A.prototype.sayHi = function () {console.log("hello world")};
B.prototype.sayHi = function () {console.log("Hi")};

const a = new A();
const b = new B();
const c = new C();

c.sayHi()

했을 때, “hi”가 출력될 수 있었던 이유는

Object.create(B.prototype)를 통해 리턴되는 새로운 객체는 이미 B.prototype과 B.prototype.__proto__ 으로 부모 객체와 prototype chaning이 됐기 때문이다.

단순히 deep copy개념이 아니기에, method를 사용하려 검색시 B의 부모객체 프로토타입의 method까지 detect해서 사용할 수 있다.

이것이 프로토타입 체이닝

그런 의미에서 Object.assign() 이 Deep Copy.
Object.create()는 프로토타입 체이닝

console.dir()을 해보면 프로토타입 체이닝을 확인할 수 있다.

자식 프로토타입에서 선언된 method는 부모 컨스트럭터에서 생성된 새로운 인스턴스가 접근할 수 없다.

——————

프로토타입이요 상속 때 새 함수 안에 부모 콘스트럭터.call or bind.(this, arguments)라고 써놓는 이유는,

부모 객체의 context를 공유하기 위해.

—————————

그래프,연결리스트,트리
구현 꼭 할 줄 알아야 한다.

해시테이블 원리는 꼭 알아야 한다.

자료구조 같은 것들 장점, 단점에 대해 확인하고 싶으면,

헬프 데스크에, 내가 아는 이 자료구조의 장점, 단점이 맞냐? 이렇게 물어보시면 아마 답을 줄 거다.

그럼 보완하면 된다.

————————————————
재귀
자료구조
시간 복잡도
es6
Arrow function - 아마 함수를 화살표로 바꾸고, this값이 없으니, 이걸 어떻게 바인딩하느 것을 하라고 하지 않을까?
Class 상속문제가 나옴
——————
불완전함을 인정해야 완전해 진다.

그럼 결국 인간은 불완전함을 인정하는 것 자체가 완전해지는 마지막 필요조건을 만족한게 아닐까?

인간은 완벽해질 수 없다.
그래서 불완벽성을 인정하는 것부터가 완전이다.
—————
HTML Class 붙일 때,
보통은 속성별로 묶어서 하기 보다는 (그럼 그냥 HTML에서 인라인 스타일링을 해주는거랑 다를게 없겠죠?) 클래스별로 (카테고리별, 그룹별) 정의해서 스타일링을 해주는것이 유지보수 측면에서 더 좋아요 :)

• 포트폴리오는 바라보는 사용자(헤드헌터)의 시간 고려! 바로 파악할 수 있게 할 것
• Meta 태그의 author과 description
• BEM
• 리스트&카드가 무조건 ul태그를 사용하는건 아니다! 

———

CSS BOX-sizing

Box-sizing :

Content-box;는 margin이 얼마든, border 가 얼마든 콘텐츠 width, height는 변화되지 않는다. 콘텐츠 크기는. 그대로고, 그 외부로 border, margin, padding이 커진다.

Box-sizing: border-box; 는border, padding, margin 다 합쳐서 콘텐츠 width, height크기안으로 맞추기 때문에 패딩, 마진,을 키우면 그만큼 콘텐츠 사이즈가 줄어들고,
다시 키우면 그만큼 콘텐츠 사이즈가 줄어든다.

padding이라는 것은 콘텐츠 주변의 여백을 말하는 것이기 때문에

주로 box-sizing: border-box;를 사용한다.

다형성 : 상속받아온 속성을 다양한 방식으로 변화시키는 것

Over Riding :

하위 클래스에서 method 재 정의를 하는 것.
Super class의 method를 활용할수도 있고, 무시하고 쓸 수 도 있다.

Over Loading : Prameter 개수를 다르게 해서 구현

자바스크립트에서는 오버라이딩맨 되고, 오버로딩은 안된다.

Call, apply, bind 차이

Set time out 의 this 가 window로 바인딩되는 것을 막는 법
=> setTimeOut 안 콜백함수에 bind(this)로 바인딩 해줘야 됨.
—————

클래스와 인스턴스의 차이

Contructor가 하는 일
인스턴스 객체를 생성해 주는 객체. 대문자를 처음에 써야 합니다. 청사진을 만들고(Class) 그 청사진을 바탕으로 한 객체를 만드는(Instance)를 만드는 프로그래밍 패턴.

프로토타입의 의미
모델의 청사진을 만들 때 쓰는 원형 객채(Original form.) 같은 생성자로부터 만들어진 인스턴스 객체들은 모두 이 원형 객체를 공유한다.

New 키워드 사용시 this의 의미

=> new 로 인해 만들어진 인스턴스 그 자체.
this는 함수가 실행될 때 해당 scope마다 생성되는 고유한 실행 context. new 키워드로 인스턴스를 생성했을 때에는 해당 인스턴스가 바로 this값이 됨.

오승훈 개발자 블로그 프로토타입 : https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67


키 코드를 이용해 html에서 element들을 움직일 수 있다.

https://keycode.info/

———

20201030

Subclass Dance Party

20201031

휴식

20201101

SubClass Dance Party