JS #19- 웹 API 9 쇼핑몰 만들기 (pocketbase)

1. pocketbase 다운로드 (운영체제에 맞게) , pocketbase 폴더 뒤에 압축 푼 파일들 넣기

2. pocketbase npm 다운로드

npm i pocketbase --save

 

3. pocketbase script 

 "pocketbase": ".\\pocketbase\\pocketbase serve"

 

4. pocketbase 실행

Admin UI, 회원가입 후 DB 생성

 

 

 

쇼핑몰 상품 데이터베이스 구축하기

New collection 에서 만들 데이터 베이스의 

이름, 필드 및 옵션을 적용하고 생성한다. 

 

 

New record를 통해 새로운 레코드들을 정의해준다. 

 

 

 

GET 통신을 통해 데이터를 불러온다. 

 

 

권한 부여

 

 

 

API preview -> pocketbase의 sdk를 보고 처리도 해본다.!

 

 

<pocketbase의 sdk를 이용한 통신>

import '/src/pages/layout';

import '/src/pages/product/product.css';

import Pocketbase from "pocketbase";

const pb = new Pocketbase('http://127.0.0.1:8090');

async function renderProducts(){

    const products = await pb.collection('products').getFullList();

    console.log(products);

}

renderProducts();

결과창

 

 

 

 

ctrl + shift + p => 명령어팔레트에서 Organize Imports 기능 수행하면

import 정리를 할 수 있다. 

 

 

 

 

env 환경변수

유니크한 변수를 사용할 때 사용한다. 

 

.env                # 모든 상황에서 사용될 환경 변수
.env.local          # 모든 상황에서 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수
.env.[mode]         # 특정 모드에서만 사용될 환경 변수
.env.[mode].local   # 특정 모드에서만 사용되나, 로컬 개발 환경에서만 사용될(Git에 의해 무시될) 환경 변수

 

 

전체적으로 사용되는 url 을 환경 변수로 설정한다  

ㄴ 실제로 서버에 올릴 떄에는 환경 변수를 따로 세팅해준다. 

<.pocketbase.js>

import Pocketbase from "pocketbase";

const pb = new Pocketbase(import.meta.env.VITE_PB_URL);

export default pb;

 

 

 

 

<document.js>

import {insertLast, comma, setDocumentTitle} from "kind-tiger";

import '/src/pages/layout';

import '/src/pages/product/product.css';

import pb from '/src/api/pocketbase.js'; //매번 써야하니까 객체를 받는다!

import { getPbImageURL } from "/src/api/getPbImageURL.js";

import { gsap } from 'gsap';

setDocumentTitle('290cm / 상품목록'); //document.title을 변경해주는 함수

function CrateTag(p){

    const {brand, description, price, discount, collectionId, id, photo} = p;

    const ratio = price * (discount * 0.01)

    console.log(getPbImageURL(p));

   

   const template = `

    <li class="product-item">

         <figure>

           <img src="${getPbImageURL(p)}" alt="">

         </figure>

         <span class="brand">${brand}</span>

         <span class="desc">${description}</span>

         <span class="price">${comma(price)}원</span>

         <div>

         ${

            discount !== 0 ? `<span class="discount">${discount}%</span>` : ''

         }

           <span class="real-price">${comma(price - ratio)}</span>

         </div>

       </li>

   `;

   return template;

}

async function renderProducts(){

    const products = await pb.collection('products').getFullList();

    products.forEach((p)=> {

        const template = CrateTag(p);

        //랜더링

        insertLast('.container > ul', template);

    })

    gsap.from('.product-item', {y:30, opacity:0, stagger: 0.1});

}

//함수 호출

renderProducts();