javascript
-
[TIL] 자바스크립트 thisIT 지식 2021. 12. 6. 14:37
프론트엔드 개발자 면접을 보다보면 this에 관한 질문을 많이 받습니다. 혹은 객체지향 프로그래밍을 작성할 때 class 문법을 활용하다보면 this를 많이 활용하게 되는데요, 오늘은 이 this가 도대체 어떤 것인지에 대해 알아보도록 하겠습니다. 1. this가 도대체 뭐죠? 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다). MDN에 나와있는 내용을 보면 너무 추상적이..
-
그래프에 대한 이해IT 지식 2021. 8. 18. 22:24
그래프 용어 정점: 그래프를 형성하는 노드 간선: 그래프에서 노드 간의 연결을 말한다. 정점 차수: 정점(노드)에 연결된 간선의 개수를 나타낸다. 희소 그래프: 정점들 간에 가능한 연결 중 일부만 존재하는 경우 해당 그래프를 희소 그래프라고 한다. 밀집 그래프: 다양한 정점들 간에 연결이 많은 경우 해당 그래프를 밀집 그래프라고 한다. 순환 그래프: 어떤 정점에서 출발해 해당 정점으로 다시 돌아오는 경로가 존재하는 지향성 그래프를 말한다. 가중치: 간선에 대한 값으로, 문맥에 따라 다양한 것을 나타낼 수 있다. // 무지향성 그래프 function UndirectedGraph (){ this.edges = {}; } UndirectedGraph.prototype.addVertex = function (v..
-
[TIL]캐싱IT 지식 2021. 7. 25. 18:22
오늘 포스팅은 자바스크립트로 하는 자료구조와 알고리즘 14장 캐싱을 바탕으로 작성했습니다. 1. 캐싱이란? 캐싱(caching)은 자료를 임시 메모리에 저장하는 과정으로 추후에 해당 자료가 다시 필요할 때 쉽게 해당 자료를 얻을 수 있다. 캐싱의 예로 데이터베이스 시스템이 데이터를 캐싱해 하드 드라이브를 다시 읽는 작업을 피한다. 또한 웹 브라우저가 웹 페이지를 캐싱해 콘텐츠를 다시 다운로드 하는 작업을 피한다. 간단히 이야기 해서 캐싱의 목표는 히트(필요한 항목이 캐시에 존재하는 경우)를 최대화하고 미스(필요한 항목이 캐시에 존재하지 않는 경우)를 최소화 하는 것이다. 2. 캐싱 이해하기 캐시 설계는 다음의 두 가지 요소를 고려한다. 시간적 지역성: 최근에 접근한 메모리 위치를 다시 접근할 가능성이 높..
-
React-Quill을 활용하여 게시판 만들기(with TypeScript)IT 지식 2021. 7. 21. 22:37
이번 포스팅은 위지윅(WYSIWIG) 게시판 중의 하나인 React-Quill을 활용한 게시판 만드는 방법 입니다. Quill quill은 rich text editor의 일종으로 마이크로소프트 등의 기업에서 후원하고 있는 텍스트 에디터입니다. https://quilljs.com/ 퀼 공식 페이지 주소 https://www.npmjs.com/package/react-quill npm링크 에디터 자체는 사용하기 쉬운 편이었는데, 여기에 이미지를 업로드 하는 기능을 붙이는 것이 어려워 꽤나 애를 먹었던 에디터입니다. 사용법(with TypeScript) 사용법은 정말 간단합니다. import { useRef, useState, useMemo } from "react"; //이렇게 라이브러리를 불러와서 사용하..
-
[TIL] 스택과 큐IT 지식 2021. 7. 11. 17:49
1. 스택 1) 정의 스택은 자료구조의 일종으로, 마지막에 삽입된 항목만을 제거하고 접근할 수 있다. 이러한 원리를 후입선출(LIFO)이라고 한다. 스택은 속도가 빠르다는 장점이 있다. 스택은 알고리즘이 마지막에 추가된 항목만을 접근해야 하는 후입선출 형태로 자료를 처리해야 하는 경우에만 배열에 대해 사용한다. 스택의 한계는 배열과 딜리 마지막에 추가된 항목 외에는 직접 접근할 수 없다는 것이다. 게다가 초반에 추가된 항모글 접근하기 위해서는 이후에 추가된 항목들을 자료구조로부터 제거해야 한다. 자바스크립트에는 스택 클래스를 정의한 pop과 push라는 메소드가 있다 2) 들여다보기 스택의 마지막에 추가된 항목을 들여다보는 것(peeking)은 마지막에 추가된 항목을 스택 자료구조에서 제거하지 않고 반환..
-
[TIL] 해시 테이블IT 지식 2021. 7. 11. 17:04
1. 해시 테이블의 정의 해시 테이블은 고정된 크기의 자료 구조로 처음에 크기가 정해진다. 해시 테이블을 사용하면 자료를 쉽고 빠르게 저장할 수 있고, 키-값을 기반으로 자료를 얻을 수 있다. 자바스크립트에서 자바스크립트 객체는 해시테이블과 같은 방식으로 키와 해당 키의 연관된 값을 정의하는 방식으로 동작한다. 해시 테이블에는 put(), get() 이리ㅏ는 두 가지 주요 함수가 있다. put()은 자료를 해시 테이블에 저장하는데 사용하고, get()은 해시 테이블로부터 자료를 얻는 데 사용된다. 두 함수 모두 시간 복잡도가 O(1)이다. 간단히 말하자면 해시 테이블은 인덱스가 해싱 함수에 의해 계산되는 배열과 매우 유사하다. 이때 인덱스는 메모리에서 유일한 공간을 식별하기 위한 것이다. 2. 해싱 기법..
-
[TIL] 알고리즘 풀이 - 프로그래머스 '문자열 내 p와 y의 개수문제'IT 지식 2021. 5. 1. 16:31
문제 소개 더보기 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 제한사항 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 문제 풀이 더보기 function solution(s){ var count_p = 0; //p의 개수 카운트 var count_y = 0; // y의 개수 카운트 for(var ..
-
깊은 복사와 얕은 복사에 대한 고찰(?)IT 지식 2021. 4. 25. 19:21
이번에 회사 프로젝트를 진행하던 중 리덕스에서 오류가 발생했습니다. 제가 readonly형식의 데이터에 다른 데이터를 덧씌우려고 했다는 오류 메세지였습니다. 그래서 이를 해결하기 위해 여러 자료를 찾아보던 중 제가 리덕스 상태 값에 얕은 복사를 한 데이터를 덮어 씌우려고 해서 발생한 에러임을 알게 되었습니다. 그래서 이 오류를 정리할 겸 해서 오늘은 깊은 복사와 얕은 복사에 대해서 알아보도록 하겠습니다. 0. 객체 복사 오늘의 주제를 말하기에 앞서 오늘 말하는 복사라는 행위는 객체를 복사하는 행위임을 말씀드립니다. 자바스크립트에서 배열은 특수한 형태의 객체이기 때문에, 배열의 복사 역시 오늘의 주제 범위에 포함됨을 말씀드립니다. 1. 얕은 복사란? 얕은 복사란 객체를 복사할 때 원래 값과 복사된 값이 같..