오늘은 미루던 데이터작업에 관한 fetch 라이브러리 정리
를 들어가기 전에 용어 정리가 안되서 이것저것 찾아보게 되었다.
모르겠는 용어에 대해서 다 알지는 못하더라도,
뭘 뜻하는 것인지 정도까지만 정리해두기.
✖︎ 이는 제가 공부하기 위해서 정리하는 자료로, 잘못된 내용이 첨가될 수 있습니다..
혹시나 나와같이 백지에서 공부를 하다가 잘못된 정보를 얻게되면 안되니까,,,
jQuary
📌
https://mkil.tistory.com/166
사용법 : https://effectivesquid.tistory.com/entry/jQuery%EB%9E%80
오픈소스 기반의 자바스크립트 라이브러리.
내가 보기엔 react, vue 이전에 제일 유명했던? js기반 라이브러리같다.
js를 좀 더 쉽게 사용하기 위해 많이 사용되는 코드들을 모은 라이브러리로
DOM 형식의 js 코드는 복잡하지만 jQuary는 좀 더 직관적이고 짧으며 비교적 단순하다.
ex) ID를 호출하는 경우, 작성하는 코드의 양이 달라진다.
- js :
document.getElementById('ID') - jQuary :
$('#ID')
Ajax(Asynchronous javascript and XML)
이전엔 정적인 브라우저(내용이 바뀌면 페이지가 리로드되는 것)였던 시스템이
Ajax가 도입된 후로 바뀌었다.
Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다.
그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다.
쉽게 말하자면 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미한다.
Fetch
📌
React에서 데이터를 받아올 때 사용하는 라이브러리 중에 하나로
자바스크립트 ES6버전이 점점 표준이 되면서 사용 빈도수가 늘었다고 한다.
이전에는 jquary의 ajax()메소드나 axios 라이브러리를 사용하였는데
최근엔 비교적 간단한 방법으로 사용할 수 있는,
ajax의 역할을 해주는 라이브러리라고 생각하면 될 것 같다.
특징
- promise객체로 return값을 반환한다.
- response타입별로 쉽게 적용이 가능하다(json 등)
- 최신 API로, 이전 구버전에서 사용하기 위해서는 변환가능한 npm 패키지를 설치하거나 axios 등의 라이브러리를 사용해야 한다.
내가 처음에 'fetch'라는 것을 사용해야 했을 때에는
데이터를 받아온다는 것 빼고는 아는게 아무런 정보가 없었다.
그래서 검색에 검색을 하다가 적용하다 보니 알게 되었는데
React 공식 문서에 떡하니 적혀있었네,,,?
기본 작성법?이나 구조는 처음에 검색했을 때 알았는데
도대체가 그걸 어느 위치에 넣어야 작동되는건지 모르겠어서 한참을 헤맸던 기억이 있는데
생각해보니, 무언가를 전송하거나 데이터를 받아와야 할 때 필요한거잖아?
컴포넌트를 업데이트 할 때 필요하니까 componentDidMount에 추가되어야 하는 것이었다.
로그인 페이지를 처음 데이터를 받아서 구현했을 때 사용해봤지만
시간이 좀 지났으니 연습삼아서 파일 만들어서 다시 해보아야겠다.
기본 구조
fetch(url)
.then(function(response) {
//code...
}).catch(function(error) {
//error...
console.log(error);
});그런데 공식 문서를 보다 보니 error를 넣는 위치에 대해서
예외사항들 때문에 조심해야 하는 것 같았다.
연습 겸 따라서 작성해보기.
function MyComponent() {
const[error, setError] = useState(null);
const[isLoaded,setIsLoaded] = useState(false);
const[items,setItems] = useState([]);
useEffect(() => {
fetch("https://api.example.com/items")
.then(res => res.json())
.then(
(result) => {
setIsLoaded(true);
setItems(result.items);
},
// error 주의사항!
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])
if (error) {
return <div>Error : {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading ...</div>;
} else {
return (
<ul>
{items.map(item => (
<li key={item.name}>
{item.name} {item.price}
</li>
))}
</ul>
);
}
}
여기서 error 주의사항!이란,
컴포넌트의 실제 버그에서 발생하는 예외사항들을 넘기지 않도록
에러를 catch() 블록(block)에서 처리하기보다는
저 해당 부분에서 처리하는 것이 중요하다는 것이다.
📌 그 외
ES6문법 정리 : https://jsdev.kr/t/es6/2944
추가적으로 배우는 내용이 있으면 계속 덧붙힐 예정!
