REACT 폐관수련ing
가오가 흐른다. Ajax !
🙋♂️ React에서 Ajax 요청한다는데 .... 그게 뭐죠
🙎♂️ 기냥 뭐 별거없어요. 서버에게 요청을 보내는데 새로고침 없이 할 수 있게 도와주는 일종의 코드랄카..✨
🤷♂️ 뭐어케쓰는데여 방법 하나밖에없어여 ?
🤦♂️ 아 님 핑프세요 ? 님 구글링 할 줄 모름 ? 팍 씌.... 는 ㅈㅅ 저도 제대로 알지 몬해서 공부해옴
1. 일반 개발환경에선 jQuery 설치 후 Ajax 함수를 이용한다 (가장 흔하다고 함)
2. 너님이 REACT를 사용한다 ? 그으럼 바아로 약간 더 가벼운? axios 라이브러리 설치
ㅤ👉 아니면 fetct라는 JS함수를 사용하던지요
멈춰! ✋ 서버랑 요청에 대해서 당신은 잘 안다면 스크롤 팍 내리셈
🐘 서버 👉 누군가 요청을 하면 데이터를 가져다주는 프로그램일 뿐입니다. 별거없어요.
ㅤex) 네이버 서버는 naver.com으로 요청하면 네이버 메인페이지를 가져다주는 쩌리 프로그램
ㅤㅤ 넷플릭스 서버는 netfilx.com으로 요청하면 넷플릭스 메인페이지를 가져다주는 쩌리 프로그램
진짜 뭐없어요 서버는 저런거에요 !
🐘 요청 👉 기냥 간단하게 ! 서버에 요청하는 방법을 말합네다.
GET, POST 이런 방법이 있죠.. 많이들 봤죠 ? ㅋㅋㅋ
GET : 데이터, 웹페이지 같은걸 읽고 싶을 때 서버에 보내는 요청입니다.
POST : 데이터를 서버로 보내고 싶을 때 서버에 보내는 요청입니다.
🦖 TMI
GET요청있자나염 그 브라우저 주소창있자나여 그게 GET요청하는 공간이였데요 쩔죠 ?
아 알고있었다고요? ...... 이거 왜읽고계세요 😒
아니그럼 님아 POST요청 그거는 막 네이버에서 로그인하거나 댓글 올리는거 이런거라는데..
이것고 알고있었다고요 ? ...... 제 블로그 입구컷 티켓 한 장 드리겠습니다 🎫 당신은 고수입니다
아 그래서 Ajax가 뭔데요 ㅡㅡ
🐘 위 내용을 종합해서 보면 기냥 GET,POST 이런걸 새로고침 없이 할 수 있게 도와주는 코드죠
원래 GET,POST요청하면 강제로 새로고침됨.... 왜그런지는 나도모름...비밀임..
니노 AXIOS 카이저 소제 소냐도르 엔 스파르타
ㅈㅅ
🦭 axios를 사용하기위해 설치를 해줍시다
🦭 import안해주는 흑우없제 ? 엇 ㅈㅅ
🦭와타시는 요로코롬 버튼을 누르면 서버에서 데이터를 요청하여 받은 데이터들이 뜨게끔 만들어주려고
코드를 만들었고, 이러한 과정에서 axios를 사용했습죠.
<button className="btn btn-primary" onClick={()=>{
////////////////////////////////////////////////////////////
axios.get('GET요청할URL')) // URL은 문자형태로 적어주면되무
.then(()=>{ 요청성공시실행할코드 })
.catch(()=>{ 요청실패시실행할코드 })
////////////////////////////////////////////////////////////
}}>더보기</button>이런 기본틀을 외워두면 편하겠죠? (물론 전 아직도 이 코드들이 버겁습니다. 이유? 걍 서버랑 엮이면 힘들어함)
🙋♂️ 즈기요 그.. 머선 URL 써야하는지 뭐..어케알아내요?
💁♂️ 서버쟁이한테 물어보세요. 데이터 보내주는 URL 작성하는건 서버개발자 역할입니다 나아님.
🦭 올바른 URL을 사용했더니 요청 성공을하여 이렇게 성공스멜을 풀풀 풍기는 콘솔로그를 볼 수 있었습니다
🦭 URL 주소를 인위적으로 바꾼 후 버튼을 누르니 루저ㅋ라네요 아 킹받아
친절하게 404라고 알려주는 착한 컴퓨터.....
🦭 then()안의 콜백함수 안에 파라미터를 추가하면 그게 받아온 데이터입니다!!!
콘솔창보면 data랑 request,status등등 다 알랴줌 친절대마왕....
axios.post('URL', { 원하는 데이터 })
.then((result)=>{ })
.catch(()=>{ })이런식으로 쓰면 됩니다 !
요청할 때 header 정보도 보낼 수 있다는데.. 이건 구글링해보삼 나도 해봐야함;
오늘의 삽질 🥄
🦭 ㄹㅇ 나도 그만 오타내고싶다.....
오늘의 일기
크으으 윤깐부님... 저의 리엑트 폐관수련을 코드를...!
근데 진짜 뭐 별거없죠 ?ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
진짜 쬐끔씩 꼼꼼하게 하느라...하하하하하하
변명ㅎ ㅏ지말라고요? 눼... 흑
Sae Eleisa Tera Vi
