좀 만 더..

2023.07.11 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Listing creation [Airbnb 클론코딩] Listing creation 2023.07.02 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Category UI [Airbnb 클론코딩] Category UI fmf2023.06.25 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Register & Login functionality [Airbnb 클론코딩] Register & Login functionality 202 hu-bris.tistory.com Listing 이번에 하는 것은 생성된 방 목록을 띄워주는 것이다. 먼저 방이 없을 때 나오는 ..

2023.07.02 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Category UI [Airbnb 클론코딩] Category UI fmf2023.06.25 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Register & Login functionality [Airbnb 클론코딩] Register & Login functionality 2023.06.17 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Auth UI [Airbnb 클론코딩] Auth UI 2023.06.11 hu-bris.tistory.com Listing creation 이번에 만드는 것은 에어비앤비에 자신의 집을 렌탈해주는 기능이다. Rent Modal..

fmf2023.06.25 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Register & Login functionality [Airbnb 클론코딩] Register & Login functionality 2023.06.17 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Auth UI [Airbnb 클론코딩] Auth UI 2023.06.11 - [Project/Airbnb Clone] - [Airbnb 클론코딩] 환경설정 및 Navbar UI(With. Youtube) [Airbnb 클론코딩] 환경설정 및 Navbar UI(With. Y hu-bris.tistory.com Category UI 카테고리를 만들어야하는데 전에 만들었던 Navbar.t..

2023.06.17 - [Project/Airbnb Clone] - [Airbnb 클론코딩] Auth UI [Airbnb 클론코딩] Auth UI 2023.06.11 - [Project/Airbnb Clone] - [Airbnb 클론코딩] 환경설정 및 Navbar UI(With. Youtube) [Airbnb 클론코딩] 환경설정 및 Navbar UI(With. Youtube) 유튜브를 보던 중에 Airbnb 클론코딩을 하는 것을 보았다. 그래서 Next. hu-bris.tistory.com Prisma setup 기능 구현에 들어가기 앞서 Prisma를 설치해야 한다. Prisma는 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임..

2023.06.11 - [Project/Airbnb Clone] - [Airbnb 클론코딩] 환경설정 및 Navbar UI(With. Youtube) [Airbnb 클론코딩] 환경설정 및 Navbar UI(With. Youtube) 유튜브를 보던 중에 Airbnb 클론코딩을 하는 것을 보았다. 그래서 Next.js를 찍먹해보려고 한다. 환경설정 해당 영상에서는 Next.js 13, React, Tailwind, Prisma, MongoDB를 사용한다. 먼저 Next 프로젝트 폴더를 hu-bris.tistory.com Auth UI 에어비앤비의 로그인과 회원가입 페이지는 Modal 창을 이용해서 구현되어 있다. 그래서 모달 창을 만들어주기 위해 Modal 컴포넌트를 만들어준다. 'use client'; i..

유튜브를 보던 중에 Airbnb 클론코딩을 하는 것을 보았다. 그래서 Next.js를 찍먹해보려고 한다. 환경설정 해당 영상에서는 Next.js 13, React, Tailwind, Prisma, MongoDB를 사용한다. 먼저 Next 프로젝트 폴더를 만들어준다. npx create-next-app --typescript 이렇게 하면 기본 셋팅을 물어보는 것이 있는데 초기 설정 값으로 설정하면 된다. 프로젝트 폴더가 만들어지면 npm run dev를 통해 실행해주면서 localhost:3000으로 들어가면 된다. Navbar 먼저 완성된 디렉터리 구조는 이러하다. 📦app ┣ 📂components ┃ ┣ 📂navbar ┃ ┃ ┣ 📜Logo.tsx ┃ ┃ ┣ 📜MenuItem.tsx ┃ ┃ ┣ 📜Navb..

Next.js를 찍먹해보면서 알게 된 font 적용 Next.js를 이제 사용해봐서 이전 버전이 어떻게 되어 있는지는 모르겠지만 지금까지 구글 font cdn을 통해 css를 적용했었다. Next.js 13버전을 보니 훨씬 더 간편하게 사용할 수 있는 것 같아 적어본다. 자동 호스팅 브라우저에서 따로 Google에 요청을 보내지 않는다고 한다. 그러면서 성능 측에서 향상되었다. 모든 Google 글꼴을 자동으로 자체 호스팅합니다. next/font/google 함수로 사용하려는 글꼴을 가져와서 시작하면 된다. 사용법 import { Nunito } from 'next/font/google'// nunito 폰트 가져오기 const font = Nunito({ subsets: ["latin"] }) {ch..