TIL 8주 1일차

[서버]

유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램

 

서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야한다.

1. 어떤 데이터인지 (URL 형식으로)

2. 어떤 방법으로 요청할지 (GET or POST)

데이터를 가져올 때는 보통 GET

데이터를 서버로 보낼 때는 POST

 

GET/POST 요청 -> 브라우저가 새로고침이 되는 단점이 있음

 

AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능

 

요청방법

1. XMLHttpRequest라는 옛날 문법 쓰기

2. fetch() 라는 최신 문법 쓰기

3. axios 같은 외부 라이브러리 쓰기 // 3번이 가장 편함

 

터미널 열어서

npm install axios

 

import axios from 'axios'

function App(){

return (

<button onClick={()=>{

axios.get('url').then((결과)=>{ console.log(결과.data) })

.catch(()=>{ console.log('실패함') }) }}>버튼</button>)}

 

1. axios를 쓰려면 상단에서 import해오고

2. axios.get(URL) 이러면 그 URL로 GET요청이 됩니다.

3. 데이터 가져온 결과는 결과.data 안에 들어있습니다. 

그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력됩니다. 

 

4. 인터넷이 안되거나 URL이 이상하면 실패하는데

실패했을 때 실행할 코드는 .catch() 안에 적으면 됩니다.

---

POST 요청 하는 법

axios.post('URL', {name : 'kim'})

이거 실행하면 서버로 { name : 'kim' } 자료가 전송됩니다. 

완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 됩니다.

 

동시에 AJAX 요청 여러개 날리는 법

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

이러면 URL1, URL2로 GET요청을 동시에 해줍니다.

둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 됩니다.

 

원래는 서버와 문자자료만 주고받을 수 있음

 

object/array 이런거 못주고받습니다.

근데 방금만해도 array 자료 받아온 것 같은데 그건 어떻게 한거냐면 

object/array 자료에 따옴표를 쳐놓으면 됩니다.

 

"{"name" : "kim"}"

이걸 JSON 이라고 합니다.

JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있습니다.

 

그래서 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야하는데

axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서 

출력해보면 object/array가 나옵니다. 

 

fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )

쌩자바스크립트 문법인 fetch() 를 이용해도 GET/POST 요청이 가능한데

그건 JSON -> object/array 이렇게 자동으로 안바꿔줘서 직접 바꾸는 작업이 필요합니다. 

---

function TabContent({tab}) {

    if (tab === 0){

      return <div>내용0</div>

    }  

    if(tab === 1){

      return <div>내용1</div>

    }  

    if(tab === 2){

      return <div>내용2</div>

    }

}

===

function TabContent({tab}) {

    return [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tab]

}

 

-------

(Detail.js)

import { } from './../App.js'

디테일 페이지에서 한단계 위로 올라가서 다시 import