Next.js 개인프로젝트 : 포켓몬 도감 - 6

프로젝트 진행 순서

1. 프로젝트 셋업
2. Layout 구성
3. 포켓몬 api 구성 (제공)
4. 포켓몬 리스트 컴포넌트 작성
5. id를 이용한 포켓몬 상세 정보 컴포넌트 작성
6. 그 외

06. 폴더 구조 변경, 폰트 추가

분반 수업을 듣고 폴더 구조를 수정하기로 했다.

모든 페이지들은 서버 컴포넌트로 남겨놓고 리스트와 같은 클라이언트 컴포넌트들은 따로 파일로 만들어서 분리

상세 페이지와 관련된 폴더랑 파일들은 (detail)로 그룹화

컴포넌트폴더는 _를 붙혀 path로 지정되지 않도록 이름 변경

 

폰트 추가 

폰트만 바꿔도 훨씬 이뻐보일 것 같아서 폰트를 추가해봤다.

외부에서 다운받았던 폰트를 추가하려면 public 폴더에 추가하면 된다.

(public 폴더에 정적이미지, 폰트 등을 추가하도록 공식문서에서 설명함)

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Jua";
  font-weight: 400;
  src: url(../../public/fonts/Jua-Regular.ttf) format("truetype");
}

body {
  width: 1280px;
  margin: 0 auto;
  font-family: "Jua";
}

 

약간 tailwind를 이용해서 약간씩 css 수정해줌

 

결과

포켓몬 리스트

상세 페이지

이번 프로젝트는 어려운 거는 없었다.

그냥 데이터 불러오기만 하면 끝나서 꽤나 빨리 끝났다.

근데 타입스크립트도 익숙치 않고, next.js는 처음 써보는거라 내가 잘 짠 것인지는 모르겠다.

css는 할 때 마다 진짜 오래걸리는 것 같다.