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