(3-Tier)

<aside> 💡

  1. mysql 8.0 과 dbeaver 연결
  2. node mysql2 설치해서 쿼리로 db 연결해서 값 꺼내오기 (localhost:3001)
  3. 넥스트에서 api 로 node api 서버 호출해서 값 가져오기
  4. 1~3번 다 되면 api 호출된 값 가지고 msw 해서 값 밀어넣어보기 </aside>

1단계: DB 환경 구축 (MySQL & DBeaver)

가장 먼저 데이터가 살 집을 만들어야 합니다.

  1. MySQL 설치: 로컬(내 컴퓨터)에 MySQL을 다운로드 받아 설치하세요. (참고링크)

    1. 옵션 중 Custom 선택 - MySQL Server, MySQL Workbench
    2. 설치 시 꼭 기억해야 할 주의사항 (중요!)

    설치 과정 중에 **'Authentication Method'**나 'Accounts and Roles' 설정 단계가 나올 텐데, 여기서 막히는 경우가 많습니다.

    1. Password 설정: root 계정의 비밀번호를 설정하게 됩니다. 이 비밀번호는 절대 잊어버리면 안 됩니다! 나중에 노드 서버 코드(server.js)에 직접 적어야 하거든요.
    2. Port 번호: 기본값인 3306으로 두시면 됩니다.
    3. Authentication Method: 가급적 "Use Legacy Authentication Method" (MySQL 5.x 호환)를 선택하는 것이 좋습니다. 최신 방식(Strong Password)은 가끔 Node.js의 mysql2 라이브러리와 연결할 때 추가 설정이 필요해서 번거로울 수 있습니다.

  2. DBeaver 설치: MySQL은 터미널에서 검은 화면으로 보면 힘드니까, DBeaver 같은 GUI 툴을 써서 눈으로 확인합니다. (참고링크)

    1. For me _계정명 : 권한 문제와 관련해서 이미 본인 계정으로 선택하면 추후 재요구x
    2. 설치가 완료되면 MySQL과 연결하기

  3. 데이터 생성: DBeaver에서 dd_post 테이블을 만들고, 연습용 데이터를 1~2개 직접 넣어보세요.

    1. 새 데이터베이스 생성하기
      • 왼쪽 Database Navigator 탭에서 연결된 localhost 항목을 마우스 우클릭합니다.
      • Create -> Database를 선택합니다.
      • 이름은 자유롭게 하되, 연습용이니 my_portfolio라고 지어볼까요? **[OK]**를 누릅니다.
      • DBeaver에서 "Test Connection"을 눌러 'Success'가 뜨면 1단계 성공입니다.
    2. 테이블 만들어 데이터 넣기
      • 방금 만든 my_portfolio 항목의 화살표 클릭: 왼쪽 localhost 항목 왼쪽에 있는 **작은 화살표(> 또는 +)**를 눌러서 하위 목록을 펼쳐주세요.
      • Databases(또는 Schemas) 폴더 찾기: 펼쳐진 목록 중에 **Databases**라는 이름의 폴더 모양 아이콘이 있을 거예요.
      • 그 폴더를 우클릭: localhost 자체가 아니라, 그 밑에 있는 Databases 폴더를 마우스 우클릭하세요.
      • Create New Database 선택: 그러면 Create New Database 메뉴가 나타날 겁니다!
    -- 1. 테이블 생성
create table dd_post (
	id INT auto_increment primary key,
	title VARCHAR(255) not null, -- 제목
	subtitle VARCHAR(255), -- 부제목
	thumbnail VARCHAR(500), -- 썸네일 이미지 URL
	tags VARCHAR(255), -- 태그
	content TEXT,
	views INT default 0,
	
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	updated_at TIMESTAMP default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP
);

-- 2. 테스트 데이터 삽입
insert into dd_post (title, subtitle, thumbnail, tags, content)
values (
	'모든 카테고리를 아우르는 게시글을 등록했어요',
	'mysql에 직접 등록한 데이터',
	'https://mulqhihyyqaszphmrysv.supabase.co/storage/v1/object/public/thumbnails/post-thumbnails/1766068109815.png',
	'저축, 부동산, 대출, 생활, 상식, 뉴스, 투자',
	'<h2>이것은 제목 문장이예요</h2><p></p><h3><strong>연금계좌의 세제 혜택에 대해 궁금한 5가지</strong></h3><p><strong>Q1. 연금계좌를 통해 얻는 구체적인 세제 혜택은 무엇인가요?</strong></p><p>→ 연금계좌에서 얻을 수 있는 세제 혜택은 연금을 납입할 때, 연금을 수령할 때 각각 적용됩니다.</p><p><strong>연금을 납입할 때<br></strong>• 매년 연말정산 시, 연금저축과 IRP에 납입한 금액에 대해 세액공제 혜택을 받을 수 있어요.<br>• 연금계좌는 투자수익에 대한 세금 납부를 연금 수령 시까지 미루는 과세이연 혜택이 있어, 수익을 재투자하며 복리 효과를 키울 수 있어요.<br>• 건강보험료 산정 시 사적 연금 납입액(연금저축, IRP 등)은 제외되어, 은퇴 후 건강보험료 부담도 줄일 수 있어요.<br>• ISA(개인종합자산관리계좌) 해지 후 연금계좌로 이전 시 세액공제 한도가 최대 300만 원까지 추가됩니다. 이전시키는 금액의 10%, 최대 300만 원까지 절세 효과를 더 얻을 수 있어요.</p><p><strong>연금을 수령할 때<br></strong>연금 수령 시 최대 1,500만 원까지 연금소득세율(3.3~5.5%) 적용 등 다양한 혜택을 누릴 수 있어요. 단,&nbsp; 연금수령액이 연 1,500만 원을 초과하는 경우에는 연금수령 전액을 다른 소득과 합산해 종합과세(6.6%~49.5%)하거나, 분리과세(16.5%)하는 방법 중 본인에게 유리한 방식을 선택해야 합니다. 그러므로 가급적 연1,500만 원 이하로 연금수령액을 맞추는 게 좋습니다.</p><p></p><p></p><p>• 투자 유연성이 더 중요하다면 → 연금저축<br>• 절세 + 안정성이 더 중요하다면 → IRP<br>• 유연성과 안정성을 모두 잡아 장기 복리 효과를 극대화하려면 → 두 계좌를 병행해 꾸준히 납입하는 것이 가장 효율적</p><p></p>'
);

-- 3. 데이터가 잘 들어갔는지 확인하려면 아래 쿼리를 실행해 보세요.
select * from dd_post

    1. thumbnail이 왜 VARCHAR(500)(문자열)인가요?

2단계: Node.js 서버에서 DB 연결하기 (Back-end)

이제 자바스크립트(Node.js)로 DB의 문을 두드려볼 차례입니다.

  1. 프로젝트 생성: 빈 폴더를 만들고 npm init -y

  2. 필수 패키지 설치: npm install express mysql2 dotenv cors

  3. 환경 변수 작성: .env 파일 생성

    DB_HOST=localhost
DB_USER=root
DB_PASS=아까설정한비밀번호 //1234
DB_NAME=my_portfolio
PORT=4000

  4. 연결 코드 작성: server.js 파일을 만들고 아래 흐름으로 코드를 짭니다.

// server.js 예시 (간략형)
const express = require('express');
const mysql = require('mysql2');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 4000;

// MySQL 연결 설정
const db = mysql.createConnection({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASS,
  database: process.env.DB_NAME
});

// DB 연결 확인
db.connect(err => {
  if (err) {
    console.error('DB 연결 실패:', err);
    return;
  }
  console.log('MySQL 연결 성공!');
});

// 게시글 목록 가져오는 API 엔드포인트
app.get('/api/posts', (req, res) => {
  const sql = 'SELECT * FROM dd_post';
  db.query(sql, (err, results) => {
    if (err) return res.status(500).json(err);
    return res.json(results);
  });
});

app.listen(port, () => {
  console.log(`서버가 ${port}번 포트에서 실행 중입니다.`);
});

<aside> 💡