📚 공부한 내용
1. fetch
비동기 http request를 쓰기 편하게 해주는 API.
fetch(url).then(res => res.json())-
실행 동작
fetch는 실행 결과로 Promise를 return하며 fulfilled 상태가 되면 Response 객체를 결과 값으로 갖는다. -
메서드
Response 객체의 메소드 중 주로 사용되는 것으로는 JSON으로 파싱해서 반환하는.json(), 텍스트 그대로 반환하는.text(), 그리고 이미지를 url 형식으로 변환해서 반환하는.blob()등이 있다. 그리고 모든 메서드는 결과를 Promise로 감싸서 반환한다. -
주의점
fetch API는 HTTP error가 발생해도 reject하지 않는다. 따라서 fetch를 사용할 때,catch를 사용하는 것 이외에도 방어코드의 작성이 필요하다. 일반적으로 Response 객체의 프로퍼티ok와status를 확인하여 HTTP error를 처리한다.
추가적으로ok프로퍼티는status가 200번대의 값에서만 true이다. 300번대의status가 필요한 특수한 상황에서는ok의 값 대신status를 확인하는 것이 좋다.
2. history API
브라우저에서 페이지를 로딩할 때마다 세션 히스토리가 생기며, 페이지를 이동할 때마다 사라지지 않고 쌓이게 된다. 이를 이용해서 우리는 '앞으로 가기', '뒤로 가기' 등의 기능을 이용할 수 있는 것이다. 이를 이용하여 SPA(Single Page Application)를 만드는 것이 가능하다.
-
history.pushState(state, title, url)
state : history가 변경이 된 이후에도 필요한 값을 넣는다. 이후 history.state를 이용해 사용이 가능하다.
title : 대부분의 브라우저에서 지원하지 않는 값. 주로 null string을 넣는다.
url : 세션 히스토리에 새로 추가할 url값. history를 이용해서 url을 변경하면 화면이 리로드 되지 않는다. -
history.replaceState(state, title, url)
pushState의 경우 기존 히스토리 위에 새로운 히스토리를 추가하지만,replaceState의 경우 현제 히스토리를 대체한다. 이용자의 상태에 따라서 뒤로가기로 다시 접근할 필요가 없는 경우에 사용한다.(로그인 화면 등)
📝 더 공부할 것
CSR, SSG, ISR
🤔 느낀점
점차 코드의 양이 많아지고 이를 관리하는 것이 어렵다. 3주차 과제도 validation 확인 등 얼마나 세부적인 부분까지 확인해야 하지? 등 여러가지 생각할 점이 많다. 실무에서도 이와 같은 문제점이 분명 있을 것이다. 확실하게 이를 해결하는 노하우를 지금부터 익혀보자.
Reference
프로그래머스 프론트엔드 데브코스
