LOL_API활용3

이지영·2024년 10월 4일

LOL API 활용 과제를 마저 해보려고한다.

처음 듣는 개념들이 너무 많아서(서버액션, 타입 스크립트, 라우트 핸들러, 서버 컴포넌트, ISR, SSG, 등등...)

강의를 두번 듣고 시작했지만,
많은 정보들이 머릿속에 짬뽕된 상태로 과제를 겨우 진행하다보니
어찌저찌 겨우겨우 API를 호출하여 데이터 뿌려주기에 성공하였지만,

과제 요구사항은 아직 많이 남아있었다🙀..
(서버 컴포넌트에서 서버 액션활용, 메타데이터 적용, ISR활용, SSG 활용, CSR활용...등등...)

맞게하는지도 모르겠고 이대로 진행하다보면 찝찝하기도하고 코드 리팩토링때 죽어날 것 같아서 일단 과제를 멈추고 하루를 공식문서 읽기 & 강의 다시 듣기로 투자했다.

3번째 강의를 들으니까 아 나 이거 잘못하고 있구나,
아 과제할때 이렇게 할걸... 이렇게 했나? 등등
아주 조금 더 들리고 보이기 시작했다..

4번째 들으면서 실습하면 확실히 나아질 것 같지만
과제를 마무리하고 4번째 강의를 돌려보려고한다.

일단 과제를 마무리하는데 집중해보자.

[남은 항목]

1. 메인페이지 - SSG로 제작
2.챔피언 로테이션 페이지 구현 - CSR - Route Handlers활용
3. 챔피언 목록 페이지 구현
4. 아이템 목록 페이지 수정
SSG로 변경 현재는 CSR로 작성되어있음
5. 챔피언 상세 페이지 구현 - 서버 컴포넌트로 작성
6. 각 페이지에 메타데이터 생성
7. css적용 (tailwind)

큰 기능은 이렇게 남은 듯 하다
여기까지 마무리 하고 빼먹은 요구사항을 다시한번 확인해서 마무리해보겠다.

먼저

1. 메인페이지 - SSG로 제작,

시작해보겠다.
글로벌 레이아웃을 설정하여 헤더와 푸터를 구현하여 공통 레이아웃을 정의하였다.
기본적으로 아무 옵션을 주지 않으면 SSG이기 때문에 SSG로 작성 요구사항을 만족했다.

app/layout.jsx - 글로벌 레이아웃

메인은 생각보다 단순하니 완성본 이미지만 작성하고 넘어가겠다.

완성 이미지
app/page.tsx

2. 2.챔피언 로테이션 페이지 구현 - CSR - Route Handlers활용

현재는 서버 컴포넌트로 작성되어 있음 -> 클라이언트 컴포넌트로 변경해야함

이부분에서 많이 힘들었는데
라우트 핸들러에 대한 개념이 제대로 박혀있지 않는 상태라서 힘들었다.

app/api/rotation/route.ts

이렇게 작성해 주었고
처음에는 완전 잘못된 형태로 사용했다.

GET()이런식으로 route.ts의 함수를 호출하여 사용했다.
근데도 신기하게 원하는대로 구현은 되더라..ㅎ
잘되길래 잘못된지도 모르고 있었다.

잘못 사용한 라우트 핸들러 호출

수정한 라우트 핸들러 호출

원래의 사용법에 맞게 수정해 주었다.

3. 챔피언 목록 페이지 구현

ISR로 변경

로테이션 챔피언과 전체 챔피언 카드는 공통으로 쓰이니
공통 컴포넌트로 분리해보겠다.

분리하는 과정에서도 트러블 하나가 발생했다.

트러블 1.

분리한 카드 컴포넌트를 호출
<Card item = {item} />
에러 메시지 : {item: ChampionType}형식은 IntrinsicAttributes & ChapionType형식에 할당할 수 없습니다.

[원인]

원인을 GPT에 검색해보았더니,

IntrinsicAttributes는 React 컴포넌트에서 내재적으로 지원되는 속성들을 정의하는 TypeScript의 타입입니다. 주로 컴포넌트의 props와 관련된 타입을 정의할 때 사용됩니다. 이 오류는 Card 컴포넌트가 item prop을 받을 때 그 타입이 올바르게 정의되지 않았거나, ChampionType과 IntrinsicAttributes 간의 불일치로 인해 발생할 수 있습니다.

item prop을 받을 때 타입 정의되지 않았다.

잘못된 코드
const Card = (item: ChampionType) => {

TypeScript의 타입 안정성을 활용하기 위해서는
props를 객체 형태로 받아야한다고 한다.
item을 단독으로 매개변수로 받는 방식은 props를 제대로 전달받지 못하는 구조라고 한다.

TypeScriot는 item이 객체가 아니라 간단한 변수로 인식하게 되며 props의 구조를 명시적으로 정의하지 않았기 때문에 타입 체크가 제대로 이루어지지 않았던 것이다.

[해결]

porps의 구조를 명시적으로 정의

수정된 코드

이렇게 작성했더니 잘 동작하였다
로테이션 챔피언, 전체 챔피언 카드 모드 해당 형식으로 변경하여
잘 동작하는 것을 확인했다.

4. 아이템 목록 페이지 수정

요구 사항을 제대로 안읽어서 SSG로 작성된걸 -> CSR로 수정 -> SSG로 다시 수정.. ㅎ

5. 챔피언 상세 페이지 구현 - 서버 컴포넌트로 작성

이것도 use client를 하지 않았기 때문에 서버 컴포넌트로 잘 작성되어있어, 수정할 필요는 없을 것 같다.

6. 각 페이지에 메타데이터 생성

각 페이지마다 메타 데이터를 생성하여 SEO를 향상시키는 요구사항이 있었다.
하지만 두 가지 방법이 있는데
1. export const metadata
2. export const generateMetadata

잘 몰라서 2번으로 사용했는데

둘의 차이가 무엇인가 싶어 검색해보았다.
1. export const metadat:
정적인 메타데이터 정의, 컴포넌트가 렌더링될 때마다 동일한 메타데이터 사용
주로 변하지 않는 정보 (사이트 제목, 설명 등을 설정할 때 사용된다고 한다.)
2. export const generateMetadata:
동적 메타데이터 정의, API호출이나 상태에 따라 메타데이터를 변경할 수 있다고 한다.
사용자가 입력한 정보나 데이터베이스의 데이터에 따라 메타데이터를 조정해야할 때 유용하다고 한다.

우선 generateMetadat를 남발하였으니,
동적으로 metadata를 정의한 부분만 빼고 다 1번으로 수정