문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 현재 폭격 미사일이 이전 폭격 미사일의 범위 안에 있을 때, 이전 폭격 미사일의 범위와 겹칠 때, 이전 폭격 미사일의 범위와 아에 겹치지 않을 때 3가지 케이스를 고려하여 기준 범위를 계속 변경하면 된다. 제일 처음 비교할 기준 범위가 필요하기에 초기 기준 범위는 [-1, 100000001]로 설정한다. 이때 주의할 점은 반드시 targets 값을 시작점 기준으로 오름차순 정렬해준다. 범위 안에 있을 때 : 기준 범위를 현재 폭격 미사일의 범위로 변경한다. 범위가 겹칠 때 : 기준 범위의 시작점을 ..
문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 생성한 노드, 도넛 모양 그래프 개수, 막대 모양 그래프 개수, 8자 모양 그래프 개수를 구하기 위해 이들을 각각 구분할 수 있는 수단이 필요했다. 그 수단은 바로 각 노드에서 들어오는 간선(in)의 개수와 나가는 간선(out)의 개수였다. 생성한 노드: in === 0 out >=2, out이 2개 이상인 이유는 모든 그래프 개수의 합은 2이상이고 생성한 노드는 모든 그래프와 연결되어 있다. 막대 모양 그래프: out === 0, out이 0인 노드는 막대 모양 그래프의 최상단 노드 밖에 없다. ..
원격 서버를 통해 제품 이미지를 가져왔습니다. 이 때 이미지의 크기가 일정하지 않아서 명시적으로 이미지 크기를 지정할 수 없었습니다. 이번 아티클은 해당 문제를 해결하는 과정을 정리해보았습니다. Next.js의 Image 컴포넌트는 자동 이미지 최적화를 위한 기능으로 HTML 요소를 확장합니다.import Image from 'next/image'WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 디바이스에 적합한 크기의 이미지를 자동으로 제공합니다.이미지가 로드될 때 레이아웃 쉬프트를 방지합니다.브라우저 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드됩니다.원격 서버에 저장된 이미지도 온디맨드 이미지 크기 조정이 가능합니다.온디맨드 이미지요청 시에 이미지를 동적으로 생성하거나 조정하..
1. React Hook Form폼 관리와 데이터 수집을 용이하게 해주는 라이브러리복잡한 상태 관리 없이 폼 상태(필드값, 에러, 제출 상태 등)를 쉽게 추적하고 제어할 수 있다.기본적으로 비제어 컴포넌트 방식으로 불필요한 리렌더링을 최소화하고, 필요한 경우에만 업데이트를 수행하여 애플리케이션 성능을 유지한다.설치npm install react-hook-form2. ZodTypeScript-first 스키마 선언 및 유효성 검사 라이브러리TypeScript와 함께 사용할 수 있도록 설계되어 데이터 구조의 정적 타입스크립트 타입을 자동으로 추론할 수 있다.타입과 유효성 규칙을 하나의 객체로 통합하여 유지보수성을 높이고 코드의 가독성을 향상시킨다.npm install zodornpm install zod@c..
1. JSON Server 가짜 REST API를 생성하는 데 사용되는 도구로 이를 통해 간단한 JSON 파일을 사용하여 가상의 백엔드 서버를 구현할 수 있다. 설치 최신 버전에서 지원하지 않는 기능이 있어 아래의 버전으로 설치했다. npm install json-server@^0.17.3 2. LowDB Node.js 기반의 간단한 JSON 데이터베이스로, JSON 파일에 데이터를 저장하고 쿼리를 수행할 수 있다. 즉, 파일 기반의 데이터베이스를 생성하고 관리하는 도구이다. 설치 버전 1를 제외하고 모두 ESM 모듈 시스템을 사용하고 있어 CommonJS 모듈 시스템에서 사용할 수 있는 버전 1을 설치했다. (추후 sqlite로 마이그레이션 할 예정이다.) npm install lowdb@1 3. 가상..
1. Tailwind CSS클래스 기반으로 스타일을 지정하는 CSS 프레임워크장점클래스 기반으로 스타일을 지정해서 HTML 코드를 작성할 때 더 빠르게 스타일 적용 가능사전 정의된 유틸리티 클래스로 새로운 스타일을 만들지 않고 빠르게 작업 가능구성 가능한 많은 옵션을 제공하여 프로젝트의 디자인 시스템에 맞게 쉽게 조정 가능단점클래스 기반의 스타일 지정 방식은 기존의 CSS 작성 방식과 다르기 때문에 익숙해지는데 시간이 걸림HTML 파일에 많은 클래스 추가로 파일 크기가 커질 수 있다.서버 사이드 렌더링 서버 사이드 렌더링을 하더라도 Tailwind 클래스를 적용하여 일관된 스타일을 유지할 수 있다.빌드 단계에서 CSS로 컴파일되므로 서버 사이드 렌더링 시에도 문제 없이 사용할 수 있다.2. styled-..
1. Next.jsNext.js는 Node 버전 18.17 이상을 요구한다.자동 설치 시 설치 방법이 굉장히 간단하다.npx create-next-app@latest // 설치npm run dev // 개발 서버 실행2. ESLint일관성 있는 방식으로 구현할 수 있도록 해준다.코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구에디터에 적용해서 사용하는 것으로 eslint Extension과 eslint 라이브러리를 모두 설치해줘야 된다.프로젝트에 적용Next.js는 바로 사용할 수 있는 통합 ESLint 환경을 제공, 현재로서는 딱히 건들게 없어보인다.3. Prettier줄 바꿈, 공백, 들여 쓰기 등 텍스트를 일관되게 작성할 수 있게 해준다.개발자가 작성한 코드를 정해진 코딩 스타일에 맞게..
문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 문자열 s에서 불필요한 문자들을 모두 제거해주고 원소의 길이를 기준으로 오름차순을 수행한다. 길이가 짧은 원소부터 차례대로 정답 배열에 넣어준다. 이때 중복되지 않는 값만 넣어주면 된다. 소스 코드 function solution(s) { const answer = []; const tempArr = s.split('},{'); const len = tempArr.length; tempArr[0] = tempArr[0].replace('{{', ''); tempArr[len - 1] = tempAr..
문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 단품 메뉴를 조합한 코스 요리의 개수를 구할 때 편하게 구하기 위해 orders의 모든 원소를 오름차순으로 정렬한다. course과 orders를 순회하며 재귀를 통해 정해진 단품 메뉴 개수를 만족하는 코스 요리의 조합을 구한다. 정해진 단품 메뉴 개수를 만족하는 코스 요리 중 가장 많이 주문한 것을 선택한다. 이 때 가장 많이 주문한 것이 2개 이상일 수도 있다. 가장 많이 주문한 것이 1개 이하일 때는 선택하지 않는다. 소스 코드 function solution(orders, course) { ..
문제 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 문자열 조작, 재귀, 이분 탐색을 모두 구현해서 풀어야 하는 문제로 단계적으로 차근차근 구현하면 어렵지 않게 풀 수 있는 문제였다. 재귀를 통해 조건의 각 자리에 한번은 조건 자체를 한번은 '-' 를 대입하여 모든 경우의 수를 구해준다. (시간 초과가 발생하지 않는다.) 이때 각 조건에 대한 점수는 배열 형태로 저장하고 오름차순으로 정렬한다. query 배열을 순회하며 조건에 해당하는 점수 배열에서 이분 탐색을 수행하여 점수의 하한선을 구한다. query 배열에 있는 조건이 아까 구한 경우의 수에 ..
