내일배움캠프 55일차 ('League of Legends' 트러블슈팅)

'League of Legends' 프로젝트에서 겪은 트러블슈팅을 기록하고자 한다.

 

이번 트러블슈팅의 경우, 오류 해결이 아니라 잘못 알고 있던 개념을 바로잡기까지의 과정이다.

 

 

잘못 이해하고 있던 내용

server action 방식을 사용하기 위해서 컴포넌트에 'use server'를 선언해 주었다.

'use server';

export default async function Champions() {
    const data: ChampionsType = await fetchChampions(60 * 60 * 24);

    return ( ... );
}

 

그러다 문득 Next.js의 경우 기본 설정이 서버 컴포넌트이기 때문에 클라이언트 컴포넌트가 되어야 하는 경우에만 'use client'를 선언해주면 된다는 것이 떠올랐고, 이미 서버 컴포넌트인데 왜 굳이 'use server'를 선언해주어야 하는거지? 라는 생각이 들었다.

 

 

새롭게 이해하게 된 내용

server action이라는 것은 컴포넌트와 관련된 개념이 아니라 서버에서 실행되는 함수를 뜻하는 개념이고, 그렇기 때문에 컴포넌트 파일이 아니라 함수를 선언해놓은 파일에 'use server'를 선언해 주어야 한다.

'use server';


/* version 데이터 가져오기 */
export const fetchVersion = async (): Promise<string> => { ... };

/* champion 목록 데이터 가져오기 */
export const fetchChampions = async (revalidate: number): Promise<ChampionsType> => { ... };

/* champion 데이터 가져오기 */
export const fetchChampion = async (id: string): Promise<ExtendedChampionType> => { ... };

/* item 목록 데이터 가져오기 */
export const fetchItems = async (): Promise<ExtendedItemsType> => { ... };

 

server action이라는 명칭 때문에 서버 컴포넌트에 국한되는 개념이라고 잘못 이해를 했고, 클라이언트 컴포넌트에서 서버 측 로직을 실행해야 하는 경우에 사용된다라는 설명을 들었음에도 사실 명확하게 이해하지는 못했다. 클라이언트와 서버의 관점에서 Next.js를 이해하기 위해서는 조금의 시간이 더 필요한가보다.

 

 

느낀점

이번 프로젝트는 정말... (코딩 2 : 8 개념) 정도로 개념 이해에 많은 시간을 할애하고 있는 것 같고, 여전히 내가 명확하게 이해를 하고 있는게 맞나? 라는 생각이 문득문득 드는 것도 사실이다. 캠프를 시작한 이후로 이렇게까지 이해하는데 어려움을 겪은 적이 없어서 당황스럽긴 하지만... 반복적으로 계속 읽고 보고 하다보면 언젠가는 이해할 수 있지 않을까 하는 희망을 가져본다.