- 중간 보고 양식(월~금요일)
- TO-DO LIST : fastAPI로 서버를 만들고 python으로 CRUD 동작 실습
- 배운 내용 요약 정리 :
- 백엔드에 정보를 보내는 방법
1) Path parameter : 특정 리소스를 식별하고 싶을때 ex) /users/123 -> id가 123인 user를 찾는다
2) Query parameter : 정렬 또는 필터링을 하고 싶을때 ex) /users?age=20 -> 나이가 20살인 users
3) Request Body : POST요청을 보내는 것으로 시작. 데이터 추가 동작. URL로 구분하는것이 아닌 body에 담긴 내용을 토대로 구분함.
uvicorn main:app --reload- 서버 실행 명령어
@app.get('/items')
def read_item(skip:int=0,limit:int=10):
return items[skip:skip+limit]- get 요청은 서버에 있는 값을 받아올때 실행
- read_item은 skip과 limit라는 parameter를 가지는 함수인데 콜론 뒤에는 파라미터의 기본값을 세팅,
여기서는 기본값은 int이고 아무값도 없으면 0을 넣는다는 의미.
- return 값은 python에서 배열을 slicing 하는 것으로, 배열[시작점:종료점:건너뛸 값] 의 의미이다.
@app.post("/items")
def post_item(item:Item):
items.append(item.content)
return '성공'- post 요청은 서버에 값을 추가하는 요청을 할때.
- append는 배열에 값 추가하는 함수.
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/", StaticFiles(directory='static', html=True),name='static')- static file을 사용하기 위한 api
for detatils...
https://fastapi.tiangolo.com/ko/
함수 = async() =>
{
const res = await fetch('/wordle/answer'); //서버에 요청
const answerobj = await res.json(); //요청받은 객체를 json 형태로 변환
const answer = answerobj.answer // answerobj ={"answer" : APPLE}
}- 비동기 요청(async)
- fetch를 통해 서버에 요청을 보내고 -> 서버에서 보내준 객체를 json 형태로 answerobj에 저장한다음 -> 객체안에 있는 answer라는 key에 있는 value를 answer에 저장.
- CRUD
- Create
- Read
- Update
- Delete
- RestAPI란? Representational State Transfer의 약자로, 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다.
RestAPI (Representational State Tranfer API)의 특징
Stateless (무상태성) : 각 요청에는 필요한 모든 정보가 포함되어야 한다.
Cacheable(캐시 가능성) : 가능한 경우 클라이언트나 서버측에서 리소스를 캐시할 수 있어야 한다.
Client-Server(클라이언트-서버 구조) : 클라이언트와 서버는 완전히 독립적이어야 한다.
Layered System(계층화된 시스템 : 호출과 응답이 서로 다른 계층을 거친다. 서버와 클라이언트가 직접 연결되지 않는다.
Uniform Interface(인터페이스 일관성) : 동일한 리소스에 대한 모든 API요청은 출처에 관계없이 동일하게 표시되어야 한다.
RestAPI 설계 예시
1. URI는 동사보다는 명사를, 대문자보다는 소문자를 사용하여야 한다.
Bad Examplehttp://khj93.com/Running/
Good Examplehttp://khj93.com/run/
2. 마지막에 슬래시 (/)를 포함하지 않는다.
Bad Example http://khj93.com/test/
Good Example http://khj93.com/test
3. 언더바 대신 하이폰을 사용한다.
Bad Example http://khj93.com/test_blog
Good Example http://khj93.com/test-blog
4. 파일확장자는 URI에 포함하지 않는다.
Bad Example http://khj93.com/photo.jpg
Good Example http://khj93.com/photo
5. 행위를 포함하지 않는다.
Bad Example http://khj93.com/delete-post/1
Good Example http://khj93.com/post/1
addEvnetListener 에서 event가 넘어가는데 동작을 수행 후 redirect를 안하려면
event.preventDefault();
const res = await fetch('/memos')- 기본 동작은 get method임.
//app.js
const res = await fetch("/memos", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: new Date(),
content: value,
}),
});- POST 동작 수행
@app.post("/memos")
def create_memo(memo:Memo):
memos.append(memo)
return '메모 추가에 성공'
app.mount('/', StaticFiles(directory='static', html=True), name='static')- post 동작이 mount 보다 나중에 수행(코드가 밑에 있으면)되면 405 에러 발생