> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/javascript/web/ajax/undefined-1/plugin.md).

# 플러그인 사용하기

## 질문 

1. 사진이 불러와지지 않는 경우 

## 실습하기 

* [Chrom 브라우저 플러그인을 설치](https://shhn0509.gitbook.io/javascript/ajax/undefined/client/chrome)하여 SOP 보안 이슈를 해결한다. 
* [KAIST  오픈 API](https://www.kaist.ac.kr/kr/html/footer/0819.html)를 사용하여 실습한다.  

## 오류 확인 

![동일 출처 정책(SOP) 오류를 확인](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR98gZ8XWoDd4xE35wR%2F-MR9Eut8TmX75RkLTnCH%2Fimage.png?alt=media\&token=1782059b-e8e2-451b-9afa-f062203800a4)

## 데이터 응답 확인

```javascript
// Open API
// SOP(Same Origin Policy) 문제가 발생하지 않는 경우
// Access-Control-Allow-Origin: *
;(function (global, $, ajax) {
  'use strict'

  var kaist_open_api_address = 'http://www.kaist.ac.kr/_module/api/json.php'

  var code = '0802'
  var start = 1
  var display = 1

  ajax
    .get(
      kaist_open_api_address + '?code=' + code + '&start=' + start + '&display=' + display
    )
    .then(function (data) {
      console.log(data)
    })
})(window, Dom, ajax)
```

![Header에서 서버 통신 상태를 확인 할 수 있다. ](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR8vU1nAFooMZGg7Pjl%2F-MR8xVckEc9QJqNppfbE%2Fimage.png?alt=media\&token=ec85cd6e-5ea7-4e76-80c1-1f81b567a3eb)

![다른 서버의 데이터가 접근이 가능하다는 것을 확인한다. ](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR8xX0Bk31L4M_gqHp8%2F-MR8x_dSi-bVBwZf1ROG%2Fimage.png?alt=media\&token=0ee66877-403a-4db3-bae0-97184c08216b)

![데이터를 잘 불러온 것을 확인](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR8xX0Bk31L4M_gqHp8%2F-MR8ygkCaKNNJ3QsRRTf%2Fimage.png?alt=media\&token=77988caf-e9ac-4915-bfcf-1f9cfc659849)

## 데이터 → 객체

![데이터의 유형의 보니 문자값이다.](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR8ypBDg4vTAzmOEE0T%2F-MR8zBJuC-mQKGHhIVq_%2Fimage.png?alt=media\&token=f63d20ee-6591-4af7-811a-9d467a200d54)

### [JSON.parce()](https://shhn0509.gitbook.io/dom/ajas/json#json-parse-ie-8)

json 데이터는 문자 값이다. 그래서 JS의 순환/반복 메서드를 사용하기 위해서는 문자를 객체 화 하는 작업이 필요하다. 

![JSON.parce를 사용해서 객체 생성](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR90Mj4g99vRMqKow_W%2F-MR90bBCVweZ1dGviPXc%2Fimage.png?alt=media\&token=0044ecc8-2198-47ee-80b9-ef8d8ec373c8)

## 결과

```javascript
;(function (global, $, ajax) {
  'use strict'

  var kaist_open_api_address = 'http://www.kaist.ac.kr/_module/api/json.php'

  var code = 'news'
  var start = 1
  var display = 5

  ajax
    .get(
      kaist_open_api_address + '?code=' + code + '&start=' + start + '&display=' + display
    )
    .then(function (data) {
      var template = $.template(JSON.parse(data), function (item) {
        return item.contents
      })
      $('main').html(template)
    })
})(window, Dom, ajax)
```

![데이터가 잘 불러와진 것을 확인 할 수 있다. ](https://1609565946-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MQBEZ0w9UlpTQnX-DAe%2F-MR96k56W60V1JNWdl6L%2F-MR96zctb6f7PgvuEeaH%2Fimage.png?alt=media\&token=85f8ba3d-1274-40c7-a04a-653c6c21d948)