2024. 05. 10 (금) 주차 - Daily Coding - Day12

프론트 -> 서버로 데이터 전송 방법

프론트

write.html 만들고

javascript 로 서버 쪽에 items, body formData 만들고

json 파일로 백에 전달

 

백엔드

post쪽에서 items를 정보를 받아서 sql 문법을 활용해 데이터 정리

image는 16진법으로 변경

 

dbeaver를 통해 데이터베이스 업데이트 되는걸 확인

 

 

 

서버 -> 프론트로 데이터 노출

 

1. 데이터베이스에서 테이블을 업데이트하는 작업 필요

CREATE TABLE items (
	id INTEGER PRIMARY KEY,
    title TEXT NOT NULL,
    image BLOB,
    price INTEGER NOT NULL,
    description TEXT,
    place TEXT NOT NULL
    insertAt INTEGER NOT NULL
  );
  
  -- DROP TABLE items; => 데이터를 다 지우는거이기에 함부로 사용하면 안됨.

 

2. 파이썬(백엔드 파일)에서 insertAt에 대해 추가 기입

 

3. javascript(프론트 파일)에서 시간에 대해 구문 추가 기입

 

4. index.html에서 <main> tag 내 구문 주석처리

5. javascript에서 <main>에 대한 내용을 작성해준다

const fetchList = () => {
    const res = await fetch('/items');
    const data = await res.json();
    console.log(data);
};

 

6. 파이썬(백엔드 파일)에서 데이터를 가져오는 구문을 추가 기입

from fastapi.responeses import JSONespose
from fastapi.encoders import jsonalbe_ecoder


@app.get('/items')
async def get_items():
    con.row_factory = sqlite3.Row #컬럼명도 같이 가져오는 문법
    cur = con.cursor()
    rows = cur.execute(f"""
                        SELECT * FROM items;
                        """).fetchall()
    return JSONespose(jsonalbe_ecoder(dict(rows) for row in rows))



  #  rows = [['id', 1], ['title','좋아요']]
  #  {id:1, title:'좋아요''}

 

7. javascript (프론트엔드)에서 호출되는 함수 추가 기입

const fetchList = () => {
    const res = await fetch('/items');
    const data = await res.json();
    console.log(data);
};

fetchList();

 

 

🧐 오늘의 회고

이번 주 배운 강의는 전부 주말간 재학습이 필요한 상황.

진짜 프론트, 백 왔다갔다 하는게 이렇게 어려웠던거구나 싶다...

javascript 함수 활용도 못하고 있는 상황인데 진도는 왜이리 빠른거냐고!!!!!

조금만 천천히 나갔으면 좋겠다 진짜.. 수업 잠시 스톱 하는 것도 고려 중..