오늘은 HTML로 표현된 웹 페이지를 꾸미기 위해 사용되는 CSS를 삽입하는 방법에는 어떤 것들이 있고 각 방법들의 차이점과 장단점, 우선순위에 대해서 다뤄보겠습니다. inline 방식 inline 방식은 HTML 태그의 style속성에 직접 스타일을 입력하는 방식으로 삽입 방법 중 가장 우선순위가 높은것이 특징입니다. inline 방식의 경우 HTM...

오늘 다룰 알고리즘은 투포인터와 슬라이딩 윈도우 알고리즘입니다. 투포인터와 슬라이딩 윈도우 알고리즘은 배열, 리스트와 같은 선형 자료구조뿐만 아니라 문자열에서도 응용해서 사용할 수 있으며 특정 구간을 탐색할 때 유용합니다. 일반적으로 이 두 알고리즘을 적용할 수 있는 문제에서 알고리즘을 사용하지 않고 문제를 푸는 경우 O(n^2)까지의 시간 복잡도를 가...

문제 두 수의 최소공배수(Least Common Multiple)란 입력된 두 수의 배수 중 공통이 되는 가장 작은 숫자를 의미합니다. 예를 들어 2와 7의 최소공배수는 14가 됩니다. 정의를 확장해서, n개의 수의 최소공배수는 n 개의 수들의 배수 중 공통이 되는 가장 작은 숫자가 됩니다. n개의 숫자를 담은 배열 arr이 입력되었을 때 이 수들의 최소...

문제 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 k개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라...

JWT와 OAuth는 개발을 공부하다보면 많이 접하게 되는데 두 개념 모두 인증을 위해 사용됩니다. 오늘은 이 두 요소에 대한 개념과 차이점에 대해 다뤄보겠습니다. JWT (JSON Web Token) JWT는 서버에서 생성하는 토큰으로 두 엔티티(클라이언트와 서버) 간에 정보를 공유하기 위해서 사용되는 인터넷 표준입니다. JWT를 사용하면 토큰을 ...

퀵 정렬 애니메이션 퀵 정렬은 많이 사용되는 정렬 알고리즘 중 하나로 분할 정복 알고리즘이자 불안정 정렬이라는 특징을 가지고 있습니다. 분할 정복 알고리즘의 특성상 정렬을 위해 요소들을 먼저 분할하게 되는데 퀵 정렬은 이 과정에서 기준이 되는 요소인 "피봇"을 정합니다. 오름차순 정렬이라고 가정했을 때 피봇을 제외한 나머지 요소들을 순환하며 피봇과 값...

정렬 - 병합정렬 (Merge Sort) 오늘 다룰 정렬 알고리즘은 병합정렬입니다. 병합정렬은 합병정렬이라고도 부르는데 분할정복 알고리즘으로 안정적인 정렬이라는 특징을 가지고 있습니다. > * 분할정복 알고리즘(Divide-and-conquer algorithm)이란? 분할 정복 알고리즘은 복잡한 기존 문제를 단순화하기 위해 재귀적으로 접근해 2개 이...

아이폰에서는 자체적으로 화면 녹화기능을 제공하고 있습니다. 하지만, 별도의 설정을 하지 않는 경우 포인터가 녹화되지 않기 때문에 녹화본을 보는 사람은 영상 촬영자가 어떤 모션을 하고 있는지 파악하기가 어렵습니다. 그래서, 아이폰으로 화면 녹화를 할 때 포인터를 포함해서 녹화하는 방법 2가지에 대해서 알아보겠습니다. 1. 커스텀 제스처 이용 방법 아이...

삽입 정렬 애니메이션 > 출처: Wikipedia 삽입 정렬은 두 번째 인자부터 시작하여 이전 요소들과 값을 비교한 후 적절한 위치를 찾아 삽입하는 방식으로 정렬을 진행합니다. 삽입 정렬도 이전에 다뤘던 버블, 선택 정렬과 마찬가지로 2중 반복문을 사용하지만 차이점이 있습니다. 바깥쪽 for문을 outer, 안쪽 for문을 inner라고 했을 때 버...

오늘은 React에서 사용하는 useRef훅에 대해 다뤄보려고 합니다. useRef 훅은 리액트 애플리케이션에서 DOM에 접근하거나 리렌더링을 유발하지 않는 로컬 변수를 선언할 때 주로 사용합니다. JS 환경에서는 해당 훅을 사용하면서 에러를 만나기 쉽지 않은데 TS 환경에서는 타입 관련 에러가 발생하는 모습을 종종 볼 수 있습니다. 그래서, useR...

선택 정렬 과정 > 출처: Wikipedia 선택 정렬은 첫번째 요소부터 순환하며 자신의 뒤쪽에 위치한 요소(정렬되지 않은 요소)들 중 최솟값을 찾아 선택하여 스왑하는 형태로 정렬이 진행됩니다. 선택 정렬 또한 버블 정렬과 같이 직관적이고 구현이 비교적 쉽지만 마찬가지로 성능이 좋지 않습니다. 구현 아래 로직은 오름차순으로 정렬한다는 가정하에 작성하...

버블 정렬 과정 > 출처: Wikipedia 버블 정렬은 서로 인접한 두 개의 요소를 차례로 비교해가며 정렬이 필요한 경우 두 개의 요소를 스왑(서로의 위치를 변경)하는 형태로 정렬을 해나갑니다. 이렇게 순환과정에서 두개씩 비교해 나가는 모습이 거품과 같다고 하여 버블 정렬이라는 이름을 가지게 되었습니다. 직관적이며 구현이 쉽다는 장점은 있지만 그만큼...

에러 내용 TS를 사용해 타입을 정의하던 중 사진과 같은 에러가 발생했습니다. 에러에서는 Mapped Type은 속성이나 메소드로 정의하지 말라고 알려주고 있습니다. TS에서 Mapped Type이란 이미 선언된 타입을 활용해 keyof와 같은 키워드를 사용해 새로운 타입을 선언하는것을 말합니다. 이 두개의 키워드들은 배열의 요소, 객체의 키나 값들...

로컬 서버를 띄우거나 라이브 서버를 실행할 때 3000, 8080과 같은 특정 포트를 이용하게 되는데 종종 알 수 없는 에러로 인해 사용하지 않고 있는데도 해당 포트가 이미 사용중이라는 에러메세지를 띄우는 걸 경험해보신 분이 있을텐데요. 포트 사용중 에러 그래서 오늘은 특정 포트가 현재 활성화되어 있는지 확인하는 방법과 이러한 문제를 어떻게 해결해야 하...

VSCODE 에러 깃 업그레이드 이후 기존에 진행중이던 프로젝트를 작업하기 위해 VS코드를 실행했더니 위와 같은 에러가 발생했습니다. VSCODE 에러 CLI에서는 다음과 같은 이상한 글씨들과 함께 해결 방법이 포함되어 있었으며 safe.directory 속성에 현재 디렉토리를 추가하면 된다고 나와있기에 이를 이용해 간단히 해결했었습니다. 하지만, ...

이 문제는 문제를 보고 의도를 파악하기 어려웠던 문제여서 기록을 남기고자 작성합니다. 문제 문제 n개의 칩을 가지고 있으며, i번째 칩의 위치는 position[i]입니다. 모든 칩을 같은 위치로 옮겨야하며 아래와 같이 칩을 옮길 수 있습니다. position[i] + 2 또는 position[i] - 2은 0의 코스트가 발생 position[i]...

리액트에서 제공하는 훅을 사용하다 보면 훅을 제어하거나 재사용하기 위해 두번째 인자로 의존성 배열을 받는 경우가 있습니다. 만약, 해당 훅 내부에서 사용하는 상태나 함수가 있음에도 의존성 배열에 넣지 않는다면 ESLint와 같은 린터가 아래와 같은 경고 표시를 띄우곤 합니다. ESLint 경고 리액트는 VDOM을 사용해 DOM의 변경사항을 추적하고 최...

해시 오늘의 주제인 해시 자료구조는 흔히 JS에서는 객체, Python에서는 딕셔너리로 사용되며 key:value 형식의 요소들을 저장하는 자료구조입니다. 특정 요소에 바로 접근하는것을 목적으로 만들어져 요소의 삽입, 삭제, 탐색에 O(1)이라는 아주 좋은 시간 복잡도를 가지지만 그만큼 공간 복잡도를 포기한 자료구조입니다. 해시는 배열과 몇가지 차이점...

소수란 1보다 큰 자연수 중 3, 5, 7, 11처럼 1과 자기자신으로만 나누어지는 수를 말합니다. 코딩테스트에도 종종 등장하는 주제로 소수를 판별하는 방법은 어떤것들이 있는지 알아보겠습니다. 선형 탐색 (2 ~ N-1까지 반복문) 가장 단순한 방법으로 반복문을 사용해서 2부터 N-1까지 반복하며 나머지가 0으로 나오는 경우가 있는지를 확인하는 방법입니...

오늘은 탐색을 위해 사용되는 알고리즘인 선형탐색과 이분탐색에 대해서 알아보고 이 알고리즘을 사용하는 리트코드의 문제들도 함께 풀어보겠습니다. 선형 탐색 (= 순차 탐색, Linear Search) 선형 탐색 알고리즘은 원하는 데이터를 찾기 위해 한 쪽 끝에서 다른 쪽 끝까지 모든 요소를 차례로 순환하며 탐색하는 알고리즘입니다. 순서대로 순환하기 때문에 ...