View
1. DB 접속 정보 Config 만들기
DB 정보는 환경변수로 관리하고 싶어서 dotenv 모듈을 설치해 아래와 같이 .env 파일을 만들었다.
DB_USER=...
DB_PASSWORD=...
DB_HOST=...
DB_PORT=...
DB=...그리고 /config/db.js을 만들어서 require로 불러올수 있도록 export 했다.
require('dotenv').config()
module.exports = (() => {
return {
"user": process.env.DB_USER,
"password": process.env.DB_PASSWORD,
"host": process.env.DB_HOST,
"port": process.env.DB_PORT,
"database": process.env.DB
}
})()2. DB 객체 만들기
다음으로 /lib/db.js을 만들어서 싱글톤Singleton 패턴으로 DB 객체를 가져왔다.
물론 DB 접속을 위해 pg-promise 모듈을 사용했다. 여기서 사용하는 Symbol은 ES6에서 추가된 원시 데이터 타입이다.
내가 이해한 Symbol은 자바스크립트 객체의 원형을 직접 만들수 있는 방식으로 이해했다.
key로 생성해서 독립된 유니크한 객체를 만들때 사용되면 좋을 것 같다.
Symbol()로 사용하면 고유한 객체를 반환하는데, Symbol.for()을 사용하면 글로벌 심볼에서 같은 키가 있는지 찾아보고 있으면 그걸 반환하고, 없으면 생성한다고 한다.
Symbol.for로 심볼을 만들어서 같은 심볼이 없으면 global에 dbKey로 추가해줬다.
NodeJS.Global은 노드에서 사용하는 전역 변수이다.
const pgp = require('pg-promise')()
const config = require('../config/db')
const db = () => {
const dbKey = Symbol.for(db + '.db')
const globalSymbols = Object.getOwnPropertySymbols(global)
if (globalSymbols.indexOf(dbKey) < 0) {
global[dbKey] = pgp(`postgres://${config.user}:${config.password}@${config.host}:${config.port}/${config.database}`)
}
return global[dbKey]
}
export default (db)()3. DB 객체로 쿼리 실행하기
2번까지 하면 import해서 어디서든 DB 사용할 수 있게 된다.
/api/hello.ts에서 아래와 같이 사용했다.
import { NextApiRequest, NextApiResponse } from 'next'
import db from '../../lib/db'
type Data = {
name: string
}
export default async (req: NextApiRequest, res: NextApiResponse<Data>) => {
try {
const user = await db.one('SELECT * FROM "user"."User" WHERE id=$1', '_veronica')
res.status(200).json(user)
} catch (e) {
res.status(500).end()
}
}vitaly-t.github.io/pg-promise/global.html#event:connect
pg-promise API
Query Result Mask Binary mask that represents the number of rows expected from a query method, used by generic query method, plus func. The mask is always the last optional parameter, which defaults to queryResult.any. Any combination of flags is supported
vitaly-t.github.io
4. 화면에서 API 호출하기
DB 연동해 놓은 API을 호출해 결과 값을 화면에 보여주는것까지 완료!
import Head from 'next/head'
import styles from '../styles/Home.module.css'
function Home(props) {
const { email, id } = props
return (
<div className={styles.container}>
<Head>
<title>Beter</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
{email} {id}
</main>
<footer className={styles.footer}>
ffff
</footer>
</div>
)
}
export async function getStaticProps({ params }) {
const res = await fetch('http://localhost:3000/api/hello')
if (res.ok) {
const data = await res.json()
return {
props: data
}
} else {
return {
props: {}
}
}
}
export default Home
'develop > react' 카테고리의 다른 글
| #5 Apollo 환경에 Prisma 끼얹기 (0) | 2020.11.10 |
|---|---|
| #4 NextJS, 드디어 Apollo 적용하기 (0) | 2020.09.28 |
| #2 NextJS 기본 사용법 (0) | 2020.09.25 |
| React, Redux 개념 교육 (0) | 2020.09.23 |
| #1 NextJS, Apollo, GraphQl 개발 환경 셋팅하기 (0) | 2020.09.20 |
