<button
onClick={() => {
setClick(click + 1);
axios
.get(
"https://codingapple1.github.io/shop/data" +
click +
".json"
)
.then(data => {
const copy = [...shoes, ...data.data];
setShoes(copy);
})
.catch(error => {
alert("error발생");
});
}}
>
버튼
</button>
서버란?
유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.
10 분
리액트에서 서버와 통신하려면 ajax 1
0:00 AJAX 개념설명
4:51 버튼만들기 & 누르면 AJAX 요청하기
오늘의 숙제 :
버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해봅시다.
https://codingapple1.github.io/shop/data2.json
여기로 GET요청하면 상품데이터를 3개 더 보내줍니다.
오늘은 상품 더보기 기능을 만들어봅시다.
그래서 실제 상품을 서버에서 가져와볼 것인데
서버가 뭔지 그리고 통신은 어떻게 하는지 부터 알아봅시다.
서버란?
유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.
네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램
유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램
입니다.
그래서 서버개발 별거아님
"누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝입니다.
유저가 그냥 데이터달라고 떼쓰면 서버가 보내주진 않습니다.
서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데
-
어떤 데이터인지 (URL 형식으로)
-
어떤 방법으로 요청할지 (GET or POST)
잘 기재해야 데이터를 보내줍니다.
예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=783054 여기 URL로 GET요청하면 보내줍니다.
예를 들어서 독립일기라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=748105 여기 URL로 GET요청하면 보내줍니다.
URL을 어떻게 알았냐고요?
네이버 웹툰 서버개발자에게 물어보거나 URL이 기재된 html 페이지를 찾아보거나 그러면 됩니다.
GET/POST 요청하는 법?
GET요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창입니다.
거기에 URL 아무거나 적으면 그 곳으로 GET요청을 날려줍니다.
진짠지 테스트해보셈
POST요청을 날리고 싶으면
태그 이용하면 됩니다.그럼 폼이 전송되었을 때 POST요청을 날려줍니다.
근데 GET, POST 요청을 저렇게 날리면 단점이 뭐냐면 브라우저가 새로고침됩니다.
AJAX
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 합니다.
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있고
그런 기능을 만들 수 있는 것임
AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 됩니다.
-
XMLHttpRequest라는 옛날 문법 쓰기
-
fetch() 라는 최신 문법 쓰기
-
axios 같은 외부 라이브러리 쓰기
3번이 가장 편하니 3번을 써봅시다.
터미널 열어서
npm install axios
하면 설치 끝입니다.
AJAX 요청하는 법
버튼누르면 제가 만든 서버로 ajax 요청을 해봅시다.
https://codingapple1.github.io/shop/data2.json 이 URL로 GET요청을 하면 상품 3개를 가져와줍니다.
여기로 요청해봅시다.
import axios from 'axios'
function App(){
return (
<button onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
console.log(결과.data)
})
.catch(()=>{
console.log('실패함')
})
}}>버튼</button>
)
}
10 분
리액트에서 서버와 통신하려면 ajax 1
0:00 AJAX 개념설명
4:51 버튼만들기 & 누르면 AJAX 요청하기
오늘의 숙제 :
버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해봅시다.
https://codingapple1.github.io/shop/data2.json
여기로 GET요청하면 상품데이터를 3개 더 보내줍니다.
오늘은 상품 더보기 기능을 만들어봅시다.
그래서 실제 상품을 서버에서 가져와볼 것인데
서버가 뭔지 그리고 통신은 어떻게 하는지 부터 알아봅시다.
서버란?
유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램일 뿐입니다.
네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램
유튜브 서버 : 유저가 영상 달라고 하면 영상 보내주는 프로그램
입니다.
그래서 서버개발 별거아님
"누가 A를 요청하면 A를 보내주세요" 라고 코드짜는게 서버개발 끝입니다.
유저가 그냥 데이터달라고 떼쓰면 서버가 보내주진 않습니다.
서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데
-
어떤 데이터인지 (URL 형식으로)
-
어떤 방법으로 요청할지 (GET or POST)
잘 기재해야 데이터를 보내줍니다.
데이터를 가져올 때는 보통 GET 고르면 되고
데이터를 서버로 보낼 때는 POST 고르면 됩니다.
그리고 어떤 데이터를 보고싶은지 URL만 잘 기재하면 되는데
예를 들어서 쇼미더럭키짱이라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=783054 여기 URL로 GET요청하면 보내줍니다.
예를 들어서 독립일기라는 네이버웹툰을 보고싶으면
https://comic.naver.com/webtoon/list?titleId=748105 여기 URL로 GET요청하면 보내줍니다.
URL을 어떻게 알았냐고요?
네이버 웹툰 서버개발자에게 물어보거나 URL이 기재된 html 페이지를 찾아보거나 그러면 됩니다.
GET/POST 요청하는 법?
GET요청을 날리고 싶으면 가장 쉬운 방법은 브라우저 주소창입니다.
거기에 URL 아무거나 적으면 그 곳으로 GET요청을 날려줍니다.
진짠지 테스트해보셈
POST요청을 날리고 싶으면
태그 이용하면 됩니다.그럼 폼이 전송되었을 때 POST요청을 날려줍니다.
근데 GET, POST 요청을 저렇게 날리면 단점이 뭐냐면 브라우저가 새로고침됩니다.
AJAX란?
서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는
간단한 브라우저 기능을 AJAX라고 합니다.
그거 쓰면 새로고침 없이도 쇼핑몰 상품을 더 가져올 수도 있고
새로고침 없이도 댓글을 서버로 전송할 수도 있고
그런 기능을 만들 수 있는 것임
AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 됩니다.
-
XMLHttpRequest라는 옛날 문법 쓰기
-
fetch() 라는 최신 문법 쓰기
-
axios 같은 외부 라이브러리 쓰기
3번이 가장 편하니 3번을 써봅시다.
터미널 열어서
npm install axios
하면 설치 끝입니다.
AJAX 요청하는 법
버튼누르면 제가 만든 서버로 ajax 요청을 해봅시다.
https://codingapple1.github.io/shop/data2.json 이 URL로 GET요청을 하면 상품 3개를 가져와줍니다.
여기로 요청해봅시다.
import axios from 'axios'
function App(){
return (
<button onClick={()=>{
axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
console.log(결과.data)
})
.catch(()=>{
console.log('실패함')
})
}}>버튼
)
}
1. axios를 쓰려면 상단에서 import해오고
-
axios.get(URL) 이러면 그 URL로 GET요청이 됩니다.
-
데이터 가져온 결과는 결과.data 안에 들어있습니다.
그래서 위의 버튼 누르면 서버에서 가져온 데이터가 콘솔창에 출력됩니다.
- 인터넷이 안되거나 URL이 이상하면 실패하는데
실패했을 때 실행할 코드는 .catch() 안에 적으면 됩니다.
기본메인 페이지
버튼 누르면 상품데이터 3개추가
숙제 메인페이지에 상품카드 3개를 더생성
<button
onClick={() => {
axios
.get("https://codingapple1.github.io/shop/data2.json")
.then(data => {
console.log(data);
});
}}
>
버튼
</button>
</>
다음과 같이 작성후 console.log창을 확인해본결과.
data.data의 3,4,5번이 있는걸 확인했다 상품이라고 판명하고
.then(data => {
console.log(data);
// copy본을 추가하고 shoes데이터랑, data.data를 copy에 옮겨준후.
const copy = [...shoes, ...data.data];
//setShoes안에 copy를 집어넣으면 추가되지않을까?
setShoes(copy);
});
버튼을 누르면 다음과같이 추가가되는걸 볼수있다.
응용문제
- 응용1. 버튼을 2번 누르면 7,8,9번 상품을 가져와서 html로 보여주려면?
횟수를 저장하면 되지않을까라고 생각했다.
//usestate로 click횟수 저장
let [click, setClick] = useState(2);
setClick(click + 1);
axios
.get(
"https://codingapple1.github.io/shop/data" +
click +
".json"
)
data뒤에 click 변수가 출력될수있게 생성해줬다.
2부터시작.
<button
onClick={() => {
setClick(click + 1);
axios
.get(
"https://codingapple1.github.io/shop/data" +
click +
".json"
)
.then(data => {
console.log(data);
const copy = [...shoes, ...data.data];
setShoes(copy);
})
.catch(error => {
alert("오류발생!");
});
}}
>
버튼
</button>
CATCH로인해 오류발생이 출력되는걸 볼수있다.
POST요청 하는 법
axios.post('URL', {name : 'kim'})
- 이거 실행하면 서버로 { name : 'kim' } 자료가 전송됩니다.
완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 됩니다.
동시에 AJAX 요청 여러개 날리려면
Promise.all( [axios.get('URL1'), axios.get('URL2')] )
+이러면 URL1, URL2로 GET요청을 동시에 해줍니다.
둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 됩니다.
fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } )
