Handlebars) Partials

✏️ 파셜

• 여러 페이지에서 똑같은 구성요소를 재사용할 때 사용하는 기능이다.
  • 프론트엔드에서는 이 기능을 위젯이라고 부른다.

✏️ 파셜 사용하기

📍 파셜 파일 생성

• 특정 도시의 날씨를 조회할 수 있는 파셜을 만들었다.
  • /views/partials/weather.hbs
  • div 태그가 파셜이라는 것만 이해하면 되고 내의 each 문이나 다른 태그들은 사실 파셜과 관련없는 내용들이다.

<div class="weatherWidget">
    {{#each partials.weatherContext}}
        <div class="location">
            <h3>{{location.name}}</h3>
            <a href="{{location.forecastUrl}}">
                <img src="{{iconUrl}}" alt="{{weather}}">
                {{weather}}, {{temp}}
            </a>
        </div>
    {{/each}}
    <small>Source: <a href="https://www.weather.gov/documentation/services-web-api">
        National Weather Service
    </a> </small>
</div>

• National Weather Service api 를 사용해 포틀랜드, 벤드, 맨저니터의 날씨를 조회하는 파셜을 만들었다.
  • 파셜과는 관련 없다.

const getWeatherData = () => [
    {
        location: {
            name: 'Portland',
            coordinates: {lat: 45.5154586, lng: -122.6793461}
        },
        forecastUrl: 'https://api.weather.gov/gridpoints/PQR/112,103/forecast',
        iconUrl: 'https://api.weather.gov/icons/land/day/tsra,40?size=medium',
        weather: 'Chance Showers And Thunderstorms',
        temp: '59 F',
    },
    {
        location: {
            name: 'Bend',
            coordinates: {lat: 44.0581728, lng: -121.3153096}
        },
        forecastUrl: 'https://api.weather.gov/gridpoints/PQR/34,40/forecast',
        iconUrl: 'https://api.weather.gov/icons/land/day/tsra_sct,50?size=medium',
        weather: 'Scattered Showers And Thunderstorms',
        temp: '51 F',
    },
    {
        location: {
            name: 'Manzanita',
            coordinates: {lat: 45.7184398, lng: -123.9351354}
        },
        forecastUrl: 'https://api.weather.gov/gridpoints/PQR/73,120/forecast',
        iconUrl: 'https://api.weather.gov/icons/land/day/tsra,90?size=medium',
        weather: 'Chance Showers And Thunderstorms',
        temp: '50 F',
    },
]

const weatherMiddleware = async (req, res, next) => {
    if(!res.locals.partials) res.locals.partials = {}
    res.locals.partials.weatherContext = await getWeatherData()
    next()
}

module.exports = weatherMiddleware

• express 에 날씨 정보를 가진 모듈을 추가해줬다.

const weatherMiddleware = require('./lib/middleware/weather')

app.use(weatherMiddleware);

📍 파셜 조립하기

• 이제 원하는 view 파일에 파셜을 불러오면 해당 위치에 파셜을 조립할 수 있다.
  • {{> 파일명}} 으로 파셜 파일을 가져올 수 있다.

<h1>Welcome to Meadowlark Travel</h1>
<p>Questions? Checkout out our
<a href="/about" data-test-id="about">About Us</a></p>
{{> weather}}