코드이그나이터4 마크다운 블로그 MVP 만들기 - 5 - 퍼블리싱 로컬로 가져오기

koeunyeon·2021년 4월 22일
0

이번 챕터의 코드는 https://github.com/koeunyeon/ci4/tree/blog-publish에 있습니다.

뷰 꾸미기

일단 기능이 작동은 하지만 화면이 너무 볼품없죠. 뷰를 조금 꾸며보겠습니다.

CSS 프레임워크

저를 포함한 많은 개발자분들은 디자인 감각이 전문 디자이너분들보다 조금 부족할 겁니다. 괜찮습니다. 이런 우리를 위해서 세상에는 css 프레임워크라는 것이 존재합니다.
가장 유명한 것이 트위터 부트스트랩 https://getbootstrap.com/2.0.2/이고, 이외에도 bulma https://bulma.io/여러가지 https://dev.to/theme_selection/best-css-frameworks-in-2020-1jjh가 있습니다. 우리는 가장 유명하므로 가장 참고 자료가 많고 프로젝트가 중단되지 않을 것 같은 트위터 부트스트랩을 사용하겠습니다.

블로그 테마 찾기

구글에서 검색어를 bootstrap blog template 등으로 적당한 테마를 찾아봅니다.
저는 DevBlog를 선택했습니다. 라이브 데모github page도 있네요.

"DevBlog" 테마의 라이센스는 github에 100% FREE as long as you keep the footer attribution link. 라고 적혀 있습니다. 푸터에 링크만 걸어주면 된다고 합니다. 바로 이 코드죠.

<footer class="footer text-center py-2 theme-bg-dark">    
    <!--/* This template is free as long as you keep the footer attribution link. If you'd like to use the template without the attribution link, you can buy the commercial license via our website: themes.3rdwavemedia.com Thank you for your support. :) */-->
    <small class="copyright">Designed with <i class="fas fa-heart" style="color: #fb866a;"></i> by <a href="http://themes.3rdwavemedia.com" target="_blank">Xiaoying Riley</a> for developers</small>    
</footer>

항상 뭔가 무료로 사용할 때는 라이센스 조항을 잘 봐야 합니다. 개인에게만 무료인 경우도 있고, 상업적 이용도 무료일 때도 있고, 모두 유료일 때도 있습니다.
일반적으로 MIT 혹은 Apache 라이센스는 무료로 큰 제한이 없습니다. GPL 라이센스는 조심해야 합니다. 무료로 써도 되지만 소스 코드를 공개해야 해요. LPGL도 있어서 라이브러리 수정시에만 공개해도 되는 라이센스도 있는데, 프로그램이라는게 라이브러리와 결합되는 형태로 제작되는 경우가 많으므로 이 경우에도 모두 소스 코드를 공개해야 하죠.

블로그 테마 다운로드

Download 를 눌러서 DevBlog 테마를 다운로드합시다. 그리고 압축 파일을 열어보면 아래와 같은 구조가 보입니다.

  • about.html 파일은 라이브 데모 ABOUT에서 볼 수 있습니다. 블로그 테마이니만큼 개인을 소개하는 페이지입니다.

  • blog-list.html 페이지는 라이브 데모 목록 페이지입니다.

  • blog-post.html 페이지는 라이브 데모 개별 글 페이지입니다.

  • assets 파일들은 블로그를 구성하는 데 필요한 정적 리소스들입니다.

샘플 컨트롤러와 뷰 만들기

다운받은 테마가 우리 프로젝트에서 잘 작동하는지 한번 복사해 보겠습니다.

assets 파일들 복사하기

압축 파일 내의 assets 디렉토리를 통채로 프로젝트의 public 디렉토리 안에 넣습니다. /public/assets 입니다.

샘플 컨트롤러 만들기

컨트롤러를 통해 실제 페이지가 잘 보이는지 확인해 봅시다. 우선 Devblog컨트롤러를 만들고 아래처럼 뷰를 리턴하는 엔드포인트를 설정합니다.
app/Controllers/Devblog.php

<?php


namespace App\Controllers;


use CodeIgniter\Controller;

class Devblog extends Controller
{
    public function list(){
        return view("/devblog/list");
    }

    public function post(){
        return view("/devblog/post");
    }
}

샘플 뷰 만들기

목록 뷰는 app/Views/devblog/list.php 이름으로 만듭니다.
app/Views/devblog/list.php
압축파일 중 blog-list.html 파일을 내용을 PHPStorm으로 드래그하면 내용을 볼 수 있습니다.

전체 복사해서 /devblog/list.php 파일에 복사합니다.
HTML은 내용이 길어서 코드는 생략하겠습니다. 전체 코드는 https://github.com/koeunyeon/ci4/blob/blog-publish/src/sample/app/Views/devblog/list.php에서 찾을 수 있습니다.

일단 나오는지 http://localhost:8080/devblog/list 주소에 접속해 봅시다.

저런, 하나도 안 예쁩니다. 브라우저에서 F12를 눌러 인스펙터를 켜고 네트워크 탭으로 간 다음 Ctrl + R키를 눌러 새로고침해 봅시다. "상태"가 모두 404임을 알 수 있습니다.

파일을 찾지 못하는 이유는 HTML에는 CSS와 자바스크립트 경로가 assets/로 시작하므로 웹 브라우저는 상대경로라고 인식해서 http://localhost:8080/devblog/정적파일.css 으로 찾으려고 하기 때문입니다. 하지만 실제 CSS 파일은 http://localhost:8080/정적파일.css 경로에 있으므로 뷰 파일을 고쳐줍시다.
app/Views/devblog/list.php 파일에서 Ctrl + R을 누른 후 assets//assets/로 Replace 버튼을 눌러 바꿉니다.

파일 저장 후 다시 http://localhost:8080/devblog/list 에 접속해 봅시다. 이제 제대로 나오네요.

뷰 파일 아래에 보면 이런 소스코드가 보입니다.

<!-- *****CONFIGURE STYLE (REMOVE ON YOUR PRODUCTION SITE)****** -->

운영 사이트에서는 제거하라고 하네요. 삭제하겠습니다. <div id="config-panel"에서 <!--//configure-panel-->까지 지우면 됩니다.

파일 상세 뷰 blog-post.html 파일도 app/Views/devBlog/post.php 로 만들고, 압축 파일의 blog-post.html을 복사하고, assert경로를 수정해 주세요. config-panel을 삭제하는 것도 잊지 마시고요.

assets//assets/로 변경하는 것까지 마치면 예쁜 상세 화면을 볼 수 있습니다.
http://localhost:8080/devblog/post 도 잘 나오는 것을 확인합니다.

profile
스타트업에 관심이 많은 10 + n년차 웹 개발자. 자바 스프링 (혹은 부트), 파이썬 플라스크, PHP를 주로 다룹니다.

관심 있을 만한 포스트

0개의 댓글