react ( Udemy강의 ) - 5. DB연결
* 브라우저에서 실행되는 모든 자바스크립트 코드는 브라우저뿐만 아니라 웹사이트의 사용자들도 접근하고 읽을 수 있다!
참고 자료 : https://academind.com/tutorials/hide-javascript-code
API : Application Programming Interface
URL에 요청을 전송하게 되면 특정한 형식에 맞춰서 데이터를 전달
참고자료 : https://academind.com/tutorials/rest-vs-graphql
axios : 어떤 자바스크립트 라이브러리를 사용하는가에 관계없이 HTTP 요청 전송, 라이브러리없이 사용O
Fetch : 최근에는 자바스크립트 내에서 HTTP 요청을 전송하는 내장 매커니즘 존재, 브라우저 내장형
API를 통해 HTTP 요청을 전송하고 응답을 처리가능
const [movies,setMoives] = useState([]);
const fetchMoviesHandler = () => {
fetch('url').then(response => {
return response.json();
}).then(data => {
const transformedMoives = data.results.map(moiveData => {
return {
id:movieData.episode_id
};
});
setMovies(transformedMovies);
});
}
- fetch함수는 프로미스라는 객체를 반환, 이 객체는 우리가 잠재적으로 발생할 수 있는 오류나 호출에 대한 응답에 반응
- 프로미스객체 : 어떤 즉각적인 행동 대신 어떤 데이터를 전달하는 객체 - HTTP요청전송은 비동기이기에
- then : 응답받을때 호출
- catch : 잠재적 오류 처리
async await
async function fetchMoivesHandler() {
const response = await fetch('url');
const data = await response.json();
const transformedMovies = data.results.map((movieData) => {
return {
id: movieData.episode_id,
title: movieData.title,
openingText: movieData.opening_crawl,
releaseDate: movieData.release_date,
};
});
setMovies(transformedMovies);
};
- try~catch : 잠재적오류 처리
* fetch API는 에러 상태 코드를 실제 에러로 취급하지 않는다. 실제로 오류 상태 코드를 받아도 기술적인 오류로서 처리 하지 않는다.
-> Axios(서드 파티 패키지 라이브러리)는 요청 전송에 성공한다면 오류상태코드에 맞는 오류를 만들어서 전달
오류상태코드에 맞는 오류 만들기
try{
if(!response.ok){ // 요청이 성공적인지 그렇지 않은지 표시
throw new Error('Something went wrong!');
}
} catch (error) {
setError(error.message);
}
POST 요청
fetch('url',{
method:'POST',
body:JSON.stringify(moive), // 리소스 저장
headers: { // 키 추가 및 객체 지정
'Content-Type': 'application/json'
}
});
- 헤더를 통해 어떤 컨텐츠가 전달되는지 암