윤스페이스 : 일상을 기록합니다.

이 포스팅은 https://blog.strapi.io/strapi-next-setup/ 에 있는 포스팅을 번역한 것 입니다.

오역이나 의역을 지적해주시면 확인 후 수정하겠습니다.


이 포스팅은 'Next.JS(React)와 GraphQL로 Deliveroo 클론하기'의 연재작 입니다.

Next.JS(React)와 GraphQL로 Deliveroo 클론하기 | 01. 🏗️ 기본 셋업

Next.JS(React)와 GraphQL로 Deliveroo 클론하기 | 02. 🏠 음식점 리스트 만들기

Next.JS(React)와 GraphQL로 Deliveroo 클론하기 | 03. 🍔 음식 리스트 만들기

Next.JS(React)와 GraphQL로 Deliveroo 클론하기 | 04. 🔐 회원 인증

Next.JS(React)와 GraphQL로 Deliveroo 클론하기 | 05. 🛒 장바구니 만들기


이 튜토리얼에서는 음식 배달 플랫폼인 Deliveroo를 클론하려 합니다. 한국에서 흔히 사용하는 배달의민족, 요기요와 같은 플랫폼인데, 이러한 플랫폼을 클론해보며 React(Next.JS)와 GraphQL 기본기를 다져볼 예정입니다. 

 

튜토리얼에서 사용하는 기술

  • Next.JS (React.JS)
  • GraphQL
  • Stripe
  • Strapi

 

데모

(모든 강의 포스팅 이후 업로드 예정입니다.)

 

소스코드

(모든 강의 포스팅 이후 업로드 예정입니다.)

 

🏗️ 기본 셋업 

Next

Next로 프로젝트를 셋팅하기 위해서는 프로젝트를 호스팅 할 빈 폴더가 필요합니다. 프론트엔드(Next.JS) 디렉터리와 백엔드(Strapi) 디렉터리를 나눠주세요.

 ~/project > mkdir nextjs-tutorial
 ~/project > cd nextjs-tutorial
 ~/project/nextjs-tutorial > mkdir frontend
 ~/project/nextjs-tutorial > cd frontend
 
 ~/project/nextjs-tutorial/frontend > npm init
 ~/project/nextjs-tutorial/frontend > npm install next react react-dom

 

next, react, react-dom 패키지를 npm으로 설치 후 package-json 파일을 수정해줍니다.

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

 

Next.JS는 페이지를 모두 /pages 디렉터리에서 불러옵니다. pages 디렉터리를 만들고 index.js 파일을 만들어주세요.

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

 

아래의 코드를 터미널에 입력하고 서버를 테스트해봅시다.

 ~/project/nextjs-tutorial/frontend > npm run-script dev

 

localhost:3000에 접속해서 아래와 같은 화면이 뜨면 정상적으로 셋팅이 완료된 것 입니다.

 

루트에 .gitignore 파일을 아래와 같은 내용으로 생성해줍니다.

node_modules  
.next

 

부트스트랩 추가하기

이 튜토리얼에서는 부트스트랩으로 스타일링 하려 합니다. 아래의 코드를 터미널에서 실행해주세요.

 ~/project/nextjs-tutorial/frontend > npm install reactstrap bootstrap

 

부트스트랩이 정상적으로 설치되었나 확인하기 위해 pages 디렉터리에서 _app.js 파일을 아래와 같은 내용으로 생성해줍니다.

import React from "react";
import App, { Container } from "next/app";
import Head from "next/head";


export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Head>
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossOrigin="anonymous"
          />
        </Head>

        <Container>
          <Component {...pageProps} />
        </Container>
      </>
    );
  }
}

 

index.js 파일도 수정해줍니다.

import { Button, Alert } from "reactstrap";

export default () => {  
  return (
    <div>
      <div>
        <Alert color="primary">
          Hello Project is strapi-next with Bootstrap
        </Alert>
        &nbsp; <Button color="primary">Hello from nextjs</Button>
      </div>
    </div>
  );
};

 

아래의 코드를 터미널에 입력하고 서버를 테스트해봅시다.

 ~/project/nextjs-tutorial/frontend > npm run-script dev

 

localhost:3000에 접속해서 아래와 같은 화면이 뜨면 정상적으로 설치가 완료된 것 입니다.

 

페이지 디자인하기

이제 부트스트랩을 사용할 수 있으니 상단 메뉴 바를 만들어보려 합니다. components 폴더를 만들고 Layout.js 파일을 아래와 같은 코드로 생성합니다.

/* /components/Layout.js */

import React from "react";
import Head from "next/head";
import Link from "next/link";

import { Container, Nav, NavItem } from "reactstrap";

class Layout extends React.Component {
  constructor(props) {
    super(props);
  }
  static async getInitialProps({ req }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }
  render() {
    const { children } = this.props;
    const title = "Welcome to Nextjs";
    return (
      <div>
        <Head>
          <title>{title}</title>
          <meta charSet="utf-8" />
          <meta
            name="viewport"
            content="initial-scale=1.0, width=device-width"
          />
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossOrigin="anonymous"
          />
          <script src="https://js.stripe.com/v3" />
        </Head>
        <header>
          <Nav className="navbar navbar-dark bg-dark">
            <NavItem>
              <Link href="/">
                <a className="navbar-brand">Home</a>
              </Link>
            </NavItem>

            <NavItem className="ml-auto">
              <Link href="/signin">
                <a className="nav-link">Sign In</a>
              </Link>
            </NavItem>

            <NavItem>
              <Link href="/signup">
                <a className="nav-link"> Sign Up</a>
              </Link>
            </NavItem>
          </Nav>
        </header>
        <Container>{children}</Container>
      </div>
    );
  }
}

export default Layout;

 

index.js 파일도 수정해줍니다.

import { Button, Alert } from "reactstrap";
import Layout from "../components/Layout";
export default () => {
  return (
    <Layout>
      <div>
        <Alert color="primary">
          Hello Project is strapi-next with Bootstrap
        </Alert>
        &nbsp; <Button color="primary">Hello from nextjs</Button>
      </div>
    </Layout>
  );
};

 

이제 localhost:3000에 접속해보면 상단 메뉴 바가 나와야 합니다.

 

사용자가 가입과 로그인이 가능하도록 두개의 페이지를 만들겁니다.

pages 디렉터리에 signin.js와 signup.js 파일을 아래와 같은 코드로 생성합니다.

/* pages/signup.js */

import Layout from '../components/Layout'

export default () => {  
  return (
    <Layout>
      <h1>Sign Up</h1>
    </Layout>
  )
}
/* pages/signin.js */

import Layout from "../components/Layout";

export default () => {
  return (
    <Layout>
      <h1>Sign In</h1>
    </Layout>
  );
};

 

localhost:3000에 접속했을 때 아래와 같이 표시되어야 정상적으로 셋팅된 것 입니다.

Strapi

Strapi는 REST API를 쉽게 만들 수 있게 도와주는 CMS 툴입니다. 특히 MongoDB와의 연결이 가능하고 GraphQL이 기본적으로 제공되기에 편리하게 백엔드 서버를 구축할 수 있습니다. 

 

아래의 코드를 터미널에 입력해 Strapi를 설치해주세요.

 > npm i strapi@alpha -g  

 

Strapi 프로젝트를 시작해봅시다.

 ~/project/nextjs-tutorial > strapi new backend
 
🚀 Starting to create your Strapi application.

? Choose your installation type Custom (manual settings)
? Choose your main database: MongoDB
? Database name: backend
? Host: 127.0.0.1
? +srv connection: false
? Port (It will be ignored if you enable +srv): 27017
? Username:
? Password:
? Authentication database (Maybe "admin" or blank):
? Enable SSL connection: false

⏳ Testing database connection...
It might take a minute, please have a coffee ☕️

The app has been connected to the database successfully!

 ~/project/nextjs-tutorial > cd backend
 ~/project/nextjs-tutorial/backend > strapi start

 

localhost:1337/admin에 접속해서 새로운 유저를 만들어주세요.

이번 포스팅에서는 프로젝트 기본 셋팅하는 방법을 알아봤습니다. 

 

질문은 댓글로 남겨주시면 최대한 빠른 시간 안에 답변드리겠습니다.

 

포스팅 읽어주셔서 감사합니다 😁