홈페이지 실습단계

천주아·2024년 11월 12일
  1. npx create-next-app ./
  2. index.tsx / css파일들을 정리
  3. index 페이지에서 넘어가는 다음 페이지를 Pages 폴더 내에 작성
  4. 404페이지 작성.

검색 페이지 작성법

쿼리 스트링: 검색 기능에서 사용자가 입력하는 값을 받아 작성하는 것. 검색 페이지 주소창에서 ~/index?q=(검색어) 의 형태를 띈다.
1. 검색 페이지에 useRouter를 import 한다.
2. const router = useRouter();

const router = useRouter();
  const {q} = router.query;
  return <h1>Search {q}</h1>;

검색 창 페이지를 만들어서 연결하는데, 모든 페이지에서 노출되진 않고 몇몇 페이지에서만 노출될 경우

  • 검색 페이지가 노출되는 페이지의 .tsx 파일 내에 getLayout 메서드를 사용하고 page 자체를 인수로 불러와 페이지 레이아웃 자체를 묶어서 전달해준다.

백엔드의 데이터베이스를 보는 방법

  • 백엔드 서버에 'npx prisma studio' 명령어를 입력하면 localhost:5555 에서 확인이 가능하다.
profile
프론트엔드 엔지니어

0개의 댓글