All

제네릭 & 타입 가드

제네릭?타입을 마치 클래스나 함수 등에서 파라미터처럼 사용하는 것을 의미한다.class ArrayOfNumbers { constructor(public collection: number[]) {} get(index: number): number { return this.collection[index]; }}class ArrayOfStrings { constructor(public collection: string[]) {} get(index: number): string { return this.collection[index]; }}number 타입, string 타입인거를 제외하면 나머지 부분은 전반적으로 동일하다. number 배열, string 배열을 생성자에서 매개변수로 받고 그 중에서 특..

타입스크립트 클래스 & 인터페이스

클래스객체를 어떤 필드(값)와 메서드(함수)로 표현하여 만들기 위한 설계class Vehicle { drive(): void { console.log('run run'); }}const vehicle = new Vehicle();vehicle.drive(); // run run;// 상속 (inheritance)// 부모가 자식에게 부모 클래스의 필드나 메서드에 속성을 물려주는 개념class Car extends Vehicle { // 자식 클래스에서 상속받은 메서드를 새롭게 재정의 할 수 있다 => 오버라이딩(overriding) drive(): void { console.log('car drive'); }}const car = new Car();car.drive(); // car drive 클래스..

타입 어노테이션 & 추론

타입 어노테이션?어떤 값이 어떤 타입을 참조하고 있는지 타입스크립트에게 알려주는 코드를 의미한다.개발자가 타입을 작성 해 주는 것을 의미하기도 한다.let name: string = 'Owen';let age: number = 30;let isMarried: boolean = false;let haveNothing: null = null;let nothing: undefined = undefined;// built in objectlet now: Date = new Date();// arraylet animals: string[] = ['cat', 'dog', 'cow'];// classclass Car {}let car: Car = new Car();// object literallet point: {..

타입스크립트란 무엇인가

✔️ 타입스크립트 언어가 무엇인지, 그리고 동작 원리에 대해 살펴보자 ☑️ 타입스크립트란?JavaScript With Syntax For Types. JavaScript With Syntax For Types.TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.www.typescriptlang.org타입스크립트 ⇒ 자바스크립트 + 타입 시스템☑️ 타입 시스템?개발 과정에서 에러를 잡을 수 있게 도와준다.자바스크립트는 느슨한 언어이기 때문..

[자료구조] 그래프(Graph)

그래프?그래프는 정점(Vertext)의 집합과 간선(Edge)의 집합으로 이루어진 자료구조정점의 집합을 V, 간선의 집합을 E, 그래프를 G 라고 했을 때 G = (V,E)이다정점은 위치를 의미, 간선은 정점과 정점을 연결하는 선을 의미그래프 트리 그래프트리방향성방향 그래프 or 무방향 그래프방향 그래프순환성순환 및 비순환비순환루트 노드 존재 여부루트 노드가 없음루트 노드가 존재노드간 관계성부모와 자식 관계 없음부모와 자식 관계모델의 종류네트워크 모델계층 모델그래프 용어 그래프에만 쓰이는 몇 가지 기술 용어가 있다각 노드를 정점(Vertext)정점을 잇는 선도 그래프 용어로 간선이라 부른다간선으로 연결된 정점은 서로 인접하다(Adjacent)인접한 정점을 이웃 = neighbor모든 정점이 서로 연결된 ..

[자료구조] 완전탐색 (Exhaustive search)

완전탐색 (Exhaustive search) ⇒ 모든 가능한 경우의 수를 탐색 하여 최적의 결과를 찾는 방법 모든 알고리즘 문제에서 가장 중요한 것 → 정확한 답 → 가장 확실한 방법 및 컴퓨터의 빠른 연산속도를 활용하는 가장 좋은 접근 방법 문제를 처음 접하면 반드시 완전탐색으로 풀 수 있는가를 생각해 보자. 모든 문제에서 완전탐색으로 답을 내지 못 한 문제는 복잡도를 더 이상 줄일 수 없기 때문이다. 완전탐색 종류 알고리즘 종류 설명 장점 단점 브루트 포스 ‘모든 경우의 수를 탐색’하면서 원하는 결과를 얻는 알고리즘을 의미. 가능한 모든 경우를 다 검사하기 때문에 예상된 결과를 얻을 수 있음 경우의 수가 많을 경우 시간이 오래 걸림 비트마스크 ‘모든 경우의 수를 이진수로 표현‘하고 ‘비트 연산’을 통..

[자료구조] DFS (Depth-First Search)

깊이 우선 탐색 (DFS, Depth-First Search) DFS는 깊이 우선 탐색이라고 부르며 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘이다. 백트래킹에 사용하는 대표적인 탐색 알고리즘. 이진 트리 순회 알고리즘과 상당이 유사하다. BFS와 마찬가지로 어떤 정점을 방문했는지 반드시 기록한다. ⇒ 이렇게 하지 않으면 무한루프에 빠질 위험이 있다. 루트 노드 혹은 임의의 노드에서 시작해서 다음 분기로 넘어가기 전에 해당 분기를 완벽하게 탐색하는 방식이다. 주로, 재귀함수 또는 Stack으로 구현할 수 있다. 미로를 탐색할 때 한 방향으로 갈 수 있을 때까지 계속 가다가 더 이상 갈 수 없게 되면 다시 가장 가까운 갈림길로 돌아와서 이곳으로부터 다른 방향으로 다시 탐색을 진행하는 방법과 유사. ..

[자료구조] BFS(Breadth-First Search)

그래프 탐색 하나의 정점으로부터 시작하여 차례대로 모든 정점들을 한 번씩 방문하는 것. 그래프는 관계에 특화된 자료 구조로서 데이터가 서로 어떻게 연결되는지 쉽게 이해시켜 준다. SNS 예시로는 한 사람은 한 노드로, 사람 간 친구 관계는 선으로 표현한다. → 방금 가입해 친구가 0명인 회원이 있다면 노드는 존재하지만 연결된 친구가 한 명도 없는 상태이다. 기초 그래프 구현 const friends = new Map([ ["Alice", ["Bob", "Diana", "Fred"]], ["Bob", ["Alice", "Cynthia", "Diana"]], ["Cynthia", ["Bob"]], ["Diana", ["Alice", "Bob", "Fred"]], ["Elise", ["Fred"]], ["Fr..

React 동작 방식

💡 Vanilla Javascript로 DOM을 그릴 때와 React로 DOM을 그릴 때에 대해 간단히 짚어 보자 (1) Vanilla JS로 만든 간단한 카운터 예제 이해를 돕기 위한 코드로 destroy에 대한 부분은 정의하지 않고 간단하게 만들었다. DOM을 그리는 부분은 다양하게 구현이 가능하다. (insertAdjacentHTML, innerHTML 등) 0 Increment Decrement const counterElement = document.getElementById('counter'); const incrementButton = document.getElementById('incrementButton'); const decrementButton = document.getElementB..

Vanilla JavaScript로 React Hooks 구현하기

Hook은 React 16.8부터 도입된 기능으로, 기존의 class component에서 벗어나 functional component로 상태를 관리하고 react의 다른 기능을 사용할 수 있게 한다. 하지만 어떤 원리로 동작하는 걸까? 어떻게 컴포넌트가 계속 리렌더링되고 변경되는 것과 무관하게 상태를 관리하고 가져올 수 있는 걸까? 답은 Closure!! JavaScript Closure lexical environment와 함수의 조합으로 함수 내부의 lexical scope에서 정의한 변수는 함수 바깥에서는 직접적으로 참조하거나 수정할 수 없다 [JavaScript] Closure (클로저) Vanilla JavaScript로 useState 구현 기본적인 구조는 useState를 사용하는 컴포넌트..