TaeHee Kim
Software Engineer / Bassist
Coupang
Bali 팀
김태희
...and many more...
Home
호텔 목록
호텔 상세
호텔을 못 찾겠다!
jenkins build를 통해 생성
@RequestMapping({"/hotels/{productId}", "/overseas/hotels/{productId}"})
@CoupangWebLayoutEnable
public String hotelDetail(@PathVariable Long productId,
Model model) {
HotelDto hotelDto = overseasHotelService.findOverSeasHotel(productId);
if (hotelDto == null) {
return "pages/pc/hotel/overseas/hotelNotFound";
}
model.addAttribute("hotel", hotelDto);
createMetaInfo(model, hotelDto);
return "pages/pc/hotel/overseas/hotelDetail";
}
{{#partial "head"}}
{{#unless hotLoaderEnable}}
{{assetStyle "bundles/pc.overseas.tdp.HotelDetailController.bundle.css"}}
{{/unless}}
{{/partial}}
{{!-- 메뉴별 바디 영역 --}}
{{#partial "body"}}
{{!-- 해당 영역 아래에 react를 통한 client side rendering이 이루어진다. --}}
<div id="booking-contents" class="booking-main-wrapper"></div>
{{/partial}}
{{#partial "script-page"}}
{{!-- 서버에서 spring의 model에 넣어준 값들을 application/json 형식으로 미리 렌더링하여 가져다 쓰는 구조 --}}
<script id="hotel" type="application/json">{{json hotel}}</script>
<script id="user" type="application/json">{{json user}}</script>
{{#if hotLoaderEnable}}
{{assetScript "devModeChecker.js"}}
<script src="http://{{serverName}}:3001/bundles/pc.overseas.tdp.HotelDetailController.bundle.js"
type="application/javascript"
onerror="handleDevModeScriptLoadingFail()"></script>
{{else}}
{{assetScript "bundles/pc.overseas.tdp.HotelDetailController.bundle.js"}}
{{/if}}
{{/partial}}
import React from 'react';
import ReactDOM from 'react-dom';
import JSONLoader from 'utils/JSONLoader';
export default class HotelDetailController extends React.Component {
... controller react component 구현
state = {
hotel: JSONLoader.load('hotel')
};
componentDidMount () {
// 컴포넌트가 렌더링된 이후에 1회 실행
// ajax를 통해 비동기로 데이터를 가져오는 코드도 보통 이곳에 들어옴
}
render () {
// rendering code
return (
<div>hello bali!</div>
);
}
// 이벤트 핸들러들
handleXXX() = (e) => {
};
}
// 실질적인 렌더링은 여기서 일어남
try {
ReactDOM.render(<HomeController />, document.getElementById('booking-contents'));
} catch (e) {
console.error('[Home rendering error]', e);
}
<PCQuickSearch />
같은 컴포넌트에 CSS만
다르게 입힌 것
<StaticGoogleMap />
<HotelStars />
<PriceText />
<HotelDecriptionText />
<Breadcrumb />
..and many more...
<div id="booking-contents">
<div class="live-search-section clearFix">
<div class="dummy-block" style="margin-bottom:5px;height:48px"></div>
<div style="background-color:#eaf6ff;height:59px;margin-bottom:10px;"></div>
<div class="filter">
<div class="dummy-block" style="background-color:#fff6d2;width:240px;height:340px;"></div>
<div class="dummy-block" style="width:240px;margin-top:10px;height:358px;"></div>
</div>
<div class="booking-hotel-list">
<div class="live-list">
<div class="dummy-block" style="background-color:#fff;margin-top:35px;height:30px;"></div>
<div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
<div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
</div>
<div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
<div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
</div>
<div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
<div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
</div>
<div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
<div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
</div>
<div class="dummy-block" style="background-color:#fff;height:202px;margin-top:8px;">
<div style="float:left;width:198px;height:200px;border-right:1px solid #ccc;"></div>
</div>
</div>
</div>
</div>
</div>
By TaeHee Kim
jscon 2016 발표자료