remagine

혼자서 웹 서비스 만들어보기 - 3 본문

개인프로젝트 - 웹소설 사이트

혼자서 웹 서비스 만들어보기 - 3

remagine 2017. 6. 15. 18:11

혼자서 웹 서비스 만들어보기 - 3

https://github.com/remagine/webNovel/tree/develop




1. 부트스트랩으로 인덱스 화면 만들기





백엔드 개발자가 이쁜 화면을 맨땅에서 만들어내는 것은 언제나 괴롭습니다. ㅠㅠ


그래도 부트 스트랩이라는 이미 잘 만들어진 css,js 시스템이 있으니 잘 활용해 봅시다.





2. layout 만들기




layout을 만들어 두어야 한다. 왜냐하면 반복되는 html 구조들이 굉장히 많기 때문입니다.


웹 사이트에 있는 header, footer들을 페이지를 만들어 줄 때마다 복사 붙여넣는다고 해봅시다. 


처음에 만들때야 ctrl-c, ctrl-v지만


나중에 수정 이슈가 있다면?


페이지가 100개면 100번 수정해야 하고


100% 실수가 있을 것입니다.


footer에 회사 전화번호 하나 바꾸려고 사이트가 마비되는 짓을 할 수 도 있습니다. 



 main.rythm 


 가장 기본이 layout 공통 css,js를 로드시키고 

  header와 footer위치를 고정시켜줍니다.

 또한 페이지 마다 추가되어야할 script의 위치를 마지막으로 고정 시켜줍니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
@import() {
    org.apache.commons.lang3.*
}
 
<!DOCTYPE html>
<html class="no-js" lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>@render(pageTitle){ webNovel - Welcome }</title>
    
    @render(meta){
        <meta name="keywords" content="novel" />
        <meta name="description" content="webNovel" />
    }
    
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    
    <script src="/static/js/lib/jquery-1.11.2.min.js"></script>
    <script src="/static/js/lib/jquery.validate.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script src="/static/ckeditor/ckeditor.js"></script>
    <link href="/static/css/toastr.min.css" rel="stylesheet">
    <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/static/css/main-style.css" rel="stylesheet">
    
</head>
<body>
    <!--[if lt IE 9]><div id="legacy-browser">
            사용중인 브라우저는 곧 지원이 중단되는 브라우저입니다. <a href="http://windows.microsoft.com/ko-kr/internet-explorer/ie-11-worldwide-languages" target="_blank">최신 버전</a>으로 업그레이드하시거나 <a href="https://www.google.com/intl/ko/chrome/browser/" target="_blank">Chrome</a>과 같은 최신 브라우저를 이용해 주세요.
            <button type="button" class="legacy-browser-close">닫기<i class="icon"></i></button>
    </div><![endif]-->
<div >
    @include(layout.front.header)
    <div id="wrap">
        @render() { }
    </div>
    @include(layout.front.footer)
</div>
 
@include(layout.front.sidenav)
 
@render(last){ }
</body>
</html>
cs



index.rythm


앞으로 추가될 페이지들은 모두 상단의 main.rythm을 확장하는 형태로 사용될 것입니다.

rythm template를 공부하고 싶다면 (http://rythmengine.org/)

지금 이 구조를 공부하는 것이 큰 도움이 됩니다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@import() {
    org.apache.commons.lang3.*
}
 
@extends(layout.front.main)
 
@section (pageTitle) { Index Page }
 
<main id="main" role="main">
    <div class="bg-logo">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-message">
                        <h1>WEB NOVEL</h1>
                        <h3>A COMPOSITE FANFIC STORAGE</h3>
                        <hr class="intro-divider">
                        <ul class="list-inline intro-social-buttons">
                            <li>
                                <a href="https://twitter.com/SBootstrap" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                            </li>
                            <li>
                                <a href="https://github.com/remagine/webNovel" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                            </li>                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <p>Hello World</p>
    </div>
</main>
cs




3. Controller 생성하기


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package com.arthur.webnovel.controller;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Controller
@RequestMapping("/")
public class HomeController {
    @RequestMapping("")
    public String home(Model model){
        return "/index";
    }
}
 
cs


@Controller가 붙은 Class는 Spring에서 RequestMapping을 하나씩 합니다.

Index화면은 Domain 주소에 /만 붙은 상태이므로 저렇게 주소를 적어주고 


return url로 view path를 말해주면


.rythm은 알아서 ViewResolver가 붙여서 동작합니다.


저작자표시 비영리 변경금지

'개인프로젝트 - 웹소설 사이트' 카테고리의 다른 글

혼자서 웹 서비스 만들어보기 - 6  (0) 2017.06.28
혼자서 웹 서비스 만들어보기 - 5  (0) 2017.06.26
혼자서 웹 서비스 만들어보기 - 4  (0) 2017.06.23
혼자서 웹 서비스 만들어보기 - 2  (0) 2017.06.13
혼자서 웹 서비스 만들어보기  (0) 2017.06.12
공유하기 링크
'개인프로젝트 - 웹소설 사이트' Related Articles more
Comments