컴퓨터를 다루다

0. 구동 환경

Ubuntu 19.04.

1. Vue.js 설치 방법

nodejs(npm) 설치(1)

$ apt install nodejs

nodejs(npm) 설치(2)

$ apt install npm

vue 설치

$ npm install vue

2. vue-cli 설치

Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI이다. Vue CLI를 통해 vue 명령어를 사용할 수 있게 되고, 빠른 프로젝트 생성 및 관리가 가능하다.

vue-cli 설치 방법(1)

$ npm install -g @vue/cli

vue-cli 설치 방법(2)

$ yarn global add @vue/cli

vue 명령 살펴보기

root@ubuntu:~# vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

3. vue를 이용한 프로젝트 생성

프로젝트 생성시 vue-cli를 설치해두었으면 생각보다 편하게 설치가 가능하다. 물론 인터넷이 되어야 한다는 전제가 있다.

공식 템플릿을 이용한 프로젝트 생성

$ vue init webpack [my-project-name]

github 저장소에서 프로젝트 가져오기

$ vue init [username/reposigory_name] [my-project-name]

4. vue 프로젝트 실행

프로젝트를 생성하였으면, 간단하게 실행해볼 수 있다.

실행 명령어(1)

$ npm run dev

실행 명령어(2)

$ npm start

npm start와 npm run dev와 같은 명령어로 서버를 구동할 수 있다.

물론 구동된 서버는 기본적으로 로컬호스트에서만 접근이 가능하다.

5. vue 프로젝트 외부에서 접근하기 위한 config 수정

프로젝트를 구동하는 곳은 VMware라는 전제하에 외부의 Windows 환경에서 구동하고 싶었다. 그런데 VMware 내부에서는 접근이 가능하였으나, 외부에서는 접근이 안 되는 것을 확인하여, config 파일이 어딨는지 삽질하면서 다음과 같은 힌트를 얻었다.

root@ubuntu ~/VueJSProject/01 > npm run dev

> 01@1.0.0 dev /root/VueJSProject/01
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 1 10% building modules 3/7 modules 4 active ...dules/webpack/hot/log-apply-result.js

위의 파일에서 build/webpack.dev.conf.js에 config가 있는가 싶어서 살펴보았지만 다른 파일의 내용을 보라고 나타나 있었다. 그리고 좀 더 찾아보니 config 아래에 있는 index.js 파일에서 localhost에 대한 내용을 찾았다.

/* 
config/index.js
*/

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    //host: 'localhost', // can be overwritten by process.env.HOST
    host: '0.0.0.0'
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-```

Javascript로 로딩중 표시를 하기 위한 함수는 다양한 방법으로 만들 수 있습니다.

그 중에서 제가 생각하기에 굉장히 괜찮은 함수를 소개해보려고 합니다.

function LoadingWithMask() {
	//화면의 높이와 너비를 구합니다.
	var maskHeight = $(document).height();
	var maskWidth  = window.document.body.clientWidth;
	
	//화면에 출력할 마스크를 설정해줍니다.
	var mask       = "<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
	var loadingImg = '';
	 
	loadingImg += "<div id='loadingImg'>";
	loadingImg += " <img src='LoadingImg.gif' style='position: relative; display: block; margin: 0px auto;'/>";
	loadingImg += "</div>";  
 
	//화면에 레이어 추가
	$('body')
		.append(mask)
		.append(loadingImg)
	   
	//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채웁니다.
	$('#mask').css({
			'width' : maskWidth
			, 'height': maskHeight
			, 'opacity' : '0.3'
	}); 
 
	//마스크 표시
	$('#mask').show();   
 
	//로딩중 이미지 표시
	$('#loadingImg').show();
}

이 함수를 실행하게 되면 여러분이 저장해둔 LoadingImg.gif 파일을 로딩하여 보여줍니다.

로딩중인 표시를 제거해야할 경우에는 다음과 같은 함수를 실행시키면 됩니다.

function closeLoadingWithMask() {
	$('#mask, #loadingImg').hide();
	$('#mask, #loadingImg').remove();  
}

이 함수를 사용하는 예제와 예제 소스를 보시도록 하겠습니다.

먼저 전체 예제 소스를 먼저 살펴보도록 합시다.

아래의 소스는 예제를 설명하기 위해 조금 각색했습니다.

<script>
function test(imageName) {
	LoadingWithMask('your site\'s image path');
	setTimeout("closeLoadingWithMask()", 3000);
}

function LoadingWithMask(gif) {
	//화면의 높이와 너비를 구합니다.
	var maskHeight = $(document).height();
	var maskWidth  = window.document.body.clientWidth;
	
	//화면에 출력할 마스크를 설정해줍니다.
	var mask       = "<div id='mask' style='position:absolute; z-index:9000; background-color:#000000; display:none; left:0; top:0;'></div>";
	var loadingImg = '';
	 
	loadingImg += " <img src='"+ gif + "' style='position: absolute; display: block; margin: 0px auto;'/>";

	//화면에 레이어 추가
	$('body')
		.append(mask)

	//마스크의 높이와 너비를 화면 것으로 만들어 전체 화면을 채웁니다.
	$('#mask').css({
			'width' : maskWidth,
			'height': maskHeight,
			'opacity' : '0.3'
	}); 
 
	//마스크 표시
	$('#mask').show();
 
	//로딩중 이미지 표시
	$('#loadingImg').append(loadingImg);
	$('#loadingImg').show();
}

function closeLoadingWithMask() {
	$('#mask, #loadingImg').hide();
	$('#mask, #loadingImg').empty();  
}

스피너(Pacman)

팩맨(Pacman)

위지스(Wedges)

해당 이미지들은 아래의 사이트에서 얻을 수 있었습니다.

Loading.io 링크

Python Flask 혹은 Django를 사용하게 되면 HTML에 Jinja2 문법을 사용하여 추가적인 작업을 수행할 수 있습니다.

여기서 Jinja2의 For문을 사용하는 방법을 알아보도록 하겠습니다.

Jinja2를 사용할 때 Python Flask로 다음과 같이 작성했다고 합시다.

예제 소스

@app.route('/', method=['GET'])
def hello_kkamikoon():
    myList = []
    for i in range(0, 10):
        myList.append('count : %d' % i)
    
    return render_template('/app/templates/hello_kkamikoon.html', myList=myList)

위의 파이썬 소스를 실행시켰다는 가정하에 이제 HTML 소스를 보시겠습니다.

<!--source name : hello_kkamikoon.html -->
<!--source dir : /app/templates/hello_kkamikoon.html -->

<html lang="ko">
  <head>
    <title>kkamikoon Jinja2 for</title>
    >
  </head>
  <body>
    <ul>
	  {% for ml in myList %}
	  <li> {{ml}} </li>
	  {% endfor %}
    </ul>
  </body>
</html>

결과

<!--source name : hello_kkamikoon.html -->
<!--source dir : /app/templates/hello_kkamikoon.html -->

<html lang="ko">
  <head>
    <title>kkamikoon Jinja2 for</title>
    >
  </head>
  <body>
    <ul>
	  <li> count : 0 </li>
	  <li> count : 1 </li>
	  <li> count : 2 </li>
	  <li> count : 3 </li>
	  <li> count : 4 </li>
	  <li> count : 5 </li>
	  <li> count : 6 </li>
	  <li> count : 7 </li>
	  <li> count : 8 </li>
	  <li> count : 9 </li>
    </ul>
  </body>
</html>

myList에 있는 값이 그대로 html로 옮겨져서 반복되는 것을 볼 수 있습니다.

01. onchange 함수

문법 

<element onchange="myScript">

onchange 함수는 우리가 작성한 Javascript를 통해 변화가 일어났는지 탐지해줍니다.

예제 소스

<input type="text" value="hello" onchange="bgcolor_yellow(this)" />
<input type="text" value="world" onchange="bgcolor_yellow(this)" />

<script>
function bgcolor_yellow(obj) {
  obj.style.backgroundColor = 'yellow';
}
</script>

결과

02. onchange 함수 응용

예제 소스

<select id="TestSelect" name="SelectValue" onchange="chageLangSelect()">
<option value="" selected disabled>Choose your value</option>              
<option value="val01">YourValue01</option>
<option value="val02">YourValue02</option>
</select>

<script>
function chageSelectedValue(){
    var yourTestSelect = document.getElementById("TestSelect");
     
    // select element에서 선택된 option의 value가 저장됩니다.
    var selectedValue = yourTestSelect.options[yourTestSelect.selectedIndex].value;
 
    // select element에서 선택된 option의 text가 저장된다.
    var selectedText = yourTestSelect.options[yourTestSelect.selectedIndex].text;
}
</script>

9번 라인에서 'TestSelect'라는 아이디를 가진 element를 yourTestSelect에 저장합니다.

그리고 변경할 때 해당 element의 option 번째를 고른다면, 선택한 value와 text로 값이 변경되도록 하는 예제입니다.

여기서 var selectedValue와 selectedText는 크게 역할이 없습니다.

결과

HTML 에서 테이블을 쓰다가, 테이블의 제목은 가운데 정렬을 해주고 번호나 날짜는 가운데정렬을 하지만 제목이나 내용은 왼쪽 정렬로 출력하고 싶고.... 원하는 데로 테이블을 꾸미고 싶을 때가 있습니다.

이때 여러가지 방법으로 꾸며줄 수 있습니다.

이번 포스트에서는 표를 가운데 정렬하는 방법을 알아보려 합니다.

01. 표(table) 예제

표 예제를 살펴보면 다음과 같습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td>제목1</td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td>제목2</td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

위의 코드를 실행하면 크게 꾸며준 것이 없는 테이블을 볼 수 있습니다.

이제 이 기본 소스에서 추가적인 작업을 수행하면서 어떻게 정렬을 바꾸고 수정할지 방법을 알아보겠습니다.

02. 표 가운데 정렬

CSS 수정하는 방법

아래의 소스는 표 예제 소스에서 CSS 부분을 수정한 것입니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
      td {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td>제목1</td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td>제목2</td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

td 태그에 text-align: center;를 추가해줌으로써 모든 td를 가운데정렬을 해주었습니다.

<center>태그를 이용하는 방법

CSS 속성을 변경해주는 것보다 번거로운 점이 있지만 특정 td 태그만 가운데정렬을 간편하게 할 수 있습니다.

물론 CSS 속성을 보다 견고하게 세분화하여 적용해준다면 center를 사용하는 번거로움도 없어지겠지만, 저는 아래와 같은 방법을 사용하였습니다.

<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Table 정렬</title>
    <style>
      table, th, td {
        border: 1px solid #bcbcbc;
      }
      table {
        width: 1000px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>번호</th>
          <th>제목</th>
          <th>날짜</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>번호1</td>
          <td><center>제목1</center></td>
          <td>날짜1</td>
        </tr>
        <tr>
          <td>번호2</td>
          <td><center>제목2</center></td>
          <td>날짜2</td>
        </tr>
      </tbody>
    </table>
  </body>
</html

Jinja2를 사용할 때 원래는 break문을 기본적으로 사용할 수 있을 것 같지만, 전혀 그렇지 않습니다... 허허...

보통은 break는 기본으로 제공하지만 jinja2는 예외더랍니다.

따라서 추가적인 작업이 필요합니다.

01. jinja2.ext.loopcontrols 적용

Jinja2에서 'jinja2.ext.loopcontrols'를 적용해주면 추가적인 작업 없이 {% break %}를 사용할 수 있습니다.

# ==============================
# flask_folder/run.py (실행파일)
# ==============================
import sys
from app import app

app.run(host='0.0.0.0', port=80, threaded=True)

위와 같이 run.py가 작성되어 있다고 가정합니다.

그러면 이제 jinja2.ext.loopcontrols를 적용해주어야 하는데, 이는 다음과 같이 적용해줄 수 있습니다.

# ==============================
# flask_folder/app/__init__.py
# ==============================
from flask import Flask, request, session, g, redirect, url_for, abort, render_template

# Configurations
app.config.from_object('config')

# Jinja2 environment add extension
app.jinja_env.add_extension('jinja2.ext.loopcontrols')

반드시 위와 같은 방법으로 추가해주지 않아도 되지만, 저는 이 방법으로 작업을 수행했습니다.

02. {% break %} 사용 예제

아래는 {% break %}문을 사용하는 예제 입니다.

{% for m in menu %}
    {% if m.case in cases %}
       <li class="on">
            {{ m.data }}
       </li>
    {% else %}
       {% break %}
    {% endif %}
{% endfor %}

자바스크립트의 반복문은 while, do while, for, for in문으로 총 네 가지가 있습니다.

특성은 C 언어와 python과 비슷합니다.

while문

var value = 0;
while(value < 5) {
    alert('No.' + value);
    value++;
}

while문은 C언어와 거의 같다고 보시면 될 것 같습니다.

do while문

var value = 0;
do {
    alert('No.' + value);
    value++;
} while(value < 5);

do while문도 마찬가지로 C언어와 거의 같은 형태를 보이고 있습니다.

for문

var array = ['1', '2', '3', '4'];

for(var i=0; i<array.length; i++) {
    alert(array[i]);
}

여기서 특이한 점이 array의 길이를 .length를 통해 표현하고 있습니다.

리스트(배열)의 길이는 .length를 통해 설정할 수 있습니다.

for in문

var array = ['1', '2', '3', '4'];
 
for(var i in array) {
    alert(array[i]);
}

자바스크립트는 배열이나 객체를 좀 더 쉽게 다룰 수 있도록 for in문을 제공합니다. 이는 마치 python의 형태와 유사한데, 완전히 같다고는 할 수 없습니다. 하하... 위의 예제에서 in 앞의 var i는 index를 나타내는 것이며 배열 내의 값을 나타내진 않습니다.

자바스크립트의 조건문은 if문과 switch문이 있습니다.

특성은 C언어나 다른 일반적인 언어와 비슷합니다.

if문

var date = new Date();
var hour = date.getHours();
 
if(hour < 11) {
    alert("It is Breakfast");
}
else if(hour >= 11 && hour < 15) {
    alert("It is Lunch");
}
else {
    alert("It is Dinner");
}

switch문

var input = Number(prompt('Input Your Number.', 'Number'));
 
switch(input % 2) {
    case 0:
        alert("Even!!!");
        break;
    case 1:
        alert("Odd!!");
        break;
    default:
        alert("It is not number..!");
        break;
}

삼항 연산자

var input = prompt('Input Your Number.', 'Number');
var number = Number(input);
 
(number > 0) ? alert('Natural Number') : alert('Not Natural Number');

이외에도 javascript에서는 보다 짧게 조건문을 작성해볼 수 있습니다.

다음과 같은 예제와 같습니다.

짧은 조건문

true || alert('Answer A');
false || alert('Answer B');
// || 연산 첫 번째 줄에서 Answer A는 실행되지 않고 Answer B는 실행됩니다.
 
true && alert('Answer C');
false && alert('Answer D');
// && 연산 첫 번째 줄에서 Answer C는 실행되고 Answer D는 실행되지 않습니다.

설명을 더하면, 다음과 같습니다.

1. true || alert(); 에서는 왼쪽이 이미 참이기 때문에 오른쪽 값을 확인하지 않고 넘어가버립니다.

2. false || alert(); 에서는 왼쪽이 거짓이기 때문에 오른쪽 값을 확인합니다. 따라서 alert() 함수가 실행됩니다.

3. true && alert(); 에서는 왼쪽이 참이기 때문에 오른쪽을 확인합니다.(and 연산은 둘 다 참이어야 실행됩니다.) 따라서 alert() 함수가 실행됩니다.

4. false && alert(); 에서는 왼쪽이 이미 거짓이기 때문에 오른쪽을 볼 것도 없이 이미 이 연산은 거짓이 되어 실행되지 않습니다.

01. remove 함수

문법

.remove( [ selector ] )

remove 함수는 선택한 요소를 제거할 때 사용하거나, 요소 내의 태그들을 삭제할 때 사용합니다.

예제 소스

<html lang="ko">
  <head>
    <title>kkamikoon javascript</title>
    <script>
      $( document ).ready( function() {
        $( 'ul' ).remove( '.rm' );
      } );
    </script>
  </head>
  <body>
    <ul class='rm'>
      <li>Test1</li>
      <li>Test2</li>
    </ul>
  </body>
</html>

결과

<body>
</body>

위와 같이 class 이름이 rm인 ul이 사라진 것을 볼 수 있습니다.

02. remove 함수 응용

이를 특정 id 값을 지정해주어 해당 요소 내부에 있는 값들만을 제거하고 싶을 때가 있을 것입니다.

이때의 예제는 다음과 같습니다.

예제 소스

<script>
	function TestList()
	{
		//$("test_list").remove(); // div 자체를 삭제하기 때문에 사용하지 않음
		$("test_list *").remove(); // div 아래에 있는 태그들만 삭제함
	}
</script>

<div id="test_list">
    <li> It is Test </li>
    <li> It is Test </li>
    <li> It is Test </li>
</div>

위의 예제 소스에서 TestList 함수를 실행시키면 다음과 같은 결과값으로 HTML이 변경됩니다.

결과

<div id="test_list"></div>