1. flex-basis.wallet-benificial-name,.wallet-law-name { display: flex; flex-direction: row; justify-content: space-between; align-items: center;}.wallet-law-kname,.wallet-benificial-kname,.wallet-law-ename,.wallet-benificial_ename { flex-basis: 50%;}div 내 각 영역이 정해진 공간을 차지하게 하기 위해 `flex-basis`를 사용했다.위와 같이 50%씩 영역을 할당해 주었다.`flex-basis`는 익숙하지 않고 자주 사용하지 않았는데 앞으로는 영역 지정을 위해 자주 사용해야겠다.  flex-bas..

👨‍💻 [프로그래머스] 다트 게임function solution(dartResult) { let curr = ''; let arr = [] for(let i of dartResult){ if(i === 'S'){ arr.push(Number(curr)) curr = ''; } else if(i === 'D'){ arr.push(Number(curr ** 2)); curr = ''; } else if(i === 'T'){ arr.push(Number(curr ** 3)); curr = ''; } else if..

👨‍💻 [프로그래머스] 크레인 인형뽑기 게임function solution(board, moves) { var answer = 0; let stack = []; for(let i = 0; i 스택 자료구조 익히기 딱 좋은 문제!  (중요) 디버거 사용법 익히기 웹사이트 에러 수정하는데, 디버거 사용하니까 문제 바로 해결됨;콘솔만으로는 방대한 양의 변수가 어떤 식으로 변경되는지 일일이 트래킹하기가 어려움.debugger를 어떻게 쓰는지 배우고 빨리 익숙해지자.

falsy 값을 처리하는 방법`TypeError: Cannot read properties of null (reading 'name')` 오류 발생이 오류는 null인 값에서 `name` 속성을 읽으려고 해서 발생한다.예를 들어, 아래 코드에서 menu가 null이면 에러가 발생함console.log(menu.name); // menu가 null이면 오류 발생  해결 방법 4가지✅ 1. `?.`(옵셔널 체이닝) 사용 (가장 추천!)console.log(menu?.name); // menu가 null이면 undefined 반환 (오류 없음)✔ `?.`(옵셔널 체이닝)을 사용하면 menu가 null이어도 오류 없이 undefined를 반환✔ Vue 템플릿에서도 사용 가능{{ menu?.name }}  ✅ 2..

1. `:active``:active` CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타낸다. 예를 들어 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점 까지를 의미한다./* 활성화된 모든 태그를 선택 */a:active { color: red;}주로 아래와 같은 요소에서 사용된다.: 링크: 버튼: 폼 요소와 연결된 라벨, : 입력 필드즉, 사용자가 클릭하거나 포커스를 줄 수 있는 요소들에 자주 사용된다. 🚧 주의할 점`:active`는 다른 링크 관련 의사 클래스에 덮어씌워질 수 있다.링크에 스타일을 적용할 때는 `:link`, `:visited`, `:hover`, `:active` 순서를 지켜야 한다.(LVHA 순서)a:link { color: ..

프로그래머스 해시function solution(nums) { var answer = {}; nums.forEach((num, i) => { answer[num] ? answer[num]++ : answer[num] = 1; }); return Math.min(nums.length/2, Object.keys(answer).length);}답지 안 보고 풀기는 했는데 성능면에서 문제가 좀 있는 것 같다. 테스트케이스 아래쪽에 3-4s 걸리는 것도 있음...nums가 최대 1만개까지 될 수 있기 때문에 시간복잡도는 O(N), 그리고 나머지는 O(1) 정도밖에 안 들것 같은데...모범답안을 찾아보니 set이 있었다... 중복처리😂추가로 찾아보니 `Object.keys..

1. oninput 이용해 메뉴 검색창 기능 만들기✅ onInput 과 onChange의 차이- `oninput`: input 태그 내부의 값이 변경 될 때마다 이벤트 발생- `onchange`: input 태그의 포커스를 벗어났을때(입력 종료 시) 이벤트 발생 어드민 페이지의 사이드 바 내부 메뉴(페이지) 수가 많아짐에 따라, 특정 메뉴를 찾는 데 시간이 오래 걸렸다.개발 및 테스트를 하면서도 불편함을 많이 느꼈는데 유저(운영자)의 불편함은 말할 수도 없겠지🤨 그래서 이번 기회에 메뉴 검색 기능을 추가해 보았다.유저가 input에 입력한 값이 변경될 때마다, 즉각적으로 검색어와 일치하는 메뉴는 보이고 그 외의 메뉴는 보이지 않도록 구현하고 싶었다. 따라서 위의 두 개 이벤트 중 `oninput`을 이..

isNaN, Number.isNaN✅ `isNaN(value)`매개변수를 Number(value)로 변환 후 NaN인지 검사함.숫자로 변환할 수 없는 문자열을 넣으면 Number(value)가 NaN이 되므로 true를 반환.예제isNaN('hello'); // true (Number('hello') → NaN) isNaN(undefined); // true (Number(undefined) → NaN) isNaN('123'); // false (Number('123') → 123) isNaN({}); // true (Number({}) → NaN) isNaN(' '); // false (Number(' ') → 0)타입스크립트에서의 문제점isNaN(value: number): boolean으로 타입이 ..

2025-03-261. JavaScript로 BFS(너비 우선 탐색) 구현 및 설명🔍 BFS란?BFS (Breadth-First Search, 너비 우선 탐색): 그래프나 트리에서 가까운 노드부터 탐색하는 알고리즘큐(Queue) 자료구조를 이용해서 방문할 노드를 저장하면서 진행모든 인접 노드를 먼저 방문한 후, 다음 레벨(깊이)로 이동최단 경로 문제에 자주 사용됨 (예: 미로 탐색, 최단 거리, 친구 추천 시스템) 🌟 BFS 구현 (JavaScript)function bfs(graph, start) { let queue = [start]; // BFS 탐색을 위한 큐 (FIFO) let visited = new Set(); // 방문한 노드 저장 (중복 방지) visited.add(..