HTML5 <a> Tag

공식문서

• HTML5부터 a 태그로 block Level 요소를 감싸도 된다
  - inline요소니까 block 요소를 감싸면 유연하게

setInterval() : 지정된 주기로 특정 코드를 실행한다.

• 주기적으로 지정된 코드를 계속 실행

setTimeout() : 지정된 초가 지난 후 특정 코드를 1회 실행한다.

• 한 번 실행 후에 멈춘다.

NextJS

getServerSideProps 추가 설명
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props

언제 getServerSideProps를 사용해야 하나요?
request time에 반드시 데이터를 fetch해와야 하는 페이지를 pre-render해야 하는 경우에만 getServerSideProps를 사용해야 합니다.
데이터를 pre-render할 필요가 없다면 client side에서 데이터를 가져오는 것을 고려해야 합니다.

클라이언트 측에서 데이터 가져오는 과정 (Fetching data on the client side)
페이지에 자주 업데이트되는 데이터가 포함되어 있고 데이터를 pre-render할 필요가 없는 경우 클라이언트 측에서 데이터를 가져올 수 있습니다.
1. 먼저 데이터가 없는 페이지를 즉시 표시합니다.
2. 페이지의 일부는 Static Generation을 사용해 pre-render할 수 있습니다.
3. 없는 데이터를 위해 loading 상태를 표시할 수 있습니다.
4. 그런 다음 클라이언트 측에서 데이터를 가져와 준비가 되면 표시합니다.

이 접근 방식은 예를 들어 사용자 대시보드 페이지에 적합합니다.
왜냐하면 대시보드는 사용자별 비공개 페이지이기 때문에 SEO와는 관련이 없으며 페이지를 미리 렌더링할 필요가 없습니다. 또한 데이터는 자주 업데이트되므로 요청 시 데이터를 가져와야 합니다.

getServerSideProps가 오류 페이지를 렌더링합니까?
getServerSideProps 내부에서 오류가 발생하면 pages/500.js 파일이 표시됩니다.
500 page(서버 렌더링 오류 페이지)는 사용자가 커스터 마이징 할 수 있습니다.
개발 중에는 이 파일이 사용되지 않고 대신 개발 오버레이가 표시됩니다.

Dynamic Routes

• ✅페이지가 하나밖에 없다면 폴더를 만들어주지 않아도 된다.
  • 이말은 즉슨, about페이지에 하위 페이지가 더 추가되어야 하는 경우에는 abouts이라는 폴더를 하나 만들고 페이지로 사용될 파일을 생성하면 되지만,
    하위 페이지 없이 한 번 보고 끝난다면 pages폴더에 다시 별도의 폴더를 생성하지 않아도 된다.
• 대괄호를 열고 변수명을 넣어주면 변수를 포함하는 Dynamic URL 페이지 생성 가능. EX) [id].js
• 변수를 포함하는 Dynamic URL이라는 걸 알려주는 유일한 방법은 ✅"대괄호[]"를 사용하는 것이다.
• EX) [id].js 만약 여기에 대괄호를 뺀 id.js라면, 이것은 URL에 변수가 들어가지 않고 그대로 "/id"가 될 것이다.

Dynamic Routes
Next.js에서는 page에 대괄호([param])를 추가하여 Dynamic Route를 생성할 수 있습니다.
/movies/1, /movies/abc 등과 같은 모든 경로는 pages/movies/[id].js와 일치합니다.

const router = useRouter()
const { id } = router.query

https://nextjs.org/docs/routing/dynamic-routes

Catch all routes
대괄호 안에 세 개의 점(...)을 추가하여 모든 경로를 포착하도록 Dynamic Routes를 확장할 수 있습니다. pages/movies/[...id].js는 /movies/1와 일치하지만 /movies/1/2, /movies/1/ab/cd 등과도 일치합니다. 일치하는 매개변수는 페이지에 쿼리 매개변수로 전송되며 항상 배열이므로 /movies/a 경로에는 다음 쿼리 개체가 있습니다.
ex) { "id": ["a"] }
https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes

catch-all URL

• 뭐든 캐치해내는 URL이다.
• 가끔 필요할 때가 있다. SEO 기능 최적화에 있어서.
• 컴포넌트 내부에 들어있는 router는 클라이언트 사이드에서만 실행된다.
• 만약 URL에 들어있는 영화제목을 사용해서 구글 SEO에 최적화하고, 유저가 접속하기 전에 탭 제목을 바꾸고 싶고, 기본적으로 해당 페이지를 pre-render하고 싶다면
• server side에서 정보를 얻기 위한 getServerSideProps() 함수를 실행하면 된다.

디바운싱

• 한 번에 많은 변경사항이 발생하는 경우 일괄 처리하고 디바운스 스로틀을 사용하여
  한 번에 모두 보낼 수 있는 것처럼 모든 것이 변경된 후 하나의 요청을 수행해야 한다.

스로틀링

• 창 크기를 조정하거나 스크롤을 수행하는 경우 스로틀링을 수행하는 것이 정말 유용하다.
• 현재 마우스 커서의 위치 파악 등 한 번만 알고싶은 경우.
• 드래그 앤 드롭을 위한 마우스 이동과 스크롤 크기 조정과 같은 작업을 수행할 수 있다.