[e9] Rest Api, JSON, Async

클라이언트의 서버 통신을 이해하기 위해 끄적여본 메모들...

1. async 개념

/*
    1. getWeather를 비동기 함수로 선언
    2. try에서 axios.get으로 오픈소스 api의 데이터를 수신
    3. try가 성립하면 setState
    4. 성립하지 않으면 catch에서 error 출력
*/
cosnt getWeather = async () => {
    try {
        const res = axios.get('http://api.naver.com/weather')
        console.log(res)
        setData(res)
    } catch {
        console.log(error)
    }
}

2. Rest Api & JSON

/*
    1. REST API ?
    1-1. 재현 가능한 스태이트 전송이라는 의미
    2. {Get, Post, Put, Delete} : HTTP 메소드
    3. Rest Api는 Http 메소드로 명시된다
*/

/*
    1. JSON : Javascript object notation (자바스크립트 객체 표기법)
    2. 구조 : {"userName": "goyka"}
    3. JSON은 문자열 형태
    4. stringify() : JSON에 보내주기 전에 JO를 문자열로 변환하기 위해 사용
    5. parse() : 반대 방향으로 사용할 때 쓰인다
*/

const App = () => {
    const [data, setData] = useState([])
    
    useEffect(()=> {
       const res = axios.get('http://api.naver.com/weather')
        console.log(res)
        return res.json(); // get받은 res를 Json에 삽입
    })
}

3. Axios로 get과 post를!

/*
    1. axios 비동기로 json server에 get, post
    2. onSubmitHandler의 서버 요청이 끝나면 데이터가 서버에 in
    3. useEffect 쪽이 fetchTodos에 있는 get 요청을 새로 해줘야 
       클라이언트에서 post된 값을 읽을 수 있음
    4. onSubmitHandler의 setState는 이 시점에서 post된 서버데이터를 변경함
*/

const App () => {
    const [todo, setTodo] = useState({
        title: "",
    })
    const [todos, setTodos] = useState(null)
    
    const fetchTodos = async () => {
        const {data} = await axios.get('http://api.naver.com/weather')
        setTodos(data)
    }
    const onSubmitHandler = async (todo) => {
        await axios.post('http://api.naver.com/weather', todo)
    }
    setTodos([...todos, todo])
    
    useEffect(()=> {
        fetchTodos()
    })
}