[개발] 캐플라이어 백엔드 구성하기

메인 화면의 배너 부분을 구현하고 싶었는데,

목업 데이터를 만들기 전에 우선 회원과 글의 스키마 구조를 정의해야 할 뿐더러,

목업 데이터를 API와 연결해야 할 것 같아 이참에 백엔드 구성 방법을 찾아보았다.

 

우선 백엔드에 대한 작업을 시작하기 전에,

클라이언트 단에서 백엔드의 데이터를 어떤식으로 Fetching을 하면 좋을 지 찾아보았다.

Date Fetching 

Next.js 13 버전 - Data Fetching (velog.io)

윗 글을 참고하였고, 몇 가지 중요한 부분들을 정리하겠다.

[번역] React Server vs Client Component in Next.js 13 (velog.io)

[번역] React Server vs Client Component in Next.js 13

추가적으로, server component와 client compoent의 차이와 그 사이의 데이터 전달에 관련된 글도 읽어봐도 좋았다.

1. Server Component와 Client Component의 차이점

Server Compoent	Client Component
onClick 등의 이벤트를 포함 할 수 없다. state, useState 와 같은 상태를 관리 할 필요가 없다. 서로 상호작용하지 않는다.	onClick 등의 이벤트를 포함한다. state, useState를 통해 클라이언트 단에서 상태를 관리한다. 서로 props 등을 통해 상호작용한다.

정리하자면, Server Component는 기존의 React App과 다르게 서버 단에서 API 요청을 한 번에 처리 후 (큰 장점),

해당 결과를 클라이언트 단에 정적인 결과로만 나타나게 된다.

Client Component는 기존의 React의 컴포넌트들 같이, onClick 등의 동적 이벤트를 포함할 수 있으며,

React의 장점인 state를 통해 클라이언트 단에서 계산하고, 동적인 화면을 구성한다.

 

Server Component를 유용하게 사용한다면, API 요청 등의 백엔드 단과의 소통을 효율적으로 처리할 수 있다.

그러므로 백엔드 소통에 앞서,

작성할 컴포넌트들이 Server Component로 작동해야 하는지 Client Component로 구성되어야 할지 생각할 필요가 있다.

2. Data Fetching 방법

Data Fetching 방법은 Next.js 13 버전 이전과 이후로 나뉘게 된다.

Next.js 13	Next.js 12
await/async를 사용하는 fetch() API 사용 fetch(url, option) fetch를 사용하는 함수를 use()로 감싸서 사용한다. 예시) export default funciton Home(){   const a = use(fetchData())   return <>{/* ... */} </> } export async function fetchData() {   const res = await fetch(`https://.../data`)   const data = await res.json()   return data }	SSG, SSR 방식의 차이 SSG (Static-Site Generation)  getStaticProps :  getStaticProps() 명의 async 함수로 안에서 fetching을 진행한다. getStaticPaths : getStaticPaths() 명의 async 함수로 안에서 fetching을 진행한다. SSR (Server-Side Rendering) getServerSideProps() : getServerSideProps() 명의 async 함수로 안에서 fetching을 진행한다.

추가적으로,

Next.js 12 부분의 SSG 방식이 서버 빌드 시에 Fetching이 되는 Server Component 내의 Data Fetcing 이고,

SSR 방식이 자주 바뀌는 데이터를 Fetching 하기 위한 Client Compoent 내의 Data Fetching 으로 서로 유사하게 작동되는 듯 하다.

백엔드 구축

코딩애플 - Next.js 에서 MongoDB 연결하기 (tistory.com)

코딩애플 - Next.js 에서 MongoDB 연결하기

이번 프로젝트에서는 백엔드 서버 구축을 위해 mongoDB를 사용할 것 이다.

 

이유는 우선 저번 프로젝트에서 사용해보았을때, 전공에서 배웠던 MySQL 같은 RDB보다 더 간편했기 때문이다.

이번 프로젝트는 소규모 프로젝트이고,

이번에 나는 백엔드 연습을 중점으로 두기보다, 개인 프로젝트의 기획, 구현을 정해진 기간 내에 끝내보는 것이 목표이다.

그러므로 빠르고 간단하게 구현할 수 있는 MongoDB를 채택했다.

1. Scheme 구성

[기획] 개인 프로젝트 '캐플라이어' 을 기획하다. (tistory.com)

[기획] 개인 프로젝트 '캐플라이어' 을 기획하다.

내가 필요한 스키마의 속성 등을 구성해야 한다. 내용은 작성해 두었던 기획 글을 참고로 작성할 것이다.

 

[MongoDB] 관계 구조 별 스키마 디자인하는법 (간단 요약) (1:1, 1:N, N:N) (tistory.com)

MongoDB의 스키마 디자인은 윗 글을 참고하였다.

 

MongoDB Compass 연결

우선은 화면과 같이 Database를 생성해주었고, MongoDB Compass와 연결하였다.

출처 : https://www.bearpooh.com/166

이번 글의 목표는 현재 기획서 내용을 토대로,

• 소개 글
• 회원

의 두 가지 Collection 을 만드는 것이 목표이고, 필요한 내용은 아래와 같다.

Collection	Documents
introductionPosts	작성자 ( author, ObjectId, 필수 ) 제목 ( title, String, 필수, 50자 제한 ) 대표이미지 ( thumbnail, Url String, 필수 ) 내용 ( content, String, 필수, 제한없음 ) 카테고리 ( category, String, 필수 ) 태그 ( tags, String Array, 필수 아님, 프론트 단 10개 제한 ) 조회수 ( views, Number, 필수 아님, 기본 값 0 )
users	대표 이미지 (profileImage, Url String, 필수 아님 ) 이름 ( name, String, 필수, 12자 제한 - 프론트단에서 한글은 2~8자, 영어는 2~12자 ) 소개글 ( introduction, String, 필수 아님, 100자 제한 ) 작성 목록 ( introductionPostsList, ObejctId Array, 필수 아님, 기본 값 [] ) 선호 태그 ( preferredTags, String Array, 프론트 단 5개 제한 )

2. MongoDB 연결

[nextjs] mongodb 연결 (tistory.com)

Nextjs MongoDB Atlas 연결하기 mongoose, TypeScript 사용 (tistory.com)

MongoDB 사용하기 2_(데이터 저장과 Next.js와 연결)

mongoDB ODM(Object Data Mapping) 라이브러리인 mongoose를 이용하려고 한다.

mongoose를 통해 mongoDB의 documents를 자바스크립트 객체로 변환하여 쉽게 이용할 수 있을 듯 하다.

• 소개 글 스키마

const IntroductionPostsSchema = new Schema(
  {
    author: {
      type: Schema.Types.ObjectId,
      ref: 'User',
      required: true,
    },
    title: {
      type: String,
      required: true,
      maxlength: 50,
    },
    thumbnail: {
      type: String,
      required: true,
    },
    content: {
      type: String,
      required: true,
    },
    category: {
      type: String,
      required: true,
    },
    tags: {
      type: Array,
    },
    views: {
      type: Number,
      default: 0,
    },
  },
  {
    timestamps: true,
  }
);

• 회원 스키마

const UsersSchema = new Schema(
  {
    name: {
      type: String,
      required: true,
      maxlength: 12,
    },
    profileImage: {
      type: String,
    },
    introducition: {
      type: String,
      maxlength: 100,
    },
    introductionPostsList: {
      type: Array,
    },
    preferredTags: {
      type: Array,
    },
  },
  {
    timestamps: true,
  }
);

각각 소개 글과 회원의 스키마는 위와 같이 정의했다.

위에서 정의했던 Collections / Documents 의 표를 참고하여 작성했다.

// models에서 User가 이미 있는지 확인합니다.
// 확인 후 생성되지 않았다면, model을 통해 User 모델을 생성합니다.
const User = models?.User || model('User', UsersSchema);

export default User;

아래에는 다음과 같은 코드를 추가시켜 중복 생성을 막고, model을 export하였다.

3. 간단한 API 구축 (Route Handlers)

간단한 API를 작성하기에 앞서, 우선은 REST API에 대해 짚고 넘어가려 한다.

엘리스 부트캠프에서 정리한 내용에 따르면 REST API는 다음과 같았다.

HTTP의 요청 메서드에 응하는 서버 API와 클라이언트 간 통신의 구조가 지켜야 할 좋은 방법을 명시한 것

즉, API를 작성하는 데에 정해진 방법을 명시하여, 서로 예측할 수 있고, 직관적인 API를 작성하는 것이 목적이라고 생각된다.

그 외의 기본적인 REST API에 대한 내용은 아래 주소를 참고하겠다.

[간단정리] REST, REST API, RESTful 특징 — 넌 잘하고 있어 (tistory.com)

[간단정리] REST, REST API, RESTful 특징

 

Next.js 13 - 1. Routing - 1.7. Route Handlers (velog.io)

[Next] Next.13에서 API Route 사용하기 (tistory.com)

[Next] Next.13에서 API Route 사용하기

해당 주소를 참고하여 첫 Api를 작성해보았다.

@/app/api/route.ts

import dbConnect from '@/utils/db/dbConnection';
import IntroductionPost from '@/utils/schemas/introductionPosts.model';
import { NextResponse } from 'next/server';

export async function GET() {
  try {
    await dbConnect();
    const IntroductionPosts = IntroductionPost;
    const data = await IntroductionPosts.find({});

    return NextResponse.json({ data });
  } catch (error) {
    console.error(error);
  }
}

우선 dbConnect()를 통해 db에 연결했다.

후에 IntroductionPost 모델을 선언 및 불러오기 한다.

find({}) 쿼리 문을 통해 data를 불러온다. (해당 값은 빈 값일 것이다.)

오류 없이 불러와졌다 !

api 주소로 들어간 후, 콘솔에 오류가 나타나지 않고 성공적으로 빈 data 값을 받을 수 있었다.

또한, mongoDB Compass를 통해 introductionposts의 collection이 성공적으로 등록된 것을 확인할 수 있었다 !