마카로닉스

2259 No

1.Next.js 부동산 임대 웹사이트 만들기

2024-07-22 19:49:54 By 라이트 0 37 댓글수 0 포스트 하기

10월 2024
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

https://github.com/bradtraversy/property-pulse

1. 프로젝트 소개

이 프로젝트는

Next.js의 React 서버 컴포넌트, 파일 기반 라우팅, MongoDB 데이터베이스와 상호작용하는 API 경로,

Mongoose 사용, Next Auth 및 Google 프로바이더를 이용한 인증, 이미지 저장 및 최적화를 위한 Cloudinary 이미지 서비스 등 다양한 내용을 다룹니다.

이번 강좌의 모든 것은 Property Pulse라는 부동산 임대 웹사이트 프로젝트를 중심으로 진행됩니다.

이 프로젝트에는 부동산 목록 검색 및 관리, 북마크 및 저장된 목록, 소셜 미디어 공유, Google 인증 및 사용자 프로필 생성, 내부 메시징 시스템, 지도 및 지오코딩, 사진 스왑 라이트박스 갤러리, 페이지네이션 등의 기능이 포함됩니다.

2. 주요 기능

인증: Next Auth와 Google 프로바이더를 사용하여 Google 계정으로 로그인할 수 있습니다. 로그인 시 사용자 정보(이름, 이메일, Google 프로필 이미지 등)가 MongoDB에 저장됩니다.
API 라우트: 여러 API 라우트를 생성하여 백엔드 작업을 처리합니다. 예를 들어, 새로운 물건 추가, 물건 검색, 메시지 조회, 물건 북마크 등의 기능을 구현합니다.

3.기능 설명

검색 기능: 키워드나 위치를 입력하여 물건을 검색할 수 있습니다. 예를 들어, "Boston" 또는 "downtown studio"로 검색할 수 있습니다.
홈 페이지: 장식 블록과 버튼이 있으며, 물건을 추가하거나 탐색할 수 있습니다. 주요 페이지에는 추천 물건과 최근 물건이 랜덤으로 표시됩니다.
물건 상세 페이지: 첫 번째 이미지를 주요 이미지로 사용하며, Cloudinary를 통해 이미지 최적화 및 관리. Mapbox를 사용하여 지도와 마커를 추가하고, react geo code로 주소를 위도와 경도로 변환합니다. 추가 이미지들은 슬라이드 쇼로 확인할 수 있습니다.
북마크 및 공유: 로그인 후 물건을 북마크하고, React Share를 통해 소셜 미디어에 공유할 수 있습니다. 예를 들어, Twitter에 공유하면 제목, 링크, 해시태그가 자동으로 추가됩니다.
프로필 페이지: Google 데이터와 사용자의 물건 목록이 표시됩니다. 물건을 추가, 수정, 삭제할 수 있습니다.
저장된 물건: 북마크한 물건 목록을 보여줍니다.

4.코드 구조

컴포넌트: 많은 컴포넌트가 있으며, 앱 폴더에서 페이지와 라우트를 확인할 수 있습니다.
API 폴더: 인증, 북마크, 메시지, 물건 관련 백엔드 작업을 처리하는 API 라우트가 포함되어 있습니다.
테마 파일: HTML로 작성된 테마 파일을 제공하며, 이를 JSX로 변환하여 사용할 수 있습니다. 로그인 및 등록 페이지도 있지만, Google 인증을 사용하기 때문에 현재는 사용하지 않습니다.

5. Next.js란?

Next.js는 React 기반 애플리케이션을 서버 사이드 렌더링과 정적 웹사이트 생성으로 구축할 수 있는 오픈 소스 웹 개발 프레임워크입니다.

6.왜 Next.js를 사용해야 하나요?

Next.js는 프레임워크 안의 프레임워크라고 할 수 있습니다. Create React App으로 프로젝트를 만들어본 적이 있을 텐데, 이는 싱글 페이지 애플리케이션(SPA)으로 단일 HTML 파일에 모든 내용을 담아 클라이언트에서 실행됩니다. 반면 Next.js는 서버 사이드 렌더링을 통해 초기 로딩 시간을 단축하고 SEO(검색 엔진 최적화)에 유리합니다. 또한 정적 웹사이트 생성 기능도 제공하여 매우 빠른 속도의 웹사이트를 구축할 수 있습니다.

7.웹사이트 유형

정적 웹사이트: HTML과 CSS 파일로 이루어지며, 빠르지만 동적이지 않습니다.

싱글 페이지 애플리케이션(SPA): 한 개의 HTML 파일로 모든 콘텐츠를 JavaScript로 로드합니다. 사용자 경험이 뛰어나지만 초기 로딩 시간이 길고 SEO에 불리합니다.

서버 사이드 렌더링(SSR): 서버에서 HTML과 CSS를 생성해 브라우저로 보내고, JavaScript가 페이지를 동적으로 만듭니다. 초기 로딩 시간이 빠르고 사용자 경험도 좋습니다.

정적 사이트 생성(SSG): 빌드 시 HTML과 CSS 파일을 생성하고, 이를 브라우저에 보냅니다. 매우 빠르지만, 콘텐츠 변경 시 재빌드가 필요합니다.

Next.js는 SSR과 SSG 모두 지원하여 혼합된 애플리케이션을 구축할 수 있습니다.

8.Next.js 주요 기능

파일 기반 라우팅: 파일을 생성하면 자동으로 라우트가 생성됩니다.

API 라우트: 서버에서 데이터베이스와 상호작용할 수 있는 API 라우트를 제공합니다.

React 서버 컴포넌트: 서버에서 렌더링되는 React 컴포넌트로 SEO와 빠른 로딩 시간을 제공합니다.

환경 변수: .env 파일을 사용해 API 키 등을 저장할 수 있습니다.

메타 태그 커스터마이징: 메타 태그를 쉽게 추가할 수 있어 SEO에 유리합니다.

이미지 최적화: next/image 컴포넌트를 사용해 이미지 최적화 및 지연 로딩을 지원합니다.

자동 코드 분할: 페이지 경계를 기준으로 JavaScript 번들을 분할해 초기 번들 크기를 줄이고 페이지 로딩 속도를 높입니다.

TypeScript 지원: 정적 타입을 제공해 타입 안정성을 높이고 툴링을 개선합니다.

CSS 지원: CSS 모듈, CSS-in-JS 라이브러리, 글로벌 CSS 파일, Tailwind CSS를 바로 사용할 수 있습니다.

빠른 새로고침 개발 서버: 개발 중 코드 변경에 즉각 반응하여 상태를 잃지 않고 피드백을 제공합니다.

9.환경설정

Node.js 설치: Next.js는 서버 사이드 코드를 실행하고 종속성을 관리하기 위해 Node.js가 필요합니다. nodejs.org에서 다운로드할 수 있습니다.
텍스트 에디터: 코드를 작성하기 위해 Visual Studio Code를 추천합니다. code.visualstudio.com에서 다운로드할 수 있으며, 크로스 플랫폼을 지원해 어떤 운영 체제에서도 사용할 수 있습니다.
Git 설치: 버전 관리를 위해 Git이 필요합니다. git-scm.com에서 다운로드하거나 운영 체제에 맞는 패키지 관리자를 사용할 수 있습니다.
React Dev Tools: 브라우저에서 상태와 props를 확인할 수 있는 도구입니다. 크롬이나 파이어폭스에서 사용할 수 있습니다.
MongoDB Compass: 데이터베이스의 데이터를 보기 위해 MongoDB Compass가 필요합니다. 나중에 설치할 수 있습니다.

Visual Studio Code 확장 추천

ES7 React Redux React Native Snippets: 유용한 스니펫을 제공하며, 주로 React 컴포넌트를 생성할 때 사용합니다.
Prettier: 코드 포매터로, 자동으로 코드를 정리해줍니다. 설정에서 format on save 옵션을 활성화하면 저장할 때마다 코드가 자동으로 정리됩니다.
JavaScript (ES6) code snippets: CLG를 입력하면 console.log를 생성하거나, Trycatch를 입력하면 try-catch 블록을 생성하는 등의 유용한 스니펫을 제공합니다.
Multiple Cursor Case Preserves: 여러 커서를 사용할 때 대소문자를 자동으로 유지해주는 기능입니다.

사용하지 않지만 추천하는 확장