Fonts
Next.js에서 좋은 점 ! 은 Google Font를 제공을 해준다는 점인것 같다!
기본적으로 next.js 프로젝트를 설치하게 되면 -> layout.tsx 폴더가 하나 생성되는 것을 확인할 수 있다. 여기서 자세하게 살펴보면
Inter이란 것을 찾을 수 있는데 여기서 next/font/google을 불러오는 것을 확인할 수 있다.
우리는 여기서 Inter 대신에서 사용할 폰트를 불러오면 된다!
나는 이 폰트를 불러와보도록 하겠다. 
Poor_Stroy 폰트를 불러오니 이렇게 다양한 설정을 할 수 있었다. 
이렇게 기본적으로 제공을 해주고, 타입스크립트가 어떤 속성이 있는지를 다 알려줘서 너무 감사하다.. 사랑해 타입스크립트 너란 녀석 ⭐️
여기서 확인하고, 정의를 해주면 된다.
여기서 variable이란 무엇이냐 ? 하면 폰트를 하나말고 두개 세개를 사용할 때가 있다.
두개의 폰트를 정의하고, 정의한 variable의 이름을 <body> 태그 className에 poor.variable 이런식으로 정의해두면 된다.
--> CSS에서 --poor-text와 --flower-text 변수를 사용하여 두 폰트를 적용할 수 있게 된다.
${poor.variable}${flower.variable}이렇게 정의해두면 이 변수를 어떻게 사용할 수 있을까?
이 variable은 tailwind의 theme에 추가해서 사용할 수 있게 된다. 우리도 알다시피 tailwind에서는 우리가 classname을 정의할 수 있다.
tailwind.config.ts폴더에서 theme/extend/fontFamily에서 정의한 두개의 폰트를 변수로 정의할 수 있게된다!
그럼 어떻게 사용할 수 있을까?
하면, 사용할 태그에 className={font-poor}이렇게 사용할 수 있다.
요렇게 사용하고 싶은 폰트를 각각 정의하게 되면,
요렇게 다르게 정의되는 것을 확인할 수 있다.
나는 이 캐럿마켓에서 폰트를 여러개 사용할 계획은 아직 없기 때문에 Poor_Story 폰트 하나만 적용시켜 주었다.
한개를 적용할 때에는
불러오고, 정의하고, className에 적용할 때에는 poor.className으로 불러서 정의하게 되면 전체적으로 poor 폰트가 적용되게 된다.
Private Folders
page.tsx -> extras url을 위한 페이지를 생성
loading, not found, route, error -> 프레임워크가 사용해야 할 때를 판단해서 적절하게 사용할 수 있음.
어떤 폴더는 url에서 완전히 숨기고 싶을 때도 있음 --> _를 폴더 명 앞에 붙여주면 된다.
그럼 그 폴더 안에 page.tsx 파일이 있더라도 폴더명이 밑줄로 시작하게 되면 존재하지 않는 url이 되게 된다!
이렇게 extra 폴더 명에 _ 를 붙여주었더니, 
404 not Found가 뜬 것을 확인할 수 있다!
Catch All Segments
chats/[id]/page.tsx 폴더가 있다고 가정해보자.
그럼, 여기서 [id]의 역할은 ? --> parameter이다. 
이런식으로 파라미터가 필수적으로 존재해야 chats/[id]/page.tsx를 볼 수 있게 된다.
그럼 예를 들어서 extra/12/12/44 이런 식으로 여러 개의 파라미터를 가지려면 어떻게 해야할까?
이때 --> [...id]괄호 안에 ... 를 써주면 된다.
그럼 아래와 같이 파라미터가 하나일 때에도,
이와 같이 여러개의 파라미터를 가질 때에도 
extra/[...id]/page.tsx가 열리는 것을 확인할 수 있다.
그런데 여기서 extra/[...id]/page.tsx는 파라미터가 필수적이다. 즉, 파라미터가 없으면,
이렇게 404 오류가 뜨고 만다.
그럼, 파라미터 없어도 /extra만 입력해도 링크 이동이 가능했으면 좋겠는데!
--> [[...id]] 괄호를 두개를 치면 된다!
이렇게 괄호를 [[...id]] 를 하게 되면, 선택적으로 파라미터를 가질 수 있게 된다
즉, 파라미터가 있어도 되고, 없어도 extra/[[...id]]/page.tsx가 열린다는 의미가 된다.
이렇게 정상적으로 열리는 것을 확인할 수있다!
요렇게 parmas에서 받는 id를 string[] 배열로 받아온 뒤, 화면에 뿌려보았더니 
요렇게 출력되는 것을 확인할 수 있다!
Logging
데이터를 fetch하기 위해 backend로 보내는 모든 Get요청은 header나 cache를 요청하지 않아도 next.js가 자동으로 캐싱하게 된다.
하지만, 데이터가 변경되었을 때 이를 재검증하는 것은 우리의 몫이 된다. --> revalidateTag, function 등을 이용해서
만약 우리가 다른 API로 fetch request를 여러번 호출해야 한다면 --> 언제 API 호출이 cache hit가 되었고, 언제 API 호출이 실제로 이루어졌는지 알아낼 수 있다면 편하지 않을까?
이를 설정하기 위해서 next.config.mjs 폴더에서 설정을 해주면 된다.
--> 이렇게 하면 요청되는 request들을 좀 더 시각화 할 수 있게 된다.
만약, 이러한 api를 fetch로 불러온다고 생각해보자
await getData() 로 데이터를 불러오고 , 화면을 새로고침을 하게 되면,
요렇게 GET 요청을 보냈고, cache가 어떻게 됬는지 자세하게 출력되고 있는 것을 확인할 수 있다.
Security
예시를 하나 들어보자
api를 호출해서 데이터를 불러오는데, 만약 이 데이터가 client 단에 즉 사용자에게 보여지면 안되는 api를 실수로 노출을 시켰을 때 -> 경고를 뜰 것임. (백엔드에만 있어야 하는 데이터가 실수로 노출이 되는 경우를 의미함. )
그럼 그 경고를 어떻게 띄울 수 있을까 ?
첫 번째 방법으로 : Experimental react API를 활성화 시키는 것이다.
--> 결단코 절대 네버 client 컴포넌트로 전달해서는 안되는 Object를 표시하는 것이다. 만약, 그 object가 client 컴포넌트로 전달되면 error를 받게 될 것이다.
Experimental react API를 사용하기 위해서는 
설정을 해주어야 한다. 이렇게 설정을 다 했다면, 노출이 되면 안되는 api를 불러오는 곳에 가서 사용하면 된다. 
예시로 getData()로 secret api를 불러오고 있다. 만약 이 secret 객체가 client에게 보여지면 안된다면?
taintObjectReference() 를 통해서 에러 메시지를 보여줄 수 있다.
첫번 째 파라미터에는 데이터가 노출될 때 받을 error 메시지, 두번째 파라미터는 보호하려는 object를 넣으면 된다.
그런데 여기서 secret에 있는 secret만 보호하고 싶다면?
이렇게 tainUniqueValue()를 통해서 하나만 지정할 수 있게 된다.
--> 이렇게 하는 것이 client 컴포넌트에 특정 값이 표시되는 것을 방지할 수 있는 첫번 째 방법이다.
만약에 파일 전체를 보호하고 싶다면 ? 우리가 상당수의 utility함수 또는 fetching 함수를 가지고 있다고 가정해보자.
거기서 api key를 사용하고 있으므로 절대로 client에 나타나지 않도록 명확히 하기 위해서는 ?
server-only라는 package를 설치하면 된다.
npm i server-only --> 어디에나 적용이 가능한데,
이 function API key를 사용해서 fetching하거나 client 컴포넌트에 절대 노출하고 싶지 않은 로직을 실행중이라고 가정할 때, 그러려면 import 'server-only" 만 하면 된다.
이렇게 함으로써 client 컴포넌트가 이 함수를 import하려고 하면,
server-only라는 오류 메시지를 보여주게 된다.
Images
위와 같이<Image> 컴포넌트에 placeholder="blur" 옵션을 사용하면, 이미지를 로딩하기 전에 블러 처리된 이미지가 먼저 화면에 보여지게 된다.
그럼 이렇게 처음 로딩을 할 때에는 이미지의 블러 형태로 이미지가 불러오다가 시간이 지나면서 원래 이미지로 불러오는 것을 확인할 수 있게 된다.
