루비온레일즈 api 서버 - 2) api 서버에 대한 이해 및 맛보기
TRANSCRIPT
![Page 1: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/1.jpg)
멋쟁이사자처럼2학기
API 서버이용해보기서강대멋사박정현
![Page 2: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/2.jpg)
API 서버
클라이언트에서요청이오면해당데이터를응답해주는서버
![Page 3: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/3.jpg)
프론트엔드
백엔드
HTTP 통신으로 JSON을주고받는다
![Page 4: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/4.jpg)
무엇을요청할거야?
서버에요청을보낼때지켜야하는포멧!
Header
Body
2단도시락을싸보자!
![Page 5: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/5.jpg)
![Page 6: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/6.jpg)
포스트맨프론트엔드
백엔드
요청 응답
![Page 7: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/7.jpg)
![Page 8: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/8.jpg)
http://newsapiserver.herokuapp.com/news
포스트맨을활용해 API서버를이용해보자
GET 방식URL 파라미터 keyword (뉴스검색키워드)
![Page 9: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/9.jpg)
![Page 10: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/10.jpg)
@news 변수를선언
![Page 11: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/11.jpg)
@news를 json으로변환해서렌더링하겠다!
![Page 12: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/12.jpg)
포스트맨프론트엔드
백엔드
요청 응답
![Page 13: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/13.jpg)
Jquery Ajax를통해API서버에서뉴스가져와서
Html에뿌려보기
![Page 14: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/14.jpg)
프론트엔드
백엔드
요청 응답
![Page 15: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/15.jpg)
Javascript란?
HTML을프로그래밍적으로조작하기위해사용되는언어
![Page 16: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/16.jpg)
웹
![Page 17: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/17.jpg)
HTML은웹의 OO 이다.
![Page 18: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/18.jpg)
HTML은웹의 OO 이다.
구조
![Page 19: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/19.jpg)
CSS는웹의 OOO 이다.
![Page 20: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/20.jpg)
CSS는웹의 OOO 이다.
스타일
![Page 21: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/21.jpg)
Javascript는웹의 O 이다.
![Page 22: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/22.jpg)
뇌Javascript는웹의 O 이다.
![Page 23: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/23.jpg)
백엔드프로그래밍언어
![Page 24: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/24.jpg)
웹프로그래밍(프론트) 언어
![Page 25: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/25.jpg)
웹프로그래밍(프론트) 언어
- 계산- HTML 동적조작- 백엔드와소통
![Page 26: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/26.jpg)
프론트엔드
백엔드
요청 응답
![Page 27: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/27.jpg)
jQuery란?
Javascript의생산성을향상시켜주는(더쉽게쓸수있게해주는)
Javascript 라이브러리
![Page 28: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/28.jpg)
Ajax란?
페이지를새로로드하지않고도서버와통신을할수있는 Javascript기술
(비동기통신)
![Page 29: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/29.jpg)
![Page 30: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/30.jpg)
프론트엔드
백엔드
요청 응답
![Page 31: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/31.jpg)
1) HTML 파일만들기
아무 HTML이나만들어본다.(로컬또는 C9 무관)
![Page 32: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/32.jpg)
![Page 34: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/34.jpg)
이제 jQuery를쓸수있게됐다!
![Page 36: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/36.jpg)
![Page 37: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/37.jpg)
![Page 38: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/38.jpg)
![Page 39: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/39.jpg)
응답이온후..
![Page 40: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/40.jpg)
마음대로컨트롤하기위해fetch() 함수로선언한다.
버튼을클릭했을때fetch() 함수를실행시킨다.
![Page 41: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/41.jpg)
실습1
버튼클릭했을때콘솔에뉴스를가져오게만들기
키워드는마음대로
![Page 42: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/42.jpg)
실습2
깃헙코드복사해서실행해보고2인 1조로코드해석해보기
https://github.com/Rocket-Hyun/__HTML__ajax-example
![Page 43: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/43.jpg)
실습3
로또 api 받아와서회차입력하면
당첨번호알려주는페이지만들기
![Page 44: 루비온레일즈 API 서버 - 2) api 서버에 대한 이해 및 맛보기](https://reader035.vdocuments.mx/reader035/viewer/2022082209/5a66af2e7f8b9a3c0e8b47ed/html5/thumbnails/44.jpg)
포스트맨으로로또 api 받아보기url: [get방식] http://www.nlotto.co.kr/common.do
실습3 자료
보내야하는 2개파라미터값key값: method / value값:getLottoNumberKey값: drwNo / value값:회차숫자 (ex.644)