dev-hpk 님의 블로그

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 입출력 예출력 형식 2. 오답function solution(str1, str2) { const arr1 = new Map(); // str1을 두 글자씩 끊어서 만든 다중집합의 원소 const arr2 = new Map(); // str2를 두 글자씩 끊어서 만든 다중집합의 원소 let cntUnion = 0; // 합집합 카운트 let cntIntersection = 0; // 교집합 카운트 // 비교를 위해 소문자로 통일 str1 = str1.toLowerCase(); str2 = str2.toLo..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제 제한사항 입출력 예입출력 예 설명2. 오답function solution(phone_book) { phone_book.sort((a,b) => a.length - b.length); for (let i=0; i idx !== i && p.startsWith(phone_book[i])).length > 0) { return false; }; } return true;}테스트 케이스는 모두 통과했지만, 효율성 테스트에서 탈락이다...😂😂반복 횟수 줄일 수 있는 방법을 생각해 보자. ..

Next.js는 React 기반의 오픈소스 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 현대적인 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 설계되었습니다. 목차 1. Next.js 특징 2. Next.js 설치 및 프로젝트 생성 3. Next.js 실행 4. Next.js 폴더 구조추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Next.js 특징1. 서버 사이드 렌더링 (SSR)Next.js는 서버에서 HTML을 렌더링 하여 클라이언트로 보내는 SSR을 지원합니다. 이를 통해 SEO(검색 엔진 최적화)에 유리하며, 초기 로딩 속도가 향상됩니다.2. 정적 사이트 생성 (SSG)정적 사..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 입출력 예입출력 예 설명 2. 정답 풀이풀이 전략큐 활용.정답을 위한 인덱스 배열 idx 선언우선순위가 가장 높은 프로세스인 경우 큐와 인덱스 배열에서 삭제한다.우선순위가 더 높은 프로세스가 큐에 있는 경우 큐와 인덱스 배열에서 삭제 후 마지막에 추가한다.우선순위가 가장 높은 프로세스면서 index가 location인 경우 순회를 종료하고 정답 리턴function solution(priorities, location) { let answer = 0; // 실행 대기 큐의 인덱스 배열 let idx = Array.from({l..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제 제한사항 입출력 예입출력 예 설명 2. 정답 풀이풀이 전략문자열 형태의 입력 s를 배열 형태로 바꾼다.정규식을 이용해 {}를 [] 형태로 변환한다.변환된 형태가 '[[4,2,3],[3],[2,3,4,1],[2,3]]'와 같은 문자열이기 때문에 JSON.parse를 사용해 배열로 변환한다.배열을 튜플의 길이 순으로 오름차순 정렬한다.오름차순 정렬한 튜플 배열을 순회하며 중복이 아니면  answer 배열에 추가한다.function solution(s) { const answer = []; // [{}]/g : 정규식으로 문자열 전역으..

React로 컴포넌트를 만들다 보면 디자인이 바뀌어 컴포넌트를 재사용할 수 없거나, 처음 계획가 달리 컴포넌트의 구조가 복잡해지는 경우가 있습니다. 이로 인해 코드의 가독성이 떨어지거나 새로운 컴포넌트를 만들게 됩니다. 컴파운드 컴포넌트 패턴(Compound Components Pattern)를 사용하면 이와 같은 문제를 해결할 수 있습니다. 목차 1. Compound Component Pattern? 2. 주요 개념 3. 예제 및 문제점 4. Compound Component Pattern 적용 예시 5. Compound Component Pattern 사용 예시위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Compound Component Pattern?Compound Component P..

any 타입은 TypeScript에서 가장 강력하면서도 동시에 논란이 많은 타입 중 하나입니다. 편리할 수 있지만, 잘못 사용하면 코드의 안정성과 가독성을 크게 떨어뜨릴 수 있습니다. any 타입의 역할과 왜 최대한 사용을 지양해야 하는지에 대해 알아보겠습니다. 목차 1. any 타입이란? 2. any 타입의 장점 3. any 타입 사용해도 될까? 4. any 타입 대체하는 방법추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. any 타입이란?any는 TypeScript의 최상위 super(모든 것을 허용하는) 타입입니다. 변수를 any 타입으로 지정하면 그 변수는 모든 타입을 허용하고, 타입 검사를 건너뛰기 때문에 자바스크립트와 동일하게 작동하게 됩니다. 이는 TypeScript가 엄격한 ..

1. 문제 제한사항 입출력 예입출력 예 설명 2. 정답 풀이풀이 전략깊이 우선 탐색 (Depth-First Search) 사용던전을 탐험했는지 확인하기 위한 hash 배열 사용재귀 함수 호출을 통해 던전 입장 순서별로 탐험 가능한 최대 던전 수를 계산Math.max 메서드로 재귀 함수 결과 중 최대 값을 returnfunction solution(k, dungeons) { const hash = Array.from({length: dungeons.length}, () => 0); let answer = 0; // 깊이 우선탐색(Depth-First-Search) const dfs = (k, cnt) => { for(let i=0; i= dungeons[i][0])..

구성 요소를 재사용 가능하게 만드는 방법은 render prop 패턴을 사용하는 것입니다. render prop은 JSX 요소를 반환하는 함수입니다. 컴포넌트 자체는 render prop 외에는 아무것도 렌더링 하지 않습니다. 대신 컴포넌트는 자체 렌더링 로직을 구현하는 대신 render prop을 호출하기만 합니다. 1. Render Prop VS Children PropChildren Prop 사용Render Prop 사용 Redner Prop을 직접 사용해보니 더 의문이 생긴다. children과 구조나 결가에서 큰 차이가 없는 것 같은데, 왜 Render Prop을 사용해야 할까? 2. Render Prop과 Children Prop의 값(데이터) 처리Render Prop의 인자로 값(데이터)을 ..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제코니는 매일 다른 옷을 조합하여 입는것을 좋아합니다. 예를 들어 코니가 가진 옷이 아래와 같고, 오늘 코니가 동그란 안경, 긴 코트, 파란색 티셔츠를 입었다면 다음날은 청바지를 추가로 입거나 동그란 안경 대신 검정 선글라스를 착용하거나 해야합니다.종류이름얼굴동그란 안경, 검정 선글라스상의파란색 티셔츠하의청바지겉옷긴 코트코니는 각 종류별로 최대 1가지 의상만 착용할 수 있습니다. 예를 들어 위 예시의 경우 동그란 안경과 검정 선글라스를 동시에 착용할 수는 없습니다.착용한 의상의 일부가 겹치더라도, 다른 의상이 겹치지 않거나, 혹은 의상을 추가로 더 ..