[튜토리얼] Next.js 프로젝트 시작하기 3편 (Vercel을 통해 DB를 연결하고 간단한 게시판 표시 구현)

이번 편에서는 Vercel을 통해 DB를 연결하고 직접 넣은 데이터를,

게시판 형태로 화면에 표시하는 데까지 진행해보도록 할 예정이다.

 

 

스토리지 생성 후 아래 안내에 따라 기존 vercel 프로젝트와 연결 후,

노드 모듈을 설치하고 연결해준다.

 

 

쿼리를 날려 DB와 소통하는 기능을 vercel 사이트 자체에서 제공하고 있긴 하지만,

좀 더 편리하게 이용하기 위해 여기선 DBeaver라 하는 DB 툴을 사용하도록 하겠다.

 

 

Host, Database명, Username, Password를 잘 확인하고,

Vercel 사이트에 나와 있는 그대로 입력해 준다. 

 

 

DBeaver를 통해서 테이블을 만들어 주고 컬럼도 추가해준다.

여기서는 일단 테스트용으로 간단하게 id, content만 추가해 보았다.

 

 

데이터를 수동으로 입력해 추가해준다.

 

 

export async function BOARD(): Promise<JSX.Element> {

const { rows } = await sql`SELECT * from BOARD`;

 

테이블 부분을 비동기 함수로 만든 후 sql을 통해 호출하여 데이터를 가져온다.

rows 데이터를 화면에 표시하게 HTML 부분을 작성해 화면에 표시될 수 있게 해보자.

 

 

DB에서 가져온 데이터를 화면에 표시하는 데까지 성공하였다.

이제 이걸 실제 게시판 같은 형태로 수정해 보려 한다.

 

MLBPARK라고 하는 사이트의 게시판 형태이다.

일반적인 게시판의 형식으로 구성돼 있으므로 이를 참고하여 게시판을 만들어 보겠다.

 

-DB 테이블에 제목, 글쓴이, 시간, 조회수 컬럼 추가 (여기서 글쓴이 컬럼은 유저 테이블 따로 만들어 조인하는 것이 일반적이지만 일단 편의상 테이블 하나로 구성)

-DB에 테스트용 데이터 추가

-테이블 컴포넌트를 추가하고 CSS 스타일 적용

-테이블 컴포넌트에 DB에서 받아온 데이터를 바인딩

 

이 순서대로 작업하기만 하면 된다.

 

컬럼을 여러 개 추가하고 컬럼 항목에 맞춰 데이터를 추가해 주었다.

이제 스타일링 작업만 해주면 된다.

 

 

여기서 보기 좋도록 테이블에 CSS를 입힌다.

여기서는 SCSS를 사용하기 때문에 아래와 같이 CSS를 계층적으로 구성할 수가 있다.

 

table.module.scss라는 스타일 파일을 만들어,

이것을 테이블에서 import해 사용하도록 설정한다.

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Arial', sans-serif;
    margin: 30px;
  }
  
  .table th, .table td {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 8px;
  }
  
  .table th {
    background-color: #f2f2f2;
    color: #333;
    font-weight: bold;
  }
  
  .table tr:hover {
    background-color: #f1f1f1;
  }
  
  .table td {
    color: #333;
  }
  
  .table td:nth-child(2) {
    text-align: left;
    color: #1a73e8; /* 제목의 글씨 색상 (파란색) */
    font-weight: bold;
  }
  
  .table td:nth-child(3) {
    font-style: italic; /* 글쓴이 부분은 기울임체로 */
  }
  
  .table td:nth-child(4), .table td:nth-child(5) {
    color: #555;
  }

 

 

결과적으로 화면을 표시해 보면 다음과 같이 나온다.

 

이것으로 간단한 게시판 표시가 완성되었다.

다음 편에는 게시판의 기본 기능인 CRUD를 구현해 보고자 한다.