엘리스 AI 트랙 08주차 - OpenAPI 기초 (2/19)🔥

✔ 08주차. Open API 활용

<학습 목표>

1. React로 제작한 웹 사이트에서 Redux를 활용해 상태관리를 수행할 수 있습니다.

2. Axios를 이용하여 Create, Read, Update, Delete 를 할 수 있습니다.

3. OpenAPI를 활용하여 React로 제작한 웹 사이트에 사용할 수 있습니다.

---

[01 OpenAPI란?]

1. API
  - API : Application Programming Interface, 다양한 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스
  - OpenAPI : Open Application Programming Interface (공개 API), 누구나 사용할 수 있도록 공개되어 개발자에게 사유 응용 소프트웨어나 웹 서비스에 프로그래밍적인 권한을 제공하는 API
  - OpenAPI를 사용하는 이유
    ① OpenAPI를 이용한 개발 방법이 어느 정도 획일화되어 있기 때문에 협업이 편리
    ② 코드를 작성하는 시간이 절약되어 개발 비용이 절감
    ③ API 테스트를 통한 품질 보장이 가능
    ④ 사용자와의 상호작용을 중요시하는 서비스를 개발할 수 있음
  - OpenAPI를 제공하는 이유 : 기업들은 OpenAPI를 고객들에게 제공함으로써 사용자가 기업의 서비스나 기술을 유연하게 이용할 수 있도록 하고 개발자들이 기업의 API를 연구하고 통찰하여 새로운 서비스를 만들어내면, 기업은 그것을 참고하여 고객이 진정으로 원하는 서비스가 무엇인지 더 고민할 수 있는 계기가 됨

2. Axios
  - Axios : 웹 브라우저와 Node.js를 위한 HTTP 비동기 통신 라이브러리, 백&프론트 통신을 쉽게 하기 위해 사용(Ajax 처럼). Promise 기반으로 만들어짐.
  - CRUD : Create, Read, Update, Delete
  - Axios 사용법 : POST (새로운 자원을 생성), GET (자원을 요청), PUT (자원을 갱신), DELETE (자원을 삭제)

// Axios import
import axios from 'axios'

// POST
const data = { "id": "id@email.com", "password": "password" }
axios.post('URL', data)
    .then(response => 
    	// Do something
        this.setState({ result : response.data })
        );

// GET
axios.get('URL')
    .then(response =>
        // Do something
        this.setState({ result: response.data.data })
    );
    
// PUT
axios.put('URL', data)
    .then(response =>
        this.setState({ result: response.data })
    );

// DELETE
axios.delete(url)
    .then(response =>
        this.setState({ result: response.status })
    );

[02 OpenAPI 사용하기]

1. 애플리케이션 등록
  - 신청 페이지에서 필요한 내용을 작성

  - 등록완료 후 제공되는 Client ID와 Client Secret는 공유XXX
📌 API를 호출할 수 있는 횟수는 일별로 제한되어 있음!

2. CORS
  - CORS : Cross-Origin Resource Sharing, 한 애플리케이션이 다른 도메인의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 것.  애플리케이션이 사용할 자원을 가진 서버의 도메인이 자신의 도메인과 다를 때 실행
  - CORS 에러 해결 방법
    ① 백엔드에서 특정 도메인에 대한 CORS를 허용함 → OpenAPI에서 사용하기는 쉽지X
    ② JSONP를 이용 (외부 자원을 JSON 형태로 변환해 데이터를 받아오는 방법)
    ③ 프록시 설정 (API와 사용자 간에 프록시 설정을 하여 서버의 자원을 프록시 서버에서 받아오고 사용자에게는 CORS가 허용된 것처럼 HTTP 요청을 허용)
    ④ cors-anywhere.herokuapp.com/ 이용 (버튼 클릭해서 기능 활성화)

3. OpenAPI 사용해보기
  - 상품 리스트 출력

import React from 'react';
import axios from 'axios';

class Shopping extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            result: []
        };
    }

    componentDidMount() {
        const CLIENT_ID = 'OpenAPI ID';
        const CLIENT_SECRET = 'OpenAPI Secret Key';
        
        axios.get('https://cors-anywhere.herokuapp.com/https://openapi.naver.com/v1/search/shop',
            { params: { query: '컴퓨터' }, 
              headers: {'X-Naver-Client-Id': CLIENT_ID, 'X-Naver-Client-Secret': CLIENT_SECRET}
            }).then(response =>
                this.setState({ result: response.data.items })
            );
    }

    render() {
        const { result } = this.state;
        const goods = result.map((result, productId) =>
                          <li key={productId}>
                            {result.title}
                          </li>
                        );
        return (
            <div>
                <h4>상품 리스트</h4>
                <div>
                    {goods}
                </div>
            </div>
        );
    }

}

export default Shopping;

  - dangerouslySetInnerHTML : dangerouslySetInnerHTML 이용해 HTML 태그를 적용한 결과를 출력

import React from 'react';
import axios from 'axios';

class Shopping extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            result: []
        };
    }

    componentDidMount() {
        const CLIENT_ID = 'OpenAPI ID';
        const CLIENT_SECRET = 'OpenAPI Secret Key';
        
        axios.get('https://cors-anywhere.herokuapp.com/https://openapi.naver.com/v1/search/shop',
            { params: { query: '컴퓨터' }, 
              headers: {'X-Naver-Client-Id': CLIENT_ID, 'X-Naver-Client-Secret': CLIENT_SECRET}
            })
            .then(response => this.setState({ result: response.data.items }));
            
    }

    render() {
        const { result } = this.state;
        const goods = result.map((result, productId) =>
                          <li key={productId} dangerouslySetInnerHTML={{__html: result.title}} >
                          </li>
                        );
        return (
            <div>
                <h4>상품 리스트</h4>
                <div>
                    {goods}
                </div>
            </div>
        );
    }

}

export default Shopping;

  - 상품 검색 기능 구현

import React from 'react';
import axios from 'axios';

class Shopping extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            search: '',
            goods: null
        };
    }
    
    handleChange = e => { 
        this.setState({ search: e.target.value }); 
    }
    
    handleClick = e => {
        
        const CLIENT_ID = 'OpenAPI ID';
        const CLIENT_SECRET = 'OpenAPI Secret Key';
        axios.get('https://cors-anywhere.herokuapp.com/https://openapi.naver.com/v1/search/shop',
            { params: { query: this.state.search }, 
              headers: {'X-Naver-Client-Id': CLIENT_ID, 'X-Naver-Client-Secret': CLIENT_SECRET}
            })
            .then(response => 
                this.setState({
                    goods: response.data.items.map((result, productId) =>
                              <li key={productId} dangerouslySetInnerHTML={{__html: result.title}} >
                              </li>
                    )
                })
            )
        
    }
    

    render() {
        return (
            <div>
                <h4>상품 검색</h4>
                <input onChange={this.handleChange} />
                <button onClick={this.handleClick}> 검색 </button>
                <div>
                    {this.state.goods}
                </div>
            </div>
        );
    }

}

export default Shopping;

---

※ 수업 자료의 출처는 K-Digital Training x 엘리스 인공지능 서비스 개발 기획 1기 (elice.io/)입니다.