혼자 적어보는 노트

✅ 학습 목차 - [DAY 11] VanillaJS를 통한 자바스크립트 기본 역량 강화 (3) ✅ 새롭게 학습한 부분 - 컴포넌트 방식으로 생각하기 - Client Side에서 데이터를 저장하기 - LocalStrorage 💡 컴포넌트 방식으로 생각하기 - 컴포넌트는 재사용이 가능하고 독립적이게 사용할 수 있도록 구성 - 역할과 책임에 따라서 분리 - 외부로부터 주입된 데이터를 관리 - UI를 선언적으로 표현하기 위해 추상화 - 컴포넌트의 의존성을 줄이기 위해 생성한 컴포넌트에서 이벤트 콜백을 만들어서 사용 🍪 쿠키 📌 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 데이터 파일 - 클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다. - key, value 형태로 저장 된다. -..

✅ 학습 목차 - [DAY 10] VanillaJS를 통한 자바스크립트 기본 역량 강화 (2) - 함수형 프로그래밍과 ES6+ (4) ✅ 새롭게 학습한 부분 - 값으로써의 promise 활용 - 함수 합성 / 모나드 / Kleisli Composition - 함수의 비동기 제어 - 지연평가 + Promise의 효율성 - 지연된 함수의 병렬 평가 (Concurrency) - CallStack에 쌓인 catch 에러 해결 💻 비동기/ 동시성 프로그래밍 promise와 callback의 차이란? promise는 대기, 성공, 실패의 값을 만들고 프로미스 객체가 리턴된다. 값으로써 다루어지기 때문에 일급이다. const delay100 = a => new Promise(resolve => setTimeout((..

✅ 학습 목차 - [DAY 9] VanillaJS를 통한 자바스크립트 기본 역량 강화 (1) - 함수형 프로그래밍과 ES6+ (3) ✅ 새롭게 학습한 부분 - map, filter 계열 함수들이 가지는 결합 법칙 - 지연평가의 장점 - 지연성을 이용하여 다양한 함수 만들기 - 응용 map, filter계열의 함수가 가지는 결합법칙 어떤 데이터를 사용하든지 보조 함수가 순수 함수라면 아래와 같이 결합 시 결과가 같다. [[mapping, mapping], [filtering, filtering], [mapping, mapping]] = [[mapping, filtering, mapping], [mapping, filtering, mapping]] ES6의 기본 규약을 통해 구현하는 지연평가의 장점. ES6..

✅ 학습 목차 - [Day 8] JavaScript 주요 문법 (8) - 함수형 프로그래밍과 ES6+ (2) ✅ 새롭게 학습한 부분 - DOM - Virtual DOM - 함수형 프로그래밍 장바구니 예제 - 제너레이터:이터레이터 프로토콜의 지연 평가 DOM(Document Object Model) 웹페이지의 구성 요소를 제어하기 위해 문서의 구성요소들을 객체로 구조화하여 나타낸 모델 viortual DOM은 어떤 문제를 해결하기 위해 등장 했을까? - DOM에 변화가 가해진다면 렌더트리를 기준으로 레이아웃을 배치하고 그리는 작업을 다시 하게된다. - 즉, DOM을 반복적으로 조작했을 때 렌더링을 자주 하게되며 시간을 소모하게 된다. Virtual DOM - DOM을 추상화시킨 자바스크립트 객체를 의미한다..

✅ 학습 목차 - [Day 7] JavaScript 주요 문법 (7) - 함수형 프로그래밍과 ES6+ (1) - 함수형 프로그래밍과 ES6+ (2) ✅ 새롭게 학습한 부분 - 백트래킹 - 동적계획법 - 제너레이터 - 함수형 프로그래밍 / map, filter, reduce 직접 만들기 백트래킹 - 모든 가능한 경우의 수 중에서 특정한 조건을 만족하는 경우만 살펴보는 것. - DFS나 BFS를 이용할 수 있다. - 효율을 위해 탐색하지 않아도 되는 곳을 미리 막는 것을 가지치기라고 한다. - 자바스크립트는 재귀 효율이 나쁘기 때문에 DFS를 규현할 경우 스택을 이용하는 것이 좋다. - 코딩 테스트에선 이를 고려하여 재귀로 작성해도 풀 수 있도록 문제를 제출하는 경우도 있다. - 탐색에서 순환이 발생할 수 ..

✅ 학습 목차 - [Day 6] JavaScript 주요 문법 (6) - 함수형 프로그래밍과 ES6+ (1) ✅ 새롭게 학습한 부분 - 너비 우선 탐색 - 깊이 우선 탐색 - 함수형 프로그래밍 - 평가/일급/일급함수/고차함수 - iterable/iterator 🔗 자료구조 알고리즘 너비 우선 탐색(BFS) - 그래프 탐색 알고리즘으로 같은 깊이에 해당하는 정점부터 탐색하는 알고리즘 - Queue를 이용하여 구현할 수 있다. - 시작 지점에서 가까운 정점부터 탐색한다. - V가 정점의 수, E가 간선의 수일 때 BFS의 시간복잡도는 O(V+E)이다 깊이 우선 탐색(DFS) - 그래프 탐색 알고리즘으로 최대한 깊은 정점부터 탐색하는 알고리즘 - Stack을 이용하여 구현할 수 있다 - 시작 정점에서 깊은 것..

✅ 학습 목차 - [Day 5] JavaScript 주요 문법 (5) ✅ 새롭게 학습한 부분 - 트라이 - 정렬 - 이진탐색 트라이(Trie) - 문서를 저장하고 효율적으로 탐색하기 위한 트리형태의 자료구조 - L이 문자열의 길이일 때 탐색, 삽입은 O(L)만큼 걸린다. - 대신 각 정점이 자식에 대한 링크를 전부 가지고 있기 때문에 저장공간을 더 많이 사용한다. - 검색어의 자동완성 기능에 활용할 수 있다는 것을 알게 되었다.💡 트라이의 구조 - 루트는 비어있다. - 각 간선은 추가될 문자를 키로 가진다. - 각 정점은 이전 정점의 값 + 간선의 키를 값으로 가진다. - 해시 테이블과 연결 리스트를 이용하여 구현할 수 있다. 비교식 정렬 버블정렬 - 서로 인접한 두 요소를 검사하여 정렬하는 알고리즘 o..

✅ 학습 목차 - [Day 5] JavaScript 주요 문법 (5) ✅ 새롭게 학습한 부분 - 그래프 - 그래프의 구현/탐색 - 트리 - 트리의 탐색 그래프(Graph) - 단순히 노드(N, node)와 그 노드를 연결하는 간선(E, edge)을 하나로 모아 놓은 자료 구조 - 정점 집합과 간선 집합으로 표현할 수 있다. - 정점은 여러개의 간선을 가질 수 있다 - 순회는 DFS나 BFS로 이루어진다. - 크게는 방향 그래프와 무방향 그래프로 나눌 수 있다 그래프의 구현 2가지 1. 인접 리스트 : 그래프를 표현하는 가장 일반적인 방법. - 모든 정점을 인접 리스트에 저장한다. 각각의 정점에 인접한 정점들을 리스트로 표시. - 정점의 번호를 배열의 인덱스로 하여 정점의 리스트에 쉽게 접근할 수 있다. ..