React-2

mh·2022년 1월 1일
0

React

목록 보기
2/5
post-thumbnail

Photo by Susan Wilkinson on Unsplash

Clayful - React 연동

Clayful(클레이풀) 소개

출처: 클레이풀

쇼핑몰에 특화된 API,SDK 솔루션을 제공한다.

스토어 만들기

연동 클라이언트 선택 및 설정

SDK 설치

설치 및 코드 연동하기

node.js 환경

# via NPM
npm install clayful --save

javascript

<!-- via CDN (HTML) -->
<script src="https://code.clayful.io/clayful-js@2.5.0/clayful-js.min.js"></script>
<!-- API request plugin for jQuery -->
<script src="https://code.clayful.io/clayful-js@2.5.0/request-jquery.min.js"></script>
<!-- API request plugin for axios -->
<script src="https://code.clayful.io/clayful-js@2.5.0/request-axios.min.js"></script>

axios 패키지 설치

npm install axios --save
여기선 클레이풀 sdk를 도와주는 플러그인으로 사용하기 위해 axios 패키지를 설치한다.

sdk import로 불러오기

commonjs부분의
var Clayful = require('clayful/client-js');

import calyful from 'clayful/client-js'로 고쳐서 index.js 나 App.js에 넣어준다. 설치한 클레이풀 모듈을 가져와서 사용하겠다는 뜻

엑세스 토큰(API키) 인증하기

Clayful.config({
    client: '<api-access-token>'
});

마찬가지로 sdk를 import한 코드 아래에 넣어준다. <api-access-token>을 지우고 연동클라이언트 기본정보에 있는 API key를 넣으면 된다.

axios를 플러그인으로 설치해주기

// or when using axios
Clayful.install('request', require('clayful/plugins/request-axios')(axios));

그 아랫줄에 이 코드를 추가하면 axios의 request 메서드를 클레이풀에서 사용할 수 있다.

axios 불러오기

import axios from 'axios'
를 import가 있는 코드줄 아래에 추가해준다.

import Clayful from 'clayful/client-js'
import axios from 'axios'


Clayful.config({
  client: '<api-access-token>'
});

// or when using axios
Clayful.install('request', require('clayful/plugins/request-axios')(axios));

이렇게해서 react와 연동이 끝났다.

상품등록 후 연동테스트

앱 실행해보기

npm run start 명령어로 어플리케이션 시작해보기

망함해결했다

LandingPage.js에 작성해놓은 펑셔널 컴포넌트 내용이 정상적으로 나온다.

상품정보 추가하기

이곳에서 상품을 추가하고 추가된 상품을 코드로 불러올 수 있다.

이렇게 여러가지 종류로 상품타입을 지정해서 추가할 수 있다.

나는 학교다닐때 만들었던 도자기 하나를 상품으로 추가했다.

쇼핑몰처럼 옵션이 많다 세부상품정보를 추가해야 저장이 가능하다.

상품이 추가됐다.
vs code로 돌아와 LandingPage.js에 클레이풀 예제코드를 추가해준다.

index에서와 마찬가지로 Clayful을 import해준다.

npm run start로 다시 실행시켜보자

아 제발

위에 코드가 잘못됬었다..

이렇게 작성하면 된다...

import React from 'react'
import Clayful from 'clayful/client-js';



function LandingPage() {
    var Product = Clayful.Product;

    var options = {
        query: {
            page: 1
        }
    };

    Product.list(options, function(err, response) {

        if (err) {
            console.log(err.isClayful);
            console.log(err.model);
            console.log(err.method);
            console.log(err.status);
            console.log(err.headers);
            console.log(err.code);
            console.log(err.message);
        }
        
        console.log(response.status);
        console.log(response.headers);
        console.log(response.data);

    });

    return (
        <div>
            랜딩페이지
        </div>
    )
}

export default LandingPage

아까 등록해놓은 상품이 나오는걸 볼 수 있다..
왜이렇게 하나하나 넘어가는게 힘드냐..

profile
🤪🤪🤪🤪🤪

2개의 댓글

comment-user-thumbnail
2022년 2월 28일

잘 읽었습니다.
axious 오타가 있네요.

1개의 답글