5장 HTTP 요청
'프론트엔드 프로그램은 사용자의 이벤트에 반응하여 데이터를 보여주기도 하지만, 서버의 비동기 데이터도 제공한다.'
키워드
AJAX의 탄생
예제를 위한 RESTful 서버 구축 및 REST란 무엇인가?
HTTP 클라이언트 구현(XMLHttpRequest, Fetch, Axios)
아키텍쳐 검토 -> 인터페이스로 구현
적합한 HTTP API 선택하기
AJAX의 탄생
AJAX 이전까지는 서버에서 데이터를 가져올 필요가 있는 경우, 전체 페이지를 다 로드해야했지만 AJAX 등장하고 난 이후에는 필요한 데이터만 서버에서 로드할 수 있게 되었다.
예제를 위한 RESTful 서버 구축 및 REST란 무엇인가?
도메인은 리소스로 분할해아하며 각 리소스는 특정 URI로 접근해 읽거나 조작할 수 있어야한다. 그리고 '조작'할 때 사용하는 HTTP 메소드는 하려는 작업의 특성과 알맞는 메소드를 사용해야한다.
- 그러나 '진정한' 의미의 REST API를 달성하려면 이보다 훨씬 까다롭다고 한다.
HTTP 클라이언트 구현(XMLHttpRequest, Fetch, Axios)
구현한 http를 컨트롤러에서 직접 사용하는 대신 모델 객체에 래핑하는 것이 핵심이다. (테스트 가능성, 가독성 상승)
XMLHttpRequest, Fetch, Axios 각각의 특징들이 있다.
XMLHttpRequest: 사용하기 제일 복잡. 프로미스, 콜백에 대한 개념이 잘 잡혀있지 않다면 이해하기 어려울 수 있음. 프로미스를 직접 리턴해줘야함.
Fetch: 안에 프로미스 포함. Request, Response 같은 네트워크 객체에 대한 표준 정의를 제공 -> 서비스워커, 캐시 API와 같은 다른 API와 상호 운용 가능.
Axios: 가장 단순. 브라우저, node.js 둘다에서 사용 가능.
아키텍쳐 검토 -> 인터페이스로 구현
세 버전의 클라이언트가 모두 동일한 공용 API를 가지도록 구현함. => 최소한의 노력으로 HTTP 요청에 사용되는 라이브러리를 변경할 수 있음.
'구현이 아닌 인터페이스로 프로그래밍하라.'
라이브러리를 사용할 때도 마찬가지.
적합한 HTTP API 선택하기
'딱 맞는 프레임워크란 존재하지 않는다.'
'적합한 프레임워크를 선택할 수 있지만 이는 적합한 컨텍스트에서만 유효하다.'
호환성, 휴대성, 발전성, 보안, 학습곡선 등의 기준에 따라 적합한 api를 선택하라.
호환성: 인터넷 익스플로러의 지원을 고려해야한다면 axios를 사용하거나, 더 오래된 브라우저를 지원해야한다면 XMLHttpRequest를 사용. 아니면 fetch api의 폴리필을 사용할수도 있음
휴대성: 서버측, 브라우저측에서 모두 동작하는가?를 고려.
발전성: 표준 정의를 사용하여 어플리케이션을 여러 방면으로 발전시킬 수 있는가?
보안: axios에는 보안 관련 코드가 내장되어있음. 이러한 보안 기능을 참고하여 내가 직접 fetch나 XMLHttpRequest에 적용할수도.
학습 곡선: XMLHttpRequest는 초보자에게 익숙하지 않을 수 있음.
6장 라우팅
키워드
SPA와 라우팅
코드 예제 - 해시, 히스토리, Navigo
올바른 라우터를 선택하는 방법
SPA와 라우팅
SPA가 작동하려면 클라이언트 측 라우팅이 필요하다. SPA는 보통 서버와의 상호작용을 위해 AJAX를 사용하지만, 모든 AJAX 애플리케이션이 SPA일 필요는 없다.
모든 라우팅 시스템은 최소 두 가지의 핵심 기능을 가진다
- 애플리케이션의 경로 목록을 수집하는 레지스트리
- 현재 URL의 리스너
코드 예제 - 해시, 히스토리, Navigo
각각의 방식으로 CSR을 구현하는 방법을 알려주는 챕터다.
해시는 가장 원시적이고, 히스토리는 히스토리 기능을 제공할 수 있으며, Navigo는 이 둘보다 훨씬 더 간단하게 라우팅을 구현할 수 있다.
올바른 라우터를 선택하는 방법
세 가지 구현 간의 의미있는 차이는 없다.
라우팅은 모든 SPA에 있어서의 신경계와 같다. 프로젝트에 리액트 라우터를 사용하는 경우 단일 페이지 앱의 라우팅 시스템을 변경하기가 매우 어렵기 때문에, 프로젝트에서 리액트를 제거하기가 매우 어렵다. (뜨끔...)
- 프레임워크를 사용할 때는 라우팅을 위해 별도의 계층을 유지하는 것이 좋다.
