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

281

16

장

단일 페이지 애플리케이션

16.4.1

홈페이지

웹사이트의 기본적인 외형은 ‘레이아웃’ 파일에 들어 있는 핸들바 뷰에서 결정했습니다. 우선

<

body

>

태그 내용부터 시작합시다(스크립트는 제외합니다 ).

<div class=”container”>

<header>

<h1>Meadowlark Travel</h1>

<a href=”/”><img src=”/img/logo.png” alt=”Meadowlark Travel Logo”></a>

</header>

{{{body}}}

</div>

이 파일은 리액트 컴포넌트로 리팩터링하기 매우 쉽습니다. 먼저 로고를

client

/

src

디렉터

리에 복사합니다.

public

디렉터리를 쓰지 않는 이유는 뭘까요? 크기가 작거나 자주 사용되는

이미지는 자바스크립트 번들에서 인라인으로 사용하는 것이 더 효율적이며,

CRA

에서 제공하

는 번들 프로그램은 이를 지능적으로 처리합니다.

CRA

에서 만든 예제 앱은 로고가

client

/

src

디렉터리에 있다고 가정하지만, 필자는 이미지 자원을 서브디렉터리에 모으는 것을 선호

하므로

logo

.

png

파일을

client

/

src

/

img

/

logo

.

png

로 저장했습니다.

이해하기 어려운 부분은

{{{

body

}}}

뿐입니다. 여기는 다른 뷰가 렌더링되는 곳, 즉 특정 페이

지의 콘텐츠가 배치되는 ...