[WIL] React 심화 주차 + Axios(Login 과정)

동기, 비동기 방식의 장단점

• 동기
  • 설계가 매우 간단하고 간편적이다.
  • 결과가 주어질때까지 아무것도 못하고 대기야하는 단점이 있다.
• 비동기 
  • 동기보다 조금 더 복잡하다. 
  • 결과가 주어지는데 시간이 걸리지만 그 시간 동안에는 다른작업을 병행할 수 있다는 장점과 자원을 효율적으로 사용할 수 있다.

HTTP Methods

클아이언트가 웹서버에게 사용자 요청의 목적/종류를 알려주는 수단
Axios로 통신하면서 가장 많이 사용되는 메소드들

•  GET: 입력한 url이 존재하는 자원에 요청을 보낸다.
  axios.get(url,[,config])
  GET방식은 서버에서 어떤 데이터를 가져와서 보여줄것인가를 정하는 용도로 쓴다.
  주소에 있는 쿼리스트링을 활용해 정보를 전달하는 것이고
  GET 메서드는 값이나 상태등을 직접 바꿀수 없다.

// 예로 만든 axios 구조
import axios from "axios"
axios.get('https://localhost:3000/login/user')
  .then((Response)=>{console.log(Response.data)})
  .catch((Error)=>{console.log(Error)})
[
  { id: 1, pw: '12345', name: 'jungho' },
  { id: 2, pw: '12345', name: 'sungJun' },
  { id: 3, pw: '12345', name: 'hyunJi' },
]
//응답은 json 형태로 넘어온다.

• POST : 새로운 리소스를  생성(create)할 때 사용한다.

axios.post("url주소",{
  data객체
},[,config])
//POST 메서드의 두 번째  인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

Post는 로그인, 회원가입 등  사용자가 생성한 파일을 서버에다가 업로드할때 사용한다.
Post를 사용하면 주소창에 쿼리스트링이 남지 않고 GET보다 안전하다.

axios.post( 'url', 
 {
   contact: 'JungHo',
   email: 'wjdgh0727@gmail.com'
 },
 {
   headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
   }
  }
 ) 
   .then((response) => {console.log(response.data); })
   .catch((response) => {console.log('Error!') });

• Delete: REST 기반 API 프로그램에서 데이터베이스에 저장된 내용을 삭제하는 목적으로 사용된다.
  axios.delete(url,[,config]);
  Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.
• Put: PUT 메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 한다.

Axios

Promise API를 활용하는 HTTP 비동기 통신 라이브러리
(백엔드와 프론드엔드간에 통신을 위해서 만들어진 AJAX도 더불어 사용하기도 합니다.)
axios에는 여러 가지 기능들이 많은데 대표적으로는 두 가지가 사용된다. (Get, Post)

//GET
import React, {useEffect} from "react";
import axios from 'axios';
const App = () => {
	useEffect(() => {
    	axiosTest();
    })
  	const axiosTest = () => {
    	axios.get('api 입력하는 곳')				//get으로 지정된 API에서 정보를 가져온다.
      	.then(res => console.log(res.data))		//그 뒤(then) 데이터를 보여준다.
      	.catch(err => console.log(err));	//에러가 발생하면 곧바로 catch로 넘어가 에러를 표시한다.
    }
    return <p>hello</p>
};
export default App;
//이게 Get으로 데이터를 받아오는 거

//POST
import React, {useEffect} from "react";
import axios form 'axios';

const App = () => {
	useEffect(() => {
    	axiosTest();
    })
  	const axiosTest = () => {
    	axios.post('api 입력하는 곳', '보낼 값을 입력하는 곳')	//axios에서 서버로 값을 POST한다. => 서버 내에서 데이터를 적절히 처리한다.
      	.then(res => console.log(res.data)	//그 뒤(then) 마지막 결과값을 보내준다.
       	.catch(err => console.log(err));	//실패하면 catch작동, 에러 표시
    }
    return <p>hello</p>
};
export default App;
//ex)로그인 과정
//유저가 아이디, 비밀번호 입력 후 로그인 버튼 누르면
//버튼을 누름과 동시에 axios의 post에 정해진 경로로 아이디와 비밀번호가 서버로 전송됨
//서버는 로그인을 위한 동작을 수행함 (ex. 아이디 존재 유무 확인, 비밀번호 비교 등)
//비밀번호가 정확하다면 결과값으로 '로그인 성공'을 보내고, 실패하면 '로그인 실패'를 보낸다.
//axios는 서버가 전달해 준 결과값을 res.data로 다시 유저에게 보내면 유저가 결과를 확인한다.

출처: https://koras02.tistory.com/48 [Koras02코딩웹:티스토리]
https://ko-de-dev-green.tistory.com/61

React 심화 주차 회고
이번엔 개인 과제가 아니라 팀 과제로 진행되었기 때문에
백엔드 없이 프론트끼리 작은 미니 프로젝트를 하게 되었다.
우리 조는 '방구석 yoriking'이라는 레시피 공유 페이지를 만들었는데
어려움이 매우매우 많았다. ㅠㅠ
마지막 날 heroku와 vercel을 이용해서 배포를 했는데 많이 어려웠지만, 그래도 다행히 잘 됐다.
백엔드와의 협업이 이미 시작된 지금 회고하는 리액트 심화 주차 프로젝트는 할 만한 거였다... ㅎㅎ...
화이팅하자, 채원, 아자!