웹사이트는 콘솔 프로그램이 아닌, GUI 프로그래이라고 할수있다

GUI는 유저의 요구사항이 다양하다. 또한 Content-Type 등의 웹의 제한사항도 맞춰야한다

그래서 계속해서 기능을 추가해나가는 식으로 개발을 하다보면, 중복코드를 작성하게 된다

그 이유는, 중복코드를 작성하지 않기위해 매번 구조를 다시 디자인하는 것은 오버헤드가 너무 크기 때문이다

우선 기능구현부터 완료하고, 나중에 리팩토링을 계획하게 된다 (필자의 개인적인 스타일)

---

그래서 처음에, 완벽하진 않더라도 어느정도 필요한 기능들(구현할 기능들)을 미리 생각해보고 디자인(설계)해볼 필요가 있다

이 과정을 통해 우리가 얻을 수 있는것은 아래와 같다

재사용 가능성 있는 기능은 분리시키고, 추상화시키는 것이다

꼭 디자인을 하지않더라도 재사용 가능성 있는 코드를 파악하고, 추상화시킬 수 있도록 하자

<pre>

...

</pre>

jQuery 라이브러리를 사용하고, 나머지는 모두 손수 구현하기 vs JS F/W 사용법 익히기

생산성이 높은 쪽은?

---

간단한 페이지 -> jQuery

복잡한 페이지 -> JS F/W

https://stackoverflow.com/a/10283811

http://api.jquery.com/jquery.ajax/

var jqxhr = $.ajax(url)

.done((data, textStatus, jqXHR) => { ... })

.fail(data, textStatus, jqXHR) => { ... });

https://stackoverflow.com/a/8854317

textarea 태그의 경우 $('textarea').text('change')를 여러번 콜하면 업데이트된 값이 보이지 않는다

val('change')을 통해 해결할수 있다

https://www.w3schools.com/html/html_forms.asp

<form action="/action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

script src 태그를 사용하여 jquery.js 등의 라이브러리를 로드하여 사용할 수 있다

이런 라이브러리를 CDN 서버로부터 로드해오거나, 자신의 서버에 설치하여 자체적으로 제공할 수 있다

여기서 CDN 서버의 예시는 cdnjs.com 등이 있다

flask는 web app framework이다

일반적으로 flask는 jinja template engine을 통해 dynamic page를 제공한다

이 경우, server에 부담이 가해진다

그래서 DB 등에서 데이터를 읽어올 필요가 없는 페이지의 경우, static page로서 제공해주는 것이

서버의 부담을 덜어준다

flask 자체에서 static page serving 기능이 있긴 하지만, 더 앞단에 nginx web server로 두는것이 더 효율적이다 (caching, security 등 면에서)

---

하지만 이것은 성능이 부족해졌을 때 해도 늦지않다

template engine은 비교적 좋은 생산성을 제공해주므로 (include문 등) dynamic page를 활용하자

JS F/W가 두 문제점을 모두 충족시켜주긴 하지만, 진입장벽(난이도)이 높으므로 우선 제외하겠다

static page를 nginx와 web app server에 로드밸런싱하는 것은, 성능이 필요해지는 시점으로 미루자

https://cjh5414.github.io/flask-uwsgi-nginx/

아래 커맨드를 통해 configuration syntax를 체크해볼 수 있다

sudo nginx -t

아래 커맨드를 통해 에러 로그를 확인할 수 있다

sudo tail -f -n 1 /var/log/nginx/error.log

단순히 access가 발생했는지에 대한 로그는 아래에서 확인할 수 있다

sudo tail -f -n 1 /var/log/nginx/access.log

몇몇 웹사이트들은, 웹사이트를 연지 시간이 오래 지나면 서버의 데이터와 동기화가 되지 않는 문제가 있다.

그래서 refresh(새로고침 F5)를 통해 확인해주어야 하는 번거로움이 있다

그에반해 몇몇 웹사이트들은, 서버의 데이터가 변동될 때마다 자동으로 업데이트를 한다.

이런 사이트들의 구현방법을 알아보자. 매우 간단하게.

1. polling

일정 주기마다 서버의 데이터가 바뀌었는지 요청을 통해 확인하는 방식이다

구현이 간단하다.

서버의 데이터 변경이 드물경우 비효율적이다

2. WebSocket

Web Client가 Server처럼 port를 열어두고 server의 event 발생을 receive하는 방식이다.

구현이 비교적 복잡하다.

서버의 데이터 변경이 드물경우 효율적이다

그러하다

웹사이트를 구현할 때 Ajax를 통해 Async loading을 선호하고 있었는데

이번에 scrapy를 사용해보면서

크롤링 입장에서는 Ajax가 불편하다는 점을 알게 되었다

Ajax를 사용하는 사이트는 selenium을 사용하는 방법이 있다 (여러가지 방법중에)

하지만 성능이 많이 느려진다

AJAX로 웹을 구현하는데에 있어서 또하나의 특징이었다.

https://cheese10yun.github.io/Node-AWS-Nginx/

1. Nodejs server를 특정 포트로 실행 (ex: 8000)

2. Nginx config에 특정 URL Pattern(location block)과 localhost:8000을 proxy_pass하도록 세팅 & sudo /etc/init.d/nginx reload

3. test

아래 파일을 참고하도록 하자 (nginx.conf에 include됨)

/etc/nginx/sites-available/default

jenkins는 Continuous Integration Tool인데, 자세한 설명은 생략하고

github repo의 settings - service에서 github-webhook을 서비스로 등록해놓으면

특정 브랜치에 push할때마다 그것을 jenkins server가 인지하고, script를 실행하여 자동으로 build하도록 할수있다

vue 프로젝트의 경우, 빌드 스크립트 예제는 아래와 같다

npm install && \

npm run build && \

cp -r dist /var/www/html/

별도 플러그인은 필요없다

단, 서버에 nodejs(npm)가 설치되어 있어야한다

또한 /var/www/html/dist의 permission을 설정해주어야한다

https://datatables.net/

jquery library 중에 하나이다

https://auth0.com/blog/javascript-module-systems-showdown/

위 글을 읽고 간단하게 작성한다

CommonJS는 Node.js에서 채택한 Module API Specification으로 널리 쓰이고있지만

아래와 같은 단점들이 존재한다

client-side에서 사용하기 힘들다 ㅡ 아래와 같은 이유들 때문에 (주관적인 중요도 순으로 나열했다)

모든 파일들을 <script>로 불러올 때 변수 이름이 겹칠 수 있다

sync API이다 (이 부분은 자세히 알아보지 않았다)

require()를 사용하려면 별도 라이브러리를 사용해야한다

one file per module (모듈이 큰 경우 불리)

그에 반해 ES2015는 아직 서포트되지 않는다는 점이 유일한 단점이었지만, 현재 대부분의 브라우저에서 지원하는 듯하다

그래서 필자는 ES2015 style의 module을 사용하는 것이 더 좋다고 생각한다

물론 CommonJS를 사용하는 것도 충분히 훌륭하다고 생각한다

<참고 사이트>

https://github.com/FEDevelopers/tech.description/wiki/(ES6)-webpack%EA%B3%BC-Babel%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%98%EC%97%AC-ES6-%EA%B0%84%EB%8B%A8%ED%95%9C-%EC%82%AC%EC%9A%A9%ED%99%98%EA%B2%BD-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

<vue-cli, webpack, babel>

vue-cli로 webpack-simple template 프로젝트를 생성하면 dependency package 중에

babel이 있다

webpack과 babel의 기능은 아래와 같다

Webpack: Client-side module bilder

Babel: ES6 -> ES5 transpiler

그러므로 개발을 하기전에, ES6 syntax (import, export default)를 먼저 이해해야한다

이후 추가예정

Vue를 이용하여 SPA를 개발할 수 있다

SPA는 Multi-page App에 비하여 굉장히 빠른 속도를 제공함으로써 native app을 사용하는 것 같은 User Experience를 제공한다

기존에 Web에 관심이 없던 필자도 Vue와 SPA를 통해 Web에 흥미를 가지게 되었다

그정도로 SPA는 강력한 웹 개발 패러다임?이다

Vue로 SPA를 구현하려면

Vue-router가 필요하고, Server-side가 아닌 Client-side에서 rendering과 routing이 이루어져야한다

기본적인 개발방법은 HTML 파일에 <script> 태그로 vue 라이브러리를 로드하고, 코드를 작성하는 것이다

이것은 매우 간단한 페이지를 작성하는데에는 효과적이지만, reusability, 코드관리/유지보수 측면에서 매우 비효율적이다

그래서 HTML 파일에서는 vue 사용법 정도만 매우 간단하게 익히고, 

실질적인 개발은 vue-loader을 이용하여 single file component에서 진행하는 것이 좋아보인다

vue-loader는 webpack(build tool)의 plug-in같은 존재이고, vue-CLI를 통해 사용할 수 있다

그리고 vue-CLI는 npm을 통해 설치할수 있다

npm install -g vue-cli

vue init webpack-simple myapp1

위 커맨드를 통해 프로젝트를 생성하고 src/main.js 파일을 보았다

new Vue(...) 안에 render: h => h(App) 라는 코드가 있을것이다

h => h(App)은 lambda이다

render의 형식은 아래와 같다

render: function (createElement) { 

return createElement(App); 

}

즉 h == createElement이고, h(tag, body) 형태로 사용한다

단 h(vue_single_file_component)의 형태로 사용할 경우, component의 <template>이 render 된다

https://alligator.io/vuejs/introduction-render-functions/

추가작성예정

Javascript 라이브러리를 Client-side에서 사용할 때 CDN(Contents Delivery Network)을 이용할 수 있다

ex)

https://unpkg.com/

https://cdnjs.com/libraries/jquery/

https://cloudflare.com/

이때, 예를들어 jquery 라이브러리를 사용할때, jquery.js와 jquery.min.js 두가지가 있다

jquery의 경우 디버깅이 가능하도록 코드가 정렬되어있다

그 반대로, jquery.min은 다운로드 용량이 작고, 속도?도 더 빠르다고 한다

jquery.js(full version)는 개발용이고, 

jquery.min.js는 deploy용이라고 생각하면 된다

개발할 때는 full version을 사용하자

필자는 현재 progressive web app 프로젝트를 개발하고있다

즉, single-page에서 이루어진다.

어떻게 구현하는건지 도저히 감이 안왔는데, vue-router를 보게 되었다

당연히 routing은 web server에서 이루어져야한다고 생각했는데

vue-router가 HTML <script> tag로 include하여 사용할수있는 것을 보고

고정관념이 깨졌다

vue - flask 2개의 서버를 실행하고 연결하려 했는데 그럴 필요가 없었다

flask만을 실행하고 vue는 client-side에서 처리하면 되는 것이었다

progressive web app을 개발하고 싶다면 vue-router를 사용해보자. 분명 도움이 될 것이다.

아직은 그럴것같다는 느낌 뿐이고, 진행한 후 추가작성 하도록 하겠다

---

실제로는 single-page임에도 불구하고

router 버튼을 누르면 다른페이지로 이동한 것처럼 URL도 바뀌고, 뒤로가기 버튼으로 이전페이지로 돌아갈수도 있다!

놀라운 웹의 세상

---

vue-router는 client에서 한다고 치자. 그런데 client-side에서 vue template을 사용한다면, db data는 어떻게 읽어와야할까?

db access는 web application server(flask)에서 처리해야한다. 데이터를 어떻게 전달해야하나 생각했더니

REST API가 이럴 때 필요한 것이었다

엥 그런데 Elasticsearch에서 REST API를 제공해주는데..

그럼 flask가 필요없나? 아 middleware가 있었지.

flask(jinja2), django, vue.js, ...

최근에 살펴본 것들인데, 이들은 모두 template engine을 가지고 있다 (vue는 그 자체로 보는게 맞나?)

그러다가 문득, tempalte engine은 왜 쓰지?라는 생각이 들었다. 그래서 한참을 찾아보았고 그 내용을 정리해두려 한다

<template engine이란?>

template engine(for web)은 dynamic page를 생성할 때 주로 쓰인다 (아마)

template engine이 없다면, 우리는 web application 코드에 html 코드를 포함시켜야 한다

또는 php같은 언어에서, html 코드에 data logic을 섞어쓰기도 했던 것도 template engine의 부재때문이라고 볼수있다

template engine은 view code(html)와 data logic code(db connection)를 분리해주는 기능을 한다

그리고 필자가 궁금했던 것은, "그래서, 그렇게하면 뭐가좋은데?"였다

<template engine의 장점 / 사용이유>

view code와 data logic code를 분리하면 아래와 같은 효과들을 얻을 수 있다

1. designer와 developer의 workspace를 분리시킴으로써 효과적으로 협업(cooperation)할수있다

2. 유지보수(코드 변경)를 할때도 훨씬 효과적이다 (= MVC pattern의 장점 / 사용이유)

2만 보더라도, 혼자 개발을 할때 template engine의 사용이유는 충분할듯하다.

물론 유지보수는 프로젝트가 커질수록 힘들어지므로, 프로젝트가 충분히 클 때 template engine이 필요할것이다

1. HEAD에서 vue library 로딩

2. BODY에서 view tag 로딩

3. vue instance를 생성하여 view의 data binding(=text interpolation)

1을 먼저 하지않으면 {{ message }}가 binding되기 전 상태로 보이게 됨

(network I/O동안)

2를 먼저 하지않으면 binding이 이루어지지 않음

(HTML도 script language니까, 한줄씩 실행되니까)

vue를 client-side에서 사용할경우 XSS 주의해야함

---

비슷한 용어가 너무 많다.

template, data binding, text interpolation, rendering