📋 TO-DO LIST
신입 연수원 활동 [o]
5일차 강의 [o]
인턴교육 직후 사수 도움 요청 업무 [o]
팀장님 지시 업무 [o]
중간/일일 업무 보고 작성 [o]
정기 팀/동기 스터디 모임 참석 및 성실도 [o]
📍 학습 내용 정리
1. API?
API(Application Programming Interface)의 사전적 정의는 “응용 프로그램에서 사용할 수 있도록, 운영 체제 혹은 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스”를 말합니다.
API 핵심은 서로 연결하여 통신하는 것이라고 생각합니다.
2. 비동기처리
프로그램이 여러 작업을 동시에 처리하도록 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는것
장점
-
여러작업을 동시에 처리하니 시스템에서의 응답성 향상
-
시간이 오래 걸리는 작업이 있다면 그것을 기다리지 않고 진행될 수 있어 성능 향상
단점
-
순차적으로 실행되는게 아니기 때문에 코드의 흐름 파악 어려움
-
오류가 일반적으로 호출하는 곳에서 바로 나오지 않기 때문에 어려운 디버깅
자바스크립트 비동기 처리 :
https://velog.io/@baby_back-dev/async-await
async & await
// html에 있는 form태그를 가져와서 submit 이벤트 할당
const form = document.querySelector("#memo-form");
form.addEventListener("submit", handleSubmit);// submit 이벤트는 자동으로 서버에게 데이터가 전달되며,
// 그 과정에서 새로고침이 발생된다.
// sumbit 이벤트 후 input의 내용을
// 빈칸으로 만들기 위해 input value 초기화
const handleSubmit = (event) => {
event.preventDefault();
const input = document.querySelector("#memo-input");
createMemo(input.value);
input.value = "";
};전체 코드
//app.js
const readMemo = async () => {
const res = await fetch("/memos");
const jsonRes = await res.json();
const ul = document.querySelector("#memo-ul");
ul.innerHTML = "";
jsonRes.forEach(displayMemo);
};
const editMemo = async (event) => {
const id = event.target.dataset.id;
const editInput = prompt("수정할 값을 입력하세요");
const res = await fetch(`/memos/${id}`, {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: id,
content: editInput,
}),
});
readMemo();
};
const deleteMemo = async (event) => {
const id = event.target.dataset.id;
const res = await fetch(`/memos/${id}`, {
method: "DELETE",
});
console.log(id);
readMemo();
};
const displayMemo = (memo) => {
const ul = document.querySelector("#memo-ul");
const li = document.createElement("li");
li.innerText = `${memo.content}`;
const editBtn = document.createElement("button");
editBtn.innerText = "edit";
editBtn.addEventListener("click", editMemo);
editBtn.dataset.id = memo.id;
const delBtn = document.createElement("button");
delBtn.innerText = "delete";
delBtn.addEventListener("click", deleteMemo);
delBtn.dataset.id = memo.id;
ul.appendChild(li);
li.appendChild(editBtn);
li.appendChild(delBtn);
};
const createMemo = async (value) => {
const res = await fetch("/memos", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: new Date().getTime(),
content: value,
}),
});
readMemo();
};
const handleSubmit = (event) => {
event.preventDefault();
const input = document.querySelector("#memo-input");
createMemo(input.value);
input.value = "";
};
// html에 있는 form태그를 가져와서 submit 이벤트 할당
const form = document.querySelector("#memo-form");
form.addEventListener("submit", handleSubmit);
readMemo();비동기처리를 위한 async , await 사용
3. 파이썬
서버쪽 코드는 파이썬으로 구현했고 기본적인 memo CRUD를 진행
//main.py
from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.staticfiles import StaticFiles
class Memo(BaseModel):
id:int
content:str
class Message(BaseModel):
sender:str
message:str
chat_log = []
memos =[]
app = FastAPI()
@app.post('/chat')
async def send_chat(message: Message):
chat_log.append(message)
return "message received successful"
@app.get("/chat")
async def get_chat_log():
return chat_log
@app.post("/memos")
def create_memo(memo:Memo):
memos.append(memo)
return 'request successful'
@app.get("/memos")
def read_memo():
return memos
@app.put('/memos/{memo_id}')
def put_memo(req_memo:Memo):
for memo in memos:
if memo.id == req_memo.id:
memo.content = req_memo.content
return '성공했습니다.'
return '그런 메모는 없습니다'
@app.delete('/memos/{memo_id}')
def delete_memo(memo_id:int):
for index,memo in enumerate(memos):
if memo.id == memo_id:
memos.pop(index)
return '성공했습니다'
return '그런 메모는 없습니다'
app.mount("/", StaticFiles(directory='static' , html= True), name='static')Fast API 공식 문서에서는 Request body 선언 시
Pydantic 모델을 사용하는 것을 권장
(Body를 선언하기 위해서 pydantic의 BaseModel을 import)
정적인 파일(JavaScript, CSS, images, etc.)를 관리하기 위해 StaticFiles를 import
4. Postman
Postman을 사용해서 API test를 진행
간편하게 json형태의 response를 볼 수 있게 되서
자주 애용할 예정입니다.
📍 일일보고
부족한 점 : 아직 파이썬의 문법에 대한 이해가 적어 다양한 활용을 해보기 어려웠다.
스스로 시도해본 것들 :
자기소개 객체만들기
class Me:
@staticmethod
def introduce(name, role, hobbies):
introduction = f"안녕하세요, {role}를 목표로 하고 있는 저는 {name}입니다."
hobbies_list = ", ".join(hobbies)
introduction += f" 여가 시간에는 주로{hobbies_list}를 즐깁니다."
return introduction
# Me 객체 생성
me = Me()
# 팀원에게 소개
print(me.introduce(name="조민수", role="개발자", hobbies=["디지털 드로잉", "소품샵 탐방", "강아지와 산책"]))메세지 서버로 보내는 (post) , 메세지를 담은 배열 불러오기(get)
from fastapi import FastAPI
from pydantic import BaseModel
class Message(BaseModel):
sender:str
message:str
chat_log = []
app = FastAPI()
@app.post('/chat')
async def send_chat(message: Message):
chat_log.append(message)
return "message received successful"
@app.get("/chat")
async def get_chat_log():
return chat_log알게된 점 :
클라이언트에서 서버로
1. path parameter
슬래시를 통해 전달
예) localhost:8000/users/1
2. query parameter
정렬이나 필터링을 할때 사용하는 방법
예)/user?age=20
헷갈리거나 실수한 점 : 아직 파이썬 문법에 대해 익숙하거나 이해가 적어 활용하기 어려운 점
