문제문자열이 주어졌을 때, 문자의 빈도를 기준으로 내림차순으로 정렬하세요. 문자의 빈도는 문자열에 나타나는 횟수입니다. 입출력입력 s = "tree"출력 "eert"설명 'e'는 두번 나타나는 반면 'r'과 't'는 모두 한 번씩 나타납니다.따라서 'e'는 'r'과 't' 앞에 모두 나와야 합니다. 따라서 'eetr'도 유효한 답입니다. 입력 s = "cccaaa"출력 'aaaccc"설명 'c'와 'a'가 모두 세번씩 등장하므로'cccaaa'와 'aaaccc'는 모두 유효한 답입니다. 입력 s = "Aabb"출력 "bbAa"설명 "bbaA"도 유효한 답이지만, "Aabb"는 틀린답입니다."A"와 'a'는 서로 다른 문자로 처리됩니다. 제약 조건1 s 대문자, 소문자, 영어문자와, 숫자로 구성 어떻게 풀까..

1. 어떤 경우에 컴포넌트가 재렌더링 되는가?React에서 컴포넌트는 다음 조건 중 하나라도 충족되면 다시 렌더링됩니다:props가 변경됨state가 변경됨부모가 렌더링되면 자식도 기본적으로 렌더링됨따라서 렌더링을 최적화하려면, 불필요한 props, state, 부모의 렌더링 영향을 최소화해야 합니다. 2. 사용자 흐름 유추 및 컴포넌트 구조 ├── // 할일 입력 ├── // 할일 목록 │ ├── // 개별 할일 │ └── -> memo + key 사용 └── (선택) 1. 할 일 목록(todoList)은 App 최상단에서 상태로 관리합니다.2. 입력 값은 TodoInput에서 useState로 관리합니다.3. 등록 시 App으로 ..

keyframe-animation키프레임 에니메이션을 잘 활용하면 전환 효과만큼 역동적이고 유연하게 만들 수 있을 뿐만 아니라, 키프레임 애니메이션만의 특별한 장점도 모두 유지할 수 있습니다. @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }} 각 키프레임 에니메이션에는 이름이 필요합니다. fadeIn으로 지정하였습니다.이는 전역 변수처럼 생각하면 됩니다. CSS 코드의 어느곳에서나 이 키프레임 애니메이션을 사용할 수 있습니다.키프레임 애니메이션은 JavaScript의 함수와 비슷합니다. 함수를 정의했지만 그 자체 fadeIn로는 아무런 역활을 하지 않습니다.CSS 속성을 사용하여 특정 요소에 키프레임..

[Claude] Figma에서 MCP로 디자인 → 코드 추출해보고 느낀 점Tailwind를 직접 사용하면서, 스타일을 하나하나 일일이 지정하는 게 꽤 번거롭다는 생각이 들었습니다.물론 반복 작업은 디테일을 쌓는 과정이기도 하지만, 어느 순간부터는 이런 단순 작업을 AI가 대신해주고, 나는 더 복잡하고 창의적인 작업에 집중하고 싶다는 열망이 생겼습니다! 그래서 결국, Claude 구독을 결제했습니다. 또 하나의 구독료...이제 슬슬 구독료 전쟁이 시작되는 느낌입니다.음악 스트리밍, 쿠팡, 서버, 도메인… 그리고 이제는 Claude까지.이 모든 걸 효율적으로 관리하려면 디지털 자산 정리도 필요할 것 같다는 생각이 들더라고요. https://help.figma.com/hc/en-us/articles/321..

Claude Code 도입 배경AI와 함께 코딩하면서 개발에 시너지를 만들어보고 싶어 Claude를 시작하게 되었습니다. 한 달간 약 3만원을 투자해서 실제로 어떤 효과가 있는지 체험해볼 예정입니다.주요 목표포트폴리오 퀄리티 향상: AI의 도움을 받아 더 완성도 높은 프로젝트 만들기개발 학습 효율성 증대: 코딩하면서 동시에 학습할 수 있는 환경 구축AI 페어 프로그래밍을 통해 단순히 코드 작성 속도를 높이는 것뿐만 아니라, 더 나은 코드 구조와 개발 패턴을 익히면서 실력 향상까지 이루어낼 수 있을지 확인해보려고 합니다. * 공식문서를 참고하였습니다.https://docs.anthropic.com/en/docs/claude-code/sub-agents Subagents - AnthropicRecommend..

문제numbers 배열이 주어질때, 각 숫자를 +혹은 -로 더해서 만들 수 있는 모든 가능한 합을 배열로 반환하세요재귀함수를 어떻게 이해하면 될까 해서 포스팅하게되는 글입니다.// numbers 배열이 주어질 때, 각 숫자를 + 혹은 - 로 더해서 만들 수 있는 모든 가능한 합을 배열로 반환하세요.function allSums(numbers: number[]): number[] { const results: number[] = []; function dfs(index: number, sum: number) { if (index === numbers.length) { results.push(sum); return; } dfs(index + 1, sum + numbers..

CSR (Client-Side Rendering)CSR은 브라우저가 HTML을 직접 만들고, 자바스크립트로 화면을 동적으로 구성하는 렌더링 방식입니다 초기 로딩 과정 (CSR 기준)브라우저가 서버에 요청하면 빈 HTML + JS 번들을 받습니다.이 JS번들을 완전히 다운로드, 파싱, 실행합니다.React컴포넌트가 실행되고, 화면이 만들어집니다.이후 페이지 렌더링 과정 (CSR에서 페이지 전환 등)이미로드된 JS가 클라이언트에서 동작하면서 화면을 다시 그려줍니다.React 가상 DOM을 사용해 변경된 부분만 찾아내어 실제 DOM에 최소한의 변경 적용변경된 DOM에 대해 CSS 스타일 재계산이 이루어집니다.변경된 DOM과 CSS 정보를 바탕으로 렌더 트리를 재구성리플로우(레이아웃 재계산)와 리페인트(화면 다..

Array.from() 메서드Array.from() 은 유사배열객체나 iterable 객체인 경우, 해당 객체의 Symbol.iterator를 호출하여 얻은 iterator를 .next()로 순회하면서, 그 값을 배열에 하나씩 담는 메서드입니다. [부연설명]iterable 한객체의 종류 : 배열, 문자열, Map, Set 이 있습니다.문자열도 Symbol.iterator 를 구현하고 있기때문에 iterable한 객체입니다.기본문법Array.from(arrayLike, mapFn, thisArg)arrayLike : 배열로 변환할 대상 (유사배열 또는 반복 가능한객체)mapFn (선택) : 각요소를 가공할 함수thisArg (선택) : mapFn 내부에서 this로 사용할 값사용해보기console.log(..

너비 우선탐색 (Breadth-First Search) 너비 우선탐색이란?각 노드를 레벨별로 차례대로 탐색합니다. 즉 시작 노드에서 출발해 인접한 노드들을 먼저 탐색하고, 그 후 두 번째 레벨의 노드들을 탐색하는 방식입니다. 사용하는 경우주로 최단 경로를 찾을때 사용합니다.왜 최단 경로에 적절한 알고리즘일까요? 큐를 사용하여 먼저 도착지점에 도달한 경로를 구해냅니다.간단한 그래프와 함께 BFS가 어떻게 최단 경로를 찾는지 설명하겠습니다. 특징 A / \B C| |D---E여기서 시작 노드는 A, 목표 노드는 EA에서 E로 가는 최단 경로를 찾기입니다.BFS 탐색 과정시작은 A에서 출발!처음에 A에서 갈 수 있는 곳은 B와 C예요.큐에 B와 C를 넣어요.큐에서 B를 먼저 확인!B에서 갈 수 ..