🌗 Styled Components로 라이트/다크 모드 전환하기 실제 프로젝트에서는 사용자에게 다크 모드와 라이트 모드를 제공하는 것이 중요한 UX 요소 중 하나이다.styled-components와 ThemeProvider를 활용하면 전역 테마 전환을 매우 간단하게 구현할 수 있다.✅ 1. 테마 객체 정의하기// themes.jsexport const lightTheme = { textColor: "#111", backgroundColor: "whitesmoke",};export const darkTheme = { textColor: "whitesmoke", backgroundColor: "#111",};✅ 2. App에서 테마 상태 관리여러개의 property를 가진 객체를 두개 (다크/라이트) 설정함으로써 간편하게 theme을 바꿀 수 있다.  // Ap..
Styled Components - 애니메이션, 컴포넌트 선택자, 중첩 스타일링 이번에 더듬어볼 기억은 ..  keyframes 도 const 로 따로 빼서 관리하는 거 + styled component 조건문처럼 쓰기 !! ✅ 회전 애니메이션 만들기먼저 keyframes를 사용해 회전하는 애니메이션을 정의한다.import styled, { keyframes } from "styled-components"; const rotationAnimation = keyframes` 0% { transform: rotate(0deg); border-radius: 0px; } 50% { border-radius: 100px; } 100% { transform: rotate(360deg); border-radiu..
Styled Component에서 컴포넌트 확장하기 옛날에 리액트 처음 익힐때 다 공부했던 것 같은데, 프로젝트들을 하다보니 비슷한 컴포넌트를 생성하는 경우가 많은데 무시하고 계속 하다가 .. '아 옛날에 이거 공부했었는데 .. ' 싶어서 정리하게됐다.  일단 그 전에 styled component 를 쓰는 이유는 기존에 div를 만들고 className 이나 style을 부여하는 식이었지만,대신 styled를 임포트 해서 우리가 사용할 html 에서 사용하고 싶은 태그를 지정하고, 백틱 안에 css코드를 적어준다. -> 컴포넌트 이렇게 하게 되면 스타일링 된 컴포넌트를 사용함으로써, 컴포넌트 함수 안에 스타일을 적을 필요가 없고, 가독성이 좋아진다.  나는 큼직한 or 많이 사용할만한 컴포넌트들은 스타일 컴포넌트로 지정하고, 그 안의 자잘한 텍스트나 버..
자바스크립트에서의 BFS와 DFS 1. BFS (Breadth-First Search)BFS는 시작 노드에서부터 가까운 노드부터 차례로 방문하는 알고리즘입니다.보통 큐(Queue, FIFO: First-In, First-Out)를 사용합니다.최단 경로, 레벨 순회 등에 유용합니다.function bfsWithVisited(start, getNeighbors) { const queue = [start]; const visited = new Set(); visited.add(start); console.log("초기 visited:", Array.from(visited)); while (queue.length > 0) { const current = queue.shift(); // 큐에서 가장 앞의 원..
17. 동적 프로그래밍 (Dynamic Programming) Codility Lesson 한국어 정리본 (JavaScript ver.) 동적 프로그래밍(Dynamic Programming)이란?동적 프로그래밍(DP)은 작은 문제들의 해를 활용하여 더 큰 문제의 해를 구하는 알고리즘 기법 이다. 일반적으로 문제를 여러 작은 부분 문제로 나누고, 중복 계산을 줄이기 위해 결과를 저장(memoization) 하는 방식으로 사용된다.동적 프로그래밍이 효과적인 경우:최적 부분 구조(Optimal Substructure): 큰 문제의 최적해가 작은 부분 문제의 최적해로 구성될 수 있음중복 부분 문제(Overlapping Subproblems): 동일한 작은 문제를 여러 번 해결해야 하는 경우대표적인 DP 문제:최단 경로 문제 (Floyd-Warshall, Bellman-Ford)배낭 문제 (Knapsack Problem)동전 거스름돈 문제 (Coi..
16. 탐욕적 알고리즘 (Greedy Algorithms) Codility Lesson 한국어 정리본 (JavaScript ver.) 탐욕적 알고리즘(Greedy Algorithm)이란?탐욕적 알고리즘은 각 단계에서 가장 최선의 선택을 하는 방식으로 최적해를 찾는 방법 이다. 전체 최적해를 고려하지 않고, 매 순간 최적의 선택을 하기 때문에 구현이 간단하지만, 항상 최적해를 보장하는 것은 아니다.탐욕적 알고리즘이 적용될 수 있는 대표적인 문제들:동전 거스름돈 문제 (Coin Change Problem)회의실 배정 문제 (Activity Selection Problem)배낭 문제 (Knapsack Problem)작업 스케줄링 문제 (Activity Selection)최소 신장 트리 (MST, Minimum Spanning Tree)허프만 코딩 (Huffman Coding)탐욕 알고리즘의 특징빠른 실행 시간: O(n log n) 또는 O(..
15. 캐터필러 방법 (Caterpillar Method) Codility Lesson 한국어 정리본 (JavaScript ver.) 1. 캐터필러 방법이란?캐터필러 방법은 연속된 부분 배열(슬라이스)에서 특정 조건을 만족하는 경우를 찾는 효율적인 방법 이다. 보통 O(n) 시간 복잡도로 최적화할 수 있다.2. O(n) 시간 복잡도의 캐터필러 방법JavaScript 코드:function caterpillarMethod(A, s) { let n = A.length, front = 0, sum = 0; for (let back = 0; back 이 방법을 사용하면 O(n) 시간 복잡도로 특정 조건을 만족하는 부분 배열을 찾을 수 있다.3. 캐터필러 방법의 활용이 알고리즘은 다음과 같은 문제에 적용할 수 있다:연속 부분 배열의 합 찾기 (예: 연속된 숫자의 합이 특정 값 s가 되는 경우 찾기)연속된 원소들의 곱 찾기 (예: 최대 ..
14. 이진 탐색 (Binary Search) Codility Lesson 한국어 정리본 (JavaScript ver.) 1. 이진 탐색(Binary Search)이란?이진 탐색은 정렬된 배열에서 특정 값을 찾는 효율적인 알고리즘 으로, O(log n) 시간 복잡도를 가진다. 이 알고리즘은 반복적으로 검색 범위를 절반으로 줄이면서 원하는 값을 찾는다.예를 들어, 1부터 16까지의 숫자 중에서 목표 숫자를 찾는다고 가정해 보자. 단순 선형 탐색(linear search)으로는 최악의 경우 16번의 비교가 필요하지만, 이진 탐색을 사용하면 최대 4번의 비교만으로 찾을 수 있다.2. O(log n) 시간 복잡도의 이진 탐색 구현JavaScript 코드:function binarySearch(A, x) { let left = 0, right = A.length - 1; while (left 시간 복잡도: O(log n)..
13. 피보나치 수열 (Fibonacci Numbers) Codility Lesson 한국어 정리본 (JavaScript ver.) 피보나치 수열(Fibonacci Numbers)이란?피보나치 수열은 다음과 같이 정의된다.F(0) = 0F(1) = 1F(n) = F(n-1) + F(n-2) (n ≥ 2)예제:0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89 ...1. O(2ⁿ) 시간 복잡도의 재귀 방식 (비효율적)JavaScript 코드:function fibonacci(n) { if (n 이 방식은 너무 느려서 n이 커질수록 사용할 수 없다.2. O(n) 시간 복잡도의 동적 프로그래밍 방식JavaScript 코드:function fibonacciDP(n) { let fib = new Array(n + 1).fill(0); fib[1] = 1; for (let i = 2; i 이 방식..

티스토리툴바