Ajax란 무엇인가?

서버에 새로고침없이 요청을 가능하게 하는 일종의 자바스크립트 코드.

간단하게 서버와 요청에 대해서도 알아보자🧐

• 서버
  요청을 페이지를 요청하면 그 페이지 데이터를 가져다주는것. 예를들어 내가 주소창에 netflex.쳐서 접속하면(요청) 넷플릭스 메인페이지가 나오는것(결과)을 말한다.

• 요청

1. get방식
   url을 쳐서 요청한다. 자료를 읽을때 사용한다.
2. post방식
   url에 치는게 아니라 블로그에 댓글을 남기거나 사이트 로그인 할때 아이디랑 비밀번호를 치고 특정한 버튼을 눌러서 요청하는 방식을 말한다. 서버로 정보를 전달 할때 사용한다.

보통 서버로 get방식/post방식을 사용해 요청할때 새로고침이 일어나는 것을 흔하게 볼 수 있다. 그러나 Ajax를 사용하면 서버에 새로고침 없이 요청을 할 수 있게 도와준다.

Ajax 사용

1. jQuery Ajax - 가장 흔하게 사용하는 방법
2. axios 라는 라이브러리 설치 후 사용 - vue, 리액트에서 많이 사용
3. 자바스크립트 문법인 fetch() 사용

보통 react나 vue는 2,3 많이 사용한다. 나는 2를 사용하는 방법으로 공부해보기로 함.
터미널에 둘 중 하나 입력해서 axios를 설치한다.
yarn add axios
npm install axios
설치가 완료 되면 import 해서 사용하면 된다.

1. 서버의 데이터를 가져오는 get방식의 기본적인 형식은 대충 이런 느낌이다.

대충 여러 import 있음
import axios from 'axios';

function App(){
return(
 <button onClick={()=>{
 	axios.get('get요청url');
 }}>클릭</button>
)

저 url을 만들어주는 부분은 보통 서버 개발자의 영역이다.

2. 서버에 데이터를 보내는 post방식의 기본적인 형식
post 방식은 데이터를 전송할 url과 전송할 데이터 이 두가지 항목을 입력해야한다.

대충 여러 import 있음
import axios from 'axios';

function App(){
return(
 <button onClick={()=>{
 	axios.post('url',{title:'안녕하세요', content:'잘부탁드립니다.'});
 }}>클릭</button>
)

로그인 할때 아이디와 패스워드를 전송하는 방법은 이런 느낌이다.

리액트 뿐만 아니라 여러 언어를 배울때마다 느끼는 부분인데 대충 이런 느낌인지 아는건 그냥 저냥 하겠는데 활용하는게 정말 어려운 부분인거 같다.
대충 요청한 데이터를 state에 추가해서 활용하면 될거 같긴한데 막상 코드를 짜면 또 어렵고😥 잘 안되는 느낌이라 종종 속상하다.

그치만 계속 꾸준히 하다보면 개발자스러운 사고도 노력으로 어느정도 할 수 있지 않을까.