[TIL] 내배캠4기-NextJs-96일차

https://wonmocyberschool.tistory.com/93

getServerSideProps context 매개변수

export async function getServerSideProps(ctx) {
  console.log("ctx", ctx);
  return {
    props: {},
  };
}

출력 결과

ctx {
req: IncomingMessage {
_readableState: ReadableState {
...중략
},
query: { id: 'elon-musk', params: [ 'elon-musk' ] },
resolvedUrl: '/person/elon-musk?id=elon-musk',
params: { params: [ 'elon-musk' ] },
locales: undefined,
locale: undefined,
defaultLocale: undefined
}

객체 형태로 http request, response 같은 정보를 갖고 있다.
내가 보고 싶은 것은 params 이다. 어떤 형태인지 보고 그대로 props로 주면 api fetch 요청에 파라미터 값으로 사용할 수 있다. 이 방법을 몰라서 상세 페이지에서 useEffect와 router를 이용해 fetch를 해왔는데, json 데이터 구조분해도 어렵고 번거로워서 한참 헤맸다.😇

export async function getServerSideProps({ params: { params } }) {
  const response = await (
    await fetch(`https://billions-api.nomadcoders.workers.dev/person/${params}`)
  ).json();
  return {
    props: {
      response,
    },
  };
}

이런식으로 params 값을 props로 넣어주기.

@tailwindcss/forms

플러그인 설치를 통해 form태그에 대한 기본 css 속성을 적용할 수 있다.

npm i @tailwindcss/forms

//tailwind.config.js

📌	plugins: [require('@tailwindcss/forms')],

추가해주기

focus:outline-none

svg 아이콘

📌 tailwind css를 적용할 수 있는 편리한 아이콘 모음집
https://heroicons.com/

span: block

<span className="text-3xl block mt-3 text-gray-900">$140</span>

inline: 문자 일부분만 선택해서 지정하는 방식
margin 속성 적용안됨
span태그

block: 넓은 범위를 묶어서 지정하는 방식

실제 문자열 크기를 넘어서 적용시킬 수 있다.

flex-1

형제 요소의 flex 속성들 중 가장 강려크해짐.
flex-1 docs

임시로 배열 만들 때 팁

 [...Array(10)].map