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'
	}
});

- 헤더를 통해 어떤 컨텐츠가 전달되는지 암