프론트엔드 개발자를 위한 데이터베이스 초보자 가이드

프론트엔드 개발자를 위한 데이터베이스 초보자 가이드

1. 우리가 아는 것에서 시작하기

프론트엔드에서 데이터를 다루는 법부터 시작해볼게요:

1-1. React에서의 데이터 저장

// React에서 게시글 목록 관리하기
const [posts, setPosts] = useState([
  {
    id: 1,
    title: "첫 번째 글",
    content: "안녕하세요"
  },
  {
    id: 2,
    title: "두 번째 글",
    content: "반갑습니다"
  }
]);

1-2. 근데 여기에는 문제가 있어요

1. 새로고침하면 데이터가 사라져요
2. 다른 사용자와 데이터를 공유할 수 없어요
3. 데이터가 많아지면 관리가 어려워요

이런 문제를 해결하기 위해 데이터베이스가 필요합니다!

2. 데이터베이스의 두 가지 타입

2-1. MySQL (엄격한 규칙의 데이터베이스)

엑셀 스프레드시트를 생각해보세요:

• 모든 열(column)이 미리 정의되어 있어요
• 각 행(row)은 같은 구조를 가져야 해요

// MySQL 테이블 구조
const posts = {
  // 이 구조에서 벗어날 수 없어요!
  columns: {
    id: '번호',
    title: '제목',
    content: '내용',
    author: '작성자'
  },
  // 모든 데이터는 위 구조를 따라야 해요
  rows: [
    [1, '안녕하세요', '내용입니다', '김철수'],
    [2, '반갑습니다', '두번째 글', '이영희']
  ]
}

2-2. MongoDB (자유로운 규칙의 데이터베이스) : nosql

JavaScript 객체와 매우 비슷해요:

• 원하는 대로 데이터 구조를 만들 수 있어요
• 각 문서(document)마다 다른 형태를 가질 수 있어요

// MongoDB 컬렉션 구조
const posts = [
  {
    _id: 1,
    title: "안녕하세요",
    content: "첫 번째 글입니다",
    // 여기에 원하는 필드를 자유롭게 추가할 수 있어요
    tags: ["인사", "소개"],
    comments: []
  },
  {
    _id: 2,
    title: "반갑습니다",
    content: "두 번째 글입니다",
    // 다른 문서와 다른 구조를 가질 수 있어요
    author: {
      name: "이영희",
      email: "lee@test.com"
    }
  }
];

3. 실제 프론트엔드 개발에서는 어떻게 쓰나요?

3-1. MySQL을 사용할 때

// 프론트엔드에서 API 호출
const getPosts = async () => {
  // 서버에서는 SQL 쿼리로 데이터를 가져옴
  // SELECT * FROM posts WHERE author = '김철수';
  const response = await axios.get('/api/posts');
  setPosts(response.data);
};

3-2. MongoDB를 사용할 때

// 프론트엔드에서 API 호출
const getPosts = async () => {
  // 서버에서는 MongoDB 쿼리로 데이터를 가져옴
  // Post.find({ author: '김철수' });
  const response = await axios.get('/api/posts');
  setPosts(response.data);
};

3-3. 프론트엔드 입장에서는...

1. API 호출하는 방식은 동일해요
2. 받는 데이터 형태가 조금 달라요

   // MySQL에서 받은 데이터
   const mysqlData = [
   {
    id: 1,
    title: "제목",
    content: "내용",
    // 정해진 필드만 옴
   }
   ];
   

// MongoDB에서 받은 데이터
const mongoData = [
{
_id: "507f1f77bcf86cd799439011", // MongoDB의 특별한 ID 형식
title: "제목",
content: "내용",
// 추가 필드들이 있을 수 있음
comments: [],
tags: []
}
];

## 4. 어떤 걸 선택해야 할까요?

### 4-1. MySQL이 좋을 때
1. 데이터 구조가 명확할 때
   - 예: 회원가입 정보 (이름, 이메일, 비밀번호...)
   - 예: 주문 정보 (상품, 수량, 가격...)

2. 데이터 간의 관계가 복잡할 때
   - 예: 쇼핑몰 (주문-상품-사용자-리뷰...)

### 4-2. MongoDB가 좋을 때
1. 데이터 구조가 자주 바뀔 때
   - 예: 블로그 포스트 (글마다 다른 형식)
   - 예: SNS 게시물 (사진, 동영상, 링크 등 다양한 형식)

2. 빠른 개발이 필요할 때
   - JavaScript 객체처럼 자유롭게 데이터 저장 가능
   - 스키마 변경이 쉬움

## 5. 실제 프로젝트 예시

### 5-1. 블로그 프로젝트
MongoDB가 좋아요:
```javascript
const blogPosts = [
  {
    title: "일반 글",
    content: "텍스트만 있는 글"
  },
  {
    title: "사진 글",
    content: "text",
    images: ["image1.jpg", "image2.jpg"],
    imageLayout: "gallery"
  },
  {
    title: "비디오 글",
    content: "text",
    video: "video.mp4",
    thumbnail: "thumb.jpg"
  }
];

5-2. 쇼핑몰 프로젝트

MySQL이 좋아요:

// 주문 정보는 항상 같은 구조를 가져요
const orders = {
  columns: {
    id: '주문번호',
    userId: '사용자ID',
    productId: '상품ID',
    quantity: '수량',
    price: '가격',
    status: '주문상태'
  }
};

정리

1. MySQL은 엑셀처럼 정해진 형식이 있어요

   • 데이터가 정형화되어 있을 때 좋아요
   • 은행, 쇼핑몰 같은 서비스에 적합해요

2. MongoDB는 JavaScript 객체처럼 자유로워요

   • 데이터 구조가 유연해야 할 때 좋아요
   • 블로그, SNS 같은 서비스에 적합해요

3. 프론트엔드 개발자 입장에서는

   • API 호출 방식은 동일해요
   • 받는 데이터 형식만 조금 달라요
   • MongoDB가 JavaScript와 비슷해서 더 친숙할 수 있어요