2024. 12. 2. 13:40ㆍ프로젝트
이번에는 대학교 캡스톤 수업때 만든 맛집 정보 사이트를 정리해 보았습니다.
만들 맛집 정보 사이트는 사용자가 맛집지도를 통해 식당들을 탐색할 수 있고, 식당의 리뷰를 작성 탐색할 수 있으며,
설문조사를 통해 필터링을 통한 개개인의 입맛에 맞는 식당을 볼 수 있습니다.
대충 소개 하자면 이러한 기능들을 만들것이며 요구사항을 대략 적어보았습니다. 추후의 기능에 대해서는 나중에 적어보겠습니다.
프로젝트 전체 구성도는 다음과 같습니다.
프론트엔드 개발 도구는 React를 이용할것이면 리액트vite를 이용해 보겠습니다.
백엔드 개발 도구는 node.js express를 통해서 개발을 하였습니다.
데이터 베이스는 Postgresql을 통해서 개발하였습니다.
또한 백엔드 배포는 fly.io를 통해서 배포를 하였고
프론트는 vercel을 통해 배포하였습니다.
처음 개발하기전에 이런식으로 클라이언트 구성을 하고 시작하였습니다.
우선 개발을 하기전에 리액트 설치를 하고 시작하겠습니다.
폴더를 하나 생성하고 터미널을 열어서
npm create vite@latest
√ Project name: . or 생성할 폴더명(본인이름)
√ Package name: movie-app
√ Select a framework: » React
√ Select a variant: » JavaScript
npm install
npm run dev
를 해주고
# 스타일 컴포넌트
npm install styled-components
# 라우터
npm install react-router-dom
설치를 해주면 기본 설정은 끝납니다.
그다음에는 src안에 폴터를 pages폴더와 Comonents폴더를 만들어 줍니다.
를 만들어주고 페이지 폴더는 메인화면을 위한 Main폴더, 지도화면을 위한 Map폴더,
리뷰 화면을 위한 Review폴더, 커뮤니티를 위한 Community폴더를 만들어줍니다.
components 폴더는 페이지에따른 기능들을 모아둔다고 보면 될것같습니다.
다음 글부터는 각 페이지별로 기능들을 소개하면서 분석해보겠습니다.
'프로젝트' 카테고리의 다른 글
캡스톤 디자인 프로젝트 -맛집 정보 사이트 만들기- (3) 데이터 베이스 및 Postgresql (2) | 2024.12.02 |
---|---|
캡스톤 디자인 프로젝트 -맛집 정보 사이트 만들기- (2) (2) | 2024.12.02 |
노션 (자바스크립트) 클론 코딩 (6) 삭제 및 추가 구현하기 (1) | 2024.11.19 |
노션 (자바스크립트) 클론 코딩 (5) api 연결해서 글 불러오기 (0) | 2024.11.18 |
노션 (자바스크립트) 클론 코딩 (4) EditorPage - css수정 및 NewButton 만들기 (0) | 2024.11.16 |