[포켓몬 도감 프로젝트] #2 – 프로젝트 세팅 & API 연결하기

 

📝 [포켓몬 도감 프로젝트] #2 – 프로젝트 세팅 & API 연결하기

---

 

 

⚙️ 프로젝트 기본 세팅

🔹 Next.js 프로젝트 생성

npx create-next-app@latest pokedex

 

• 2025.6월 기준 next.js 15.3.3 버전
• TypeScript: ✅ Yes
• ESLint, Tailwind: ✅ Yes
• App Router: ✅ Yes
• src 디렉토리 사용: ✅ Yes

 

🔹 Tailwind 셋팅

vscode 확장프로그램

• Tailwind css intellisense(vscode 확장프로그램) : tailwind 자동 추천, 맨처음엔 스페이스 입력후 실행가능

 

// 프리티어 설치
npm install -D prettier prettier-plugin-tailwindcs

// prettier.config.js 최상단 디렉토리에 파일생성
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
};

• prettier-plugin-tailwindcss : 코드 자동정렬 

next.js 설치 시작부터 tailwind 옵션이 있기 때문에 따로 설정 할 필요❌

 

 

🔹 폴더 구조 간단하게 정리

/src
  /app
    /page.tsx       ← 홈 페이지
  /components        ← UI 컴포넌트
  /lib               ← API 호출 함수
  /styles            ← 전역 스타일 (Tailwind 사용)

 

 

🔗 GitHub 저장소 연결

🔹 초기 커밋 및 푸시

git init
git remote add origin 주소
git add .
git commit -m "init: 프로젝트 초기 설정"
git branch -M main
git push -u origin main

 " ! [rejected]        main -> main (non-fast-forward)"
🔥 git push 에서 위의 에러가 떠서 "git push origin main(브런치명) --force " 로 강제 덮어쓰기 실행

 

 

 

🌐 PokéAPI  연결

🔹 공식 API 주소 : https://pokeapi.co/api/v2/pokemon

limit과 offset을 통해 원하는 수량만 받아올 수 있다!
image는 따로 index로 불러와야된다

// 전체 리스트
export const fetchPokemonList = async () => {
  const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=20");
  return (await res.json()).results;
};

// 이미지
https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${i + 1}.png

 

🏠 리스트 화면 구성 (page.tsx)

// src/app/page.tsx
'use client';
import { useEffect, useState } from 'react';
import PokemonCard from '@/components/PokemonCard';

export default function HomePage() {
  const [pokemonList, setPokemonList] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch('https://pokeapi.co/api/v2/pokemon?limit=20');
      const data = await res.json();

      const list = data.results.map((pokemon: any, index: number) => ({
        name: pokemon.name,
        image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
          index + 1
        }.png`,
      }));

      setPokemonList(list);
    };

    fetchData();
  }, []);

  return (
    <main className="p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
      {pokemonList.map((p) => (
        <PokemonCard key={p.name} name={p.name} image={p.image} />
      ))}
    </main>
  );
}

fecth 함수를 따로 써서 page를 서버렌더링으로 가도 되지만, pokemon api에 이미지를 따로 불러와야 되서 client 에서 사용가능한 useEffect, useState 사용하였다.

 

 

 

렌더링된 화면

 

 

🚀 Vercel 배포도 준비 완료 (예정)

📌 GitHub와 연동되므로 push만 해도 자동 배포 가능!!

[🔗 Vercel 배포 링크] – 다음 편에서 연결 예정!

 

🧠 오늘의 회고

• Next.js 프로젝트 세팅은 이제 제법 익숙해졌다
• GitHub 연결은 기본 중의 기본! 모든 기록을 깔끔하게 남기는 습관 들이기

 

---

📎 다음 목표 (예고편)

• 상세 페이지 만들기 (/pokemon/[name])
• 각 포켓몬의 능력치, 타입 불러오기
• 페이지 이동 구현

👉 이전글 : [포켓몬 도감 프로젝트] #1 – 사이드 프로젝트 시작! 기획 & 목표 설정