gaki gaki

[LeetCode] Max Area of Island 이 문제는 dfs 를 활용해서 풀 수 있는 문제이다. dfs 는 depth first search 의 약자로서, 그래프 탐색 알고리즘의 한 종류이다. 이름에서 알 수 있듯이 노드에서 연결된 노드가 있으면 계속 연결된 부분을 통해 이동하면서 그래프를 탐색한다. dfs 는 운이 좋을 경우 해를 빠르게 구할 수 있지만, 항상 최적의 해를 보장하지는 않는다. 또한 dfs 는 스택 자료구조를 사용하며 구현할 수 있다. (재귀의 동작이 스택과 똑같음) 해가 없는 경로에 깊게 빠질 수 있다. 따라서 예외처리를 잘 해주어야한다. class Solution: def maxAreaOfIsland(self, grid: List[List[int]]) -> int: n = ..

[LeetCode] 773. Flood Fill DFS 로 풀 수 있는 문제이다. 나의 풀이 class Solution: def floodFill(self, image: List[List[int]], sr: int, sc: int, newColor: int) -> List[List[int]]: n = len(image) m = len(image[0]) visited = [[0] * m for _ in range(n)]; dx = [1,-1,0,0] dy = [0,0,1,-1] def dfs(r,c, targetColor, newColor): for _ in range(4): newR = r + dy[_] newC = c + dx[_] if (newR = n or newC < 0 o..

[javaScript] 클래스 프로토타입, 정적 매서드 안녕하세요. gaki 입니다. 오늘은 자바스크립트에서 클래스 프로토타입 함수와 정적 매서드에 대해서 알아보겠습니다. 프로토타입은 자바스크립트에서 사용되는 독특한 기능으로 클래스 인스턴스를 만들때마다 클래스 내의 매서드를 일일이 정의하게 되면 메모리 낭비가 되기 때문에 클래스 인스턴스는 프로토타입에 접근해 함수의 매서드를 사용할 수 있습니다. 정적 매서드는 클래스 프로토타입 매서드와는 다르게, 클래스 인스턴스에서 사용 접근 할 수 없는 매서드입니다. 아래에서 더 자세히 설명하겠습니다. 1. 프로토타입 매서드 선언 방법 2. 스태틱 매서드 선언 방법 1. 프로토타입 매서드 선언 방법 자바스크립트에서 인스턴스를 생성하는 방법은 두 가지가 있습니다. 하나는..

타입스크립트 제네릭 타입 설명 및 예제 안녕하세요. gaki 입니다. 오늘은 타입스크립트의 제네릭 타입에 대해서 알아보겠습니다. 1. 제네릭의 뜻 2. 타입스크립트 제네릭타입 예제 3. 타입스크립트 제네릭타입의 응용 1. 제네릭의 뜻 제네릭(generic)이란, 일반적인 이라는 뜻을 가진 형용사입니다. 무언가가 일반적이려면, 보편적이여야하고 많은 사람들을 수용할 수 있어야합니다. 타입스크립트에서 제네릭 타입이란 많은 타입을 수용할 수 있는 타입입니다. 이게 무슨말인지 헷갈리시면 아래의 예제를 보면 이해되실겁니다. 2. 타입스크립트 제네릭타입 예제 function identity(arg: any): any { return arg } 위와 같이 어떤 인자를 받고 그 인자를 반환하는 identity 라는 함수..

안녕하세요. gaki 입니다. 오늘은 Next js 에 Eslint 와 Prettier 를 적용하는 방법에 대해서 알아보겠습니다. Eslint 와 Prettier 는 코드를 깔끔하게 유지하고 컨벤션을 통일하기에 좋은 툴입니다. ESLint 1. 패키지 설치 2. 설정 파일 세팅 3. 추가 설정하기 Prettier 1. 패키시 설치 2. 설정 파일 세팅 3. IDE 설정 (vsCode) 1. ESLint 적용하기 (1) 패키지 설치 우선 다음 명령어를 통해 패키지를 설치합니다. npm install eslint --save-dev # or yarn add eslint --dev (2) 설정 파일 세팅하기 그리고 설정파일을 세팅하면 되는데요, 이때 --init 플래그를 사용한 다음 명령어를 이용하면 쉽게 설..

화면에 보이는 페이지는 크게 2개의 컴포넌트로 구성되어 있다. 1. 튜브의 움직임을 나타내는 캔버스 컴포넌트 2. 다른 페이지로 링크 할 수 있는 이미지 엘리먼트들의 집합 첫번째 컴포넌트의 이름은 CanvasBackground 이고, 이름을 이렇게 지은 이유는 이 캔버스의 z 위치가 이미지 엘리먼트들보다 더 뒤에 있기 때문이다. 말그대로 배경을 나타내는 역할 두번째 컴포넌트의 이름은 DashBoard 이며, 이미지 엘리먼트들의 집합을 포함하고 있는 컴포넌트이다. 초기에는 DashBoard 에 CanvasBackground 가 종속되도록 만들었지만, 그렇게 하지말고 이미지 컴포넌트, 캔버스 백그라운드 컴포넌트를 합쳐서 DashBoard 한번에 포함시키는게 객체간의 의존성을 줄이는 방법이라는 생각이 들었다...

안녕하세요. gaki 입니다. 오늘은 CSS 애니메이션에 대해 이야기해보려 합니다. MDN 에 나와있는 CSS 애니메이션의 정의를 인용하면 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. 이라고 합니다. CSS 애니메이션은 자바스크립트를 활용한 애니메이션보다 다음 세가지 이점을 가집니다. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다. ..

팰린드롬 알고리즘 안녕하세요. gaki 입니다. 오늘은 팰린드롬 알고리즘에 대해서 알아보겠습니다. 팰린드롬이란, 어떤 문자열을 거꾸로 뒤집었을때 원래의 문자열과 동일한 문자열을 의미합니다. 1. 팰린드롬 알고르즘 설명 - Two Pointer [time: O(N)] 2. 팰린드롬 알고리즘 응용 - DP 활용 [time: O(N^2)] 3. 팰린드롬 알고리즘 응용2 - Manacher's 알고리즘 [time: O(N)] 1. 팰린드롬 알고리즘 설명 팰린드롬 알고리즘은 말그대로 문자열이 팰린드롬인지 아닌지 구분하는 알고리즘 입니다. 예를들어 "RADAR" 라는 문자열이 있다고 합시다. 이 문자열은 거꾸로 뒤집어도 "RADAR" 이므로, 팰린드롬입니다. 그럼 어떤 문자열이 팰린드롬인지 알 수 있는 방법은 무엇..