client-server 간의 request, response

 

  Create : 데이터 생성(POST)  
  Read : 데이터 조회(GET)  
  Update : 데이터 수정(PUT, PATCH)  
  Delete : 데이터 삭제(DELETE)  

 

 

CRUD

역량 우량자들에게는 쉽다

지먼,,

경력 미숙아들에게는 어려울 수 있다는 고 것

 

 

 

#REQUESTRESPONSE객체

#후론트와백의TIKITAKA

 

 

---

 

 

 

 

 

백엔드 입문하는데 데이터를 후론트와 어떤식으로 티키타카하는 것인지

알고 싶었음

 

 각 프레임워크나 라이브러리 패키지 빌드구조 ... 에 따라 

그 규칙과 syntax가 달라지겠으니..

 

경험을 많이 쌓아보는 것이 답이리라

실무에 많이 투입되는 것이 답이리라

기업에서 실무에서 많이 부려먹고싶어하는 인재가 되어보자능

 

 

 

오늘은 백-후론트 프레임을 

fastapi - react로 분석해보겠듬 ㅎㅎ

 

 

 

■ request 객체의 구조

 

[ axios 요청 객체를 예시로 알아보자(7가지 속성) ]

url : 어디다가 요청할 건가

method < get/post

headers < 요청헤더정보

params < url 쿼리 매개변수

data < post요청 등에서 사용하는, 요청 본문

timeout 

responseType < json 등 응답 데이터 형식

 

     □ request 객체 예시

      axios({
              method: 'get',
              url: 'http://localhost:8000/items/',
             headers: {
                      'Authorization': 'Bearer token'
      },
              params: {
                      id: 1
              }
      });

 

 

■ Client의 입력값을 DB에 저장 << app.post('url/pageforinputdata')

*fastapi에서는 특이Case가 아닌 경우 , 사용자 입력 데이터를 서버에 전송할 때 get을 사용하지 않음.

 

     □ @app.post('/',response_model=ResponseModel1)

            def tikiraka( req:RequsetModelClass1, db:Session = Depends(conn_db) ):

                      items = RequsetModelClass1 (

                      id = req.id,

                      name = req.name,

                      email = req.email

        )

 

            db.add( items )

            db.commit()

      return items

 

 

 

 

 

■ response 객체의 구조

{

      data : [ /* 서버에서 반환된 데이터 배열 */ ],

      status : 200,

      statusText : OK,

      headers : { /* 응답헤더 */ },

      config : { /* 요청에 대한 설정 */ },

      request : { /* 요청에 대한 정보 */ }

 

}

 

 

 

□ 요청에 대한 response객체에서 받은 데이터를 프론트단으로 끌어오기

 

      const response = await axios.get('url/path../'); << Back이 url을 통해 넘겨준 데이터를 response변수로 담음

                  * await 는 transaction의 동시성을 제어함

      const items = response.data; << response의 구조상 본래 가지고 있는  data속성을 이용*하여 후론트에서 사용할 변수에 데이터를 담아줌

 

 

 

 

* post나 put 요청 시에 서버에 보낼 데이터는

request객체의    data  (axios 요청 객체) 혹은    body  ( fetch api 요청 객체) 속성을 이용 *

 

 

 

 

 

>> 

 

□  return(

       <div> 데이터를 받아와써 >_ < </div>

       <ul>

              { items.map(item => (

                     <li key={ item.id }> { item.name } </li>

                })}

       </ul>

     )

 

 

 

 

꾸준히 공부하기 ദ്ദി・ᴗ・)✧