2024. 6. 13. (목) 슈퍼코딩 부트캠프 신입연수원 Day 10 (중간보고)

 

1. 중간 보고 양식(월~금요일)

• TO-DO LIST : 백엔드 CRUD 구현 마무리, DB 사용법 및 연동

---

• 프론트엔드에서 fetch로 put 요청 (UPDATE) 보내는 부분

async function editMemo(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,
      content: editInput,
    }),
  });

  readMemo();
}

 

• 백엔드에서 프론트엔드 요청을 받아 update를 수행하는 부분

#UPDATE
@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 '존재하지 않는 메모'

 

 

---

• 프론트엔드에서 id를 넘기면서 delete 요청을 보내는 부분

//DELETE ->> DELETE method
async function deleteMemo(event) {
  const id = event.target.dataset.id;
  const res = await fetch(`/memos/${id}`, {
    method: "DELETE",
  });

  readMemo();
}

 

• 백엔드에서 받아온 요청을 토대로 저장된 데이터를 반복문 돌며 id와 같은 값을 찾아 pop 동작 수행

#DELETE
@app.delete("/memos/{memo_id}")
def delete_memo(memo_id):
    for index, memo in enumerate(memos):  # 인덱스와 메모 값을 동시에 사용하며 반복문을 돌기위해 enumerate 함수 사용
        if memo.id == memo_id:  # 들어온 메모와 존재하는 메모의 id가 일치한다면
            memos.pop(index)  # memos 배열에서 삭제
            return "성공"
    return "존재하지 않는 메모"

---

• JavaScript에서 python 서버로 fetch 요청을 보낼때 쿼리를 담아서 보내는 방법!!

const res = await fetch("/memos?sortBy=content&order=asc");

- fetch안에 url 뒤에 ?를 붙이고 그 안에 쿼리를 담아서 보내면 (GET 요청)

 

• 서버에서 

@app.get('/memos') #id를 기준으로 
def read_memo(sortBy:str, order:str):
    sort_key = lambda memos:getattr(memos,sortBy) #sortBy로 넘어온 키를 확인하는 작업
    sorted_data = sorted(memos, key=sort_key, reverse=(order.lower()=='desc')) #reverse값이 True이면 내림차순

    return sorted_data

이렇게 get 요청 안에 함수의 parameter 로 받아 동작 후에 return 하는 방법임.

 

• 배운 내용 요약 정리 : 

1. 데이터베이스란? 데이터를 저장하고 수정, 삭제 할 수 있는 소프트웨어.
2. 종류 : 관계형 데이터베이스 / 비관계형 데이터베이스
3. 어떤게 더 좋은 거냐? 상황에 따라 서로 migration을 하기도 하고 , 같이 쓰기도 한다.

RDB와 NoSQL 비교

 

1. 대표적으로 구조적인 차이가 있다. 

RDB는 테이블 구조를 사용하고, NoSQL은 key-value외에도 여러가지 구조를 사용한다.

 

2. RDB와 NoSQL의 장, 단점 비교

 

	RDB	NoSQL
장점	- 명확한 데이터구조 - 데이터의 무결성(중복X) - 무결성으로 인해 용이한 UPDATE	- 유연하고 자유로운 데이터구조 - 새로운 필드의 추가가 자유롭다 - 수평적 확장이 용이함
단점	- 시스템이 커지면 많은 JOIN으로 인해 복잡한 query 생성 - 수평적 확장이 어려워 비용이 큰 수직적 확장을 주로 사용	- 데이터 중복 발생이 가능 - 중복데이터가 많아 데이터 변경 시 모든 컬렉션에서 수정 필요 - 명확한 데이터 구조 보장 X
사용	- 데이터 구조가 잘 변하지 않는 경우 - 데이터의 UPDATE가 잦을때	- 정확한 데이터 구조가 정해지지 않은 경우 - UPDATE가 자주 이루어지지 않는 경우 - 데이터 양이 많은 경우

 

출처 : https://hyuuny.tistory.com/158

 

 

 

 

• SQL 기본 문법

1. SELECT 컬럼명 FROM 테이블명 : 테이블에서 컬럼을 가져온다 (*을 사용하면 모든 컬럼을 가져온다)
2. JOIN 테이블1 ON 테이블1.id = 테이블2.id : 다른 테이블과 id 라는 외래키를 가지고 합친다.
3. WHERE 조건문 : 가져온 테이블에서 조건을 거는 문법. 
4. GROUP BY : 중복된 값을 묶는 조건절
5. HAVING : GROUP BY로 묶인 데이터에 조건을 거는 조건문

 

 

 

 

 

 

1. 일일 보고 양식(중간 보고에 이어서 작성)

• 부족한 점 및 해결내용: 과제 중에 프론트엔드에서 서버로 fetch를 보낼때 정렬하는 쿼리를 담아서 보내고 서버에서 쿼리를 받아서 정렬 후 return 하는 것을 시도해보았는데 어떻게 보면 간단한 문제일 수도 있지만 처음 해보는 것이라 그런지 거의 두시간 정도 소요되었다. 여러 블로그도 찾아보고 chat GPT 에 물어보기도 하면서 결국은 해결했다.

 

 

 

 

 

 

 

 

 

 

 

 

 

#슈퍼코딩, #1:1관리형부트캠프, #백엔드, #backend, #백엔드공부, #개발공부, #백엔드개발자 #취준일기, #취준기록, #취뽀, #빡공, #HTML/CSS, #javascript, #react , #java, #spring