🍝 Next로 Delivero 클론을 만듭니다.js(React), GraphQL, Strapi 및 Stripe-🏗️ 설정 (1/7 섹션)

이 강좌는 다음 단계에 적용될 것이다.GraphQL, Stripe, Strapi, React 컨텍스트를 포함한 프런트엔드 Nuxt(Vue)의 js(React)
놀라운 기술로 Deliveroo 클론 개발 준비: Next.js React,GraphQL,Stripe,Strapi!등록부터 주문까지 식당, 요리를 발견하고 즐거운 정식을 선택할 수 있습니다.

최종 결과의 프레젠테이션은 당신을 배고프게 할 것이다.

참고: *소스 코드*는 GitHub에서 사용할 수 있습니다.https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.
최종 제품 캡처:

스텔라피:

Strapi 는 가장 선진적인 개원 노드이다.js Headless 콘텐츠 관리 시스템은 확장 가능하고 안전하며 생산 가능한 API를 신속하고 효율적으로 구축하는 데 사용되며 개발자들에게 무수한 개발 시간을 절약했다.
확장 가능한 플러그인 시스템으로 관리 패널, 인증 및 권한 관리, 컨텐츠 관리, API 생성기 등 다양한 내장 기능을 제공합니다. 온라인 CMS와 달리 Strapi는 100% 소스로 제공됩니다 GitHub repository.

스텔라피는 완전히 자유롭다.

자신의 서버에 위탁 관리할 수 있기 때문에 데이터를 가지고 있습니다.

플러그인 시스템으로 인해 사용자 정의 및 확장이 가능합니다.

다음js:

Next 는 경량급 개발 프레임워크로 React에서 정적, 서버가 보여주는 응용 프로그램을 만드는 데 사용됩니다.다음js는 코드 분할, HMR(열모듈 교체), SSR(서버측 렌더링) 등 응용 프로그램의 무거운 업무를 맡고 응용 프로그램에 집중할 수 있습니다.

반응:

React는 가장 유행하는 전단 자바스크립트 프레임워크 중 하나로 페이스북에서 개발되었고 수많은 과학기술회사(Netflix, Airbnb, Github 포함)에 의해 응용 프로그램 구축에 사용되었다.React는 성명성 라이브러리로 상호작용식 사용자 인터페이스를 쉽게 만들 수 있으며 구성 요소를 바탕으로 하는 체계 구조를 통해 코드 라이브러리의 조직을 유지할 수 있다.

그래픽 QL:

GraphQL는 페이스북이 개발한 조회 언어로 응용 프로그램의 앞부분에서 쉽게 응용 프로그램을 조회할 수 있도록 하는 API이다.모든 조회는 현재 보기에서 보여야 할 데이터만 요청합니다.이로써 개발자는 다양한 장치와 화면 크기를 뛰어넘어 뛰어난 사용자 체험을 할 수 있다.

줄무늬:

Stripe는 현재 응용되고 있는 결제 프로세서 중의 하나이다.Stripe는 이러한 도구와 SDK를 개발하여 개발자가 안전하고 규정에 맞는 지불 처리를 모든 응용 프로그램에 쉽게 융합시킬 수 있도록 한다.

카탈로그

🏗️ (1부) - 전류

🏠 (섹션 2)

🍔 (3 섹션)

🔐 (4섹션)

🛒 (제5부)

💵 (6 섹션)

🚀 (7 섹션)
## 🏗️ 설정

다음 설정.라이브러리를 설치하고 프로젝트 루트를 관리할 빈 디렉터리가 필요합니다.
우리는 항목을 두 부분으로 나눌 것이다. 일부는 앞부분(Next.js 코드)에 사용되고, 다른 일부는 뒷부분(Strapi 코드)에 사용된다.

mkdir strapi-deliveroo
cd strapi-deliveroo
mkdir frontend
cd frontend

yarn add next react react-dom

주의: 저는 yarn을 패키지 관리자로 사용합니다. 당신도 npm와executenpm install --save next react react-dom를 사용할 수 있습니다.package.json 파일에 다음 내용을 추가합니다.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

따라서 파일은 다음과 같습니다(설치 시간에 따라 패키지 종속성에 따라 버전이 다를 수 있습니다).

{
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

다음js는 /pages 디렉터리에 있는 JavaScript 파일을 응용 프로그램의 루트로 사용합니다.설정을 하려면 /pages 디렉터리를 만들고 index.js 파일을 추가하면 됩니다.

mkdir pages
cd pages
touch index.js

이제 기본 경로 (index.js) 가 생겼습니다. 브라우저 URL이 루트 디렉터리에 있을 때마다 (즉, www.yourapp.com 불러옵니다.이를 테스트하기 위해 색인에 다음 내용을 삽입할 수 있습니다.js 파일:

export default () => <div>Welcome to next.js!</div>

실행 중인 프로그램을 보려면 다음 명령을 사용하여 로컬 dev 서버를 시작합니다.

yarn dev

응용 프로그램은 지금 http://localhost:3000 에서 볼 수 있을 것입니다.
프로젝트 루트 디렉터리.gitignore를 만들고 .next 및 node_modules 디렉터리를 추가해야 합니다.

cd ..
touch .gitignore

/* .gitignore */
node_modules
.next

부트 추가
이 강좌에서는 응용 프로그램에서 Bootstrap 4를 구현하기 위해 react-strap 를 사용합니다.CSS 스타일의 경우 CDN에서 직접 가져옵니다.
먼저 Reactstrap 설치:

yarn add reactstrap bootstrap

reactstrap은 프런트엔드 라이브러리일 뿐입니다. 안내 구성 요소와 스타일을 쉽게 만들 수 있습니다.
CSS를 가져오고 모든 페이지에서 레이아웃 구성 요소를 공유하기 위해 페이지 디렉터리에 사용자 정의 _app.js 파일을 사용합니다.
이 파일은 기본 응용 프로그램을 덮어쓰는 데 사용됩니다.다음 js를 사용하고 모든 페이지에 보여줍니다. 전역 스타일/공유 구성 요소를 한 위치에서 설정할 수 있습니다.
여기에서 _app.js 처리에 대한 더 많은 정보를 읽을 수 있습니다: https://nextjs.org/docs/#custom-app.
이렇게 하면 구성 요소 <Head> 를 가져오고 제목 안에 스타일시트를 전역적으로 설정할 수 있습니다.

cd pages
touch _app.js

경로: /frontend/pages/_app.js

현재, 만약 우리가 index.js에reactstrap 구성 요소를 추가한다면, 서버를 다시 시작한 후에 응용하는 안내 스타일을 보아야 합니다

경로: /frontend/pages/index.js

새 변경 사항을 적용하기 위해 서버를 다시 시작합니다

Designing the page

현재 우리는 다음 중 안내 프로그램을 실행했습니다.js 프로젝트에서 우리는 기본적인 공유 전단 구성 요소, 예를 들어navbar

우선 폴더를 만들어서 우리 구성 요소를 저장하고 레이아웃 구성 요소를 만듭니다.

cd ..
mkdir components
cd components
touch Layout.js

Nextjs는 <Link> 구성 요소를 사용하여 페이지 사이에서 클라이언트 루트를 실행합니다.링크 구성 요소는 고급 구성 요소일 뿐, onClick 처리 프로그램을 처리할 수 있는 html 표시<a>, <button>, <div> 등을 받아들일 수 있습니다

이것은 우리가reactstrap 문서 밖에서 약간의 수정을 해야만 하는 것을 초래할 것이다.네비게이션 표시줄을 설계하기 위해서, 우리는 nextjs가 기본적으로 첨부한 내장 CSS-in-JS<style jsx>를 사용할 수 있습니다

JS에 CSS 삽입:

<style jsx> {`
  a { color: yellow }
`}
</style>

를 사용하면 CSS 범위를 스타일 태그가 표시되는 구성 요소로 확장할 수 있습니다. 전역 옵션을 불러와서 전역 스타일을 설정할 수 있습니다: <style jsx global>

다음 문서here에서 JS의 CSS에 대한 더 많은 내용을 읽을 수 있습니다

Layout.js 파일을 열고 공유 레이아웃 구성 요소를 만들고 테이프 스크립트를 삽입합니다. (잠시 후 사용) 다음과 같습니다.

경로: /frontend/components/Layout.js

새 레이아웃 구성 요소를 사용하기 위해 파일 편집index.js:

경로: /frontend/pages/index.js

현재 모든 페이지에 공유 제목 표시줄이 있어야 합니다:

우리는 사용자가 각각 /signin과 /signup에 로그인할 수 있도록 다른 두 페이지를 만들 것이다

next가 루트를 식별하기 위해 /pages 디렉터리에 해당하는 파일을 만들어야 합니다

cd ..
cd pages

touch signin.js
touch signup.js

아래 코드로 파일을 채우면 Strapi 서버를 설정한 후 이 코드로 돌아갑니다

경로: /frontend/pages/signup.js

경로: /frontend/pages/signin.js

당신은 지금 http://localhost:3000에서 노선을 볼 수 있을 것입니다

Strapi

전면은 좋지만, 당신의 응용 프로그램은 분명히 사용자, 식당, 요리와 주문을 관리하는 백엔드가 필요합니다.이 기적을 이루기 위해 Strapi

Install Strapi

요구사항: 사용Node 9(또는 그 이상)을 확인하고 기계에 설치/실행MongoDB,Postgres 또는 MySQL

npm를 사용하여 Strapi 설치:

npm i strapi@alpha -g

주의: Strapi v3는 여전히 알파 버전이지만 본 강좌에서 사용할 수 있습니다

Generate a Strapi project

단일 명령행을 통해 strapi-deliveroo API를 구축합니다:

backend라는 디렉터리에 strapi 서버 설치:

cd ..
cd ..
strapi new backend

CLI에서 데이터베이스를 선택해야 합니다: MongoDB, Postgres 또는 MySQL을 선택하십시오.그리고 데이터베이스 정보를 작성합니다. (선택한 데이터베이스가 몬고가 아니라면 앞의 GraphQL 조회에서 _id 필드를 id로 변경해야 합니다.)만약 컴퓨터에 데이터베이스 시스템을 정확하게 설치했다면 기본값은 유효해야 합니다

주의: 본 강좌는 MongoDB를 사용합니다. strapi 프로젝트를 만들면 strapi 서버를 시작하기 전에 Mongo 실례를 시작하라고 합니다.

MongoDB 설치 탐색(MacOS의 기본 설정)

cd ~./data/db
mongod

로컬 시스템에서 MongoDB 서버를 시작합니다. 이제 Strapi 서버를 시작할 수 있습니다

Start the server

시작 노드.js 서버:

cd backend
strapi start

지금부터 프로젝트의 관리 패널에 접근할 수 있어야 합니다: http://localhost:1337/admin

Create your first User

registration page에서 첫 번째 사용자 추가

잘했습니다. 다음 설정을 성공적으로 했습니다.js와 Strapi 프로젝트!🎉

🏠 다음 절에서 당신은 식당 목록을 어떻게 표시하는지 배울 것입니다: