멋쟁이사자처럼 서강대 루비온레일즈 백엔드 세션 수업용 자료 입니다. api 서버에 대한 이해 및 맛보기

1. 멋쟁이사자처럼
2학기
API 서버 이용해보기
서강대 멋사 박정현

2. API 서버
클라이언트에서 요청이오면
해당 데이터를 응답해주는 서버

3. 프론트엔드
백엔드
HTTP 통신으로 JSON을 주고 받는다

4. 무엇을 요청할거야?
서버에 요청을 보낼 때 지켜야 하는 포멧!
Header
Body
2단 도시락을 싸보자!

6. 포스트맨프론트엔드
백엔드
요청 응답

8. http://newsapiserver.herokuapp.com/news
포스트맨을 활용해 API서버를 이용해보자
GET 방식
URL 파라미터 keyword (뉴스 검색 키워드)

10. @news 변수를 선언

11. @news를 json으로 변환해서 렌더링하겠다!

12. 포스트맨프론트엔드
백엔드
요청 응답

13. Jquery Ajax를 통해
API서버에서 뉴스 가져와서
Html에 뿌려보기

14. 프론트엔드
백엔드
요청 응답

15. Javascript란?
HTML을 프로그래밍적으로
조작하기 위해 사용되는 언어

16. 웹

17. HTML은 웹의 OO 이다.

18. HTML은 웹의 OO 이다.
구조

19. CSS는 웹의 OOO 이다.

20. CSS는 웹의 OOO 이다.
스타일

21. Javascript는 웹의 O 이다.

22. 뇌
Javascript는 웹의 O 이다.

23. 백엔드 프로그래밍 언어

24. 웹 프로그래밍(프론트) 언어

25. 웹 프로그래밍(프론트) 언어
- 계산
- HTML 동적 조작
- 백엔드와 소통

26. 프론트엔드
백엔드
요청 응답

27. jQuery란?
Javascript의 생산성을 향상시켜주는
(더 쉽게 쓸 수 있게 해주는)
Javascript 라이브러리

28. Ajax란?
페이지를 새로 로드하지 않고도
서버와 통신을 할 수 있는 Javascript기술
(비동기 통신)

30. 프론트엔드
백엔드
요청 응답

31. 1) HTML 파일 만들기
아무 HTML이나 만들어 본다.
(로컬 또는 C9 무관)

33. 2) jQuery 라이브러리 사용하기
https://code.jquery.com/

34. 이제 jQuery를 쓸 수 있게 됐다!

35. 3) Ajax 사용하기
http://api.jquery.com/jquery.ajax/

39. 응답이 온 후..

40. 마음대로 컨트롤 하기 위해
fetch() 함수로 선언한다.
버튼을 클릭 했을 때
fetch() 함수를 실행 시킨다.

41. 실습1
버튼 클릭 했을때
콘솔에 뉴스를 가져오게 만들기
키워드는 마음대로

42. 실습2
깃헙 코드 복사해서 실행해보고
2인 1조로 코드 해석해보기
https://github.com/Rocket-Hyun/__HTML__ajax-example

43. 실습3
로또 api 받아와서
회차 입력하면
당첨번호 알려주는 페이지 만들기

44. 포스트맨으로 로또 api 받아보기
url: [get방식] http://www.nlotto.co.kr/common.do
실습3 자료
보내야 하는 2개 파라미터 값
key값: method / value값:getLottoNumber
Key값: drwNo / value값:회차 숫자 (ex.644)