마카로닉스

2221 No

25.2-Nextjs Pages Router 방식의 프로젝트 CRUD 처리 -★ 몽고 DB

2024-05-20 13:34:43 By 라이트 0 169 댓글수 0 포스트 하기

11월 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

소스: https://github.com/braverokmc79/nextjs-pages-router-sample

https://nextjs-pages-router-meetup.netlify.app/

477. 몽고 DB 로 작업하기

1 MongoDB Atlas 계정 생성 및 클러스터 설정

MongoDB Atlas 홈페이지 방문 및 무료 체험 시작: MongoDB Atlas 웹사이트에서 무료 체험 버튼을 클릭하여 계정을 만듭니다.
클러스터 생성:
- 기본 설정을 변경하지 않고 진행.
- Free Tier (M0 Sandbox) 선택.
- AWS 및 기본 영역 선택.
Network Access 설정:
- IP 주소 추가 버튼 클릭.
- 현재 IP 주소 추가.
Database Access 설정:
- 읽기 및 쓰기 권한을 가진 사용자를 생성

2. Next.js 프로젝트에서 MongoDB와의 연결 설정

MongoDB 드라이버 설치:

npm install mongodb

3.MongoDB 클러스터와 연결 설정:

MongoClient를 사용하여 MongoDB 클러스터에 연결.
연결 문자열에는 MongoDB Atlas에서 제공한 URI를 사용.
연결 시 사용자 이름과 비밀번호 입력.

const { MongoClient } = require('mongodb');

async function connectToDatabase() {
  const client = new MongoClient('your_connection_string_here');
  try {
    await client.connect();
    console.log('Connected to database');
    const db = client.db('meetups');
    const meetupsCollection = db.collection('meetups');
    return { client, meetupsCollection };
  } catch (error) {
    console.error('Connection failed', error);
    throw error;
  }
}

3. 데이터베이스에 데이터 삽입

데이터 삽입 함수 작성:
- 데이터베이스에 문서를 삽입하기 위해 insertOne 메서드 사용.

async function insertMeetup(data) {
  const { client, meetupsCollection } = await connectToDatabase();
  try {
    const result = await meetupsCollection.insertOne(data);
    console.log('Meetup inserted:', result.insertedId);
  } finally {
    await client.close();
  }
}

5. API 경로 설정 및 데이터 삽입 API 구현

API 경로 파일 생성:
- Node.js Express 서버 또는 Next.js API 경로를 사용하여 데이터 삽입 API 작성.

import { MongoClient } from 'mongodb';

async function handler(req, res) {
  if (req.method === 'POST') {
    const data = req.body;

    const client = new MongoClient('your_connection_string_here');
    await client.connect();
    const db = client.db('meetups');
    const meetupsCollection = db.collection('meetups');

    const result = await meetupsCollection.insertOne(data);
    await client.close();

    res.status(201).json({ message: 'Meetup inserted', result });
  }
}

export default handler;

6. 클라이언트에서 API 호출

API 호출 코드 작성:
- 클라이언트 측에서 데이터를 제출하여 API 경로로 요청을 보냄.

async function submitMeetup(meetupData) {
  const response = await fetch('/api/new-meetup', {
    method: 'POST',
    body: JSON.stringify(meetupData),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  const data = await response.json();
  console.log(data);
}

7.요약

MongoDB Atlas 클러스터를 생성하고 next.js 애플리케이션에서 MongoDB 드라이버를 사용하여 클러스터에 연결한 후,

API 경로를 통해 데이터를 삽입할 수 있습니다.

클라이언트 측에서는 API 경로로 요청을 보내어 데이터를 삽입합니다.

이 과정은 MongoDB Atlas 설정, 네트워크 접근 및 데이터베이스 접근 설정,

next.js 프로젝트에서 MongoDB 드라이버 설치 및 사용, 데이터 삽입 함수 작성,

그리고 API 경로 설정 및 클라이언트에서 API 호출로 구성됩니다.

478. API 경로로 Http 요청 보내기

1.Meetup 프로젝트

1)components/meetups/NewMeetupForm.js

import { useRef } from 'react';

import Card from '../ui/Card';
import classes from './NewMeetupForm.module.css';

function NewMeetupForm(props) {
  const titleInputRef = useRef();
  const imageInputRef = useRef();
  const addressInputRef = useRef();
  const descriptionInputRef = useRef();

  function submitHandler(event) {
    event.preventDefault();

    const enteredTitle = titleInputRef.current.value;
    const enteredImage = imageInputRef.current.value;
    const enteredAddress = addressInputRef.current.value;
    const enteredDescription = descriptionInputRef.current.value;

    const meetupData = {
      title: enteredTitle,
      image: enteredImage,
      address: enteredAddress,
      description: enteredDescription,
    };

    props.onAddMeetup(meetupData);
  }

  return (
    <Card>
      <form className={classes.form} onSubmit={submitHandler}>
        <div className={classes.control}>
          <label htmlFor='title'>Meetup 제목</label>
          <input type='text' required id='title' ref={titleInputRef} />
        </div>
        <div className={classes.control}>
          <label htmlFor='image'>Meetup 이미지</label>
          <input type='url' required id='image' ref={imageInputRef} />
        </div>
        <div className={classes.control}>
          <label htmlFor='address'>주소</label>
          <input type='text' required id='address' ref={addressInputRef} />
        </div>
        <div className={classes.control}>
          <label htmlFor='description'>설명</label>
          <textarea
            id='description'
            required
            rows='5'
            ref={descriptionInputRef}
          ></textarea>
        </div>
        <div className={classes.actions}>
          <button>Meetup 추가</button>
        </div>
      </form>
    </Card>
  );
}

export default NewMeetupForm;

2)pages/new-meetup/index.js

import NewMeetupForm from "@/components/meetups/NewMeetupForm";
import { useRouter } from "next/router";

function NewMeetupPage() {
  const router=useRouter();
  
  async function addMeetupHandler(enteredMeetupData) {

    const response=await fetch('/api/new-meetup',{
        method: 'POST',
        body: JSON.stringify(enteredMeetupData),
        headers: {
          'Content-Type': 'application/json'
        }
    });

    const data=await response.json();

    console.log(data);

    router.push("/");
    
  }

  return (
    <>
      <NewMeetupForm onAddMeetup={addMeetupHandler} />
    </>
  );
}

export default NewMeetupPage;

3)api/new-meetup.js

import { MongoClient } from "mongodb";
// /api/new-meetup
// POST /api/new-meetup

async function handler(req, res) {
  if (req.method === "POST") {
    const data = req.body;

    const clinet = await MongoClient.connect(
      "mongodb+srv://아이디:비번@mongo-macaronics.y37mjuf.mongodb.net/meetups?retryWrites=true&w=majority&appName=mongo-macaronics",
      { useNewUrlParser: true }
    );
    const db = clinet.db();

    const meetupsCollection = db.collection("meetups");

    const result=await  meetupsCollection.insertOne(data);

    console.log(result);    

    clinet.close();

    res.status(201).json({message:'Meetup is created successfully'});

  }
}

export default handler;

479. 데이터베이스에서 데이터 가져오기

pages/api/db/ConnMongoDB.js

//  pages/api/db/ConnMongoDB.js
import { MongoClient } from "mongodb";


export async function ConnMongoDB(){
    const clinet = await MongoClient.connect(
        "mongodb+srv://아이디:비번@mongo-macaronics.y37mjuf.mongodb.net/meetups?retryWrites=true&w=majority&appName=mongo-macaronics",
        { useNewUrlParser: true }
      );
    const db = clinet.db();
  
    const meetupsCollection = db.collection("meetups");
    return {meetupsCollection, clinet };
}

pages/index.js

import MeetupList from "@/components/meetups/MeetupList";
import { ConnMongoDB } from "./api/db/ConnMongoDB";

const DUMMY_MEETUPS = [
  {
    id: "m1",
    title: "A first meetup",
    image:
      "https://cdn.pixabay.com/photo/2024/05/11/06/47/tropical-8754092_1280.jpg",
    address: "Some address 1",
    description: "This is a first meetup",
  },
  {
    id: "m2",
    title: "A second meetup",
    image:
      "https://cdn.pixabay.com/photo/2024/04/08/19/54/coffee-8684315_1280.jpg",
    address: "Some address 2",
    description: "This is a second meetup",
  },
];

function HomePage(props) {
  return <MeetupList meetups={props.meetups} />;
}



export async function getStaticProps() {
  const { meetupsCollection, clinet } = await ConnMongoDB();
  const meetups = await meetupsCollection.find().toArray();
  clinet.close();

  return {
    props: {
      meetups: meetups.map(meetup=>({
          title:meetup.title,
          address:meetup.address,
          //description:meetup.description,
          image:meetup.image,
          id:meetup._id.toString()
      })),
    },
    revalidate: 1,
  };
}

export default HomePage;

ConnMongoDB 함수로 MongoDB에 연결합니다.
meetupsCollection.find().toArray()를 사용하여 모든 meetup 데이터를 배열로 가져옵니다.
MongoDB에서 가져온 meetups 데이터를 필요한 속성만 추출하여 props로 설정합니다.
revalidate는 1초마다 페이지를 새로 고침하여 최신 데이터를 유지합니다.

전체 동작 방식

Next.js는 getStaticProps 함수를 실행하여 빌드 시 또는 페이지 요청 시 MongoDB에서 데이터를 가져옵니다.
가져온 데이터를 HomePage 컴포넌트의 props로 전달합니다.
HomePage 컴포넌트는 MeetupList 컴포넌트를 사용하여 meetups 데이터를 렌더링합니다.
revalidate 옵션으로 1초마다 데이터를 새로 고침하여 최신 상태를 유지합니다.

480. Meetup 세 정보 데이터 가져오기 및 페이지 준비하기

pages/[meetupId]/index.js

import MeetupDetail from "@/components/meetups/MeetupDetail";
import { useRouter } from "next/router";
import { ConnMongoDB } from "../api/db/ConnMongoDB";
import { ObjectId } from "mongodb";

function MeetUpDeailPage(props) {
  const router = useRouter();

  if (router.isFallback) {
    return <p>Loading...</p>;
  }

  const { id, image, title, address, description}=  props.meetupData;


  return (    
    <MeetupDetail   
      id={id}   
      title={title}
      image={image}
      address={address}
      description={description}
    />
  );
}

export async function getStaticPaths() {

  const {meetupsCollection, client } =await ConnMongoDB();
  const meetups=await meetupsCollection.find({}, { _id: 1}).toArray();
  client.close();
  
  return {
    fallback: false,         
    paths: meetups.map(meetup => ({params :{meetupId : meetup._id.toString() }}))
  }
  
    // return {
    //   fallback: false,
    // paths: [
    //   {
    //     params: {
    //       meetupId: "m1",
    //     },
    //   },
    //   {
    //     params: {
    //       meetupId: "m2",
    //     },
    //   },
    // ],
  //};
}

export async function getStaticProps(context) {

  const meetupId = context.params.meetupId;
  const {meetupsCollection, client } =await ConnMongoDB();

  const selectedMeetup = await meetupsCollection.findOne({ _id: new ObjectId(meetupId) });

  client.close();
  
  return {
    props:{
      meetupData: {
          id:selectedMeetup._id.toString(),
          title:selectedMeetup.title,
          image:selectedMeetup.image,
          address:selectedMeetup.address,
          description:selectedMeetup.description,
      },
      revalidate: 1,
    }
  }


  // return {    
  //   props: {
  //     meetupData: {
  //       title: "A second meetup",
  //       image:
  //         "https://cdn.pixabay.com/photo/2024/04/08/19/54/coffee-8684315_1280.jpg",
  //       address: "Some address 2",
  //       description: "This is a second meetup",
  //       id: meetupId,
  //     },
  //     revalidate: 1, 
  //   },
  // };
}

export default MeetUpDeailPage;

구성 요소 및 기능 설명

1. MeetupDetail 컴포넌트

Meetup의 세부 정보를 표시하는 컴포넌트입니다. @/components/meetups/MeetupDetail 경로에서 가져옵니다.

import MeetupDetail from "@/components/meetups/MeetupDetail";

2. useRouter 훅

Next.js의 useRouter 훅을 사용하여 라우팅과 관련된 기능을 제공합니다.
router.isFallback을 사용하여 빌드 시 경로가 아직 생성되지 않은 경우 로딩 상태를 처리합니다.

import { useRouter } from "next/router";

3. ConnMongoDB 함수

MongoDB에 연결하는 함수입니다. ../api/db/ConnMongoDB 경로에서 가져옵니다.

import { ConnMongoDB } from "../api/db/ConnMongoDB";

4. ObjectId 클래스

MongoDB에서 문서의 _id 필드를 다루기 위해 mongodb 패키지에서 ObjectId를 가져옵니다.

import { ObjectId } from "mongodb";

5. MeetUpDeailPage 컴포넌트

특정 meetup의 세부 정보를 렌더링하는 페이지 컴포넌트입니다.
router.isFallback을 사용하여 로딩 상태를 처리합니다.

function MeetUpDeailPage(props) {
  const router = useRouter();

  if (router.isFallback) {
    return <p>Loading...</p>;
  }

  const { id, image, title, address, description } = props.meetupData;

  return (
    <MeetupDetail
      id={id}
      title={title}
      image={image}
      address={address}
      description={description}
    />
  );
}

6. getStaticPaths 함수

Next.js의 getStaticPaths를 사용하여 정적 생성할 경로를 정의합니다.
MongoDB에서 모든 meetup의 _id를 가져와 paths를 생성합니다.

export async function getStaticPaths() {
  const { meetupsCollection, client } = await ConnMongoDB();
  const meetups = await meetupsCollection.find({}, { _id: 1 }).toArray();
  client.close();

  return {
    fallback: false,
    paths: meetups.map(meetup => ({
      params: { meetupId: meetup._id.toString() }
    }))
  };
}

fallback: false로 설정하면, 지정된 경로 외의 다른 경로는 404 페이지를 표시합니다.
모든 meetup의 _id를 가져와 params 객체로 변환하여 paths를 생성합니다.

7. getStaticProps 함수

Next.js의 getStaticProps를 사용하여 빌드 시 meetup 데이터를 가져와 props로 전달합니다.
context.params를 통해 동적 경로 매개변수를 가져옵니다.

export async function getStaticProps(context) {
  const meetupId = context.params.meetupId;
  const { meetupsCollection, client } = await ConnMongoDB();

  const selectedMeetup = await meetupsCollection.findOne({ _id: new ObjectId(meetupId) });

  client.close();

  return {
    props: {
      meetupData: {
        id: selectedMeetup._id.toString(),
        title: selectedMeetup.title,
        image: selectedMeetup.image,
        address: selectedMeetup.address,
        description: selectedMeetup.description,
      },
      revalidate: 1,
    }
  };
}

context.params.meetupId를 사용하여 특정 meetup의 ID를 가져옵니다.
MongoDB에서 해당 ID를 가진 meetup 데이터를 찾고, 필요한 정보를 props로 전달합니다.
revalidate를 통해 1초마다 페이지를 다시 생성하여 최신 데이터를 유지합니다.

전체 동작 방식

정적 경로 생성 (getStaticPaths):
- MongoDB에서 모든 meetup의 ID를 가져와 paths를 생성합니다.
- fallback: false로 설정하여 지정된 경로 외의 다른 경로는 404 페이지를 표시합니다.
정적 데이터 생성 (getStaticProps):
- context.params.meetupId를 사용하여 특정 meetup의 데이터를 MongoDB에서 가져옵니다.
- 가져온 데이터를 props로 설정하여 MeetUpDeailPage 컴포넌트에 전달합니다.
- 1초마다 페이지를 다시 생성하여 최신 데이터를 유지합니다.
페이지 렌더링 (MeetUpDeailPage):
- useRouter를 사용하여 라우팅과 로딩 상태를 처리합니다.
- props로 전달받은 데이터를 MeetupDetail 컴포넌트에 전달하여 meetup의 세부 정보를 렌더링합니다.

이를 통해 사용자는 특정 meetup의 세부 정보를 볼 수 있으며, 데이터는 MongoDB에서 가져와 최신 상태를 유지합니다.

481. "head" 메타 데이터 추가하기

pages/[meetupId]/index.js

  return (
    <Fragment>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </Head>
      <MeetupDetail
        id={id}
        title={title}
        image={image}
        address={address}
        description={description}
      />
    </Fragment>
  );

1. next/head 모듈 임포트

먼저 next/head 모듈을 페이지 컴포넌트에 임포트합니다.

import Head from 'next/head';

2. Head 컴포넌트 사용

Head 컴포넌트를 사용하여 메타데이터를 추가합니다. 예를 들어, 제목과 메타 태그를 추가하는 방법은 다음과 같습니다.

import Head from 'next/head';

function HomePage() {
  return (
    <>
      <Head>
        <title>My Awesome Meetup</title>
        <meta name="description" content="This is a description of my awesome meetup page." />
        <meta property="og:title" content="My Awesome Meetup" />
        <meta property="og:description" content="This is a description of my awesome meetup page." />
        <meta property="og:image" content="/images/meetup-image.jpg" />
        <meta property="og:url" content="https://myawesomewebsite.com/meetup" />
        <meta name="twitter:card" content="summary_large_image" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        {/* 페이지 내용 */}
      </main>
    </>
  );
}

export default HomePage;

설명

Head 컴포넌트: Head 컴포넌트 안에 모든 메타데이터 태그를 추가합니다.
<title> 태그: 페이지의 제목을 설정합니다.
메타 태그들:
- <meta name="description" ... />: 페이지 설명을 설정합니다.
- <meta property="og:title" ... />: Open Graph 제목을 설정합니다 (소셜 미디어 공유 시).
- <meta property="og:description" ... />: Open Graph 설명을 설정합니다.
- <meta property="og:image" ... />: Open Graph 이미지 URL을 설정합니다.
- <meta property="og:url" ... />: Open Graph URL을 설정합니다.
- <meta name="twitter:card" ... />: Twitter 카드 타입을 설정합니다.
파비콘: <link rel="icon" href="/favicon.ico" />를 사용하여 파비콘을 설정합니다.

이렇게 하면 해당 페이지를 렌더링할 때, Next.js가 <head> 섹션에 지정한 메타데이터를 포함하게 됩니다.

동적 메타데이터

동적 메타데이터를 설정하려면 getStaticProps 또는 getServerSideProps를 사용하여 데이터를 가져온 후, 해당 데이터를 Head 컴포넌트에 사용합니다.

import Head from 'next/head';
import { ConnMongoDB } from './api/db/ConnMongoDB';

function MeetupDetailPage({ meetupData }) {
  return (
    <>
      <Head>
        <title>{meetupData.title}</title>
        <meta name="description" content={meetupData.description} />
        <meta property="og:title" content={meetupData.title} />
        <meta property="og:description" content={meetupData.description} />
        <meta property="og:image" content={meetupData.image} />
        <meta property="og:url" content={`https://myawesomewebsite.com/meetup/${meetupData.id}`} />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <main>
        {/* 페이지 내용 */}
      </main>
    </>
  );
}

export async function getStaticProps(context) {
  const meetupId = context.params.meetupId;
  const { meetupsCollection, client } = await ConnMongoDB();
  const selectedMeetup = await meetupsCollection.findOne({ _id: new ObjectId(meetupId) });
  client.close();

  return {
    props: {
      meetupData: {
        id: selectedMeetup._id.toString(),
        title: selectedMeetup.title,
        image: selectedMeetup.image,
        address: selectedMeetup.address,
        description: selectedMeetup.description,
      },
    },
    revalidate: 1,
  };
}

export default MeetupDetailPage;

이렇게 하면 동적으로 데이터를 가져와 <head> 섹션에 반영할 수 있습니다.

482. Next.js 프로젝트 배포하기

1. Vercel 계정 생성 및 로그인

Vercel 웹사이트로 이동합니다.
계정이 없으면 "Sign Up" 버튼을 클릭하여 가입합니다.
- GitHub, GitLab, Bitbucket 계정으로 가입 및 로그인할 수 있습니다.
이미 계정이 있다면 "Login" 버튼을 클릭하여 로그인합니다.

2. Next.js 프로젝트 준비

Next.js 프로젝트가 없는 경우, 다음 명령어로 새로운 프로젝트를 생성할 수 있습니다:

npx create-next-app my-next-app
cd my-next-app

3. Git 저장소에 프로젝트 푸시

Git 저장소를 생성합니다 (GitHub, GitLab 또는 Bitbucket에서).
로컬 프로젝트 디렉토리에서 Git 초기화 및 원격 저장소에 프로젝트를 푸시합니다.

git init
git add .
git commit -m "Initial commit"
git remote add origin <your-repository-url>
git push -u origin main

4. Vercel에서 새로운 프로젝트 생성

Vercel 대시보드에서 "New Project" 버튼을 클릭합니다.
Git 제공자(GitHub, GitLab, Bitbucket)와 연결하여 배포할 저장소를 선택합니다.

5. 프로젝트 임포트

배포할 저장소를 선택한 후 "Import" 버튼을 클릭합니다.
Vercel이 자동으로 프로젝트 설정을 감지합니다. 기본적으로 설정된 값을 사용할 수 있습니다.

6. 빌드 설정 확인

Vercel은 Next.js 프로젝트를 자동으로 인식하고 기본 빌드 설정을 적용합니다.

Build Command: next build
Output Directory: .next

특정 설정이 필요한 경우 이 단계에서 수정할 수 있습니다.

7. 환경 변수 설정 (필요한 경우)

프로젝트에 필요한 환경 변수가 있다면 Vercel 대시보드에서 설정할 수 있습니다.

Vercel 대시보드에서 배포된 프로젝트를 선택합니다.
"Settings" 탭으로 이동합니다.
"Environment Variables" 섹션에서 환경 변수를 추가합니다.

8. 배포 트리거

프로젝트를 Vercel에 연결하고 저장소에 푸시하면 자동으로 배포가 트리거됩니다.
모든 푸시마다 Vercel이 프로젝트를 다시 빌드하고 배포합니다.

git add .
git commit -m "Update project"
git push origin main

9. 배포 확인

배포가 완료되면 Vercel 대시보드에서 프로젝트의 URL을 확인할 수 있습니다.
제공된 URL을 방문하여 Next.js 애플리케이션이 올바르게 작동하는지 확인합니다.

10. 추가 설정 및 관리

도메인 연결: Vercel 대시보드에서 사용자 정의 도메인을 프로젝트에 연결할 수 있습니다.
- "Domains" 탭에서 도메인을 추가하고 설정을 완료합니다.
배포 미리보기: PR을 생성하면 Vercel이 자동으로 미리보기 URL을 생성하여 변경 사항을 확인할 수 있습니다.
프로젝트 설정: "Settings" 탭에서 프로젝트의 기타 설정을 관리할 수 있습니다.

도메인 설정

Vercel 대시보드에서 프로젝트를 선택합니다.
"Settings" 탭으로 이동하여 "Domains" 섹션으로 스크롤합니다.
"Add Domain" 버튼을 클릭하고 사용자 정의 도메인을 입력합니다.
도메인 제공자의 DNS 설정에서 Vercel이 제공하는 CNAME 또는 A 레코드를 추가합니다.

지속적인 배포

Vercel은 기본적으로 지속적인 배포를 지원합니다. 코드 변경 사항을 Git 저장소에 푸시하면 Vercel이 자동으로 빌드 및 배포를 트리거합니다.

git add .
git commit -m "Update project"
git push origin main

이 과정을 통해 Next.js 애플리케이션을 Vercel을 통해 쉽게 배포하고 관리할 수 있습니다.

Vercel의 강력한 기능과 간편한 사용법 덕분에 빠르게 프로덕션 수준의 웹사이트를 운영할 수 있습니다.

React

25.2-Nextjs Pages Router 방식의 프로젝트 CRUD 처리 -★ 몽고 DB

PHRASE

Level 60 라이트

댓글 ( 0)

댓글 남기기

Categories

React Recent List more

Tags Widget

Welcome

React 목록 more

11월 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

11월 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

11월 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