한 권으로 끝내는 Node & Express(2판): 모던 웹을 위한 서버 사이드 자바스크립트의 모든 것

285

16

장

단일 페이지 애플리케이션

본질을 발견해봅시다.

<

Link

>

와

<

a

>

를 사용해서 다음과 같이 내비게이션 요소를 두 개 만듭

니다.

<Link to=”/”>Home (SPA)</Link>

<a href=”/”>Home (reload)</Link>

개발자 도구에서 네트워크 탭을 열고, 두 번째 아이콘을 눌러 현재 트래픽을 모두 삭제한 다음

[

Preserve

log

] 옵션을 활성 상태로 만듭니다(크롬 기준 ). [

Home

(

SPA

)] 링크를 클릭하면

네트워크 트래픽이 전혀 발생하지 않습니다. 반면 [

Home

(

reload

)] 링크를 클릭하면 네트워

크 트래픽이 발생합니다. 이것이

SPA

의 본질입니다.

16.4.3

패키지 페이지 디자인

이제 순수한 프런트엔드 애플리케이션을 만들고 있는데, 그렇다면 익스프레스는 어디에서 개

입하는 걸까요? 서버는 여전히 유일한 데이터 소스입니다. 더 구체적으로 말하자면 사이트에

서 노출할 휴가 패키지의 데이터베이스를 관리하는 것이 서버의 역할입니다. 다행히 필요한 일

은

15

장에서 거의 다 했습니다. 휴가 패키지를

JSON

형식으로 반환하는

API

를 만들었으니 리

액트 애플리케이션에서 활용하기만 하면 됩니다.

이 둘을 조립하기 전에, 우선 패키지 페이지를 만들어봅시다. 렌더링할 패키지는 아직 존재하

지 않지만 문제는 없습니다.

앞에서는 ...