profile
블로그 이사 🚚 https://wonsss.github.io/
태그 목록
전체보기 (95)자바스크립트(32)자료구조(13)클린코드(13)알고리즘(12)회고(10)우테코(9)React(6)정렬 알고리즘(4)DOM(4)개발이랑은 딱히 상관없는 그냥 한 주 이야기(4)TIL(3)우아한테크코스(3)array.length(2)nodejs(2)DFS(2)너비우선탐색(2)stack(2)queue(2)JavaScript(2)구조분해할당(2)git(2)퀵소트(2)깊이우선탐색(2)재귀함수(2)트리(2)BFS(2)우선순위 큐(2)insertAdjacentHTML(1)선입선출(1)virtual DOM(1)타입 검사(1)객체 변경 방지 메서드(1)object(1)배열(1)Manifest(1)동등 연산자(1)이벤트 위임(1)비차단(1)proto(1)크롬익스텐션(1)else if(1)순수함수(1)불변성(1)코드컨벤션(1)선택 정렬(1)참같은값(1)컴포넌트 합성(1)ReactDOM(1)싱글스레드(1)이벤트루프(1)Graph(1)radix sort(1)stopPropagation(1)거짓같은값(1)애자일(1)eqeqeq(1)해시(1)해시맵(1)priority queue(1)heap(1)프로미스(1)그래프 순회(1)단축평가(1)함수형 프로그래밍(1)객체(1)제너레이터(1)이중 연결 리스트(1)시간복잡도(1)커스텀 이벤트(1)null 병합 연산자(1)instanceof(1)버블 정렬(1)reconciliation(1)해시 테이블(1)dijkstra(1)다익스트라(1)라우팅(1)프로토타입(1)비동기반복(1)매개변수(1)CRLF(1)공간복잡도(1)null(1)early-return(1)Prototype(1)이벤트 흐름(1)NaN(1)유사배열객체(1)props drilling(1)고차 함수(1)react redux(1)부정조건문(1)composition(1)getElementsByClassName(1)async(1)비동기(1)코드리뷰(1)책리뷰(1)Document 노드(1)linkedlist(1)&&(1)singly linked list(1)선형 검색(1)LF(1)타입스크립트(1)nodeList(1)typeof(1)this바인딩(1)Element 노드(1)의존성역전원칙(1)prefix-suffix(1)조건문(1)break(1)Node(1)querySelectorAll()(1)continue(1)Object.prototype.toString.call()(1)min-max(1)object.freeze(1)Computed property Name(1)Object.isFrozen()(1)props.children(1)검색 알고리즘(1)OR 연산자(1)배열 고차함수(1)산책(1)async/await(1)이진 힙(1)Big O(1)context(1)삼항연산자(1)tree traversal(1)타입(1)후입선출(1)길 찾기(1)리팩토링(1)this(1)first-last(1)begin-end(1)CSS(1)CSS Module(1)styled components(1)가중 그래프(1)드모르간의 법칙(1)함께 자라기(1)퀵정렬(1)useCallback(1)import 모듈(1)useselector(1)FIFO(1)preventDefault(1)prettierrc(1)기타(1)(1)InnerHTML(1)분기다루기(1)이진 탐색 트리(1)이진 검색(1)appendChild(1)스택(1)array(1)트리구조(1)단일 연결 리스트(1)무방향 그래프(1)클래스 컴포넌트(1)graph traversal(1)캡처링 단계(1)doubly linked list(1)자막번역(1)LIFO(1)재조정(1)환경설정(1)components(1)버블링 단계(1)isNaN(1)for await of(1)lookup table(1)병합 정렬(1)DOM 이벤트(1)일치 연산자(1)다크모드(1)HTMLCollection(1)try catch(1)default case(1)Binary Search Tree(1)그래프(1)Hash Table(1)선언적 프로그래밍(1)Naive String Search(1)인접 리스트(1)(1)동시성(1)else(1)robots(1)삼항조건연산자(1)트리 순회(1)기수 정렬(1)binary heap(1)redux(1)EOL(1)eslintrc(1)Real DOM(1)stopImmediatePropagation()(1)합성(1)vscode(1)노션(1)디버그(1)최적화(1)React.memo(1)경계(1)undefined(1)eqeq(1)
post-thumbnail

[JS 알고리즘] 다익스트라(Dijkstra) 알고리즘

이번에 만드는 다익스트라 알고리즘은 ‘그래프’와 ‘우선순위 큐(이진 힙 버전)’ 개념을 이해하고 있어야 한다.다익스트라 알고리즘은 그래프의 두 개의 정점 간에 최단 경로를 찾는 알고리즘이다. “A 포인트에서 B포인트까지 가는 가장 빠른 방법은?”다익스트라 알고리즘는 가

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 그래프 순회(Graph Traversal) - DFS(깊이우선탐색), BFS(너비우선탐색)

그래프에서 순회하는 코드를 짤 때, 루트가 있는 트리와는 달리 시작점을 정해줘야 한다.그래프의 한 노드에서 다른 노드로 갈 때 유일한 하나의 길만이 있다는 보장은 없다. 이미 방문한 노드를 다시 방문해야 할 수도 있다.그래프 순회 사용 예시P2P 네트워킹웹 크롤러최단

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

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

이전에 살펴본 트리는 그래프의 일종이다. 그래프는 트리를 포괄하는 개념이다.그래프를 코딩하는 방법은 여러 가지가 있으나, 인접 리스트(Adjacency List) 를 사용하여 그래프를 만들어본다.그래프는 유한한(가변적인) 꼭지점(노드)들의 집합으로 구성된 데이터 구조다

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 해시 테이블(Hash Table)

목표해시 알고리즘에 대한 정의좋은 해시 알고리즘을 만드는 방법해시 테이블에서 충돌이 발생하는 경우 이해개별 체이닝(separte chaining)과 선형 조사법(linear probing)을 이용한 충돌 해결해시 테이블이란해시 테이블은 key-value 쌍을 저장하는

2021년 12월 21일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 이진 힙(Binary Heap)과 우선순위 큐(Priority Queue)

일단 힙(Heap)이라는 단어가 매우 생소하므로, 이에 대하여 익숙해질 필요가 있다. Heap의 사전적 의미는 무엇인가 차곡차곡 쌓여있는 더미를 의미한다. 건초 더미, 모래 더미, 산 더미처럼 말이다. 이를 통해, 자료 구조에서 힙(Heap)은 모래 더미처럼 삼각형으로

2021년 12월 20일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 트리 순회(Tree traversal) - BFS(너비우선탐색), DFS(깊이우선탐색)

트리 순회(Tree traversal) 트리의 모든 노드를 순회하는 2가지 방법(이진검색트리뿐만 아니라 트리 전반에 대한 방법) Breadth-frist Search(BFS, 너비우선탐색) Depth-first Seacrh(DFS, 깊이우선탐색) 본 포

2021년 12월 20일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 스택(Stack)과 큐(Queue)

스택은 LIFO(Last In Fisrt Out, 후입선출) 자료구조이다. 스택에서는 마지막으로 추가된 요소가 제일 먼저 제거된다.배열에서 push 메서드와 pop 메서드를 사용하여 스택 자료구조를 만들 수 있다.또는 별도의 클래스로 자신만의 스택 자료구조를 만들 수도

2021년 12월 19일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 이중 연결 리스트(Doubly linked list) [JS]

이중 연결 리스트는 앞에서 살펴본 단일 연결 리스트에서 이전의 노드를 가리키는 포인터를 하나 더하는 것 뿐이다. 그러니까 각각의 노드에 포인터 가 두 개씩 있게 된다.이중 연결 리스트는 이처럼 반대 방향 포인터도 갖게 되어 성능상 유연함을 갖게 됐지만, 더 많은 메모리

2021년 12월 19일
·
0개의 댓글
·
post-thumbnail

[JS 자료구조] 단일 연결 리스트(Singly linked list) [JS]

단일 연결 리스트는 head , tail , length 프로퍼티들을 포함한 자료구조다.단일 연결 리스트는 node 들로 구성되어 있으며, 각각의 node 는 value 와 다른 노드나 null을 향한 pointer 를 갖고 있다.마치 다음 열차와 연결되어 있는 기차와

2021년 12월 19일
·
0개의 댓글
·
post-thumbnail

[JS 알고리즘] 기수 정렬(Radix sort)

비교 정렬들의 평균적인 시간 복잡도 한계는 n log n이다. 더 빠른 정렬 알고리즘은 없을까?더 빠른 정렬 알고리즘이라고 간주되는 알고리증 중 기수 정렬이 있다.그러나 기수 정렬은 숫자에 대해서만 정렬할 수 있다. 또한, 그 대상들을 직접 비교하지는 않는다는 것이 특

2021년 12월 19일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] 객체 구조분해할당

위와 같은 코드를 아래 코드처럼 구조분해할당을 활용하여 리팩토링 할 수 있다.함수의 매개변수를 객체로 받고, 인수를 객체로 전달한다면, 전달하는 매개변수를 명시적으로 쓸 수 있으며 매개변수의 key만 같으면 되므로 매개변수의 순서가 다르더라도 상관 없다.또한 함수의 매

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] 객체의 Computed property Name과 lookup table 활용

computed property name은 객체의 key 값을 대괄호 묶인 표현식으로 정의할 수 있는 문법이다.즉 프로퍼티 이름이 계산될 수 있다는 것이다.object lookup table은 실제 있는 문법은 아니다. 다만, 아래 코드처럼 switch문이나 if el

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] 배열의 length와 유사배열객체

Array.length는 배열의 길이보다는 배열의 마지막 인덱스를 의미하는 것에 가깝다.배열의 길이를 0으로 설정하면 배열이 초기화된다.Array.length의 이러한 특성을 염두하고 주의해서 사용해야 한다.유사배열객체는 말 그대로 '배열'이 아닌 '객체'이다. 그런데

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] JavaScript의 배열은 객체다.

위와 같이 배열에 마치 객체에서 key와 value를 설정하듯이 값을 입력하면, 객체처럼 값이 입력된 것을 확인할 수 있다.심지어 배열 내의 함수도 객체의 메서드처럼 실행할 수 있다.이런 특징을 잘 이해하고 있어야 한다.그리고 배열 여부를 확인하려면 Array.isAr

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] 드모르간의 법칙으로 조건문을 간단하게

예를 들어 위와 같이 로그인 성공 확인하는 조건문이 있는데, 로그인 실패 케이스를 추가로 만든다고 하면, 기존의 상수값을 활용하여 아래와 같이 코드를 작성할 수 있다.!(isValidToken && isValidUser) 뒤에 추가 연산이 더 붙게 된다면 가독성이 떨어

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] Null 병합 연산자(??)

Nullish coalescing operator(Null 병합 연산자)널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.OR 연산자를 기본값으로 사용하

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] 부정 조건문 지양하기

부정조건문을 사용하면 생각을 여러 번 해야 할 수 있다.위와 같은 부정조건문(isNaN)이 사용된 코드는 여러 번 생각해야 해서 실수할 수 있기 때문에, 아래와 같이 명시적인 긍정조건문(isNumber - 커스텀함수) 코드를 사용하는 편이 좋다.프로그래밍 언어 자체가

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] Else if와 Else를 피하고 Early Return하자

else if문이 마치 파이프라인처럼 앞의 if문과 연결되어 차례대로 실행된다고 생각하면 안 된다.else if문은 else문 처리가 한 번 되고 if문 동작이 되는 것과 같다.위와 아래의 코드는 논리적으로 같으며, 결과도 같다.else를 쓰지 않아도 조건이 논리적으로

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] truthy-falsy와 단축평가 다루기

falsy 거짓 같은 값(8개)false0 (숫자 zero)\-0 (음수 zero)0n (BigInt)"" (빈 문자열)nullundefinedNaNtruthy 참 같은 값거짓 같은 값(8개)으로 정의된 값이 아니면 모두 참 같은 값으로 평가된다.자바스크립트는

2021년 12월 14일
·
0개의 댓글
·
post-thumbnail

[클린코드 JS] 삼항연산자 다루기

삼항연산자는 3개의 피연산자를 취한다.조건 ? 참(값 또는 식) : 거짓(값 또는 식)삼항연산자를 중첩해서 많이 쓰면 가독성이 떨어진다. 분기조건이 많다면 차라리 switch 문을 쓰는 것이 나을 수 있다.삼항연산자를 중첩해 쓴다면 우선순위를 명확히 알 수 있도록 소괄

2021년 12월 14일
·
0개의 댓글
·