728x90
반응형

2024/12 24

[프로그래머스] 체육복

문제 설명 문제 분석일부 학생들이 체육복을 도난당했습니다.여벌 체육복이 있는 학생이 도난당한 학생에게 체육복을 빌려줄 수 있습니다.학생들은 자신의 번호의 앞뒤 번호의 학생에게만 체육복을 빌려줄 수 있습니다.최대한 많은 학생이 체육 수업을 들을 수 있도록 해야 합니다. 첫 번째 접근: reduce() O(n * m) function solution(n, lost, reserve) { const duplication = lost.filter(el => reserve.includes(el)) lost = lost.filter(el => !duplication.includes(el)) .sort((a, b) => a - b) .map(el => [el - 1, ..

Next.js의 이미지 최적화

들어가며: 이미지 최적화가 필요한 이유웹 성능에서 이미지는 가장 큰 비중을 차지하는 요소 중 하나이다. 최적화되지 않은 이미지는 다음과 같은 문제를 일으킬 수 있다 :느린 페이지 로딩 시간불필요한 대역폭 사용레이아웃 이동 (CLS)모바일 사용자 경험 저하 Next.js의 Image 컴포넌트Next.js는 성능과 사용자 경험을 향상시키기 위해 이미지 최적화(Image Optimization) 기능을 제공한다. 이는 이미지 파일의 크기를 줄이고, 다양한 기기와 화면 해상도에 맞는 이미지를 자동으로 생성하여 로드 시간을 줄이고 웹사이트를 더 빠르게 만든다.기능자동 크기 조정: 기기의 뷰포트 크기에 따라 이미지를 적절히 조정포맷 변환: 더 효율적인 포맷(WebP 등)으로 이미지를 자동 변환레이지 로딩(Lazy ..

[프로그래머스] 햄버거 만들기

문제 설명 문제 분석햄버거 가게에서 일하는 상수는 정해진 순서(아래서부터 빵-야채-고기-빵)로 쌓인 햄버거를 포장해야 합니다.재료가 순서대로 들어올 때마다 햄버거를 만들 수 있는지 확인하고, 만들 수 있다면 포장합니다.ingredient 배열에는 1(빵), 2(야채), 3(고기)의 값이 담겨있습니다.상수가 포장할 수 있는 햄버거의 개수를 반환해야 합니다. 첫 번째 접근:  문자열 조작(O(n²) ) (시간 초과) function solution(ingredient) { const hamburger = '1231' let answer = 0 ingredient = ingredient.join('') while(ingredient.includes(hamburger)) { ..

Next.js의 폰트 최적화: CLS 개선과 사용자 경험 향상하기

들어가며: 웹 폰트 최적화가 필요한 이유웹 개발에서 폰트는 브랜딩과 사용자 경험에 중요한 역할을 한다. 하지만 최적화되지 않은 웹 폰트는 성능 저하와 사용자 경험 악화를 초래할 수 있다. 특히 웹 바이탈 측정 요소 중 하나인 Cumulative Layout Shift (CLS)와 관련된 문제는 매우 중요하다.Cumulative Layout Shift (CLS) 이해하기CLS란?- CLS는 Google의 Core Web Vitals 중 하나로, 페이지 로딩 중 발생하는 예기치 않은 레이아웃 변화를 측정하는 지표다.CLS가 중요한 이유사용자 경험갑작스러운 레이아웃 변화는 사용자의 불편을 초래잘못된 클릭이나 터치를 유발할 수 있음SEO 영향Google은 CLS를 검색 순위 요소로 고려낮은 CLS 점수는 더 낮..

[프로그래머스] 해시 - 완주하지 못한 선수

24년 12월 28일해결한 문제 갯수: 4 문제 설명  문제 분석마라톤에 참여한 선수들의 명단(participant)과 완주한 선수들의 명단(completion)이 주어집니다.단 한 명의 선수를 제외하고는 모든 선수가 완주했습니다.완주하지 못한 선수의 이름을 찾아야 합니다. 첫 번째 접근:  Array.splice() 사용 (시간 초과) function solution(participant, completion) { return completion.reduce((a, c) => { const idx = participant.indexOf(c) a.splice(idx, 1) return a }, participant)[0]}indexOf()와 splice()..

[프로그래머스] 로또의 최고 순위와 최저 순위

24년 12월 27일해결한 문제 갯수: 1 문제 설명 문제 분석로또 6/45는 1부터 45까지의 숫자 중 6개를 찍어 맞히는 대표적인 복권입니다. 알아볼 수 없는 번호(0)를 포함하여 민우가 구매한 로또 번호와 당첨 번호가 주어질 때, 당첨 가능한 최고 순위와 최저 순위를 리턴하는 문제입니다.제한사항 lottos는 길이 6인 정수 배열입니다.lottos의 모든 원소는 0 이상 45 이하인 정수입니다.0은 알아볼 수 없는 숫자를 의미합니다.win_nums는 길이 6인 정수 배열입니다. 첫 번째 접근: filter, includes O(n²)function solution(lottos, win_nums) { const correct = lottos.filter(el => win_nums.includes..

Next.js 15 패키지 매니저 선택하기: npm vs yarn vs pnpm

들어가며Next.js 15 버전에서는 pnpm을 기본 패키지 매니저로 권장하고 있다. 이러한 변화의 배경과 각 패키지 매니저의 특징을 살펴보면서, 프로젝트에 가장 적합한 선택이 무엇인지 알아보자.패키지 매니저란?패키지 매니저는 프로젝트의 의존성을 관리하는 도구이다. Node.js 생태계에서는 주로 npm, yarn, pnpm이 사용되고 있으며, 각각의 도구는 고유한 특징과 장단점을 가지고 있다.1. npm (Node Package Manager)특징Node.js의 기본 패키지 매니저가장 오래되고 널리 사용됨v5 이상부터 package-lock.json을 도입해 종속성을 고정하여 일관성 있는 설치 보장장점별도 설치 불필요 (Node.js에 포함)넓은 생태계와 커뮤니티안정적인 성능단점속도는 개선됐지만 여전히..

[프로그래머스] [1차] 다트 게임

24년 12월 26일해결한 문제 갯수: 3 문제 설명 문제 분석다트 게임은 총 3번의 기회로 구성됩니다.각 기회마다 0-10점을 얻을 수 있습니다.S, D, T는 각각 1제곱, 2제곱, 3제곱을 의미합니다.'*'는 해당 점수와 바로 전 점수를 2배로 만듭니다.'#'은 해당 점수를 마이너스로 만듭니다. 첫 번째 접근: reduce() (O(n))function solution(dartResult) { const bonus = { S: 1, D:2, T:3 } return Array.from(dartResult).reduce((answer, c) => { // 문자열을 한글자씩 처리 if(Number.isNaN(Number(c))) { if(bonus[c]) { ..

[프로그래머스] 과일 장수

24년 12월 24일해결한 문제 갯수: 5 문제 설명 문제 분석k: 최상품의 사과 점수m: 상자에 담길 수 있는 사과의 갯수score: 각 사과의 점수가 담긴 배열m개씩 담긴 사과 상자에서, (가장 낮은 사과 점수 * m)를 반환합니다.이익이 발생하지 않는 경우, 0을 return합니다. 첫 번째 접근: while (O(n))function solution(k, m, score) { score.sort((a, b) => b - a) let answer = 0 while(score.length >= m) { answer += score.slice(0, m)[m-1] * m score.splice(0, m) } return answer}sco..

[프로그래머스] 포켓몬

24년 12월 23일해결한 문제 갯수: 1 문제 설명 문제 분석 N마리의 폰켓몬 중에서 N/2마리를 선택합니다.최대한 많은 종류의 폰켓몬을 선택하는 것이 목표입니다.같은 종류의 폰켓몬은 같은 번호를 가집니다.nums의 길이는 1 이상 10,000 이하인 자연수이며, 항상 짝수입니다.폰켓몬의 종류 번호는 1 이상 200,000 이하의 자연수입니다.  접근: Set() (O(n))function solution(nums) { const set = new Set(nums) return nums.length / 2 nums.length : 총 포켓몬 수nums.length / 2 : 선택 가능한 수set.size : 포켓몬 종류 수결론: set.size가 더 큰 경우, 선택할 수 있는 포켓몬의 수가 ..

728x90
반응형