Next js Chapter 6 - Setting Up Your Database

월요일...글이긴한데 화요일이다. 챕터 6은 튜토리얼에서 사용할 postgres db를 설정하는 글이라 크게 설명할 것은 없고, 하면서 느낀점정도만 적어보겠다.

---

이 튜토리얼 글에선 vercel로 프로젝트를 배포한 후에 vercel의 postgres db를 설정한 후 이를 연결하는 작업을 설명해주고 있다.

https://nextjs.org/learn/dashboard-app/setting-up-your-database
링크에 자세하게 나와있지만 간단하게 짚고만 넘어가보자면

1. 깃허브에 리포지토리를 만들고 push하여 코드를 업로드한다.

2. vercel에 만든 리포지토리를 연결하고 배포한 후에 상단 탭의 Storage 메뉴를 선택한다. 그 후 create new버튼을 누른 후에 postgres를 선택해준다.

3. db의 이름과 db가 저장될 지역을 골라준 후에 생성을 마친다. 지역은 다시 바꿀 수 없다고 한다.
   

4. 이렇게 만들면 postgres db 연결을 위한 env 파일을 자동으로 생성해주므로 이것을 프로젝트 env파일에 저장해준다.(show secret을 누르면 마스킹된 부분이 해제된다.
   

5. 그 후 프로젝트 IDE로 돌아와 postgres를 설치해준다
   (npm i @vercel/postgres)

이 다음이 정말 놀라웠던? 부분이었다.

---

Seed your database

나는 여태까지 프론트엔드 개발을 했지만, DB설계라던지 테이블같은건 나하고는 먼 이야기 같았다.

sql을 조금 알긴하지만, 이걸 언젠간 쓸까? 싶었는데 이 챕터에서는 node -r dotenv/config ./scripts/seed.js이라는 코드를 실행하면

placeholder-js안에 있는 샘플 데이터를 노드를 사용해 postgres db에 테이블을 만든 후 샘플데이터로 값을 채워준다고한다.

seed.js를 열어보면 이런느낌의 코드로 작성되어있다

 const insertedUsers = await Promise.all(
      users.map(async (user) => {
        const hashedPassword = await bcrypt.hash(user.password, 10);
        return client.sql`
        INSERT INTO users (id, name, email, password)
        VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
        ON CONFLICT (id) DO NOTHING;
      `;
      }),
    );

이런 코드들을 모아 아래쪽에서는 이런 코드가 있는데

async function main() {
  const client = await db.connect();

  await seedUsers(client);
  await seedCustomers(client);
  await seedInvoices(client);
  await seedRevenue(client);

  await client.end();
}

대충 보면 db에 연결하여 해당하는 sql을 실행하는 작업을 하는 것 같다.

실제로 방금 만든 vercel에 가보면 우리가 채운 값들이 db에 들어있다!!

---

예전에 웹 프론트엔드 공부할 땐 백엔드 구축이 굉장히 힘들어서 토이프로젝트할 때 머리를 싸맸던 기억이 있었는데, 이젠 참... 많이 쉬워졌다. 웹에 이런 좋은 서비스들이 많아지니까 계속 시장 수요가 많아지는것 같기도하고.. 좀 씁쓸하지만 혼자 장난감 만들긴 좋을 것 같아서 애써 넘어갔다.