Top Banner
멋쟁이사자처럼 2학기 API 서버 CRUD 서강대 멋사 박정현
58

루비온레일즈 API 서버 - 3) api 서버 CRUD

Jan 23, 2018

Download

Engineering

Junghyun Park
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 루비온레일즈 API 서버 - 3) api 서버 CRUD

멋쟁이사자처럼2학기

API 서버 CRUD서강대멋사박정현

Page 2: 루비온레일즈 API 서버 - 3) api 서버 CRUD

우리가 이미 알고 있는 CRUD..!

API서버에서 CRUD를 해보자!

Page 3: 루비온레일즈 API 서버 - 3) api 서버 CRUD

CRUD 기능이 탑재된 API 서버

모든 유저 정보: [GET] ‘/users’특정 유저 정보: [GET] ‘/users/:id’새로운 유저 만들기: [POST] ‘/users’특정 유저 수정: [PATCH] ‘/users/:id’특정 유저 삭제: [DELETE] ‘/users/:id’

https://railscrudapi.herokuapp.com

Page 4: 루비온레일즈 API 서버 - 3) api 서버 CRUD

User

id / email / name / password

Page 5: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 6: 루비온레일즈 API 서버 - 3) api 서버 CRUD

실습1

포스트맨을 통해서API서버에서 CRUD를 마음껏 해보자!

Page 7: 루비온레일즈 API 서버 - 3) api 서버 CRUD

프론트엔드

백엔드

요청 응답

Page 8: 루비온레일즈 API 서버 - 3) api 서버 CRUD

이제 ‘프론트’에서

API서버 CRUD를 해보자!

Page 9: 루비온레일즈 API 서버 - 3) api 서버 CRUD

1) Ajax로 users 가져와서콘솔에 찍기

Page 10: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 11: 루비온레일즈 API 서버 - 3) api 서버 CRUD

페이지가 로드 되자 마자 start함수 실행!

Page 12: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 13: 루비온레일즈 API 서버 - 3) api 서버 CRUD

2) 가져온 데이터뿌려주기

Page 14: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 15: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 16: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 17: 루비온레일즈 API 서버 - 3) api 서버 CRUD

3) 유저 생성하기

Page 18: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 19: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 20: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 21: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 22: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 23: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 24: 루비온레일즈 API 서버 - 3) api 서버 CRUD

-일단 여기까지-

2인 1조로 코드 분석

Page 25: 루비온레일즈 API 서버 - 3) api 서버 CRUD

모두 이해가 된 사람은‘만들기’ 눌렀을 때

모든 유저들 정보를 새로 가져와서뿌려주게 만들기!

Page 26: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 27: 루비온레일즈 API 서버 - 3) api 서버 CRUD

4) 유저 삭제하기

실습2

난이도: ★ ★ ★ ★☆4인 1조 ㄱㄱ

Page 28: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 29: 루비온레일즈 API 서버 - 3) api 서버 CRUD

시나리오

1) 유저 옆에 삭제 버튼 생성

2) 버튼 눌렀을 때 삭제하는 함수 만들기*유저 삭제 땐 뭐가 필요하더라? User의 Id

해당 User의 Id를 어떻게 함수로 넘길 수 있을까?

3) 삭제 누르면 새로 모든 user 리스트를 가져옴

Page 30: 루비온레일즈 API 서버 - 3) api 서버 CRUD

https://github.com/Rocket-Hyun/__HTML__ajax-example

깃헙

실습 할 땐 보지마세염

Page 31: 루비온레일즈 API 서버 - 3) api 서버 CRUD

이제 프론트는 끝!다른 프론트들도 다 이와 같은 방식!

Page 32: 루비온레일즈 API 서버 - 3) api 서버 CRUD

프론트엔드

백엔드

요청 응답

Page 33: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 34: 루비온레일즈 API 서버 - 3) api 서버 CRUD

https://github.com/Rocket-Hyun/__RailsAPI__Basic-CRUD

레일즈 깃헙

2인 1조 해서 코드 이해

클론 받아서app/controllers/users_controller.rb 파일 확인

Page 35: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 36: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 37: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 38: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 39: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 40: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 41: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 42: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 43: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 44: 루비온레일즈 API 서버 - 3) api 서버 CRUD

레일즈 api 가지고 놀기!

Page 45: 루비온레일즈 API 서버 - 3) api 서버 CRUD

일반 레일즈 레일즈 APIVS

Page 46: 루비온레일즈 API 서버 - 3) api 서버 CRUD

M

V C

일반 레일즈

Page 47: 루비온레일즈 API 서버 - 3) api 서버 CRUD

M

C

레일즈 API

V

Page 48: 루비온레일즈 API 서버 - 3) api 서버 CRUD

레일즈 API일반 레일즈

Page 49: 루비온레일즈 API 서버 - 3) api 서버 CRUD

레일즈 API일반 레일즈

Page 50: 루비온레일즈 API 서버 - 3) api 서버 CRUD

<<<<훨씬 빠르다

API

Page 51: 루비온레일즈 API 서버 - 3) api 서버 CRUD

* C9 환경 기준

나의 레일즈 api 만들기

Thanks to 양곤쓰~

Page 52: 루비온레일즈 API 서버 - 3) api 서버 CRUD

우선 Rails를 5로 업그레이드 하고

--api 명령어로 레일즈 프로젝트 재 생성

Page 53: 루비온레일즈 API 서버 - 3) api 서버 CRUD

1) Gemfile 수정

Page 54: 루비온레일즈 API 서버 - 3) api 서버 CRUD

2) Bundle update rails

Page 55: 루비온레일즈 API 서버 - 3) api 서버 CRUD
Page 56: 루비온레일즈 API 서버 - 3) api 서버 CRUD

3) .c9 빼고 모든 폴더 삭제

Page 57: 루비온레일즈 API 서버 - 3) api 서버 CRUD

4) rails new . --api

현재 폴더에 만들겠다!

Page 58: 루비온레일즈 API 서버 - 3) api 서버 CRUD

다음 주

카카오톡 봇 개발 ㄱㄱ

*카카오톡 봇이 무엇인지 모르겠다면?

라이언봇 친추 ㄱㄱㄱ