[CNU SW Academy] 5일차(22.12.07.)

프로그래머스 - 프론트엔드 미니 데브코스

DOM(Document Object Model, 문서 객체 모델)

tree 구조로 이루어짐

- 문서 노드 : document

- 요소 노드 : HTML 태그 자

- 속성노드 : 태그에 정의되어 있는 속성

- 텍스트 노드 : 요소의 텍스트, 자식을 가질 수 없는 단말노드

 

DOM TREE 순회는 PreOrder로 이루어짐

 

DOM TREE의 렌더링

브라우저가 HTML을읽고 파싱하여 DOM TREE 구성

-> Stylesheet를 파싱하여 Style Rules 구성

-> Attachment : DOM TREE에 STYLE RULES를 적용하는과정

-> Render Tree 구성 -> display

 

DOM 선택

- getElementById

- getElementsByClassName

- getElementsByTagName

- querySelector : CSS Selector 문법으로 찾음

- querySelectorAll : 가장 편한 방법

- window.[id] :  id가 있는 경우

 

DOM 탐색

parentNode

firstElementNode

lastElementNode

children

nextElementSibling

previousElementSibling

 

DOM 조작

class

hasAttribute

getAttribute

setAttribute

removeAttribute

textContent

innerHTML : XSS 위험이 있다. 가급적 사용 X

createElement

appendChild

removeChild

 

Virtual DOM(가상 돔)

한 번에 여러 개의 DOM 객체를 수정한다

렌더링 과정이 많은 시간을 소요한다.

React, Vue.js에서도 가상 돔 사용

 

가상 돔의 오해

DOM보다 빠른가? 

페이지에 그려진 돔이 많을수록 느려지는 것은 똑같다.

탐색을 가상돔, 진짜돔에서 두번씩 해야하기 때문에 렌더링 수만 줄일 뿐

 

document.createDocumentFragment

DocumentFragment는 DOM과 동일하게 동작하지만, HTML의 DOM 트리에는 영향 X, 메모리에서만 정의된다.

=> 렌더링을 하지 않는다.

 

간단한 텍스트 에디터 만들기

(() => {
    //즉시실행함수
    document.querySelectorAll('.toolbar button').forEach((element) => {
        element.addEventListener('click', (e) => {
        const command = e.target.getAttribute('data-command');
        document.execCommand(command);
        });
    });
})()

data-command를 이용하여 버튼에속성을 부여해두고, getAttribute로 속성을 읽어와 execCommand를 실행한다.

 

자료구조&알고리즘

자료구조 + 알고리즘 = 프로그램

 

자료구조

메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표

Stack, Queue, Graph, Tree, ...

 

알고리즘

특정 문제를 효율적이고 빠르게 해결하는 것이 궁극적인 목표, 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것

binary search, shortest path, ...

 

실무에서 중요하게 생각하는 3가지

- 기초 코딩능력(문제해결능력)

- 전문 분야 지식(깊이있게 알수록, 최신 트렌드를 따르면 더 좋다)    

- 기본 Computer Science 지식(운영체제, 네트워크, 소프트웨어공학, 컴퓨터구조 등)

 

문제 해결 능력

1. 논리적 사고

2. 전산화 능력

3. edge 케이스 탐색

 

자료구조, 알고리즘은 변하지 않는다. 알아두면 두고두고 쓸 수 있다.

 

자료구조의 종류

선형 구조

- 배열, 연결리스트, 스택, 큐

비선형 구조(계층 구조, ,망형 구조 표현에 적절)

- 그래프, 트리

 

프로그램 성능

입력 크기, 하드웨어 성능, 운영체제 성능, 컴파일러 최적화, 비동기 로직 등을 고려해야 함

 

시간 복잡도

- Big-O 표기법

O(1) < O(log n) < O(n) < O(n log n) < O(n^2) < O(2^n) < O(n!)

상수항은 무시, 가장 큰 항 외에는 무시

 

javascript의 Date 객체를이용하여 로직이 작동한 시간을 구함 => 성능 측정

 

배열(Array)

연관된 데이터가 연속적인 형태로 구성된 구조

배열에 포함된 원소는 순서대로 번호(index)가 붙음

고정된 크기를 갖는다

추가와 삭제가 반복되는 로직의 경우 배열 사용 X 

 

JS의 배열

배열 생성

1. let arr = [];

2. let arr = Array(n).fill(채울 숫자);

3. let arr = Array.from({length: n}, 반복 함수);

 

 요소 추가

const arr = [1, 2, 3];
//push는 O(1)
arr.push(4) // 4가 맨 끝에 추가됨

//splice는 선형 시간 O(n)
arr.splice(3, 0, 128); // 인덱스 3에 128이라는 값을 추가

arr.splice(3, 1); // 3번 인덱스 값 제거

 

LinkedList(연결 리스트)

추가와 삭제가 반복되는 로직인 경우 적합

각 요소는 노드라고 부르며 데이터 영역과 포인터 영역으로 구성됨 

탐색에 O(n), 추가나 제거에는 O(1)

---

하석재 강사님

SW아카데미 특강 #6 (WAS)

 

DI(의존성 주입) 방법- 생성자를 통한 주입(요즘스타일)- setter를 통한 주입(XML을 통한 DI)- 전용 메소드를 통한 주입(여러개 주입하는 경우)

 

트랜잭션 처리 - 로컬 트랜잭션- 글로벌(분산) 트랜잭션   - 2PC(Phase commit) 프로토콜 - XA 프로토콜로드밸런싱- 동일한 여러 대의 서버로 분산 처리고가용성- 일부 서버에서 장애가 발생하더라도 전체 서비스 유지(오토)스케일링로그취합

---

객체지향 프로그래밍 특강 - 이성호교수님

생성자

객체 초기 상태를 지정해줌

모든 클래스는 반드시 1개 이상의 생성자를 가짐

 return 타입이 없음

컴파일러가 기본 생성자를 만들어줌

 

상속

기존의 클래스를 재사용하여 새로운 클래스를 파생해 내는 것

extends

 

클래스 사이의 관계

1. has-a relation(포함관계)

한 클래스의 멤버 변수로 다른 클래스의 객체를 갖는 것 

2. is-a relation(상속)

 

접근지정자(접근제어자)

객체 내부의 상태를 외부에서 훔쳐가거나 마음대로 변경하지 못하도록 보호

public : 제한 X

protected : 동일한 패키지 + 자식 클래스

default :  자바에만 있는 내용, 동일한 패키지 내의 클래스만 접근 가능 

private : 클래스 내부에서만

 

상속과 오버라이딩(overriding)

부모 클래스의 메소드를 자식 클래스에서 재정의 하는 것

 

상속과 다형성

동적 디스패치

어떤 메소드를 부를지 실행 시점에 결정하는 것

정적 디스패치

컴파일 시점에 결정

---

코딩테스트 - Anagram

문제 : Anagram

str1, str2 = input().split(" ")
str1_list = sorted(list(str1))
str2_list = sorted(list(str2))
print(str1_list == str2_list)