본문 바로가기

Total115

Lotto(로또의 최저, 최고 순위) 문제 설명로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다.로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했던 최고 순위와 최저 순위를 알아보고 싶어 졌습니다.알아볼 수 없는 번호를 0으로 표기하기로 하고, 민우가 구매한 로또 번호 6개가 44, 1, 0, 0, 31 25라고 가정해보겠습니다. 당첨 번호 6개가 31, 10, 45, 1, 6, 19라면, 당첨 가능한 최고 순위와 최저 순위의 한 예는 아래와 같습니다.순서와 상관없이, 구매한 로.. 2025. 3. 25.
Next.js에서 Tailwind CSS가 권장되는 이유 Next.js 프로젝트에서 Tailwind CSS가 많이 권장되는 데는 여러 이유가 있다.1. 자동으로 적용되는 Reset CSSTailwind CSS는 기본적으로 브라우저 간의 일관된 스타일링을 위한 Reset CSS(또는 Normalize CSS)를 포함하고 있다. 이는 별도의 설정 없이도 모든 브라우저에서 동일한 기본 스타일링을 제공하여 개발자의 부담을 줄여준다.2. Zero-Runtime 스타일시트Tailwind CSS는 "유틸리티 우선" 접근 방식을 사용하며, 빌드 시점에 사용된 클래스만 포함하는 최적화된 CSS를 생성한다. 이는 다음과 같은 이점을 제공한다:런타임에 JavaScript로 스타일을 계산하지 않아 성능이 향상된다.빌드 단계에서 사용하지 않는 스타일은 제거되어 최종 CSS 파일 크기.. 2025. 3. 22.
Next.js에서의 Image 컴포넌트 Next.js의 Image 컴포넌트와 width, height 속성의 중요성Next.js의 Image 컴포넌트를 사용할 때 width와 height 속성을 명시해야 하는 중요한 이유가 있다. 이는 CLS(Cumulative Layout Shift) 방지를 위한 것이다.CLS란 무엇인가?CLS(Cumulative Layout Shift)는 Google의 Core Web Vitals 중 하나로, 페이지 로딩 중에 예상치 못한 레이아웃 이동이 발생하는 정도를 측정하는 지표다. 사용자가 페이지를 방문했을 때 컨텐츠가 갑자기 움직이면 사용자 경험에 부정적인 영향을 미친다. 이미지가 로드될 때 발생하는 상황:이미지의 크기가 미리 지정되어 있지 않으면, 브라우저는 해당 공간을 얼마나 확보해야 할지 모른다.이미지가 로.. 2025. 3. 21.
Green Deal: Team project 💬 프로젝트 소개지도에서 찾고 쉽게 거래하는 스마트한 중고 마켓 📦원하는 지역에서 직접 상품을 검색하고 거래할 수 있는 중고 마켓 플랫폼입니다.사용자는 가까운 지역에서 좋은 상태의 물건을 합리적인 가격에 구매할 수 있습니다.PC와 모바일 환경에서 최적화된 반응형 UI를 제공하여 어디서든 편리하게 이용할 수 있습니다.작업 기간 : 2025. 02. 26 ~ 2025. 03. 04배포 주소 : https://outsourcing-alpha.vercel.app/ 💻 맡은 파트카카오맵 API를 이용한 지도 구현각 유저들의 위도와 경도 데이터를 기반으로 마커 표시커스텀오버레이로 판매 물품 정보 구현홈 화면 스타일링 2025. 3. 19.
League of Legends Info app 💬 프로젝트 소개라이엇 API를 이용한 League of Legends 정보 App실시간 데이터 제공: 라이엇 API를 통해 게임의 챔피언, 아이템, 무료 챔피언 정보를 실시간으로 제공합니다.작업 기간 : 2025. 03. 10 - 2025. 03. 18배포 주소 : https://nextjs-riot-app.vercel.app ⚙ 프로젝트 기능 소개챔피언 리스트, 아이템 리스트 그리고 주간 무료 챔피언 리스트 정보를 제공SSG, SSR, ISR, CSR 네 가지 렌더링 기법을 사용하여 각 페이지를 구현 Next Link Component을 이용해 페이지 간 네비게이션을 처리Tailwind CSS를 사용하여 반응형 디자인을 적용 📁 프로젝트 구조📁nextjs-riot-app├─ public├─ sr.. 2025. 3. 19.
Route Handlers: 챔피언 로테이션 데이터 가져오기 문제 상황League of Legends 챔피언 로테이션 페이지를 개발하던 중 다음과 같은 두 가지 주요 이슈가 발생 1. 잘못된 함수 호출fetchChampionRotation 대신 fetchChampionIdsForRotation을 호출하여 콘솔에 빈 배열([])이 출력됨IDE 자동 완성 기능이 잘못된 함수를 제안하여 의도치 않게 잘못된 함수를 import함2. 404 에러env.local에 만든 환경변수를 클라이언트에서 사용하기 위한 NEXT_PUBLIC_ 접두사가 누락되어 API 호출 URL이 undefined/api/rotation 으로 처리됨외부 DDragon API 주소(https://ddragon.leagueoflegends.com/api/rotation)로 호출하고 있었으나, 실제로는 로.. 2025. 3. 19.