Blog project - Front-end

 

Blog Project

Front-end

지난 번에는 백엔드 즉 눈에는 보이지 않는 서버 쪽의 코드를 살펴 보았습니다. 최대한 간단하게 구성하기 위해 “데이터베이스”나 “배포”를 위한 내용은 포함하지 않았습니다. 

오늘은 눈에 보이는 부분이라고 할 수 있는 프론트 엔드(Front end) 부분을 살펴보고자 합니다. 프론트 엔드는 웹사이트에 접속했을때 유저들과 직접적으로 소통하는 부분입니다.  기본적으로  HTML, CSS , Javascript 의 세가지 기술이 상호작용하면서 이루어집니다. 흔히  HTML 은 구조를 CSS 는 디자인을  Javascript  는 동적인 부분을 맡고 있다고 하면 될것 같습니다 

  이에 대한 자세한 강의는 ‘생활코딩’에 잘 소개 되어 있으니 찾아 보시면 될 것 같습니다. ‘생활코딩’은 비영리 교육을 진행하는 곳으로 다양한 컴퓨터 기술들이 자세하게 설명되어 있습니다. 웹사이트 만들기 부터 머신러닝까지 강사님의 꾸준한 노력으로 다양한 컨텐츠를 만나 볼 수 있으니 관심 있으신 분들은 찾아 보시 것을 추천 합니다. 

 

opentutorials.org/course/

생활코딩

 

최근 ‘프론트 엔드’ 분야에 많은 변화가 있었습니다.  React, Agular , Vue  같은 다양한 프레임 워크들이 등장 한 것입니다. 기술 특성상 많은 반복작업이 필요 했었던 것을 기술적으로 해결하려고 하는 다양한 시도들이 나타나고 있는 것입니다. 이는 서비스들이 전세계를 대상으로 하게 되면서 많은 트래픽을 감당하기 위한 기업들이 방법을 찾기 시작하면서 발전하기 시작했습니다. 기회가 된다면 위의 새로운 프레임 워크에 대한 글도 정리 해 보겠습니다. 

아직 개발중이라서 전체 코드를 사용할 수는 없지만 제일 중심이 되는 페이지의 코드는 아래와 같습니다. 

 

{% include "header.html" %}

<!-- Page Header -->
<header class="masthead" style="background-image: url({{ url_for('static', filename='img/home-bg.jpg')}})">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Jisungs Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>

<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
{% for post in all_posts%}
<div class="post-preview">
<a href="{{url_for('show_post', index=post.id)}}">
<h2 class="post-title">
{{post.title}}
</h2>
<h3 class="post-subtitle">
{{post.subtitle}}
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">{{post.author}}</a>
on {{post.data}}</p>
</div>
<hr>
{% endfor %}

<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts &rarr;</a>
</div>
</div>
</div>
</div>

<hr>

{% include "footer.html" %}

 

프론트 엔트 코드를 작성해 보신 분이라면 익숙한 코드이실 겁니다. 이 코드는 Bootstrap 이라는 라이브러리를 활용하고 있습니다.

  Bootstrap 은  twitter  에서 개발하여 배포한 라이브러리 입니다.  아이폰의 탄생과 함께 웹의 생태계는 급격하게 컴퓨터 모니터에서 모바일로 변화하게 되었습니다.  트위터는 초창기  SNS 를 이끌었던 서비스 였고 모바일에 서비스 하는 것에 중점을 두었습니다. 모바일 웹에서 원활하게 작동하기 위해서 화면 비율 과 구성요소의 유연한 변화를 이 라이브러리에서는 지원하고 있습니다. 저 또한 배우고 있는 입장에서 많은 지식이 요구 되는 새로운 프레임 워크 보다는 기존의 기술과 가까운 분야의 공부를 확실히 해두어야 겠다고 생각했습니다. 

getbootstrap.com/

 

Bootstrap

 

 

 

위의 코드를 이해하기 위해 코드를 분석해 보겠습니다. 전체적인 형태는 전통적인 HTML 의 형태를 띄고 있습니다. 하지만 중간 중간 다른 형태의 표현식이 있는 것을 확인 할 수 있습니다. 우선 첫줄 부터 살펴 보겠습니다. 

 

{% include "header.html" %}

 

이 부분은 jinja 라고 하는  python의 라이브러리 입니다. 웹 어필리케이션을 만들면서 사용자와의 소통을 빼놓을 수 없습니다. 일방적으로 정보를 전달하는 방식이 아닌 사용자가 원하는 정보를 전달 하기 위해서는 웹의 각각의 구성요소들이 사용자의 입력에 반응할 수 있어야 합니다. 단순히 페이지가 연결되어 있는 것 만으로는 점점 갈 수록 다양해지는 사용자의 요구를 소화해 나갈 수 없습니다. 그래서 다양한 시도들이 등장하고 있고 이 ‘Jinja’  도 그 노력의 일부 입니다. 

 

‘Jinja’ 는 HTML에서 Python의 코드를 사용할 수 있게 해줍니다. 표현식은 기본적으로 “{{ 표현식 }}” , “{% 표현식 %}”으로 두가지로 나뉩니다.  ‘NODE.JS’ 의 ‘ejs’와 비슷한 형태를 띄고 있습니다. 첫번째 표현식은 변수 같은 명령어가 필요 없는 경우에 사용되고 두번재 표현식은 ‘if ,’, ‘for’ 같은 조건문 표현식이나 함수를 호출하거나 할때 사용하게 됩니다. 

jinja.palletsprojects.com/en/2.11.x/

Jinja — Jinja Documentation (2.11.x)

 

예시로 표현된 것은 ‘“header.html” 이라는 파일을 이 html  코드 위에 포함시켜라’라고 명령한 것입니다.  왜 이런 명령어가 생긴걸까요? 

 

 HTML 을 한번이라도 열어 보신 분이라면 첫부분에 엄청나가 나열되어 있는 표현식들을 보게 됩니다. 대부분 이 파일을 규정하거나 참조를 위한 표현들입니다. 예를 들면 이 페이지의 인코딩 방식, 디자인을 정의해 놓은  CSS  파일의 위치 등입니다. 이런 다양한 정보들은 다른 HTML 페이지에도 동일하게 적용되기 때문에 반복을 피하고자 하는 개발자들의 습성상 위의 코드로 간략화 시킨 것입니다. 

 

DRY (Do not Repeat Yourself)  흔히 DRY 라고 불리는 개발자들간의 원칙입니다. 반복을 피하는 것이 컴퓨터에게도 인간의 정신에도 유익합니다. 반복되는 코드를 계속 보고 있다 보면 내가 코드를 보는지 코드가 나를 보는지 헷갈리는 경우가 많습니다. 

 

글을 쓰다 보니 장황해지는 것 같습니다. 아직 이 부분에 대해 정리할 부분이 남아 있어 다른 부분은 다음 글에서 계속 이어나가겠습니다. 

 

 

2021/02/01 - [Toy Project/Python] - Blog Project - Start

Blog Project - Start

2021/02/02 - [Toy Project/Python] - Blog project - Back_end

Blog project - Back_end