dev-hpk 님의 블로그

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제 제한사항 1 ≤ n ≤ 1,000,0003 ≤ k ≤ 10 입출력 예nkresult43767433110011102 입출력 예 설명입출력 예 #1문제 예시와 같습니다.입출력 예 #2110011을 10진수로 바꾸면 110011입니다. 여기서 찾을 수 있는 조건에 맞는 소수는 11, 11 2개입니다. 이와 같이, 중복되는 소수를 발견하더라도 모두 따로 세어야 합니다. 2. 정답 풀이풀이 전략toString 메서드의 radix를 사용해 n을 k진수로 변환// 소수 판별 함수const isPrime = (num) => { // 약수의 대칭성 이용 Ma..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 dirs는 string형으로 주어지며, 'U', 'D', 'R', 'L' 이외에 문자는 주어지지 않습니다.dirs의 길이는 500 이하의 자연수입니다.입출력 예dirsanswer"ULURRDLLU"7 "LULLLLLLU" 7 입출력 예 설명입출력 예 #1문제의 예시와 같습니다.입출력 예 #2문제의 예시와 같습니다. 2. 정답 풀이풀이 전략Set 객체 사용같은 길에서 방향만 다른 경우를 고려[1,0]에서 'L'이 입력으로 들어온 경우 [0,0] : '1000' hash에 추가[0,0]에서 'R'이 입력으로 들어온 경우 [1,0] : '0010..

웹 개발에서 스타일링은 UI의 품질과 사용자 경험을 좌우하는 중요한 부분입니다. 이를 구현하는 방법에는 CSS-in-CSS, CSS Module, CSS-in-JS가 대표적입니다. 각각의 방식은 접근 방식과 사용 사례가 다르며, 프로젝트의 요구사항에 따라 선택지가 달라질 수 있습니다 목차 1. CSS-in-CSS 2. CSS Module 3. CSS-in-JS 4. CSS-in-CSS, CSS Module, CSS-in-JS 비교위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. CSS-in-CSS CSS-in-CSS는 가장 전통적인 스타일링 방식으로, 별도의 CSS 파일에 스타일을 작성하고 HTML 요소에 클래스를 할당하는 방식입니다.특징파일 분리: CSS는 독립적인 파일에 작성되어 HTML, J..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제 입력 형식입출력 예ntmpresult2421"0111"161621 "02468ACE11111111" 161622 "13579BDF01234567"  2. 정답 풀이풀이 전략toString 메서드의 radix를 사용function solution(n, t, m, p) { let str = ''; // n진 숫자 // t * m : 총 인원의 수 만큼 n진 숫자 str에 추가 for (let i=0; i { if (idx % m === p-1) return acc + cur; else return acc; ..

React 애플리케이션에서 폼 관리는 매우 빈번한 작업입니다. React State를 이용해 폼 상태를 관리하고, 유효성을 검증하며, 성능을 최적화하는 것은 번거로울 수 있습니다. React Hook Form은 이러한 작업을 간소화하고 성능을 최적화해 주는 가볍고 직관적인 폼 관리 라이브러리입니다.목차 1. React Hook Form이란? 2. React Hook Form 설치 및 기본 사용법 3. 주요 Hook과 함수 4. React Form vs React Hook Form추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. React Hook Form이란?React Hook Form은 React의 Hooks API를 기반으로 설계된 폼 관리 라이브러리입니다. HTML의 기본 폼 요소를 활..

Next.js는 정적 사이트 생성(Static Site Generation, SSG)과 서버 측 렌더링(Server-Side Rendering, SSR)을 지원하는 React 기반 프레임워크입니다. 이 글에서는 정적 생성의 개념, 장점, 사용 방법, 그리고 실무에서의 활용 사례를 중심으로 자세히 설명하겠습니다. 목차 1. 정적 생성(SSG)이란? 2. 정적 생성(SSG)의  장점 3. 정적 생성(SSG) 사용 방법 4. getStaticPaths의 fallback 옵션추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 정적 생성이란?정적 생성(SSG)은 Next.js가 빌드 시점에 페이지의 HTML 파일을 미리 생성해 저장하는 렌더링 방식이기 때문입니다. 이렇게 생성된 HTML은 CDN으로 캐..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제입력 형식 입력으로 영문 대문자로만 이뤄진 문자열 msg가 주어진다. msg의 길이는 1 글자 이상, 1000 글자 이하이다. 입출력 예msganswerKAKAO [11, 1, 27, 15] TOBEORNOTTOBEORTOBEORNOT [20, 15, 2, 5, 15, 18, 14, 15, 20, 27, 29, 31, 36, 30, 32, 34] ABABABABABABABAB [1, 2, 27, 29, 28, 31, 30]  2. 오답function solution(msg) { const answer = [] const dict =..

Next.js는 사용자 경험과 개발자 생산성을 극대화하기 위해 설계된 React 프레임워크입니다. 그중에서도 Image 컴포넌트는 최적화된 이미지 관리를 위한 강력한 도구로, 성능 개선과 효율적인 이미지 처리를 제공합니다. 목차 1. Image 컴포넌트란? 2. Image 컴포넌트 사용법 3. Image 컴포넌트 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Image 컴포넌트란?next/image에서 제공하는 Image 컴포넌트는 브라우저와 디바이스에 따라 이미지를 최적화하고, 개발자가 별도의 설정 없이 성능을 향상할 수 있도록 설계된 컴포넌트입니다.  전통적인 HTML의 태그를 사용하는 것과 달리, Image 컴포넌트는 서버 사이드에서 자동으로 이미지 크기를 조정하고, 최적의 포..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제사전에 알파벳 모음 'A', 'E', 'I', 'O', 'U'만을 사용하여 만들 수 있는, 길이 5 이하의 모든 단어가 수록되어 있습니다. 사전에서 첫 번째 단어는 "A"이고, 그다음은 "AA"이며, 마지막 단어는 "UUUUU"입니다. 단어 하나 word가 매개변수로 주어질 때, 이 단어가 사전에서 몇 번째 단어인지 return 하도록 solution 함수를 완성해주세요. 제한사항 word의 길이는 1 이상 5 이하입니다.word는 알파벳 대문자 'A', 'E', 'I', 'O', 'U'로만 이루어져 있습니다.입출력 예wordresult"AAAAE"..

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr1. 문제제한사항 1 ≤ topping의 길이 ≤ 1,000,000 1 ≤ topping의 원소 ≤ 10,000입출력 예toppingresult [1, 2, 1, 3, 1, 4, 1, 2] 2 [1, 2, 3, 1, 4] 0 입출력 예 설명입출력 예 #1 롤케이크를 [1, 2, 1, 3], [1, 4, 1, 2] 또는 [1, 2, 1, 3, 1], [4, 1, 2]와 같이 자르면 철수와 동생은 각각 세 가지 토핑을 맛볼 수 있습니다. 이 경우 공평하게 롤케이크를 나누는 방법은 위의 두 가지만 존재합니다.입출력 예 #2 롤케이크를 공평하게 나눌 수 없습니다. ..