Yepchani's place

문제 https://school.programmers.co.kr/learn/courses/30/lessons/17686 예시 코드 function solution(filenames) { const parsedFilenames = filenames.map(parseFilename); parsedFilenames.sort((a, b) => { if (a.head b.head) return 1; return a.number - b.number; }); return parsedFilenames.map((file) => file.name); } function parseFilename(filename) { const regex = /^([^\d]+)(\..

문제 14426번: 접두사 찾기 문자열 S의 접두사란 S의 가장 앞에서부터 부분 문자열을 의미한다. 예를 들어, S = "codeplus"의 접두사는 "code", "co", "codepl", "codeplus"가 있고, "plus", "s", "cude", "crud"는 접두사가 아니다. 총 N개의 문자 www.acmicpc.net 예시 코드 class TrieNode { constructor() { this.children = {}; this.isTerminal = false; } } class Trie { constructor() { this.root = new TrieNode(); } insert(key) { let node = this.root; for (let i = 0; i < key.len..

들어가며 웹/앱 관련 분야에 계시다면 react에 대해서 많이들 들어보셨을 텐데요. react는 'UI를 위한 자바스크립트 라이브러리'입니다. SPA(Single Page Application)를 구축하는 데 사용이 됩니다. 이번 시간에는 react에 대해서 알아보려고 합니다. 주요 개념부터 알아보자 react를 이해하기 위해서 아래 개념들을 알아둘 필요가 있습니다. 컴포넌트(Component) react의 핵심은 바로 '컴포넌트'라는 개념입니다. 컴포넌트는 UI에서 독립적이고, 재사용 가능한 부분을 나타냅니다. 각 컴포넌트는 자신의 상태와 로직을 관리합니다. 컴포넌트가 클래스로 구성되면 클래스 컴포넌트, 함수로 구성되면 함수 컴포넌트라고 부릅니다. 상태(State)와 속성(Props) state는 컴포..

문제 5582번: 공통 부분 문자열 두 문자열이 주어졌을 때, 두 문자열에 모두 포함된 가장 긴 공통 부분 문자열을 찾는 프로그램을 작성하시오. 어떤 문자열 s의 부분 문자열 t란, s에 t가 연속으로 나타나는 것을 말한다. 예를 들 www.acmicpc.net 예시 코드 function solution() { const str1 = input(); const str2 = input(); const len1 = str1.length; const len2 = str2.length; const dp = Array.from(Array(len1 + 1), () => Array(len2 + 1).fill(0)); let maxLen = 0; for (let i = 1; i

들어가며 이번에 사이드 프로젝트를 진행하며 겪은 문제에 대해 얘기해 보고자 합니다. 검색어 자동 완성 기능을 구현하는 게 목표였는데요. 검색어를 입력하면 해당 글자를 포함한 상품이 있는 경우 리스트로 표시해 줍니다. 리스트 아이템을 클릭하면 해당 검색 결과로 이동합니다. 검색창 외부를 클릭하면 onBlur 이벤트가 발생해 리스트가 사라지도록 했는데요. (onBlur 이벤트는 요소가 포커스를 잃었을 때 발생합니다.) 문제 문제는 리스트 아이템을 클릭할 때도 onBlur 이벤트가 발생해 리스트가 사라지고 검색 결과로 이동하지 않았습니다. 왜 이런 일이 발생한 걸까요? 마우스 클릭 이벤트에 대해 살펴보겠습니다. 마우스 클릭 이벤트는 크게 세 단계로 발생합니다. onMouseDown -> onMouseUp ->..

문제 1700번: 멀티탭 스케줄링 기숙사에서 살고 있는 준규는 한 개의 멀티탭을 이용하고 있다. 준규는 키보드, 헤어드라이기, 핸드폰 충전기, 디지털 카메라 충전기 등 여러 개의 전기용품을 사용하면서 어쩔 수 없이 각종 전 www.acmicpc.net 예시 코드 function solution() { const [N, K] = input().split(" ").map(Number); const order = input().split(" ").map(Number); const plugs = new Map(); let cnt = 0; for (let i = 0; i < K; i++) { if (plugs.has(order[i])) continue; if (plugs.size < N) { plugs.set(o..

문제 12904번: A와 B 수빈이는 A와 B로만 이루어진 영어 단어가 존재한다는 사실에 놀랐다. 대표적인 예로 AB (Abdominal의 약자), BAA (양의 울음 소리), AA (용암의 종류), ABBA (스웨덴 팝 그룹)이 있다. 이런 사실에 놀란 수 www.acmicpc.net 예시 코드 function solution() { const S = input(); let T = input().split(""); while (S.length !== T.length) { if (T.at(-1) === "A") T = T.slice(0, -1); else if (T.at(-1) === "B") T = T.slice(0, -1).reverse(); else break; } return S === T.joi..

문제 2225번: 합분해 첫째 줄에 답을 1,000,000,000으로 나눈 나머지를 출력한다. www.acmicpc.net 예시 코드 function solution() { const MOD = 1000000000; const [N, K] = input().split(" ").map(Number); const dp = Array.from(Array(N + 1), () => Array(K + 1).fill(0)); dp[0][0] = 1; for (let i = 1; i

들어가며큐(Queue)는 중요한 자료구조 중 하나로, FIFO(First-In-First-Out) 특성을 가지는데요. 첫 번째로 들어간 요소가 가장 먼저 나옵니다. 이번 포스트에서는 자바스크립트를 사용하여 큐를 구현하는 세 가지 방법에 대해 알아보겠습니다. 1. 배열을 이용한 구현자바스크립트에서 가장 간단하게 큐를 구현하는 방법은 배열(Array)을 사용하는 것입니다.push 메서드로 새 요소를 추가하고, shift 메서드로 첫 번째 요소를 제거합니다. enqueue는 O(1)에 수행됩니다.dequeue는 O(n)에 수행됩니다. 배열에서 첫 번째 요소를 제거하면 모든 요소가 한 칸씩 앞으로 이동해야 하기 때문입니다. 아래는 구현 코드입니다.class Queue { constructor() { th..

들어가며 JavaScript를 사용하다 보면 객체나 배열과 같은 참조형 데이터를 다루게 되는데요. 참조형 데이터를 복사할 필요가 있을 때, 얕은 복사와 깊은 복사라는 개념이 중요하게 작용합니다. 이번 포스트에서는 JavaScript에서 얕은 복사와 깊은 복사에 대해 알아보겠습니다. 얕은 복사 (Shallow Copy) 얕은 복사는 이름처럼 복사하는 깊이가 얕은데요. 객체를 한 단계까지만 복사할 수 있습니다. 객체를 복사할 때 원시 값의 경우 값을 그대로 복사하지만, 객체의 경우 참조 값, 즉 객체가 저장되어 있는 메모리 주소를 복사하는데요. 그렇기 때문에 얕은 복사를 통해 만들어진 객체를 수정하면 원본 객체에 영향을 미칠 수 있으므로 주의해야 합니다. 몇 가지 예시를 들어볼게요. 1. 배열의 slice ..