4. Typescript + PostgreSQL - DB 연결 및 데이터 읽어오기

 

2023.11.18 - [프로젝트/GeekNews 대시보드 구성하기] - 1. Typescript 개발 환경 설정하기

2023.11.19 - [프로젝트/GeekNews 대시보드 구성하기] - 2. Typescript로 GeekNews의 RSS 읽어오기

2023.11.22 - [프로젝트/GeekNews 대시보드 구성하기] - 3. Typescript 로 html 데이터 파싱하기

필요 배경 지식

• PostgresDB를 사용하기 위한 일부 SQL문 사용방법
• Podman 사용방법
• Podman compose 사용 방법

Prerequisite

• Podman Desktop 설치
• Podman compose 설치

PostgresDB 컨테이너 준비하기

이전에 Podman Desktop 세팅을 통해서 컨테이너 실행 환경이 준비되었다면 PostgresDB 이미지를 받아서 준비를 해두도록 하자

Podman Desktop을 실행해서

Images - Pull an image - postgres:15.3 순으로 클릭 및 입력한다.

postgres 이미지 설치

이미지 설치를 완료했다.

 

.sql 파일 준비하기

그 다음 PostgresDB를 사용하기 위해서는 table을 생성하고 만들어야하는데 그것을 .sql 파일이 해준다.

내가 필요한 테이블은 다음과 같은 조건의 컬럼들이 필요한 정도이다.

컬럼은 news 제목 (varchar), new contents (배열) , 추가된 시간 (timestamp), 링크 (varchar)

이를 GPT에 요청해서 다음과 같이 table create를 할 수 있다.

CREATE TABLE IF NOT EXISTS news (
    title VARCHAR(255) NOT NULL,
    contents TEXT[] NOT NULL,
    added_time TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
    link VARCHAR(255)
);

이를 init.sql 파일로 저장해서 sql/init.sql에 저장하자.

 

Podman-compose 파일 생성하기

postgresdb를 쉽게 사용하기 위해서 컨테이너 이미지를 받아왔으니 그것을 쉽게 deploy 하기 위해서 podman-compose 파일을 하나 만들것이다.

다음과 같이 작성할 수 있다.

version: '3'

services:
  db:
    image: postgres:15.3
    environment:
      POSTGRES_PASSWORD: admin
      POSTGRES_USER: admin
      POSTGRES_DB: newsdb
    volumes:
      - ./sql/init.sql:/docker-entrypoint-initdb.d/init.sql
    ports:
      - "5432:5432"

환경변수에는 PostgresDB를 사용하기 위한 계정 정보 및 DB 정보를 기입할 수 있다.

그리고 init.sql 파일을 추가해서 db deploy시에 기본적으로 실행시킬 sql문을 추가했다. (위의 create news 테이블이다.)

/docker-entrypoint-initdb.d/init.sql 이 부분에 .sql 파일을 마운트 하면 해당 sql 파일을 컨테이너 initialize시에 그대로 실행해준다.

PostgresDB는 포트를 5432로 사용하도록 했다.

 

PostgresDB 실행 및 테이블 확인

그 다음 아래 명령어를 통해서 DB를 실행시켜 본다.

podman-compose up

podman 터미널에서 아래 명령어를 입력해서 확인해 볼 수 있었다.

psql -U "유저이름" -d "db이름"

psql -U admin -d newsdb
newsdb=# select * from newsdb;

select 해보니까 table 생성 된것 같긴하다.

아래 캡처에서 확인할 수 있다.

PostgresDB 터미널에서 직접 확인

나는 intellij를 쓰고있어서 오른쪽 Database 플러그인을 통해서 DB와 연결을 해볼 수 있다.

Intellij의 DB 연결 확인 기능

intellij를 쓰고있지 않다면 다른 로컬 db 프로그램 (DBeaver나 vscode에도 db 플러그인이 있을것 같다.)를 활용해서 postgresDB를 connect 확인을 해보려고 했는데 연결이 안된다. 왜지?

컨테이너는 로컬에서 정상 실행했는데 db 클라이언트로 db 연결이 안된다.

조금 더 확인 해 본 결과 windows에서 podman을 통한 db를 실행하면 localhost로 하면 인식이 안될 수 있단다.

그래서 podman machine의 ip를 알아야한다.

다음 명령어를 통해서 알아 낼 수 있다.

podman machine ssh

podman machine으로 들어오면 아래 명령어 입력

ifconfig

거기서 eth0 인터페이스의 inet 주소를 복사해서 위의 localhost 자리에 입력해주면 연결이 됨을 알 수 있다.

혹시나 몰라서 ip 자체는 지워뒀다, 저기 보이는 ip를 그대로 복사해서 쓰면 된다.

아래와 같이 연결 성공이 뜬다

아무튼 여기까지 해봤으면 DB 자체는 준비가 완료 되었다.

그러면 NodeJS에서 해당 DB를 연결해서 사용할 수 있으면 된다.

 

 

NodeJS에서 PostgresDB 사용하기

pg 라이브러리를 사용하면 Postgres 데이터 베이스를 Node.js에서 사용할 수 있다고 한다.

그래서 아래와 같은 명령어로 설치 할 수 있다.

npm install pg
npm install @types/pg --save-dev

그리고 database를 처리하는 코드를 아래와 같이 추가해보도록 하자. (database.ts)

import { Pool } from 'pg';

// Pool을 생성하고 설정하기
const pool = new Pool({
    user: 'admin',
    host: 'IP를 여기에 넣어주자',
    database: 'newsdb',
    password: 'admin',
    port: 5432,
});

// 비동기 함수를 사용하여 쿼리 실행
export const queryDatabase = async () => {
    try {
        // 연결을 가져오고 쿼리 실행
        const res = await pool.query('SELECT NOW()');

        // 결과 출력
        console.log(res.rows);

        // 풀 연결 종료
        await pool.end();
    } catch (err) {
        console.error(err);
    }
};

const Pool 안의 내용은 host는 방금 알아본 IP 주소를 입력하고, user, password, db이름은 podman-compose에 정의한 대로 입력해주면 된다.

위의 예시에서는 user/password = admin/admin 이였고, db이름은 newsdb였으므로 그대로 넣어주었다.

그리고 이전에 만들어 두었던 index.ts에 아래와 같이 추가해서 코드 실행을 통해 db 연결을 시도 해 볼 수 있다.

import { queryDatabase} from "./database";

... 중략

queryDatabase();

뭔가 출력 된걸 보니 DB 연결이 됐나보다.

조금 더 정확하게 확인하기 위해서 sql 문으로 예제를 insert 해보고 그것을 select해서 가져와보자

 

console로 아래 sql문을 실행했다.

INSERT INTO news (title, contents, link)
VALUES (
           '뉴스 제목 예시',
           ARRAY['첫 번째 내용', '두 번째 내용', '세 번째 내용'],
           'http://example.com/news'
       );

sql문으로 임시 데이터를 추가 한 모습 - Intellij 화면

 

아래와 같이 테이블이 업데이트 되었고 아래와 같이 쿼리 실행 부분을 

SELECT * from news로 변경해서 테이블 값을 출력하도록 했다.

// 비동기 함수를 사용하여 쿼리 실행
export const queryDatabase = async () => {
    try {
        // 연결을 가져오고 쿼리 실행
        const res = await pool.query('SELECT * from news');

        // 결과 출력
        console.log(res.rows);

        // 풀 연결 종료
        await pool.end();
    } catch (err) {
        console.error(err);
    }
};

실행해보니 아래와 같이 잘 출력됨을 확인 할 수 있었다.

예제 값들을 잘 불러와서 출력하는 화면

그러면 다음 포스트에서는 실제로 원하는 값을 가져와서 파싱 후 insert 하는것을 진행하면 거의 이 프로젝트는 끝을 낼 수 있을듯 하다 ㅎㅎ 

 

Reference

• ChatGPT의 도움