[TIL] 07/03 :: 포켓몬 1.

yeseul·2024년 7월 3일

<TIL>

목록 보기

31/43

* AppRouter

✔️정적 페이지

: index.js와 같이 파일명이 고정된 경우, Next.js는 이를 정적 페이지로 간주하고 빌드 시점에 HTML을 생성한다.

✔️동적 페이지

: [id].js와 같이 대괄호로 감싸인 파일명은 동적 페이지로 간주된다.
Next.js는 이 파일을 사용하여 동적 경로에 대한 페이지를 생성한다.

✔️ next/navigation

import { useRouter } from "next/navigation";

Pages Router에서는 next/router로부터 useRouter를 가져와서 사용했지만,
App Router에서는 next/navigation으로부터 useRouter를 가져와야 한다.

* axios vs fetch

튜터님께서 api로 데이터 받아오실때 axios 쓰신거 보고 + 그동안 과제때 거의 axios 사용하면서 익숙해져서 이번에도 똑같이 사용했다.
이번 과제는 복잡한 요구사항 (인터셉트, 취소, 더 나은 오류 처리) 등이 필요한 경우가 없으므로 굳이 무겁게 라이브러리 설치 안해도 됐었을것같다.

-> 추가 기능이 필요하지 않고, 단순히 데이터를 가져오는 용도로 사용할 경우 fetch를 사용하는 것이 좋다.
게다가 fetch 는 브라우저 내장 기능이기 때문에 라이브러리 설치를 안해도 되므로 추가적인 의존성을 줄일 수 있다.

* 서드파티(Third Party) 라이브러리

: 소프트웨어 개발에서 외부에서 제공되는 라이브러리 또는 패키지를 의미한다.

기본적으로 '제 3자' 를 뜻하는 단어이며,
이 '제 3자'가 어떤 분야의 제 3자를 의미하는지에 따라 의미가 나뉜다.

예를 들어,
프로그래밍 개발과 개발자 사이에 플러그인, 라이브러리, 프레임워크 등을 서드파티로 볼 수 있다. axios도 서드파티 라이브러리이다.
서비스와 사용자 사이에 서드파티는 응용 프로그램, 애플리케이션, 웹 서비스로 볼 수 있다.

* 클라이언트 / 서버 컴포넌트에서의 데이터요청

❗ 서버 컴포넌트인 DetailPage 에서 데이터 요청하는 경로 문제로 요청이 안감

  try {
    const response = await axios.get(
      `http://localhost:3000/api/pokemons/${id}`		// http://localhost:3000 추가.
    );

클라이언트 측에서의 데이터 요청 (PokemonList)
: 클라이언트 측에서 실행되므로 상대경로 ('/api/pokemons')를 사용하여 데이터를 요청할 수 있다.
클라이언트 측의 요청은 브라우저에서 진행되므로 호스트가 누구인지 알고있다.
따라서, 현재 호스트 (ex. 'localhost:3000') 를 기준으로 상대경로를 사용한다.
서버측에서의 데이터 요청 (PokemonDetailPage)
: 서버측에서 실행되므로 절대경로를 사용해야 한다.
서버측에서의 요청은 클라이언트와 달리 현재 호스트를 인식하지 못하기 때문에 'http://localhost:3000'과 같은 절대경로를 명시적으로 사용해야 한다.
서버측에서 실행되는 코드에서도 호스트 정보를 동적으로 가져와서 사용할 수 있도록 하는것이 좋다.
-> 'NEXT_PUBLIC_API_URL'과 같은 환경변수를 사용해도 된다.

* 전역스타일 (reset, font)

💭 스타일드 컴포넌트에서는 styled-reset 라이브러리를 사용해서 쉽게 CSS 리셋을 시켰는데, 테일윈드는 어떻게하지?

//globals.css
@tailwind base;			// 브라우저의 기본스타일을 리셋하여 reset.css 역할수행
@tailwind components;
@tailwind utilities;
tailwind 에서의 reset css

Next.js 에서 tailwind 로 보일러 플레이트를 만들면 별도의 reset css 설정이 필요하지 않다.

💭 font 적용은 layout.tsx 에서 ?!

// globals.css
@import url("https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap");

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

@layer base {
  body {
    @apply font-dohyeon;
  }
}

// tailwind.config.ts
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        dohyeon: ["Do Hyeon", "sans-serif"],
      },
    },
  },
  plugins: [],
};
export default config;

// layout.tsx
 return (
    <html lang="en">
      <body className={`${inter.className} font-dohyeon bg-black `}>
        {children}
      </body>
    </html>
  );

왜 폰트적용이 안될까..
-> ${inter.className} 이부분도 폰트지정이라, 이걸 빼면 적용이 잘된다.

* favicon

✔️ layout.tsx > metadata 에 icon 추가

public 폴더에 파비콘으로 사용할 png / ico 파일 넣기
icon 추가
C + F5 로 캐시지우는 강력새로고침 실행.

💡 강력 새로고침 Ctrl + F5

: 브라우저에서 캐시된 데이터를 무시하고 페이지를 완전히 새로고치는 기능.
일반적인 새로고침(F5) 는 브라우저 캐시에 저장된 데이터를 사용하여 페이지를 로드한다. 하지만 때로는 캐시된 데이터로인해 변경 사항이 즉시 반영되지 않을 수 있다.

에러나는 곳 없이 코드도 전부 잘 작성했는데 아무리 새로고침을 해도 파비콘이 적용이 안됐다.
크롬 속성 들어가서 고급 설정에서 이미지 및 캐시도 직접 지워봄.
vscode 닫고, 재실행, build - start 도 반복했는데도 안됨
강력새로고침이라는게 있다는걸 구글링하다 발견 후, 실행해봤는데 정말 바로 적용되더라...
앞으로 자주 사용할 단축키같단 느낌이 강하게 든다~~!
귀여운 포켓몬 나타나는거보고 새벽까지 답답했던게 순식간에 해소가 됐다!!!!

✔️ icon.ico 로 파일명을 한 후 app 밑에 두기.

폴더구조 , page 파일명은 무조건 컨벤션맞추기.
export default function 에서 default 는 꼭 써주기 (rafc 해도 default 쓰는거 잊지말자)

페이지를 폴더로 나누는게 익숙하지않아서 처음에 많이 헤맸지만, 확실히 동적라우팅의 경우 훨씬 직관적인 것 같다.
화면분할해놓고 코드 수정하다가 자꾸 page 를 잘못열어서 좀 당황했는데.. page.tsx 여도 함수명을 잘 지어놓고, 코드짤때 한번 더 확인하자!! 이젠 테일윈드도 그렇고, 옆에 공식문서 열어놓고 헷갈리면 다시확인+구글링하는게 필수가 됐다.
체감상 typescript 보다 next.js가 더 재밌다 ㅜㅜ 내일은 타입지정 연습하면서 과제 리팩토링해야지!
저번주와 이번주 내용은 강의 복습에 리팩토링을 많이 해봐야 감이 더 잡힐듯하다.