전체 글
-
[TIL] 자바스크립트 thisIT 지식 2021. 12. 6. 14:37
프론트엔드 개발자 면접을 보다보면 this에 관한 질문을 많이 받습니다. 혹은 객체지향 프로그래밍을 작성할 때 class 문법을 활용하다보면 this를 많이 활용하게 되는데요, 오늘은 이 this가 도대체 어떤 것인지에 대해 알아보도록 하겠습니다. 1. this가 도대체 뭐죠? 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다. ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다). MDN에 나와있는 내용을 보면 너무 추상적이..
-
Redux Thunk & SagaIT 지식 2021. 11. 23. 10:34
프론트엔드 개발을 React로 하다보면 다양한 이유로 Redux를 만나게 되고 활용하게 됩니다. 그리고 Redux를 접해서 사용하다보면 자연스레 Redux Thunk와 Redux Saga 역시 접하게 됩니다. 이 두 리덕스 미들웨어들은 프로젝트에서 비동기처리를 담당하는 역할을 하는 걸로 알려져 있습니다. 비슷하게 비동기 로직을 처리하는 이 도구들은 어떤 차이점이 있길래 서로 다른 이름으로, 다르게 쓰이고 있는 것일까요? 이번 포스팅에서는 두 가지 미들웨어의 간단한 사용법과 어떤 상황에서 어떤 미들웨어를 사용하는 것이 조금 더 나을지에 대해 소개해드리도록 하겠습니다. 1. Redux의 미들웨어 우선 이 두 툴들의 이름이 미들웨어라는 것을 짚고 넘어가야할 것 같습니다. 리덕스의 미들웨어는 리덕스가 다른 상태..
-
메타태그에 대한 이해IT 지식 2021. 8. 19. 20:42
Html의 head는 페이지나 css의 링크, 파비콘, 그리고 다른 메타데이터를 포함하는 태그입니다. 즉 페이지에 대한 메타데이터를 포함하는 역할을 하는 것입니다. 메타태그를 활용하면 다음과 같은 일을 할 수 있습니다. SEO 메타태그에 description, keywords, author, subject, 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용합니다. IE = Edge 인터넷 익스플로러 10 이하 버전은 문서를 읽을 때 쿼크모드 혹은 IE7 모드를 사용해서 웹페이지를 표시합니다. 사용자가 최근 브라우저를 사용하고 있어도 웹페이지가 적절하게 렌더링 되지 않을 수도 있는데, 이때 메타태그를 활용하여 최신 엔진으로 페이지를 렌더링 할 수 있습니다. 뷰포트 설정 메타태그를 활용..
-
그래프에 대한 이해IT 지식 2021. 8. 18. 22:24
그래프 용어 정점: 그래프를 형성하는 노드 간선: 그래프에서 노드 간의 연결을 말한다. 정점 차수: 정점(노드)에 연결된 간선의 개수를 나타낸다. 희소 그래프: 정점들 간에 가능한 연결 중 일부만 존재하는 경우 해당 그래프를 희소 그래프라고 한다. 밀집 그래프: 다양한 정점들 간에 연결이 많은 경우 해당 그래프를 밀집 그래프라고 한다. 순환 그래프: 어떤 정점에서 출발해 해당 정점으로 다시 돌아오는 경로가 존재하는 지향성 그래프를 말한다. 가중치: 간선에 대한 값으로, 문맥에 따라 다양한 것을 나타낼 수 있다. // 무지향성 그래프 function UndirectedGraph (){ this.edges = {}; } UndirectedGraph.prototype.addVertex = function (v..
-
생각이 너무 많은 서른 살에게책 리뷰 2021. 8. 16. 22:01
최근 여러 가지 사정으로 몸과 마음이 지쳐있었다. 일과 관련해서 스트레스도 많이 받았고, 여러 가지 상황에서 불안감을 많이 느끼는 나날들이 계속되었다. 엎친데 덮친 격으로 더위까지 먹어서 식욕마저 거의 없었다. 그러던 와중 유튜브에서 세바시 영상을 하나 보게 되었다. 구글 수석 디자이너분께서 강연하시는 영상이었다. 지금 그 영상이 무슨 내용이었는지는 정확히 기억이 나지 않는다(나는 무엇이든 잘 잊어버리는 편이다;;). 그러던 와중 힐링하러 간 서점에서 그분이 쓴 책을 보게 되었다. 봤던 영상이 생각나기도 하고, 생각이 많은 서른 살(즈음인)이라는 말이 내 상황과 너무 잘 맞아떨어져서 책을 구매해서 읽게 되었다. 책을 읽어 보니 이 책의 주 타깃 독자층은 '생각이 너무 많은' + '서른 살 즈음의' + '..
-
[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)은 마지막에 추가된 항목을 스택 자료구조에서 제거하지 않고 반환..