profile
FE 개발자로 성장중 / 함께 자라기
태그 목록
전체보기 (67)자바스크립트(32)자료구조(13)클린코드(13)알고리즘(12)정렬 알고리즘(4)TIL(3)array.length(2)구조분해할당(2)너비우선탐색(2)퀵소트(2)stack(2)재귀함수(2)우선순위 큐(2)깊이우선탐색(2)queue(2)BFS(2)JavaScript(2)nodejs(2)DFS(2)React(2)트리(2)undefined(1)eqeq(1)선입선출(1)타입 검사(1)객체 변경 방지 메서드(1)object(1)배열(1)동등 연산자(1)비차단(1)크롬익스텐션(1)else if(1)순수함수(1)불변성(1)코드컨벤션(1)선택 정렬(1)참같은값(1)ReactDOM(1)싱글스레드(1)이벤트루프(1)Graph(1)radix sort(1)거짓같은값(1)애자일(1)eqeqeq(1)해시(1)해시맵(1)priority queue(1)heap(1)프로미스(1)그래프 순회(1)단축평가(1)함수형 프로그래밍(1)객체(1)제너레이터(1)이중 연결 리스트(1)시간복잡도(1)null 병합 연산자(1)instanceof(1)버블 정렬(1)해시 테이블(1)dijkstra(1)다익스트라(1)프로토타입(1)비동기반복(1)매개변수(1)공간복잡도(1)null(1)early-return(1)NaN(1)유사배열객체(1)고차 함수(1)부정조건문(1)async(1)비동기(1)책리뷰(1)linkedlist(1)&&(1)singly linked list(1)선형 검색(1)typeof(1)this바인딩(1)prefix-suffix(1)조건문(1)break(1)continue(1)Object.prototype.toString.call()(1)min-max(1)object.freeze(1)Computed property Name(1)Object.isFrozen()(1)검색 알고리즘(1)OR 연산자(1)배열 고차함수(1)async/await(1)이진 힙(1)Big O(1)삼항연산자(1)tree traversal(1)타입(1)후입선출(1)길 찾기(1)리팩토링(1)this(1)first-last(1)begin-end(1)가중 그래프(1)드모르간의 법칙(1)함께 자라기(1)퀵정렬(1)useCallback(1)import 모듈(1)FIFO(1)기타(1)(1)분기다루기(1)이진 탐색 트리(1)이진 검색(1)스택(1)array(1)트리구조(1)단일 연결 리스트(1)무방향 그래프(1)graph traversal(1)doubly linked list(1)자막번역(1)LIFO(1)components(1)isNaN(1)for await of(1)lookup table(1)병합 정렬(1)일치 연산자(1)다크모드(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)삼항조건연산자(1)트리 순회(1)기수 정렬(1)binary heap(1)Real DOM(1)합성(1)vscode(1)노션(1)git(1)디버그(1)최적화(1)React.memo(1)경계(1)
post-thumbnail

React 최적화 방법(React.memo, useCallback)

함수형 컴포넌트를 export할 때, React.memo로 wrapping하여 최적화한다.React.memo는 인자로 받은 컴포넌트에 어떤 props가 들어가는지 확인한다.그리고 모든 props 값을 확인하고 그 값을 props가 이전에 받은 값과 비교하여, props

약 9시간 전
·
0개의 댓글
post-thumbnail

React의 작동원리(React vs ReactDOM, 컴포넌트 vs Real DOM)

React는 유저 인터페이스를 만드는 자바스크립트 라이브러리다.React는 컴포넌트를 활용하여 효율적으로 유저 인터페이스를 만들고 업데이트한다.React는 컴포넌트와 state를 관리하는 라이브러리일뿐이다. React는 컴포넌트의 현 state와 전 state의 차이점

어제
·
0개의 댓글
post-thumbnail

자바스크립트를 활용한 함수형 프로그래밍

함수형 프로그래밍 기법은 리액트 뿐 아니라 리액트 생태계를 이루는 여러 라이브러리의 근간이다.함수가 1급 시민이 되면 변수에 함수를 대입할 수 있고, 함수를 다른 함수에 인자로 넘길 수 있으며, 함수에서 함수를 만들어서 반환할

4일 전
·
0개의 댓글
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 자료구조] 이진탐색트리(Binary Search Tree)

트리는 parent , child 관계를 지닌 노드들로 구성된 자료구조다.노드들로 구성됐다는 점에서 연결리스트와 비슷하다.하지만 리스트는 일렬로 쭉 이어지는 선형(linear) 구조인 반면에,트리는 여러 갈래로 뻗을 수 있는 비선형(nonlinear) 구조이다.어떻게

2021년 12월 19일
·
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] 객체 변경 방지 메서드

객체 변경 방지 메서드객체 확장 금지 : Object.preventExtensions(), 확장이 금지된 객체는 프로퍼티 추가가 금지된다.객체 밀봉 : Object.seal(), 밀봉된 객체는 읽기와 쓰기만 가능하다객체 동결 : Object.freeze(), 동결된 객

2021년 12월 14일
·
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] 배열 고차함수에서 break나 continue를 사용할 수 없다니

배열 고차함수(forEach, map, fliter 등)에서 break 와 continue의 사용이 불가하다. 해당 고차함수들에서는 이들을 문법적으로 지원하지 않기 때문이다.해당 고차함수를 쓰면서 반복을 중간에 끝내어 최적화를 하고 싶으면, 조건에 따라 예외를 던지는

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

[클린코드 JS] 불변성과 얕은 복사, 깊은 복사

아래의 코드를 살펴보면, 원본배열만 변경했는데 원본배열을 복사했던 새 배열도 함께 변경되는 사실을 확인할 수 있다.배열과 객체는 이처럼 변할 수 있다(mutable).따라서 배열과 객체에서도 불변성(immutable)을 지키는 방법을 고민한다.배열을 복사한다.새로운 배

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

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

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

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