React에서 Higher-order Component(HOC)는 고차 함수 확장 기능을 도입해 Component들의 기능을 조합해 새로운 Component를 구현할 수 있도록 하는 디자인 패턴이다. HOC를 사용하면 반복적인 코드를 재사용하여 기능 구현을 편리하게 할 수 있고, 이를 응용해 웹서비스의 전체적인 틀을 제작할수도 있다. 1. 개요 클래스의 상속은 개발에 있어 많은 편의를 제공한다. 그러나 상속 관계가 깊어지면서 전체적인 상황을 헨들링하기가 어려워진다. 이러한 상속관계 간의 종속성을 없애고 직관적인 기능 구현을 위해 데코레이터 패턴이 도입된다. 함수형 언어에서의 대표적인 데코레이터 패턴이 바로 고차 함수다. HOC는 이러한 고차 함수를 활용한 기법이다. 어떤 Component를 제작할 때, ..

Leetcode 819 문제 보기 문제 이해하기 문장 paragraph가 주어졌을 때, banned에 적힌 단어들을 제외하고 가장 많이 나타나는 단어를 찾아라. 정답 단어는 소문자로 출력하라. 아이디어 구상 문제에서 문장에 포함가능한 문장부호들이 주어졌다. 공백 포함 !?',;. 기호가 포함가능하다고 한다. 때문에 위 기호들을 제거하고 문장을 소문자로 치환한 후, 단어별로 쪼갠 후 banned의 단어들을 제외해준다면 가장 많이 출현하는 단어를 찾을 수 있을 것이다. 그러나 여기서는 좀 더 간명한 풀이 방법을 사용해보자. 바로 정규표현식을 이용한 방법이다. 정규표현식은 문자열을 편리하게 다룰 수 있게 하는 방법이다. 특정한 조건의 문자를 검색하거나 치환하는 과정을 매우 간편하게 처리할 수 있도록 돕는다. ..

BEM은 front-end 개발 시 권장되는 일종의 naming method(작명 방법론)다. BEM을 도입해 CSS class 이름을 체계적으로 작성하면, 가독성 및 유지보수에서 이득을 얻을 수 있다. 1. 개요 분야를 막론하고 설계, 디자인에 있어 다양한 방법론과 관례가 존재한다. 각각의 방법론에는 장단점이 있으며, 이로 인해 개인 및 팀에 따라 선호도가 있다. 그러나 모든 방법론들이 추구하는 바는, 협업 및 유지보수에 있어 이점을 얻기 위해서일 것이다. BEM 또한 마찬가지다. CSS에서 BEM은 일종의 Naming Convention으로, CSS class이름을 짓는 규칙이다. BEM에 입각한 CSS class명은 그 자체만으로 해당 class의 목적과 기능을 유추할 수 있게 된다. 때문에 프로젝..

React Router는 React.js에서 routing을 위해 사용하는 standard library다. React Router를 활용하면 부드러운 브라우저의 URL 전환이 가능하다. 본 포스팅은 2022년 4월 기준 react-router-dom v6 최신 버전에 대한 글이다. 1. 개요 React.js 하면 가장 먼저 떠오르는 점은 SPA(Single Page Application)일 것이다. 즉, React를 사용한 앱은 주로 Client에서 Rendering되며, 하나의 페이지 내에서 추가 리로딩없이 데이터를 업데이트하는 방식으로 사용자에게 View를 제공한다. 비록 SEO(검색 엔진 최적화)에 불리하고, 첫 로딩 시간이 상대적으로 길다는 단점이 있지만, React로 구축한 서비스는 화면의 깜..

Leetcode 15 문제 보기 문제 이해하기 정수가 담긴 리스트 nums가 있다. (-10^5 0: right -= 1 elif three_sum List[List[int]]: res = [] if len(nums) 0 and n..

Leetcode 238 문제 보기 문제 이해하기 -30이상 30이하의 수로 이루어진 리스트 nums가 있다. 이때 각 숫자당, 본인을 제외한 나머지 숫자들의 곱을 가지는 리스트를 출력하라. 예를 들어 nums = [1,2,3,4]일 경우, [(2 * 3 * 4), (1 * 3 * 4), (1 * 2 * 4), (1 * 2 * 3)], 즉 [24,12,8,6]를 출력하면된다. 다만 나눗셈을 사용해서는 안되며 O(n) 이내의 시간복잡도를 가져야한다. 아이디어 구상 보통의 경우라면, nums의 모든 숫자를 곱한 값에서 각 원소를 나누면 답이 쉽고 빠르게 나올 것이다. 그러나 본 문제에서는 나눗셈을 사용해서는 안된다. 그렇다면 어떻게 해결해야할까? 시각화를 통해 생각을 정리해보자. (nums = [1,2,3,4..