mystery

우아한테크코스 5기를 준비하는 과정에서 프리코스 과제들을 접하게 됐습니다. 프리코스의 모든 과제들은 바닐라 자바스크립트로만 구현하여 제출해야하는데..... 바닐라 자바스크립트만으로 무언가를 만들어본 경험은 개발을 처음 배우기 시작했을 때 밖에 없는 것 같아 자신감이 떨어졌슴다! 아니나 다를까! 역대 지원자들의 코드를 찬찬히 살펴보던 중.... 처음 보는 코드가 있더라구요...? createDocumentFragment() 이게 무엇인고 ? 바로 공부 들어갔습니다! 0. DocumentFragment 에 대한 이해! 아래는 DocumentFragment에 대한 설명입니다. DocumentFragment은 웹 문서의 메인 DOM 트리에 포함되지 않는, 가상 메모리에 존재하는 DOM 노드 객체입니다. Docu..

1. 투 포인터(Two pointer) 알고리즘 이란 ? 배열이나 문자열 같이 선형으로 이루어진 구조에서 각자 다른 값을 가리키는 2 개 혹은 그 이상의 포인터를 두고 값 들을 비교하여 문제를 해결하는 알고리즘 입니다. 2. 예제 문제로 이해하기 input = [-2, -1, 1, 0, 1, 2] answer = [-2, 2] 위와 같이 숫자로 이루어진 배열이 주어졌을 때, 배열의 요소 중 2개의 합이 0 이 되는 경우 중 , 가장 빠른 경우에서의 두 수를 구하여라! (배열은 오름차순으로 정렬되어 있다.) 위 예제문제를 풀어보며 이해해 봅시다. 2-1. 이중 for문 사용하기 / O(n^2) function solution() { for (let i = 0; i < input.length; i++) { ..

어느새 여름이 다 지났다. 9월이 시작됐다! 저번 리뷰에서 목표로 했던 것들은 대부분 달성했다! 물론 반쪽짜리 완성이긴 하지만.... LOL 밴픽 프로젝트는 프로젝트 설계라는 과정이 거의 없다시피 시작해버린 바람에 내가 원하는 방향으로 계속 확장할수가 없어 종료했다. 처음에는 억울했는데, 내가 저지른 일이고, 내가 무지해서 생긴 일이니 억울할것도 없다는 생각으로 변했다. 적어도 다음 프로젝트에서는 이런 만행을 저지르지 않을테니 이것도 경험이라고 생각한다! 프로젝트 종료 이후 7월까지는 계획했던대로 TypeScript를 배웠다. jsx를 기반으로 만들어진 강의를 내가 tsx로 따라해보면서 문법 기초를 다졌다. 8월부터 서버에 대한 기본적인 공부도 시작하며 현재 node.js 기초 강의를 완강했다. 이때부터..

DFS와 BFS 모두 그래프를 탐색하는 방법중 하나입니다. 1. DFS(Depth-First-Search) 란? 루트 노드에서 시작해서 한 분기를 모두 방문하고 다음 분기로 넘어가는 방식입니다. 인접 노드를 깊이 우선으로 탐색하기 때문에 깊이 우선 탐색, DFS 라고 불립니다. DFS의 예로 미로 찾기를 들 수 있습니다. (최대한 한 방향으로 이동하고, 막다른 길에서는 이전 갈림길로 되돌아와 다시 한 방향으로 이동하기를 반복함) 위 예제 그래프를 DFS로 탐색하면 방문한 노드 순서는 1-2-4-5-3-6-7 입니다. 2. BFS(Breadth-First-Search) 란? 루트 노드에서 시작해서 인접한 노드들을 먼저 모두 탐색 하는 방식입니다. 인접 노드를 너비를 우선으로 탐색하기 때문에 너비 우선 탐색..

1. 트리(tree) 란? 트리는 계층적인 자료를 표현하는 데 사용되는 자료구조입니다. 1. Node tree의 각 요소 ( A, B, C, D.... 와 같은) 를 노드 (Node) 라고 부릅니다. B를 A의 자식 노드, A를 B의 부모 노드 라고 합니다. 각 Node는 자신의 데이터를 가지고 있으며, 자식 노드의 주소를 가지고 있을 수도 있습니다. 2. Root Node A와 같이 부모 노드가 없고 최상단에 위치한 Node를 루트 노드( Root Node ) 라고 합니다. 3. Leaf Node H, I, E, J, G 처럼 자식 노드가 없는 Node를 단말 노드( Leaf Node ) 라고 합니다. 4. size 모든 Node의 갯수를 크기(size) 라고 합니다. (ex. size: 10) 5. ..

타입스크립트에서 객체의 type을 지정해주는 방법에는 2가지가 있다. 하나는 type 키워드를 통한 기본적인 방법이고, 나머지 하나는 Interface 키워드를 통한 방법이다. 1. type의 쓰임새 type 키워드는 여러가지 방법으로 다양하게 사용 가능하다. 객체 외의 다른 자료형의 타입도 지정 가능하다. 1-1. 기본적인 타입 지정 ( ailas ) type Dmg = number type Name = string type Player = { name: Name, dmg : Dmg, } const bob : Player = { name: 'bob', dmg: 10 } 1-2. 타입이 특정 값을 가지도록 제한 type Team = 'red' | 'green' | 'yellow' type Health =..

1. constructor - 프로퍼티 초기화 자바스크립트에서 처럼 this.X = X 형태의 문법은 더이상 사용하지 않는다. 타입스크립트에서는 constructor에서 한 번에 선언할 수 있다. 접근 제한자도 붙여줄 수 있다. class Player { constructor( private firstName: string, protected lastName: string, public nickName: string ){} } 1-1. 프로퍼티 메뉴얼 초기화 클래스의 프로퍼티가 constructor에 의해 바로 초기화 되지 않도록 할 수 있다. type Words = { [key: string]: string; }; class Dict { private words: Words; constructor() ..

제네릭이란? 선언 시점이 아닌 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다. 한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다. 는 제네릭을 선언할 때 관용적으로 사용되는 식별자이며, 타입 파라미터(Type parameter)라 한다. ( 'T' 외의 값을 사용해도 된다고 하는데 대부분 'T' 를 쓰는것 같다.) 함수에서의 제네릭 type SuperPrint = { (arr: T[]): void; }; const superPrint: SuperPrint = (arr) => { arr.forEach((item) => console.log(item)); }; superPrint([1, 2, 3]); // superPrint (arr: numbe..

함수 오버로딩이란? 타입스크립트 에서는 여러 개의 Call signature를 갖는 함수를 하나의 이름으로 정의하는 것, 즉 여러 타입의 매개변수를 받지만 그에 의한 함수의 동작은 같아 하나의 함수 명으로 표현하고 싶을 때 사용할 수 있는 함수 정의 기술입니다. * 객체 지향 프로그래밍의 특징 중 다형성( polymorphism ) 의 구현입니다. call signature의 파라미터 수가 같을 때 type Add = { (a: number, b: number): number; (a: number, b: string): number; }; const add: Add = (a, b) => { if (typeof b === "string") return a; return a + b; }; console.lo..

Call Signatures란? 함수 매개변수와 return값의 Type을 미리 정하는 문법입니다. 함수선언 안에서 타입을 명시한 코드 function hello(name: string): void { console.log(`hello ${name}`); } Call Signatures를 사용한 코드 type Hello = (name: string) => void; const hello: Hello = (name) => { console.log(`hello ${name}`) } hello('bob') //"hello bob" Call Signatures를 사용하면 함수의 구현과 타입선언을 분리하여 구현할 수 있습니다. 타입 체커는 hello 함수의 타입을 이미 알기 때문에 에러없이 실행됩니다.