본문 바로가기

📄Today I Learned41

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.
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.
챔피언 리스트 Fetch 과정에서의 문제 해결 오늘은 챔피언 데이터를 가져오는 과정에서 발생한 문제를 해결한 경험을 정리해보려고 한다.챔피언 데이터를 Fetch하는 함수챔피언 리스트를 가져오기 위해 작성한 함수는 다음과 같다.export const fetchChampionList = async () => { const versions = await fetchVersions(); const response = await fetch( `${BASE_URL}/cdn/${versions[0]}/data/en_US/champion.json`, { next: { revalidate: 86400 }, } ); const data = await response.json(); if (!response.ok) throw new .. 2025. 3. 14.
Static Site Generation에서 객체 키를 다룰 때의 문제 해결 오늘은 Static Site Generation(SSG) 방식으로 데이터를 불러와 아이템 리스트 페이지를 구현하는 것이 목표였다.데이터를 가져오는 과정에서 예상치 못한 객체 구조 때문에 접근에 어려움을 겪었지만, 튜터님과 같이 공부하는 친구들의 도움으로 Object.entries를 활용하여 해결했다 :)💡문제 발생아이템 리스트를 가져오기 위해 fetch를 사용하여 데이터를 요청했고 API 요청 함수는 다음과 같다.export const fetchVersions = async () => { const BASE_URL = process.env.BASE_URL; const response = await fetch(`${BASE_URL}/api/versions.json`); const data = awa.. 2025. 3. 13.
Mock exam(모의고사) 문제 설명수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ...2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ...3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해주세요.. 2025. 3. 11.
타입스크립트를 사용해야 하는 이유 1. Static Type CheckingTypeScript를 사용하는 이유는 여러가지가 있지만,정적 타입 검사를 통해 잘못된 타입의 데이터가 입력되더라도 미리 방지 할수있기 때문에코드의 안정성을 높여주고 에러를 줄여주는 것이 큰 장점이라는 것을 배웠다. 예를 들어, 밑에 코드를 보면function greet(name: string): string { return `Hello, ${name}!`;}greet("Alice"); // 정상 동작// greet(42); // 컴파일 단계에서 오류 발생: number 타입은 string에 할당할 수 없음만약 greet 라는 함수에 string 타입이 아닌 number 타입이 들어가더라도컴파일 단계에서 오류가 발생해서 실제 서비스에서 예상하지 못한 버그가 발생하.. 2025. 3. 6.

티스토리툴바