프로젝트의 client/ 디렉토리는 http://localhost:3000 과 같이 브라우저에서 도메인이 호출 되었을때 전달 되는 화면의 구성요소 들어 있습니다. 1개의 화면은 보통 동일한 이름의 html / css(less) / js 파일로 구성되며, 각기 다음과 같은 역할을 합니다.
- html: 텍스트/버튼/이미지/링크 등의 구성요소를 배치해서 정보를 표현 함과 동시에 페이지의 골격을 구성합니다.
- css(less): html에 표현 된 컴포넌트들의 색/크기/위치 등을 조정하여 정돈합니다.
- js: 화면에 서버에서 전달 받은 데이터를 그리거나, 사용자가 버튼/링크 등이 눌렀을 때 해당 이벤트를 처리합니다.
프로젝트를 구동 후 http://localhost:3000 로 접속 했을 때 보이는 template 화면으로, 테이블 / 버튼 / 이미지 / 링크 등 자신이 원하는 html 구성요소들을 넣거나 빼면서 기본적인 html 문법들을 확인하며 자신만의 첫번째 화면을 만들어 볼 수 있습니다.
template은 html 화면을 구성하는 단위로 다음과 같은 형태로 정의 가능 합니다.
<template name="템플릿명">
... html 구문 ...
</template>
하나의 템플릿은 다른 템플릿을 포함 할 수 있으며, {{> 템플릿명}}과 같은 형태로 사용 가능합니다. 즉, main.html에서는 템플릿과 템플릿 2개가 선언 되어 있고, main 템플릿 내부에서 header 템플릿을 {{> header}} 와 같은 형태로 포함하여 화면을 구성하고 있습니다.
따라서 개발자의 편의에 따라 1개의 화면은 몇개의 템플릿으로도 나뉘어서 구성/반복 사용이 가능합니다.
화면에 데이터를 전달하거나, 화면에서 발생한 이벤트들을 처리 합니다. 화면의 기능에 해당하는 것들은 모두 이곳에서 처리 가능 합니다.
- FlowRouter.template('/경로명', '템플릿명'); 서비스의 주소 (http://localhost:3000/) 뒤에 붙는 이름을 통해 화면을 구분합니다. FlowRouter.template('/', 'main'); main.js의 위 코드는 주소 뒤에 '/' 혹은 아무것도 입력되지 않았을 경우 'main'이라는 이름의 템플릿을 화면에 그리라는 뜻으로, html 템플릿과 js의 해당 코드를 만들면 어떠한 화면이든 추가적으로 구성 가능합니다.
- Template.템플릿명.onRendered(function() {...}); 해당 템플릿명의 화면이 모두 그려진 이후에 제일 먼저 수행 됩니다. 화면의 데이터들을 초기화 하거나 서버와 통신을 시작하는 용도로 사용 가능합니다.
- Template.템플릿명.helpers({...}); 화면에 데이터를 전달합니다. 서버의 데이터베이스에서 데이터를 가져와서(find()) 화면에 전달 합니다.
- Template.템플릿명.events({...}); html 화면에서 발생한 마우스/키보드 이벤트들을 처리합니다. 회원가입 / 게시판 글작성과 같이 사용자가 입력한 데이터를 서버/데이터베이스에 저장하거나, 링크를 통한 페이지 이동과 같은 모든 사용자 액션을 처리 합니다.
html 화면의 요소(element)들의 색상 / 크기 / 위치 등을 제어하기 위한 css 구문들이 위치 합니다. examples/ 디렉토리의 예제 화면들을 참조하거나 자신만의 css 요소들을 만들면서 학습 해 보세요.
- less는 css의 확장으로 css와 동일한 구문을 제공합니다.
##SPA (Single Page Application) 지금까지 학습 한 main 템플릿만 사용해도 훌륭한 싱글 페이지 어플리케이션(SPA)를 만드는데 부족함이 없습니다.
main.html에서 기본적인 html / css 구문을 학습하거나 혹은 프로젝트에 포함 된 예제들(/client/examples/)이나 부트스트랩 컴포넌트들을 학습하면서 나만의 첫 웹 어플리케이션 페이지를 작성 해 보세요.