🌟 Data Dragon API의 BASE_URL 관리
1. 문제발생
서버액션을 만들때는 문제가 없었는데, 이미지 정보를 불러올 때 버전정보를 불러오는데 버전정보 뿐만 아니라 BASE_URL도 가져와야해서 불편함이 있었다.
2. 원인 추론
기존에 src>app>api>api.ts파일에
export const BASE_URL = "Data Dragon API링크";를 작성했다.
3. 해결 방안
.env.local 파일에 NEXT_PUBLIC_BASE_URL = Data Dragon API링크를 작성했다.
4. 결과
이미지 태그로 불러올 때,
src={${process.env.NEXT_PUBLIC_BASE_URL}/cdn/${version}/img/champion/${champion.image.full}}
로 바로 가져올 수 있었다.
🌟 아이템 목록 카드의 그리드 CSS(tailwind)
1. 문제발생
그리드 속성(grid grid-col-2 md:grid-cols-4 lg:grid-cols-6)을 줘도
속성이 먹히지 않았다.
2. 원인추론
그리드 속성의 위치가 잘못되었나 하여
Image태그, h2태그, p태그를 감싸는 div태그에도 그리드 속성을 줘봤지만 변화가 없었다.
3. 해결방법
배열메서드 map을 쓰기 전 div태그에 grid 속성을 넣어줬다.
4. 결과
🌟 무료 챔피언 로테이션 정보 불러오기
1. 문제발생
로테이션 API를 통해 불러온 데이터(rotation)는 숫자 배열로 이루어져 있다.
freeChampionIds의 배열 속 숫자가 getChampions()해 온 데이터의 key 값과 같을 때, 해당 챔피언 데이터만 반환해주면 된다.
rotation {
freeChampionIds: [숫자배열],
freeChampionIdsForNewPlayers: [숫자배열],
maxNewPlayerLevel: 10
}champions [
{
id: 'Pyke',
key: '555',
name: '파이크',
title: '핏빛 항구의 학살자',
blurb: '빌지워터 학살의 부두에서 유명한 작살잡이였던 파이크는 거대한 자울치의 뱃속에서 죽음을 맞이할 운명이었지만… 살아 돌아왔다. 이제, 그는 옛 고향의 음습한 골목과 뒷길을 소리 없이 누비며, 타인을 이용하여 부를 쌓은 자들에게 그가 얻은 초자연적인 힘으로 빠르고 잔혹한 최후를 선사한다. 괴물을 사냥한다고 자부했던 도시는 이제 괴물에게 사냥당하고 있다.',
info: { attack: 9, defense: 3, magic: 1, difficulty: 7 },
...
},
{},{},…,{}
]처음 작성한 코드는 아래와 같다.
그런데 이렇게 작성해서 filteredChampions를 콘솔로 확인해보니 빈배열이 나왔다.
const strFreeChampionIds = freeChampionIds.map((num) => String(num));
const filteredChampions = champions.filter((champion) =>
freeChampionIds.includes(champion.key)
);2. 원인추론
rotation에서 우리가 필요한 정보는 freeChampionIds라는 안에 바로 숫자가 들어있는 배열이다.
champions에서 비교해야하는 숫자는 배열안에, 객체 안에 'key'라는 키의 value값이다.
champions에서 필요한 내용을 불러오는 과정에서 rotation과 동일하게 생각했기 때문에 아무리 filter와 includes를 사용해도 결과가 빈 배열이 나왔던 것 같다.
3. 해결방법
배열메서드인 filter와 includes를 사용하는 것은 동일하나,
champions의 숫자인 key를 불러오기 위해 배열에서 객체를 접근하기 위해 Object.values()를 사용했다.
형변환(champion.key는 string이고, rotation의 key는 number로 Number()를 사용)하여
test라는 함수는 freeChampionIds에 들어있는 숫자와 일치하는 key의 챔피언 정보의 객체만 불러오게 된다.
4. 결과
🌟 any타입 유무 확인
1. 문제발생
로테이션 페이지에서,
빌드 시점 후로는 타입에러가 없었으나, vercel로 배포할 때 빌드 시 any타입에 대한 에러가 발생함.
2. 원인추론
타입을 확실하게 지정해주지 않아 rotation이나 champions의 데이터가 빈배열이 나올 수도 있기 때문에 타입 선언을 확실하게 해줘야 함.
3. 해결방법
마우스 커서를 올려 any타입이 나올 수도 있는 부분에 대하여 타입 선언을 했다.
4. 결과
