🥞 오늘 한 일

• 넥스트 개인과제
  • 각 타입 별 컬러 지정
  • 파비콘 설정
  • 과제 질문 작성
  • README 작성
  • 로딩 이미지 추가
  • vercel 배포
  • 제출

넥스트 개인과제

과제 질문 작성

• NextJS 프레임워크를 사용하면서 가장 간편했던 기능은 무엇인가요?
  • 라우터를 따로 설정하지 않아도 폴더 단위로 자동 라우팅이 되는 기능이 가장 간편했습니다.
• NextJS 를 사용하면서 가장 어려웠던 혹은 헷갈렸던 부분이 있을까요?
  • 서버 컴포넌트를 다룰 때 기존 클라이언트 컴포넌트를 사용할 때 가능했던 기능들이 안 되는 부분이 많아 가장 어려웠습니다.
• 이번 과제가 서버 사이드와 클라이언트 사이드에 대한 이해를 하는데 도움이 되었나요?
  • 메인 페이지는 클라이언트, 디테일 페이지는 서버 컴포넌트로 제작하면서 둘의 차이를 알 수 있었기에 해당 부분에 대한 이해를 하는 데 도움이 많이 되었습니다.

🍽️ 트러블 슈팅

넥스트 개인과제

각 타입 별 컬러 지정

예시 사이트의 타입은 어떤 타입이든 한 가지색으로 통일되어 있어, 각 타입에 맞는 색으로 바꾸기 위한 작업을 진행했다.

STEP 1

우선 tailwind에 대해 잘 몰랐던 나는 뭣모르고 다음과 같이 설정했다.

// tailwind.config.ts
const config: Config = {
  content: [
    // 임의 삭제
  ],
  theme: {
    extend: {
      colors: {
        grass: "#66a945",
        poison: "#735198",
        fire: "#e56c3e",
        water: "#5185c5",
        normal: "#949495",
        flying: "#a2c3e7",
        bug: "#9fa244",
        ground: "#9c7743",
        fairy: "#dab4d4",
        psychic: "#dd6b7b",
        fighting: "#e09c40",
        rock: "#bfb889",
        ghost: "#684870",
        steel: "#69a9c7",
        electric: "#fbb917",
        ice: "#6dc8eb",
        dragon: "#535ca8",
        dark: "#4c4948",
      },
    },
  },
  plugins: [],
};

이렇게 각 타입별 컬러를 지정한 다음 bg-grass 같이 각 타입마다 동적으로 지정하면 되리라 예상했다.

// PokemonDetail.tsx
{pokemon.types.map((type) => {
  return (
    <span
      key={type.type.korean_name}
      className={`bg-${type.type.name} text-white rounded px-1 w-fit`}
    >
      {type.type.korean_name}
    </span>
  );

그러나 제대로 색이 들어가지 않아 찾아보니, tailwindcss는 동적인 할당을 제대로 지원하지 않는 문제가 있었다... tailwindcss를 제대로 사용하려면, 해당 css의 온전한 텍스트가 들어가는 게 좋다는 걸 알게 되었다. (동적으로 뒤에 붙이지 말고, 정확히 bg-grass 이런 식으로)

STEP 2

때문에 어떻게 진행하면 좋을지 생각을 하다가, 무식한 방법이긴 하지만 각 타입에 맞는 css를 담은 객체를 만들어주는 방식을 생각해서 적용시켜보았다.

// PokemonDetail.tsx
const pokemonTypes: { [key: string]: string } = {
  grass: "bg-[#66a945]",
  poison: "bg-[#735198]",
  fire: "bg-[#e56c3e]",
  water: "bg-[#5185c5]",
  normal: "bg-[#949495]",
  flying: "bg-[#a2c3e7]",
  bug: "bg-[#9fa244]",
  ground: "bg-[#9c7743]",
  fairy: "bg-[#dab4d4]",
  psychic: "bg-[#dd6b7b]",
  fighting: "bg-[#e09c40]",
  rock: "bg-[#bfb889]",
  ghost: "bg-[#684870]",
  steel: "bg-[#69a9c7]",
  electric: "bg-[#fbb917]",
  ice: "bg-[#6dc8eb]",
  dragon: "bg-[#535ca8]",
  dark: "bg-[#4c4948]",
};

{pokemon.types.map((type) => {
  return (
    <span
      key={type.type.name}
      className={`${
        pokemonTypes[type.type.name]
      } text-white rounded px-1 w-fit`}
    >
      {type.type.korean_name}
    </span>
  );
})}

이렇게 지정하니, 문제없이 잘 동작하는 것을 확인할 수 있었다. 허나 약간은 투박한 방식이라고 생각해서, 더 나은 방법을 고민해봐야할 것 같다.

vercel 배포 문제

문제 및 해결

간단하고 바보같은 문제였다. 배포를 했는데 계속 오류가 뜨면서 리스트를 불러오지 못하길래 확인해봤더니, API를 불러오는 경로가 여전히 로컬 경로인 http://localhost:3000/으로 되어 있었다. 때문에 배포된 vercel 링크 경로로 변경 후 커밋하니 배포된 링크에서도 리스트를 잘 불러오는 것을 볼 수 있었다.

🍳 내일 목표

• 넥스트 개인과제
  • 해설 기반 리팩토링