다른생각 - 개발 로그

프론트엔드 로드맵

richready2011 — Mon, 26 Sep 2022 23:52:33 +0900

개발자는 항상 불안하다.. 내가 뒤쳐지고 있는거 아닐까?

불!안!해!서!! 누구도 정답을 얘기해 주지 않아서!! 비난의 함정에 빠진다.

불!안!하!지! 말자!! 우리에겐 집단지성이 있지 않은가! 참으로 감사한 일.

적어도 아래의 노란색중 걸리는게 크게 없다면, 상위 30% 라고 생각해도 되지 않을까?

실제로 노란색을 모두 다 알기 위해서는 상당한 공부량이 있어야 한다.

내가 뒤쳐지고 있는지 아닌지를 보려면 이걸 보면 된다.

로드맵!

https://github.com/kamranahmedse/developer-roadmap

GitHub - kamranahmedse/developer-roadmap: Community effort to create roadmaps, guides and other educational content to help the

Community effort to create roadmaps, guides and other educational content to help the developers get an idea about the software development landscape, learn and grow in their career. - GitHub - kam...

github.com

모조품 주의

우분투에 구글 NativeScript 설치

richready2011 — Tue, 20 Sep 2022 22:21:51 +0900

웹과 앱이 하나로 통합 될 거라는 얘기를 종종 한다.

개인적인 생각이지만, 웹을 중심으로 앱이 통합되는 형태 보다는, 앱이 살아남고, 웹은 서포트 역할이 될거다 라고 생각한다.

웹은 URL을 외우고, 접속하기 위해 키보드가 필요하지만, 앱은 설치하고 터치하면 된다.
구글 글래스에서 동작하는 방식을 키보드로 할 수 없다. 냉장고에 키보드를 포함할 수도 없다.
TV 에서 넷플릭스를 보기위해 블루투스 키보드를 사야되나?

웹을 사용하려면 브라우저를 탑재해야 하는데, 브라우저는 다양한 기능을 소화할 수 있도록 개발되기 때문에 무겁다.

어떤게 더 편할까 생각이 들었고, 앱을 만들어야 겠다는 생각을 했다.

앱개발의 지식이 없기 때문에, 가지고 있는 기술을 활용할 수 있는 테크트리를 선택하고 싶었고 자바스크립트로 작성할 수 있는 선택지가 있었다.

--> (수정) 웹이 앱이 되어가고 있음.

프레임워크

Fuse

예전부터 풍부한 예제들이 탐나서, 해야지 해야지 했는데, 2018년을 기점으로 사업을 접겠다는 기사가 났다. 이유는 거대한 대기업의 잠식으로 이길수 없겠다고는 했는데, 아쉬운 부분.

Google Native-Script

Google NativeScript

2년전인가 테스트 해보려고 접속했을 때는, 어마무시하게 엉망인 웹사이트 였으나, 오랜만에 접속하니 아주 깔끔하고, 구조도 잘 잡혀 있어서 향후 지원이 더 기대된다.

React-Native

VUE.js 와 같이 React 의 진입장벽이 Angular 에 비해 원만했기에, 사용자층이 높고, 생태계 또한 잘 활성화 되어 있다.

Google Flutter

Flutter

구글에서 만든 크로스플래폼 UI SDK 이다. WEB/APP 다 이거로 하면 된다고 만든듯 싶은데, 구글은 완성본을 오픈하는 회사가 아니라
베타를 지속적 업데이트 하기 때문에, 조금 지나서 사용해봐야겠다.

이것들은 자바스크립트 코드로 작성하면, Android & Ios 앱파일 로 build 해준다.

가상화 환경 구성하기

OS 선택하기

React 는 이상하게 손이 안가고, Angular 선호 하기도 해서, Google Native Script 를 선택했다.
개발하려고 필요한 환경을 윈도우, 맥에 설치하는데 왜인지 모르겠지만, 원클릭으로 되지 않는다.

"권한이 어쩌구 저쩌구"
"adbmanager 킷이 어쩌구 저쩌구"
"jdk 버전이 어쩌구 저쩌구"

진입장벽은 저런것들 이다. 저런 환경을 만들다가 지쳐버리고 포기하고 싶게 만드는 러닝커브의 대표적 장벽이다.
윈도우는 그나마 설치하는데 매끄러웠다.

Android Studio 를 설치하고,
Nativescript-Sidekick 설치 후에,

터미널에 접속하여

command> tns doctor

명령어를 입력하면, 관련된 프로그램들을 알아서 설치해줘서 문제가 없었다.

맥에서는 권한문제, 폴더문제, Nodejs 문제 등등.. 대부분 권한문제가 대부분 이였고, 리눅스권한에 어두운 나는 공장초기화를 진행하고,
클린설치된 맥에서 다시 하나하나 설치하다 보니, 다른 개발환경이랑 또 다른 버전문제/권한문제 를 일으키겠구나 싶었다.

나는 이걸 다시 반복할 자신이 없다. (윈도우 98 설치하던 때가 떠오르며)
가상화 환경(VirtualBox/Vmware) 에 해당개발에 필요한 최소설치 만이 된 백업본이 필요하다.

처음에는 가상화환경 OS를 CentOS 로 했는데, 뭔가가 잘 작동하지 않는다. 이유없이 멈추거나 한다.
Ubuntu 를 설치했더니, 아주 만족스러운 성능이 나왔다.

우분투 설치하고, 한글 언어팩 등록하기

괴로운 설정은 아니여서 설치법은 링크로 대체한다.

개발환경 설치하기

Nodejs 10 버전 설치하기

NativeScript 는 Nodejs 10 버전 이상 을 필요로 한다. 우분투의 터미널을 열고 아래를 실행하자.
(vim은 vi 편집기 보다 유용하므로, 옵션설치 항목이지만 설치하는 것을 추천한다.)
(git이 기본으로 탑재됐을거 같은 느낌이지만, 그렇지 않기 때문에 설치하는 것을 추천한다.)

command> sudo apt update
command> sudo apt install vim
command> sudo apt install git
command> sudo apt install build-essential apt-transport-https lsb-release ca-certificates curl
command> curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
command> sudo apt install nodejs
command> node --version
v10.16.0

나는 NodeJS 설치 까지만 한 상태를 기본으로 두고, 가상화머신을 복제 해서 쓰기로 했다.
(다음 설치를 하다가 문제 생기면 시원하게 지워버리고 다시 복제하기 위해서..)

Nodejs 를 사용한다면 아래와 같이 권한을 획득해 두는게 정신건강에 좋다.

command> sudo chown -R $(whoami) ~/.npm

JDK 설치

Android SDK는 자바 8버전 에서 최적호환 되는듯 하다.

command> sudo apt-get install openjdk-8-jdk
command> vim $HOME/.bashrc

키보드 화살표로 제일 아래로 내려가서, i키 누르고 JAVA_HOME 을 추가후, esc키 누르고 wq 로 저장종료.

[추가:i]

export JAVA_HOME=$(update-alternatives --query javac | sed -n -e 's/Best: *\(.*\)\/bin\/javac/\1/p')

[저장:esc:wq]

command> source $HOME/.bashrc

KVM 설치 (옵션)

리눅스 계열에서 가상화환경의 작업관리를 해주는 것이 KVM 인듯 한데, 정확히는 모르겠지만,
안드로이드 스튜디오는 이게 성능이 좋으니 연동해서 쓰라고 조언해 준다. 모르겠고 설치...

command> egrep -c '(vmx|svm)' /proc/cpuinfo
4

0 이면 host 운영체제가 가상화 지원상태가 아니기 때문에, 이후 설치는 skip 하자

command> sudo apt install qemu-kvm libvirt-bin ubuntu-vm-builder bridge-utils

그룹권한 처리를 해야 하는데

command> sudo adduser $(whoami) libvirtd

만약 그룹이 없다고 나오면

command> groups

하고, libvirt 가 있는지 확인하고 그거라면

command> sudo adduser $(whoami) libvirt

kvm 그룹에도 추가

command> sudo adduser $(whoami) kvm
command> sudo virsh -c qemu:///system list
command> apt install virt-manager

설치하고 나면 애플리케이션 목록에 "가상머신 관리자" 생긴다

command> reboot

안드로이드 스튜디오 설치

안드로이드 스튜디오 설치 권고안

아래의 설치는 권고안 대로 설치하지 않고, 블로그를 참조해서 만든 설치 방법이다.

command> sudo apt install libcanberra-gtk-module

?? 뭔지는 모르겠지만 설치 안하면 없다고 에러난다.

command> sudo add-apt-repository ppa:maarten-fonville/android-studio
command> sudo apt update
command> sudo apt install android-studio

이렇게 하면 설치는 끝나는데, 안드로이드 스튜디오를 실행해서, 각종설정을 마치고 나면, Android SDK 나 그 외에 필요한 소프트웨어를
자동으로 설치해 준다.

command> /opt/android-studio/bin/studio.sh

이 과정이 끝나면 ANDROID_HOME 을 환경변수에 추가해 줘야 한다.

command> vim $HOME/.bashrc

키보드 화살표로 제일 아래로 내려가서, i키 누르고 JAVA_HOME 을 추가 후, esc키 누르고 wq 로 저장종료.

[추가:i]

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

[저장:esc:wq]

command> source $HOME/.bashrc

모든 설정이 끝났다.

native-script 설치는 JAVA_HOME, ANDROID_HOME 설정이 필수로 요구되기 때문에, 꼭 환경변수에 추가해 두자.
혹시 설치 후 /opt/android-studio 권한문제가 있다면

command> sudo chmod 777 -R /opt/android-studio

혹여 뭔가 부족한게 있을까 싶어서, 안드로이드 스튜디오의 adbmanager 디바이스 하나 추가하고, sdkmanager 에서 안드로이드 8.0 이상 체크하고 설치를 해두었다.

네이티브 스크립트 설치하기

설치되는 것들이 정확히 뭔지는 모르고, 관심도 없어서, 필요하다 싶은거는 죄다 설치했다.

command> sudo apt-get install libc6-i386 lib32stdc++6 lib32gcc1 lib32ncurses5 libbz2-1.0:i386 libstdc++6:i386 lib32z1     
command> sudo npm install nativescript -g --unsafe-perm

설치과정에서 에러를 뱉어내지 않았다면은, 정상설치가 되었을 거고, nativescript의 tns 명령어를 사용할 수 있다.

아래와 같이 android sdk 확인하고 build-tool 을 설치하자

command> $ANDROID_HOME/tools/bin/sdkmanager
command> $ANDROID_HOME/tools/bin/sdkmanager "build-tools;25.0.2"

NativeScript 는 Android SDK 28 또는 그 이상의 버전도 요구한다.

안드로이드 스튜디오의 Configure > SDK Manager 에 가서 Android SDK 28 버전 설치를 하자.

이제 tns doctor 로 부족한 환경이 있는지 확인한다.

command> tns doctor

No issues were detected 가 나오면 성공

마지막으로 구글이 제공해주는 코드샘플과 에뮬레이터 도우미 도구인 sidekick 를 다운받아 설치하면 끝이다.

linux version 을 다운로드 하면 .deb 파일이 받아지는데, 설치패키지 파일이므로 실행하면 설치된다.
(아이콘이 없는 상태로 설치되는데 왜그런지 모르겠음.)

터미널에서 설치하고 싶으면, 터미널을 열고 다운로드 받은곳으로 이동해서

command> sudo dpkg -i NativeScriptSidekick__amd64.deb
command> sudo apt-get install -f # Install dependencies

마무리

이렇게 하면 Native Script 사용에 필요한 최소한의 설치(?)가 되었다.

이 가상화파일을 기준으로 프로젝트가 생길때 마다 복제 하여, 독립된 개발환경으로 사용하기로 했다.

처음에는 성능문제가 있지 않을까 심히 고민했는데, 그냥 virtualbox, vmware 의 스펙을 최대한 올려서 구동했더니, 나름 빠르게 동작해서 불편함 없이 사용할 수 있었다.

포토샵은 설치가 안되서 이미지편집은 GIMP 로 하는방법 뿐인거 같다.

Linux 이미지 편집툴

ES5 -> ES6

richready2011 — Thu, 1 Sep 2022 22:15:38 +0900

Ajax 의 관심도가 증가하고, Server Side 에서 Client Side 로 변화하면서, 현재의 자바스크립트의 고도화 필요성이 생김.

ES6 는 무엇인가

현재 우리가 사용하고 있는 것은 ES5 이고, 2009년에 제정됨. 이후 2015년 ES6 (ECMASCRIPT 2015) 제정되어 현재는 컴파일 과정을 거쳐서 ES5 변환 후 브라우저에서 인식하는 것이 현대의 흐름이다.

컴파일을 위한 TASK RUNNER

Grunt
Gulp
WEBPACK

그 외에 브라우저가 채택하고 있는 표준

BOM (Browser Object Model)
DOM (Document Object Model)

주요 변경 사항

let, const

let.

블록단위에 scope (수정 가능)
루프문 안에서는 매번 새로 생성됨 (for, while등)
윈도우의 속성이 아님

const.

let 과 동일하지만 선언 후 수정이 불가

Arrow function

함수를 간결하게 작성할 수 있도록 람다식표현중 Arrow 가 추가됨.


// ES5
var selected = allJobs.filter(function (job) {
  return job.isSelected();
});

// ES6
var selected = allJobs.filter(job => job.isSelected());

// ES5
var total = values.reduce(function (a, b) {
  return a + b;
}, 0);

// ES6
var total = values.reduce((a, b) => a + b, 0);

화살표 함수표현식 으로 인해, 이전에 사용하던 this 를 참조하기 위한 구문이 필요치 않다.

//ES5
{
  ...
  addAll: function addAll(pieces) {
    var self = this;
    _.each(pieces, function (piece) {
      self.add(piece);
    });
  },
  ...
}

// ES6
{
  ...
  addAll: function addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

// ES6 with method syntax
{
  ...
  addAll(pieces) {
    _.each(pieces, piece => this.add(piece));
  },
  ...
}

function arguments

// ES6
'use strict';

function loop(func, count = 3) {
    for (var i = 0; i < count; i++) {
        func();
    }
}

function sum(...numbers) {
    return numbers.reduce(function(a, b) { return a + b; });
}

loop(function(){ console.log('hello')}); // hello hello hello
console.log(sum(1, 2, 3, 4)); // 10

for/for in/for of

// Before
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

// ES5 추가 (return, break등으로 탈출 불가)
myArray.forEach(function (value) {
  console.log(value);
});

// Object를 순회하기 위한 방법
for (var index in myArray) {
  console.log(myArray[index]);
}

For-in 은 객체의 순회를 위한 반복문으로 몇가지 특징을 가진다.

prototype chain도 순회한다.
순서가 무작위이다.
var index 가 string 이다.

For-in도 순회문 이지만 몇가지 특징이 있다.

break/continue/return 등으로 탈출 가능
배열순회용 이기 때문에, 정확히 객체의 배열만 순회한다.

Template String

새로운 문자표현식이 추가되었다.

console.log(`Hello ${a} I'm ${b} year's old`)

Module

기능별로 파일을 구분하여 페이지에서 로딩하였으나, export 와 import 구문을 통해 모듈을 로딩 할 수 있도록 추가 되었다.


// num.js

export const random = Math.random(); 
export function double(x) { return 2 * x; }

// 혹은

const random = Math.random(); 
function double(x) { return 2 * x; } 

export { random, double };

다른 모듈 에서는 export 로 불러올 수 있음.


//main.js 
import { random, double } from './num.js';

// 불러올게 많을 때 한번에 부를 수 있다.
import * as num from './num.js';

// 이름을 바꿔서 불러올 수 있다.
import { random as ran, double as db } from './num.js';

Promise

비동기 통신이 늘어나면서 콜백에 대한 번거로움을 해소하고자 도입됨. 통신에 한정되지 않고, 무한하게 활용할 수 있음.

// ES5
'use strict';

function sleep(callback, msec) {
  setTimeout(callback, msec);
}

sleep(function(){
  console.log('wake!')
}, 1000);


// ES6
'use strict';

function sleep(msec) {
  return new Promise(function(resolve, reject){
    setTimeout(resolve, msec);
  });
}

sleep(1000).then(function(){
  console.log('wake!');
});

Refer : http://azu.github.io/promises-book/

Class

자바스크립트 에서도 클래스를 지원하게 되었다.


// ES5 
function Box(length, width) {
    this.length = length; 
    this.width = width; 
}

Box.prototype.calculateArea = function() {
    return this.length * this.width; 
}

var box = new Box(2, 2); 
box.calculateArea(); //4

// ES6
class Box { 
    constructor(length, width) { 
        this.length = length; 
        this.width = width; 
    } 

    calculateArea() { 
        return this.length * this.width; 
    } 
} 

let box = new Box(2, 2); 
box.calculateArea(); // 4

클래스를 확장하는 것도 가능하다.


class Shape {

    constructor(color) {
        this._color = color;
    }

}

class Circle extends Shape {

    constructor(color, radius) {
        super(color);
        this.radius = radius;
    }

}

또 다른 예

// ES5
'use strict';

function User(name) {
  this._name = name;
}

User.prototype = Object.create(null, {
    constructor: {
        value: User
    },

    say: {
        value: function() {
            return 'My name is ' + this._name;
        }
    }
});

function Admin(name) {
    User.apply(this, arguments);
}

Admin.prototype = Object.create(User.prototype, {
    constructor: {
        value: Admin
    },

    say: {
        value: function() {
            var superClassPrototype = Object.getPrototypeOf(this.constructor.prototype);
            return '[Administrator] ' + superClassPrototype.say.call(this);
        }
    }
});

var user = new User('Alice');
console.log(user.say()); // My name is Alice

var admin = new Admin('Bob');
console.log(admin.say()); // [Administrator] My name is Bob

// ES6
'use strict';

class User {
  constructor(name) {
    this._name = name;
  }

  say() {
    return 'My name is ' + this._name;
  }
}

class Admin extends User {
  say() {
    return '[Administrator] ' + super.say();
  }
}

var user = new User('Alice');
console.log(user.say()); // My name is Alice

var admin = new Admin('Bob');
console.log(admin.say()); // [Administrator] My name is Bob

Reference : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/create

Generator

await/async

display: grid

richready2011 — Thu, 25 Aug 2022 14:17:24 +0900

@참조 :

grid 는 css 로 레이아웃을 구현을 도와준다. 이전에 table 태그로 레이아웃을 설계했을 때처럼, 중앙정렬 이라던지, 격자형태의 레이아웃 구현을 가능하게 한다.

현재의 레이아웃 구현방식은 block element 에 높이나 너비를 조정하고, float 나 position 을 통해서 해당요소를 배치하는 형태이다.

grid 는 flex 와 성격이 비슷한 부분이 있기 때문에, 비교대상이 된다.

`grid` 와 `flex`

flex와 grid가 박스모델을 배치한다는 성격의 유사함 때문일까? 표준문서에서도 이를 서두부터 비교하고 있다. (https://www.w3.org/TR/css-grid/#intro)

flex 가 가로축 혹은 세로축 기준의 1차원배열식 으로 나열 한다면, grid 는 가로,세로축을 가지는 2차원배열식 으로 나열하는 방식이다.

즉 한방향으로 배치하는 것(가로축 혹은 세로축)에는 flex 가 맞다.

가로세로축을 생각해야 하는 배치에는 grid 가 더 어울린다.

flex와 grid는 분명한 용도의 차이 가 있고, 성격적으로 보자면, 구글의 이미지검색 서비스처럼, 적층식으로 나열하는 방식에는 flex 가 어울리고, 2차원 형태의 레이아웃 구현 을 위해서는 grid 가 좋아 보인다.

예제로 비교해 보자

<!doctype html>
<html>
<head></head>
<body>
<header> 
    <div>홈</div> 
    <div>검색</div> 
    <div>로그 아웃</div> 
</header>
<style>
* { margin:0; padding:0; }
header { background: gold; }
div { color:hotpink; padding:10px; }
</style>
</body>
</html>

여기에 flex 를 적용하자

<!doctype html>
<html>
<head></head>
<body>
<header> 
    <div>홈</div> 
    <div>검색</div> 
    <div>로그 아웃</div> 
</header>
<style>
* { margin:0; padding:0; }
header { display:flex; background: gold; }
div { color:hotpink; padding:10px; }
</style>
</body>
</html>

여기서 로그아웃 버튼을 우측에 배치한다면 아래와 같은 코드가 될 것이다.

<!doctype html>
<html>
<head></head>
<body>
<header> 
    <div>홈</div> 
    <div>검색</div> 
    <div>로그 아웃</div> 
</header>
<style>
* { margin:0; padding:0; }
header { display:flex; background: gold; }
div { color:hotpink; padding:10px; }
div:nth-child(3) { margin-left: auto; }
</style>
</body>
</html>

가로형 배치에 대해서 예제를 보았다. 이것을 grid 로 변경하면 다음과 같이 된다.

<!doctype html>
<html>
<head></head>
<body>
<header> 
    <div>홈</div> 
    <div>검색</div> 
    <div>로그 아웃</div> 
</header>
<style>
* { margin:0; padding:0; }
header { 
    display:grid; grid-template-columns : repeat(10, 1fr); 
    background: gold; 
}
div { color:hotpink; padding:10px; }
div:nth-child(3) { grid-column: 10; }
</style>
</body>
</html>

grid 는 사용할 때, column 을 어떻게 나눌지를 grid-template-columns 를 사용해서 지정한다. flex 는 해당 컬럼을 어떻게 나눌지 지정을 안해도 자동으로 배치되는 것과 다르다.

만약 grid-template-columns 를 지정하지 않으면, column에 대한 지정이 없으므로, 종렬로 자동 등분된다.

<!doctype html>
<html>
<head></head>
<body>
<header> 
    <div>홈</div> 
    <div>검색</div> 
    <div>로그 아웃</div> 
</header>
<style>
* { margin:0; padding:0; }
header { 
    display:grid; 
    background: gold; 
}
div { color:hotpink; padding:10px; }
div:nth-child(3) {  }
</style>
</body>
</html>

본격적으로 grid 의 속성들을 들여다보자.

grid 컨테이너가 가지는 속성

display: grid 를 설정하면 grid 속성을 사용할 수가 있다.

이 속성은 6가지 다른 속성에 대한 축약형이고, 기본값은 none 이다.

grid-template-rows : 세로축 지정하기
grid-template-columns : 가로축 지정하기
grid-template-areas : 미리지정된 그리드영역의 이름을 이용해서 배치
grid-auto-rows : 배치되는 아이템의 높이 지정
grid-auto-columns : 배치되는 아이템의 너비 지정
grid-auto-flow : 배치의 흐름을 지정한다.

grid-template, grid-template-rows, grid-template-columns

그리드 아이템들의 너비,높이 를 어떻게 가져갈 것인가에 있다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display:grid; 
    grid-template-columns : 20px 20px 100px 20px 30px; 
    background: gold; 
}
.grid-item { 
    color:hotpink; 
    padding:10px; 
}
</style>
</body>
</html>

grid-template-columns 에 5가지를 대입하였기 때문에, .grid-item 의 배치들이 5컬럼으로 표현되었다.

grid-template-rows 를 대입해 보자.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display:grid; 
    grid-template-columns : 20px 20px 100px 20px 30px; 
    grid-template-rows : 50px 50px 50px;
    background: gold; 
}
.grid-item { 
    color:hotpink; 
    padding:10px; 
}
</style>
</body>
</html>

rows 로 3가지를 지정했더니, 50px 3줄이 생겼다.

auto 값도 가능한데, 중간에 auto 를 넣어보면,

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display:grid; 
    grid-template-columns : 20px auto 100px auto 30px; 
    grid-template-rows : 50px 50px 50px;
    background: gold; 
}
.grid-item { 
    color:hotpink; 
    padding:10px; 
}
</style>
</body>
</html>

이와 같이 명시된 px 외에는 자동으로 너비를 넓혀주고 있는데, 2번째와 4번째의 너비가 동일하다는 것을 주의깊게 보자. 나머지 auto 적용되는 요소들은 남은 너비를 등분해서 가져같다는 것을 확인할 수 있다.

grid-template-rows 도 동일한 공식이 적용된다.

기타 속성값으로 max-content, min-content 등을 지정할 수 있는데, 해당컬럼 혹은, 해당로우에 최대값 혹은 최소값 기준으로 적용된다.

이 외에 값에 대한 단위로 fr 단위를 쓰는 경우가 있다. 분수(fraction) 를 표현하는 단위로 grid 로 설정된 아이템들에게 적용된다. 쉽게 얘기해서 남는 공간에 대한 비율이다.

.grid {
    display: grid;
    grid-template-columns: auto 100px 1fr 2fr;
}

3번쨰는 1/3 공간을 차지하고, 4번째는 2/3 공간을 차지하는데, grid-template-columns: auto 100px 200px auto; 라고 했을때 auto 는 남는공간을 같은 크기로 등분하는데 반해 fr 단위를 사용했을 때에 auto 적용하는 부분은 최대값으로 너비가 결정되는 차이가 있다. 이렇게 단위가 충돌함으로 인해, 계산이 변칙적인 성격을 가지게 되면 오류의 요소를 찾기 어렵기 때문에, auto와 fr은 혼용해서 사용하지 않는 것이 좋다.

축약표현으로 grid-template: 150px / auto auto auto; 이렇게도 사용한다.
grid-template: rows / cols

grid-auto-columns, grid-auto-rows

grid-template-columns 가 일일히 칸을 지정한다면 grid-auto-columns는 한번에 지정한다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display:grid; 
    grid-auto-columns: 60px;
    background: gold; 
}
.grid-item { 
    color:hotpink; 
    padding:10px; 
}
</style>
</body>
</html>

columns 를 지정했는데, 가로로 배치되지가 않았다. 그래서 이 속성은 혼자서 사용할 수 없다. 그리드를 좀더 구체화 할 수 있는 다른속성과 같이 사용해야 한다.

예를들어 그리드아이템에 적용할 수 있는 grid-column 같은 속성과 같이 사용하면 너비를 참조해서 렌더링 해준다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display:grid; 
    grid-auto-columns: 60px;
    background: gold; 
}
.grid-item {
    color:hotpink; 
    padding:10px; 
    grid-column: 2/4;
}
</style>
</body>
</html>

grid-auto-columns 에 지정된 60px 을 기준으로 2칸을 차지하였다.

grid-auto-columns, grid-auto-rows 는 그리드의 남는 공간을 채우는 하나의 옵션으로 이해하면 될 거 같다.

grid-auto-flow

그리드의 흐름을 정한다. 기본값은 row 이다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display: grid; 
    grid-auto-flow: row;
    grid-template-columns: 50px 50px 50px;
    background: gold; 
}
.grid-item {
    color:hotpink; 
    padding:10px; 
}
</style>
</body>
</html>

이게 기본이라면 column 으로 지정하면 배치가 달라진다.

위와 같이 자식으로 있는 그리드아이템이 지정된 그리드영역에 배치되는 흐름에 대한 설정이다.

dense 속성값이 있는데, 이것은 배치하다가 남는 공간을 기준으로 자동배치 인데, row dense 와 column dense 같은 row 기준에 남는공간배치 와 column 기준에 남는공간배치 같은 개념이 있다.

만약에 100px 100px 100px 이 있을 경우에 해당 그리드 아이템이 100px을 넘으면 넘길거야? 같은 옵션으로 생각하면 된다.

이것은 그리드에 대한 명시가 명확하지 않고, 논리적으로 지정하는 그리드에서 사용이 용이하다. 예를 들어 grid-column, grid-row 같이 논리적 배치에 대한 단서가 제공될 때 배치를 어떻게 가져갈 것인가에 대해서 활용도가 있다. (반응형 설계에 적합)

이 배치방법은 그리드를 통한 반응형 예제를 통해 따로 살펴봐야 겠다.

grid 가 되는 그리드 컨테이너 가 가질 수 있는 속성에 대해서 알아보았다. 위에 속성들을 축약해서 grid: 100px/ 70px 70px 70px 로 표현할 수 있다.

.grid { 
    display: grid; 
    grid: 100px/ 70px 70px 70px;
    background: gold; 
}

.grid { 
    display: grid; 
    grid-template-columns: 70px 70px 70px;
    grid-template-rows: 100px;
    background: gold; 
}

이 공식에 맞춰서 다른 설정되지 않는 것들은 기본값으로 설정된다.

grid-gap, grid-column-gap, grid-row-gap

이 외에 그리드 컨테이너가 가지는 속성중에서 이 속성은 그리드 사이에 여백을 지정하는 방법이다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid"> 
    <div class="grid-item">1</div> 
    <div class="grid-item">2</div> 
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">1000000</div> 
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display: grid; 
    grid-auto-flow: row;
    grid: 100px/ 70px 70px 70px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    background: gold; 
}
.grid-item {
    color:hotpink; 
    padding:10px; 
}
</style>
</body>
</html>

위에 설정은 축약형으로 grid-gap: 10px; 으로 할 수 있다.

그리드아이템이 가지는 속성에 대해서 알아보자.

grid 아이템이 가지는 속성

grid-area
grid-column
grid-row

grid-area, grid-column, grid-row

grid 영역에 대한 이름을 지정한다. 예를 들어 그리드아이템에

.header {
    grid-area: hd;
}
.footer {
    grid-area: ft;
}
.content {
    grid-area: main;
}
.sidebar {
    grid-area: sd;
}

이런 이름을 지정하고,

.grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "ft ft ft ft   ft   ft   ft   ft   ft";
}

위와 같이 나누어진 그리드의 영역을 배치하는 것이다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: 200px auto 100px;
    grid-template-areas: 
      "hd hd hd hd   hd   hd   hd   hd   hd"
      "sd sd sd main main main main main main"
      "ft ft ft ft   ft   ft   ft   ft   ft"; 
}

.header {
    grid-area: hd;
    background: goldenrod;
}
.footer {
    grid-area: ft;
    background: goldenrod;
}
.sidebar {
    grid-area: sd;
    background:indianred;
}
.content {
    grid-area: main;
    background: grey;
}
</style>
</body>
</html>

위의 예제는 모든배치를 지정한 것이지만, 필요한 부분만 지정해두고, 해당 미디어쿼리에서 배치순서를 변경할 수 있다는 것이 장점이다.

위와 같이 이름을 지정할 수도 있지만, 숫자로의 지정도 된다. 지정법은 grid-column: start/end 이다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 100px auto 50px;
}

.header {
    grid-column: 2/5;
    background: goldenrod;
}
.footer {
    grid-column: 1/11;
    background: goldenrod;
}
.sidebar {
    grid-column: 4/7;
    background:indianred;
}
.content {
    grid-column: 4/7;
    background: grey;
}
</style>
</body>
</html>

이렇게 컬럼의 시작과 끝을 지정해서 배치할 수도 있고, grid-row 를 넣으면 겹치게도 가능해진다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
<style>
* { margin:0; padding:0; }
.grid { 
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 100px auto 50px;
}

.header {
    grid-column: 2/5;
    grid-row: 1/4;
    background: goldenrod;
}
.footer {
    grid-column: 1/11;
    background: goldenrod;
}
.sidebar {
    grid-column: 4/7;
    grid-row: 2/7;
    background:indianred;
}
.content {
    grid-column: 4/7;
    background: grey;
}
</style>
</body>
</html>

위를 축약형으로 사용하면 grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname; 이렇게 된다.

grid를 통한 일반적인 레이아웃 예제

그리드에 대한 속성은 다 보았고, 실제로 적용할 레이아웃을 만들어 보자.

일반적인 레이아웃은 상단헤더, 좌측메뉴, 우측컨텐츠, 하단푸터 이므로, 이것을 기준으로 하면

우선 html,body 에 높이 100% 를 주고, .grid에 height:100% 가 높이를 상속받도록 한다.

컬럼은 10컬럼으로 나누고 header, footer 만 우선 배치해보자

<!doctype html>
<html>
<head></head>
<body>
<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
<style>
* { margin:0; padding:0; }
html,body { height:100%; }

.grid {
    height: 100%;
    display: grid;
    grid-template: 100px auto 50px / repeat(10, 1fr);
}

.header {
    background: goldenrod;
    grid-area: 1/1/1/11;
}
.sidebar {
    background:indianred;
}
.content {
    background: grey;
}
.footer {
    background: goldenrod;
    grid-area: 3/1/3/11;
}
</style>
</body>
</html>

이제 sidebar, content 자리만 잡으면 된다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content</div>
    <div class="footer">Footer</div>
</div>
<style>
* { margin:0; padding:0; }
html,body { height:100%; }

.grid {
    height: 100%;
    display: grid;
    grid-template: 100px auto 50px / repeat(10, 1fr);
}

.header {
    background: goldenrod;
    grid-area: 1/1/1/11;
}
.sidebar {
    background:indianred;
    grid-area: 2/1/2/3;
}
.content {
    background: grey;
    grid-area: 2/3/2/11;
}
.footer {
    background: goldenrod;
    grid-area: 3/1/3/11;
}
</style>
</body>
</html>

grid-area 의 row-start/column-start/row-end/column-end 지정법이 조금 헷갈리긴 하는데, 이렇게 간단한 설정만으로도 100% 레이아웃 을 구성했다는 것에 상당히 만족스럽다. 혹여 html,body의 100% 높이지정으로 인해, 컨텐츠가 안밀려 내려가지 않을까 했는데, 다행이 아주 정상적으로 밀려 내려갔다.

<!doctype html>
<html>
<head></head>
<body>
<div class="grid">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content</div>
    <div class="footer">Footer</div>
</div>
<style>
* { margin:0; padding:0; }
html,body { height:100%; }

.grid {
    height: 100%;
    display: grid;
    grid-template: 100px auto 50px / repeat(10, 1fr);
}

.header {
    background: goldenrod;
    grid-area: 1/1/1/11;
}
.sidebar {
    background:indianred;
    grid-area: 2/1/2/3;
}
.content {
    background: grey;
    grid-area: 2/3/2/11;
}
.footer {
    background: goldenrod;
    grid-area: 3/1/3/11;
}
</style>
</body>
</html>

이렇게 간단하게 사용할 수 있는 grid 를 사용하지 않을 이유가 없다.

자바스크립트의 몇가지 좋은 습관

richready2011 — Thu, 25 Aug 2022 14:13:30 +0900

@참조 : https://www.devbridge.com/articles/javascript-best-practices/

해당글은 의역 되었고, 오역이 있을 수 있습니다.

다음은 깨끗한 JavaScript 코드 작성을 위한 권장 사항 및 일반적인 지침이 담긴 글이다.

이러한 권고 사항은 앞으로 더 정교한 개발 도구 라던지, 새로운 언어 기능 으로 인해, 변경 될 수 있지만, 결코 변하지 않는 것들이 있다.

그것은 당신이 이해하기 쉬운 코드를 작성 해야 한다는 것이다.

다음은 Start 예제로 좋은글 이다.
- http://javascript.crockford.com/code.html

전역 변수 사용의 최소화

코드에 네임 스페이스를 사용하여 모듈로 구성 하고 코드 충돌을 피하라.
소개되는 글로벌 변수의 최적 개수는 0 이며, 불가피 하게 옵션이 되어야 한다면 1 에 고정 하라.
아래 코드는 익명 함수 내에서 코드를 캡슐화 하고 함수를 즉시 실행 하는 방법 이다.

(function(){
    // Do stuff here
}());

익명 함수를 작성하고, 바로 실행 하는 코드를 괄호로 랩핑 해서 전역변수를 최소화 하자.
이 코드는 즉각적 호출이 발생 한다.

Scope 마다 단일한 "var" 선언 사용

var는 여러 선언을 허용 하기 때문에 많이 사용할 이유가 없다.
모든 스코프 변수는 뭐가 됬든 무조건 상단 으로 이동 한다. (이를 호이스팅이라고 함).
중복된 이름이 중첩 되거나, 다른 논리적 실수가 있을 경우 발생할 수 있는 오류 동작을 줄일 수 있다.

(function(){

    var firstName = 'John',
        lastName = 'Doe',
        fullName = firstName + ' ' + lastName;

    // The rest of the function body

}());

JSLint 를 당신의 친구처럼 생각 하라.

이 게시물 에서 자바스크립트의 좋은 습관에 대해서, 반복해서 나열 할 수 있지만, JSLint를 사용하면 알아서 당신에게 얘기해 줄 것이다.

경고! JSLint는 당신의 감정을 상하게 할 것이다.

www.jslint.com 은 엉성한 코드 작성 이후에 벌어지는 많은 수정 들이 벌어지기 이전에, 경고 함으로써, 개발자 에게 도움을 준다.

당신이 자주 jslint 를 사용하면 적절한 코딩 스타일과 규율에 익숙한 개발을 하게 될 것이고, 그것은 우리 모두가 만드는 사소한 실수를 발견하는데 도움을 주는 좋은 친구가 될 것이다.

각 소스 파일의 맨 위에 있는 JSLint 설정을 사용 하면, 일일히 JSLint 할 때마다 옵션을 지정할 필요가 없다.

/*jslint browser: true, sloppy: false, eqeq: false, vars: false, maxerr: 50,
 indent: 4 */

페이지 하단의 위에 옵션중 변경할 것은 변경 하고, 소스 코드를 복사하여 다른 페이지 에도 붙이자. 오류 수를 줄이기 위해 불량 코드 (예 : == 및! = 허용)를 활성화 하지 말고, 소스 에서 불량 코드를 업데이트 하여 제거 하자.

아래의 코드는 모든 전역 변수 선언에 대해 알려 주는 부분이다.

/*global jQuery, otherGlobalVariable */

Use Strict 를 사용하자

ECMAScript5 를 사용하기 전에는 var 로 선언 되지 않은 변수는 전역 변수에 할당 되었다.

(function(){
    name = 'John';
}());

하지만 use strict를 사용하면 에러가 발생한다.

(function(){
    'use strict';
    name = 'John';
}());

실수로 전역 변수를 사용 하지 않도록 하고, 오류를 일찍 찾아내는 데 도움이 되기 때문에, 사용하기를 권장 한다.

모듈 패턴

응용 프로그램에 대한 단일 네임 스페이스 지정 :

var App = (function () {
    'use strict';

    var settings;

    return {

        init: function(initialSettings){
            settings = initialSettings;
        },

        getVersion: function (){
            return settings.version;
        }

    };
}());

코드를 모듈로 정리 하고, 모듈에 모듈을 첨부해서, 응용 프로그램을 강화 하자.

// Search module:
(function (app) {

    var module = {};

    module.find = function (query) {
        // Perform search
    };

    module.verifyQuery = function (query) {
        // Ver
    };

    // More module methods go here

    app.search = module;

}(App));

어떤것을 비공개로 유지할 필요가 있거나, 선호하는 경우, 모듈 내부에 공개와 비공개를 선택하는 모듈 패턴을 사용하자.

// Search module:
(function (app) {

    // Private methods:

    function find(query) {
        // Perform search
    }

    function verifyQuery(query) {
        // Verify query
    }

    // Public methods:

    app.search = {
        find: find,
        verifyQuery: verifyQuery
    };

}(App));

모든 것을 수행 하는 함수를 작성 하지 말자. 모든 것을 catch 하여 스마트 하게 처리하는 함수 보다는, 특정 작업을 수행하는 작은 기능의 함수를 여러개 작성 하는 편이 확장성에 좋고, 유지보수에 이롭고, 성능 면에서도 우월할 확률이 높다.

개발자를 위한 개발 코드를 작성하자

당신만을 위한 코드를 작성 하지 말고, 다른 개발자가 이 코드를 사용 할 것이라고 가정하라.
간결함 보다 선명도를 선호 하라.

즉, 함수 및 변수 이름 지정이 짧지 않고 의미가 있어야 한다.
JavaScript Compressor (Closure Compiler, YUI Compressor)는 긴 이름을 축소해 주기 때문에, 변수나 함수명이 길다고 해서 부담을 가지지 않아도 되고, 이 규칙은 많은 다른 언어 에도 적용 된다.
다른 언어 에서도 잘 작동하는 Rule 을 적용하면, JavaScript 에서도 잘 작동한다.

가능한 한 많이 기록하라.

최소한 콘솔을 볼 때 콘솔에 로그가 표시 될 수 있도록 하라.
이것은 시스템이 복잡하면 할수록, 어떤 일이 벌어지고 있는지 더 잘 이해할 수 있도록 도와준다. 나중에 이러한 주석 들은 코드를 유지 관리하는 다른 개발자 에게 유용 하다.
필요한 스크립트 줄을 찾으려고 할 때 또는 어떤 코드가 실행 되고 있는지 알기 위해 콘솔을 사용하면 시간을 크게 절약 할 수 있다.

콘솔이 없으면 코드가 손상 될 수 있다.
오류가 발생하지 않도록 콘솔이 없는 경우 Fake 콘솔 객체 및 메소드로 대체 하자.

var console = window.console || {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

위 코드는 실제 사용될 코드 에서는 필요 하지 않다.
이 코드가 빌드 프로세스에 내장 될 수 있기 때문에, 압축 및 완성된 제품 으로 배포 하기 전에 로깅 코드는 제거 되야 한다
정규식 으로 콘솔에 대한 모든 문자를 색출할 수 있다.

^\s*console\.(log|warn|error|info)\(.+\);\s*$

Visual Event 는 DOM 요소에 첨부된 이벤트에 대한 디버깅 정보를 제공 하는 bookmarklet 같은 건데, 이벤트를 호출 하는 시점의 코드를 찾으려고 할 때 시간을 크게 절약 할 수 있다.
(크롬 확장프로그램)

개발 코드는 개발자용 이며 생산 코드는 기계용 이다. 그러므로 생산을 위한 코드를 최소화 하고 최적화 해라. 이후 빌드 프로세스를 사용하여 코드 파일을 최소화, 최적화 및 결합 하는 방식으로 하라.

어떻게 작동 하는지, 어떻게 보여지지 않는지

JavaScript를 사용하여 스타일 정보를 추가 하지 말고 CSS 클래스를 조작 하여 스타일 정보를 추가 하자.

일관된 구조에 의존하면 안된다. 즉 동일한 응용 프로그램 에서 다른 개발자가 사용할 수 있도록 하기 위해서, UI 제한을 최대한 적게 두어야 한다.
DOM 트리를 탐색 할 때 DOM 요소가 당신이 생각 하는 페이지의 유일한 ID 같은 것으로 구성하면 안된다. 요소의 css 클래스를 사용 할 수 있도록 하고, 기능에 영향을 주지 않고 UI를 유지하고 변경할 수 있는 유연성을 제공 하도록 하자.

풍부한 옵션

여기에는 Labels, CSS 클래스, CSS 네임 스페이스, ID 등이 포함 된다. 객체를 옵션으로 설정할 수 있도록 프로그래밍 하는 것은 유지 관리 작업을 간편하게 수행 할 수 있도록 도와준다.
또한 맞춤 설정을 통해서 많은 기회를 제공해 줄 수 있게 된다.

최적화

코드를 최적화 하자.

작성된 기능을 변경하기 위해서, 가장 단순한 솔루션을 찾기가 매우 어렵기 때문에, 코드를 수정 하면 제거 되거나 영향 받을 수 있는 대상을 찾을 수 있도록, 아주 단순하고 간결하게 작성하는 습관을 들여야만 한다.

순회문을 통해서 DOM 요소를 만들 수 있지만 DOM 요소를 DOM 에 직접 삽입하면 안된다

DOM 변경 사항을 최소화 하자. 제작된 제품은 디버깅이 매우 어렵 기 때문에, JavaScript 에서 HTML 생성을 최소화 해야 한다.
미리 작성된 템플릿을 사용하고 유지 관리가 쉬운 장소에 따로 템플릿을 보관하고, 꺼내 쓰는 방식으로 해야 한다. (예를 들어 Mustach 같은 라이브러리를 사용하는 것도 방법이다.)

해킹을 피하고 문제를 분석하고 신뢰할 수있는 솔루션을 찾아 보자.
사용자 데이터를 신뢰하지 말고, 최대한 예외처리 하자.
중요하거나 중요한 데이터를 보호하기 위해 JavaScript를 사용하지 말아야 한다. 쉽게 사용할 수 있다는 것은 쉽게 깨지기도 쉽다는 의미 이다.

웹에서의 폰트

richready2011 — Thu, 25 Aug 2022 14:09:18 +0900

@refer:

웹디자이너가 디자인 한 것을 웹에 옮기려면 웹디자이너가 원하는 것을 구현할 수 있는 기술을 알고 있어야 한다.

디자이너 마다 성향이 달라서 어떤 디자이너는 폰트를 중요하게 보고, 어떤 디자이너는 비쥬얼을 중요하게 보고... 하는거 같은데, 디자인에 대해선 전혀 모르기 때문에, 어떤게 중요한지는 모르겠고, 일반인의 눈으로 보는 웹디자인은 전체를 보게 된다.

전체적으로 봤을때 이쁘면 이쁘다. 어색하면 어색하다 정도의 주관적 의견이 있을뿐이다.
이렇게 주관적 일수 밖에 없는 이유는 학문적 뒷받침이 없기 때문에, 왜 어색하고, 왜 이쁜지를 설명할 수가 없다.

컴퓨터 글꼴

컴퓨터에게 글꼴은 3가지가 있다.

비트맵 방식의 글꼴
외곽선 방식의 글꼴(벡터)
스트로트 글꼴

비트맵은 수많은 점을 찍어서 하는 방식이다. 컴퓨터가 연산해야할 부분이 적기 때문에 속도가 빠르지만, 확대하면 계단현상같은 부분이 보인다.

외곽선 방식은 실제로 선을 그리는 방식으로, 표현하기 위한 정보와 컴퓨터 연산이 더 많다. 계단현상이 없지만 정보와 연산이 더 들어가기 때문에 느리다.

스트로크 글꼴은 지정된 선+부가정보 를 사용해서 크기+모양 을 결정한다.

글꼴 형식

타입1, 타입3 글꼴 : 어도브사가 개발한 방식으로 베지에곡선 의 외곽선 글꼴.
오픈타입 글꼴 : 마이크로소프트가 설계한 스마트폰트다(?). 트루타입+타입1
트루타입 글꼴 : 애플이 개발한 글꼴로 타입1을 대체할 목적으로 만들어졌고, 베지에 곡선 으로 그린다. 대부분의 운영체제에 적용되고 있다.
메타폰트 : 백터 글꼴을 정의하는데 사용되는 하나의 언어로, 주어진 점을 선분과 베지어 곡선 의 교점으로 정의하는 공식(?)
웹폰트 : 동적 폰트의 일종으로 사용자 컴퓨터에 설치되지 않아도 사용할 수 있도록 고안된 개념이다.

글꼴 확장자

이런 형식에 따라 글꼴 확장자가 다르다.

EOT (Embedded OpenType) - 윈도우개발, IE9 이전버전은 이 포맷만 인식한다.
TTF (TrueTypeFont) - Chrome 4+, Firefox 3.5, Opera 10+, Sarafi 3+
OTF (OpenTypeFont) - Chrome 4+, Firefox 3.5, Opera 10+, Sarafi 3+
WOFF (Web Open Font Format) - 불법복제 문제로 모질라와 여러단체가 웹에 사용할 목적으로 개발했고, 라이센스명시가 메타정보로 들어가 있다.
SVG (Scalable Vector Graphics) - Chrome, Safari, Opera 최근버전 지원

최근에 인터넷익스플로어가 자사개발 브라우저엔진을 포기하고, 웹킷엔진을 기반으로 버전업을 하기로 발표가 났다. 즉, WOFF 웹폰트는 브라우저에 상관없이 적용할 수 있게 됬다.

고정폭과 가변폭

글꼴은 고정폭과 가변폭으로 나뉘어 지는데, 어떤 폰트를 쓰면 폰트에 표현되는 너비가 균일한데 반해, 어떤 폰트는 글자마다 너비가 다르다. 이것이 고정폭과 가변폭의 차이다.

)

Serif 와 Sans Serif

두가지 종류의 폰트의 가장 큰 차이점은 삐침이 있는가 없는가 이다.

Serif 는 삐침이 있다.

Sans serif 는 삐침이 없다.

이 구별은 삐침이 있다 없다 정도로 구분하는것이 좋아보인다. 왜냐하면, 폰트를 디자인한 디자이너들은 삐침이 있기도 하고 없기도 하고, 끝이 둥글기도 하고 안둥글기도 해서, 전체가 삐침이 있다 없다 정도만 구분하는게 정신건강(?)에 좋다.

font-family 의 Serif, Sans Serif

브라우저에서 사용해 보자.

CSS 에는 추상적 글꼴 지정법이 있다.

font-family: Serif : 삐침글꼴 자동선택
font-family: Sans-serif : 삐침아닌거 자동선택
font-family: Monospace : 고정폭폰트 자동선택
font-family: Cursive : 필기체 자동선택
font-family: Fantasy : 약간의 그림등이 포함될 수도 있는 폰트 자동선택

끝이 삐쳐있는 글꼴이 많은데, 어떤걸 선택해서 보여주는 걸까? 가장 명확한 것은 폰트를 명시하는 것이다.

`font-family: Dotum'

맥 에서 Serif 와 Sans-serif 와 Monospace 를 테스트 해보면

<style>
.a { font-family:Serif; }
.b { font-family:Sans-serif; }
.c { font-family:Monospace; }
.d { font-family:Cursive; }
.e { font-family:Fantasy; }
</style>

<p class="a">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- AppleMyungjo -->
<p class="b">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Apple SD Gothic Neo -->
<p class="c">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Courier -->
<p class="d">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Apple Chancery -->
<p class="e">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Papyrus -->

이렇게 컴퓨터 맘대로 설정됐다.

<style>
.a { font-family:Dotum, Serif; }
</style>

<p class="a">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- AppleMyungjo -->

맥은 돋움이 없기 때문에 물론 애플명조로 나온다.

윈도우7/10 테스트해 보면

<style>
.a { font-family:Serif; }
.b { font-family:Sans-serif; }
.c { font-family:Monospace; }
.d { font-family:Cursive; }
.e { font-family:Fantasy; }
</style>

<p class="a">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Batang -->
<p class="b">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Malgun Gothic -->
<p class="c">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- GulimChe -->
<p class="d">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Gungsuh -->
<p class="e">우리나라 좋은나라. Aa Bb Cc Kk Ii Zz</p> <!-- Impact -->

시스템마다 지원하는 브라우저 폰트

폰트는 거의 명시한 상태로 디자인이 나오기 떄문에, 스타일 코드상 으로는 고민의 여지가 없다. 그냥 정한 폰트를 사용하면 된다.

하지만 구별할 필요가 있는게, 스타일 개발자도 시스템 지원폰트 를 헷갈리기 쉽고, 웹디자이너 또한 헷갈릴수 있기 때문에, 정리한게 도움이 된다.

이것은 WEB Safe Font 로 불린다. 모든 브라우저와 모든 디바이스 에서 정상적으로 동작하는 폰트 라는 의미이다. 이외에 폰트는 웹폰트를 써야 한다.

영문폰트에 한해서 일반적으로 선언되는 font-family 들을 조사해 봤는데,

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif; 

font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, serif;
font-family: Bookman, serif;
font-family: Georgia, serif;
font-family: 'MS Serif', 'New York', serif;
font-family: 'Times New Roman', Times, serif;

font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: 'Lucida Console', Monaco, monospace; 

font-family: 'Comic Sans MS', cursive; 

font-family: Impact, Charcoal, fantasy; 

font-family: Symbol;
font-family: Webdings;
font-family: Wingdings, 'Zapf Dingbats';

등이라고 한다. 한글폰트 대상으로 WEB Safe Font 라는 타이틀의 정리본은 없고, OS 에서 지원하는 폰트를 그대로 따라가기에, OS별 지원폰트를 보는게 도움이 된다.

참고로 안드로이드는 이전에는

normal (Droid Sans)
serif (Droid Serif),
monospace (Droid Sans Mono)

였으나, 아이스크림 샌드위치 버전(after android4) 이후에는 Roboto 로 교체했다.

웹폰트

웹의 안전한 폰트가 있지만, 다른 폰트를 사용하고 싶을 때, 웹폰트를 지정해서 사용할 수 있다.

사용법

기본사용법은 이렇다.

@font-face {
        font-family: Elena;
        src: url(elena-regular.woff);
}

글꼴이름을 지정하고, 대상 폰트의 경로는 src에 넣어주면 설정은 끝난다.

p {
    font-family: Elena, serif;
}

동일한 폰트에 대해서 다른설정을 하고 싶을때, 특정조건을 지정해 두면 구분할 수 있다.

@font-face {
    font-family: Elena;
    src: url(elena-regular.woff);
    font-weight: normal;
}

@font-face {
    font-family: Elena;
    src: url(elena-bold.woff);
    font-weight: bold;
}

p {
    font-family: Elena, serif;
}

p strong {
    font-weight: bold;
}

조건은 다양하게 사용할 수 있다. 예를 들어 font-sytle 을 조합한다던지, font-stretch 를 조합해 둔다던지 해서, 특정 폰트를 적용할 수 있다.

@font-face {
    font-family: Elena;
    src: url(elena-regular.woff);
    font-style: italic;
}

@font-face {
    font-family: Elena;
    src: url(elena-bold.woff);
    font-weight: bold;
}

p {
    font-family: Elena;
    font-style: italic;
}

p strong {
    font-weight: bold;
}

font-weight 조건참조

src 속성은 콤마(,) 로 다중선언을 할 수 있다.

@font-face {
    font-family: Elena;
    src: url(elena-regular.woff2) format("woff2"),
        url(elena-regular.woff) format("woff");
}

브라우저는 format 을 보고, 자신이 가장 잘 표현할 수 있는 폰트를 선택 후 렌더링 한다.

@font-face {
    font-family: Elena;
    src: url(elena.eot?#iefix) format("embedded-opentype"),
         url(elena.woff2) format("woff2"),
         url(elena.woff) format("woff"),
         url(elena.otf) format("opentype"),
         url(elena.svg#elena) format("svg");
}

ie8 은 오래된 브라우저이고 eot 만 지원하기 때문에, #iefix 라는 식별자를 붙이면 ie9 이전 버전 빼고는 인식하지 않는다. (정확히는 다른 브라우저는 eot를 지원안하기 때문에 무시)

또다른 옵션으로 local 속성이 있다.

@font-face {
    font-family: Elena;
    src: local("Elena"),
         url(elena-regular.woff2) format("woff2"),
         url(elena-regular.woff) format("woff");
}

만약 시스템폰트에 해당이름의 글꼴이 설치되어 있다면 다운로드 하지 않는다.

마지막으로 unicode-range 속성이 있는데, 이는 유니코드 범위지정 을 통해서 좀더 세분화 하는 것이다. 이를 활용해서 각 나라별로 폰트를 재지정할 수가 있다.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2'), 
       url('/fonts/awesome-jp.woff') format('woff'),
       url('/fonts/awesome-jp.ttf') format('truetype'),
       url('/fonts/awesome-jp.eot') format('embedded-opentype');
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

이렇게 범위를 지정해서 OS 나라를 자동으로 구별해서 다운로드 하는 것이다.

최적화

폰트 로딩의 알고리즘은 아래와 같다.

브라우저가 HTML 문서 요청
브라우저가 HTML 응답 파싱 및 DOM 생성 작업을 시작
브라우저가 CSS, JS 및 기타 리소스를 발견하고 요청을 발송
모든 CSS 콘텐츠가 수신된 후 브라우저가 CSSOM을 생성하고 이를 DOM 트리와 결합하여 렌더링 트리를 생성
- 렌더링 트리가 페이지에 지정된 텍스트를 렌더링하는 데 필요한 글꼴 버전이 무엇인지 나타내면 글꼴 요청이 발송
브라우저가 레이아웃을 수행하고 콘텐츠를 화면에 페인팅
- 글꼴을 아직 사용할 수 없으면, 브라우저가 텍스트 픽셀을 렌더링할 수 없음
- 글꼴을 사용할 수 있게 되면, 브라우저가 텍스트 픽셀을 페인팅

이렇게 다운로드 되는 웹의 폰트를 사용하면 3가지 현상이 생긴다.

Flash of Invisible Text - FOIT 현상

웹폰트가 로딩될 동안 텍스트가 아예 안보인다.

Flash of Unstyled Text - FOUT 현상

웹폰트가 로딩되기 전에 깨진듯한 화면을 봐야 한다. 로딩된 후에는 폰트렌더링을 다시 한다.

Flash of Faux Text - FOFT 현상

폰트 적용전에 Regular 였다가 Bold로 바뀌는 현상 (폰트다운로드 타이밍 문제로 발생)

둘중 하나의 현상이 생기고, 크롬&파이어폭스는 FOIT 그 외는 FOUT 가 재현되고, FOFT는 브라우저 상관없이 발생한다. 어떤 브라우저가 됐든 이 현상이 눈에 거슬리기는 매한가지 이다.

피할수 있는 완벽한 방법은 없고, 몇가지 대안방법인데, 대안방법인 만큼 웹폰트는 안쓰는게 최고다.

Font Loading API 로 최적화

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

font.load(); // don't wait for the render tree, initiate an immediate fetch!

font.ready().then(function() {
  // apply the font (which may re-render text and cause a page reflow)
  // after the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default the content is hidden, 
  // and it's rendered after the font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply your own render strategy here... 
});

호환성 문제가 있기 때문에 사용하기는 좀 기달려야 한다.

Google Webfont Loader

<a href="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js">https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js</a>

WebFont.load({
  custom: {
    families: ['NanumSquare'], // @font-face에 선언한 폰트 패밀리명
    urls: ['../css/NanumSquare.css'], // @font-face가 선언된 css 경로
  }
});

이 스크립트는 웹폰트가 정상적으로 다운로드 되었을 때, 화면에 동적으로 붙여준다. 이미지의 preloading 같은 원리이다.

data-uri

img src="base64.ddhlskhdflkhsdlkhf" 이런식의 실제 이미지를 사용하지 않고, 바이너리 코드를 직접 삽입하는 방법이 있는데, 폰트도 이와같이 다운로드가 아니라 실제코드를 집어넣을 수 있다.

@font-face {
  font-family: NanumSquare;
  src: url(data:application/font-woff;base64,d09GRgABAAAAADEFFFFFEDCrgAAA...);
}

preload

태그의 속성을 이용해서 폰트를 지정하면 상황을 보고 브라우저가 리소스를 다운받을지 안받을지 판단한다.

호환성

<head>
  <link rel="preload" href="../webfont/NanumSquare/NanumSquare.woff" as="font" crossorigin>
</head>

호환성 문제가 있어서 이것도 보류.

서브셋 으로 폰트 줄이기

서브셋 제너레이터

갂, 갅 등의 문자를 줄여준다.

폰트압축

폰트 압축 : 압축해주는 사이트가 있는데, 호환성이 좋지 못하다. 서버의 GZIP 을 통해서 압축할 수 있다.
Zopfli 압축 : 약 5% 절감할 수 있다.

Vue 컴포넌트 데이터 v-model 연동하기

richready2011 — Thu, 25 Aug 2022 14:00:08 +0900

컴포넌트 작성 시 자식컴포넌트와 부모컴포넌트의 데이터를 양방향으로 구성 하는 경우가 종종 있다.

방법은 몇가지 있지만, 원리는 같으며, v-model 속성을 연동하는 방법에 대한 팁 으로 보면 좋을 거 같다.

해당 예제는 vue 2.x 에 적용된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      부모의 데이터: <input type="text" v-model="doggie" />

      <dog-component v-model="doggie"></dog-component>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const dogComponent = {
        template: `
          <div>
            자식의 데이터: <input type="text" v-model="왈왈" />
          </div>
        `,
        props: ['value'],
        computed: {

          '왈왈': {

            get() {
              return this.value;
            },

            set(val) {
              this.$emit('input', val);
            }

          }

        }
      };

      new Vue({
        el: '#app',
        components: {
          'dog-component': dogComponent
        },

        data() {

          return {
            doggie: '안녕하세요? 도지입니다.'
          }

        }
      })
    </script>
  </body>
</html>

위와같이 왈왈 속성을 computed 와 get, set 을 통해서, input 이벤트 때에 부모에게 값을 전달해 주는 형태 이다.

Vue 컴포넌트 데이터 연동 정리

richready2011 — Thu, 25 Aug 2022 13:54:51 +0900

SPA (Single Page Application) 프로젝트 에서 컴포넌트로 구조화 하는 방법은 핵심 장점으로 알려져 있고, 코드 재사용을 위해서 대체적으로 사용하는 추세이다.

SPA (Single Page Application) 프로젝트라 하더라도, 반드시 컴포넌트 구조로 개발 해야하는 것은 아니다.

이전 SSR(Server Side Rendering) 때의 방식처럼, 현재 페이지에 모든데이터를 한번에 전달해서 처리하는 방법으로 해도 상관없다.

단지 Restful API 작성함에 Server Less 방식과 맞지 않고, 다양한 frontend framework 들이 컴포넌트 단위에 작성방식을 요구하고, 전수하다 보니, 현재 상황은 컴포넌트 단위로 개발하는 것이 정착 되어진 듯 하다.

이것은 MSA(Micro Service Architecture) 방법론 과도 호환된다.

어떤게 먼저 시작되었는지는 모르겠다. 잡소리 였다.

Vue 컴포넌트 데이터 연동 정리

데이터 단방향

Vue 는 컴포넌트 간 데이터 전달이 단방향이다. 즉 한쪽 으로만 흐른다.

부모 컴포넌트에서 자식 컴포넌트로 전달되는 단방향이 기본값 이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component :text="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: {{ text }}</p>
            </div>
        `,
        props: ['text'],
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        }

      })
    </script>

  </body>
</html>

ChildComponent 의 props 로 text 변수를 받고, text 는 부모의 data 속성인 sendData 로 연결되어 있다.

이제 자식컴포넌트 에서 전달받은 text 속성을 변경해 보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component :text="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: {{ text }}</p>
                <button type="button" @click="changeTextProp">text 속성바꾸기</button>
            </div>
        `,
        props: ['text'],
        methods: {
            changeTextProp() {

                this.text = "자식이 text 속성 바꾸다.";

            }
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        }

      })
    </script>

  </body>
</html>

버튼을 누르게 되면, 자식의 text 값이 변경 되지만, 참조처럼 전달될 거 같은 sendData 의 값은 변하지 않는다.

이것이 바로 단방향의 증거다! 부모에게 흐르지 않는다.

위에 코드에는 Vue 가 권고하지 않는 코드가 있다. 전달 받은 text 속성의 값을 직접 변경하지 말아라 라는 규칙이 있다.

물론 에러는 나지 않고, 경고문구가 콘솔에 출력될 수는 있지만, 되도록이면 props 로 전달받은 변수를 직접 바꾸지 않는 것이 국롤 이다.

이벤트 $emit 발생

그래서 이 값을 변경하려면, $emit 메소드를 이용해서, 부모의 이벤트를 발생시키고, 발생된 이벤트에 연결된 함수가 내부 데이터를 변경하는 방식으로 해야만 한다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component :text="sendData" @call-parent-function="eatChildCall"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: {{ text }}</p>
                <button type="button" @click="changeTextProp">text 속성바꾸기</button>
            </div>
        `,
        props: ['text'],
        methods: {
            changeTextProp() {

                // this.text = "자식이 text 속성 바꾸다.";
                this.$emit('call-parent-function', "자식이 text 속성 바꾸다.");

            }
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

            eatChildCall( val ) {

                this.sendData = val;

            }

        }

      })
    </script>

  </body>
</html>

위와 같이 this.$emit 으로 부모의 이벤트 이름을 넣으면, 부모의 이벤트와 연결된 함수 eatChildCall 이 호출되어, 전달인자로 값을 받고, 부모 내부에서 sendData 값을 바꾸는 구조로 하면, 변경된 값이 자식에게로 다시 흘러 들어가게 되므로, 자식 컴포넌트의 text 가 변경된다.

이것이 권장하는 데이터 전달 방식이다.

.sync

이렇게 update 를 담당하는 함수를 여러번 호출해 가며, 사용하는 것은 비효율적 이라고 생각해서 였을까?

Vue 는 .sync 라는 것을 지원한다. 이것은 위와 같이 이벤트 전달방식을 줄여 준다.

동기되어야 하는 속성에 .sync 가 추가되고, 업데이트를 담당하던 @call-parent-function="eatChildCall" 부분은 삭제된다.

그리고 $emit 에 규칙이 추가 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component :text.sync="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: {{ text }}</p>
                <button type="button" @click="changeTextProp">text 속성바꾸기</button>
            </div>
        `,
        props: ['text'],
        methods: {
            changeTextProp() {

                // this.text = "자식이 text 속성 바꾸다.";
                // this.$emit('call-parent-function', "자식이 text 속성 바꾸다.");
                this.$emit('update:text', "자식이 text 속성 바꾸다.");

            }
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

        }

      })
    </script>

  </body>
</html>

this.$emit('update:text', "자식이 text 속성 바꾸다.");

위 update: 접두어가 붙어 있다는 것을 기억하자. .sync 와 짝꿍이다.

이것은 부모의 속성과, 자식의 속성이 연동이 필요할 때만 유효한 방법이다.

값 동기화 하는 것 외에 다른처리도 같이 해야 한다면, 이 방법은 쓸모가 없다.

v-model

폼요소의 v-model 경우에는 어떨까? 왠지 될거 같지 않아?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component :text="sendData"></child-component>

      <p>부모데이터 : <input type="text" v-model="sendData" /></p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: {{ text }}</p>
            </div>
        `,
        props: ['text'],
        methods: {
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

        }

      })
    </script>

  </body>
</html>

위 코드에는 이상한 점이 없다. input 의 값은 부모의 sendData 이기 때문에, 변경되면 즉시 자식에게 흐른다.

그럼 자식의 v-model 값은 연동될까?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component :text="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: <input type="text" v-model="text" /></p>
            </div>
        `,
        props: ['text'],
        methods: {
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

        }

      })
    </script>

  </body>
</html>

응 안돼~

꽉 막혔다.

부모와 자식간에는 v-model 만으로는 부족하다.

자식컴포넌트 v-model 값 부모에게 보내기

자식 컴포넌트의 값을 부모 v-model 로 전파되게 하는 방법은 emit('input') 을 이용하면 된다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component v-model="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: <input type="text" v-model="value" /></p>
                <button type="button" @click="changeTextProp">바꿔줘</button>
            </div>
        `,
        props: ['value'],
        methods: {
            changeTextProp() {

                this.$emit('input', this.value);

            }
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

        }

      })
    </script>

  </body>
</html>

부모에서 자식 컴포넌트를 불러올 때, v-model 에 값을 대입해 두었는데, 이렇게 v-model 을 이용해서 전달되는 값은, 자식 컴포넌트의 props: 'value' 에 대입된다.

약속이다.

물론 자식 컴포넌트에서 <input type="text" v-model="value" /> 이렇게 할당해 두더라도, 입력값에 따라, 부모컴포넌트에 값이 전달되지 않는다.

부모 컴포넌트의 v-model 로 값을 전달하기 위해서는 this.$emit('input', this.value); 이렇게 input 이라는 이벤트를 발생시켜야만 한다.

데이터 양방향 느낌으로, 입력하자마자 바뀌었으면 좋겠어서, input 태그 에 @input 이벤트로 연결해 보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component v-model="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: <input type="text" v-model="value" @input="changeTextProp" /></p>
            </div>
        `,
        props: ['value'],
        methods: {
            changeTextProp() {

                this.$emit('input', this.value);

            }
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

        }

      })
    </script>

  </body>
</html>

뭔가 뚝뚝 끊기는 느낌이다. v-model 의 방식이 입력이 끝난 후 데이터에 반영하기 때문이다.

또 다른 방법으로는 computed 에 연결하는 것이다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">

      <child-component v-model="sendData"></child-component>

      <p>부모데이터 : {{ sendData }}</p>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <style>
    </style>

    <script type="text/javascript">

      const ChildComponent = {
        template: `
            <div>
                <p>자식데이터: <input type="text" v-model="childModel" /></p>
            </div>
        `,
        props: ['value'],
        computed: {
            'childModel': {

                get() {
                    return this.value;
                },

                set( val ) {
                    this.$emit('input', val);
                }

            }
        },
        methods: {
        }
      }

      new Vue({
        el: '#app',
        components: { ChildComponent },
        mounted() {
          console.log( '구동되었다.' );
        },
        data() {

          return {
            sendData: '안녕?'
          }


        },
        methods: {

        }

      })
    </script>

  </body>
</html>

get, set 을 응용하여 할 수 있다.
(prop 에 받은 value 를 computed 에서 중복사용 할 수 없기 때문에, childModel 을 새로 만들었다.)

결론

부모 v-model 은 자식 컴포넌트의 props: 'value' 에 대입된다.

자식 컴포넌트에서 부모 v-model 에 값을 전파하기 위해서 $emit('input') 이벤트를 사용한다.

또다른 결론

웬만하면 단방향 흐름 으로 작성하자.

v-model 은 만능키가 아니다.

props 로 받은 변수명을 엥간하면 내부에서 조작 하지 말자.

Nuxt + Capacitorjs 환경 구축

richready2011 — Wed, 24 Aug 2022 17:07:13 +0900

참고

서두

SSR 기반의 웹소스에 APP 빌드 까지 하고 싶었다.

하나의 소스로 다양한 배포를 하고 싶다.

접근은 Vue 기반 으로 시작했고, nuxt 프레임워크가 SSR 빌드를 지원하기 때문에, nuxt 로 정했고, APP 빌드를 위해 검색해서 찾은 것은, CapacitorJS 였다.

아이오닉 기반으로 동작하는데, 차이점이라고 따져보자면, 아이오닉은 자바스크립트로 Native App 크로스플랫폼 앱빌드가 목표라고 한다면, CapacitorJS 는 웹 우선구축 후 앱빌드 가 목표라고 되어 있다.

목표가 다르니, 설명하는 문서의 형태가 다를 것이고, 괜찮다고 생각하여 테스트 해보았다.
(구글한글번역 또한 거의 훌륭하게 번역되어, 문서보는 데에는 어려움이 없었다.)

설치

앱빌드 부분에서 Android 는 안드로이드 SDK 가 설치되는 환경 이여야 하고, ios 는 XCODE 가 설치가능한 환경 이여야 한다.
(맥에서 안드로이드 sdk를 설치하는 방법이 있고, 윈도우 에서도 xcode 설치하는 방법이 있었다.)

맥북이 없고, 윈도우 기반에서 작업하고 있으므로, 안드로이드 환경부터 시작해 보았다.

안드로이드 앱빌드 환경 구축

Capacitor 사이트의 가이드 는 환경설치 방법에 대해서 간략하게 되어 있는데, 안드로이드 스튜디오를 설치하고, 스튜디오 도구에서 SDK 를 설치하면 됩니다. 정도이다.

설명이 부족한게, 샘플로 생성되는 환경은 gradle 설치가 되어 있는 상태여야 했고, 안드로이드 스튜디오 SDK 가 동작하기 위해서 Java 설치가 되어 있어야 했다.

그리고 그 과정에서 오류나는 부분들 해결은 본인의 몫이였다.

이러한 부분들이 Docker 의 위대함을 증명해 주는 것이지 않을까?

(윈도우 환경변수 설정 및 기타 의존성 프로그램 등등)

순서대로 정리를 해보았다.

이후 각 도구들의 버전으로 호환성 문제가 있을수도 있으니, 버전을 기록해 둔다.

capacitor v3
gradle 7.3.1
java sdk 1.8
Android sdk v 11.0
Android Virtual Device Manager > Pixel 2 API 30

JAVA 설치

앱빌드시 JAVA 는 최신버전 에서는 문제가 있었고, 8 버전 설치했을 때, 앱빌드 문제가 없었다.

JAVA Version: 8
Operating System: Windows
ARCHITECTURE: x86 x64bit

OpenJDK Downloads | Download Java JDK 8 & 11 | OpenLogic -> 8u262-b10 버전 msi 설치패키지로 다운로드 후 설치
windows에서 JAVA 환경변수 설정하기 -> 환경변수 설정

gradle 설치

gradle 은 빌드도구 이다. 안드로이드앱 빌드에 사용된다.
maven 과 비교되는 도구인데, 안드로이드 앱빌드 공식도구로 gradle 이 채택되어 있다고 한다.
(maven 도 되지 않을까? 하는 호기심은 재빨리 접었다.)

Gradle | Releases -> 최신버전 설치
Gradle, Windows에 설치부터 실행까지! -> 환경변수 설정
Maven과 Gradle의 차이 -> 참고

안드로이드 스튜디오 설치

https://developer.android.com/studio/install?hl=ko -> 스튜디오 설치
안드로이드 스튜디오 SDK 환경변수 설정하는 방법 (SDK 폴더 경로) :: 하루플스토리 -> 환경변수 설정

환경설정 정리

최종적으로 해당 환경변수 들이 등록되어 있으면, 빌드 시 문제가 없었다.

환경변수 > 시스템변수

GRADLE_HOME
- C:\gradle\gradle-7.3
JAVA_HOME
- C:\Program Files\OpenJDK\jdk-8.0.262.10-hotspot
ANDROID_SDK_ROOT
- C:\Users\[username]\AppData\Local\Android\Sdk
Path
- %JAVA_HOME%\bin
- %ANDROID_SDK_ROOT%\bin
- %ANDROID_SDK_ROOT%\tools
- %ANDROID_SDK_ROOT%\platform-tools
- %GRADLE_HOME%\bin

프로젝트 환경 구축하기

사전설치가 끝났다면 이제 설치다.

nuxt 프로젝트 환경 설치

npx 는 node 설치 시에 npm 과 같이 설치되는 응용프로그램이다.
Node Package Executor 로 패키지를 설치하지 않고도 실행할 수 있도록 하는 명령어 이다.

정확한 동작원리는 모르겠는데, 현재폴더의 node_modules 조회 후 없으면, global 설치 된 부분 조회하고, 그래도 없으면 NPM 사이트 조회 후 실행하는 것으로 추정된다.

nuxt 프로젝트 기본환경설치를 위해서 npx를 이용한다.

$ npx create-nuxt-app <project-name>
? Project name: <project-name>
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Axios - Promise based HTTP client, Progressive Web App (PWA)
? Linting tools: ESLint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

(powershell 로 설치하면 키보드 커서로 해당옵션을 선택할 수 있다.)

생성된 프로젝트 폴더로 이동 후에 nuxt.config.js 파일을 열고, build 옵션의 publicPath 를 수정한다.

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    publicPath: '/nuxt/',
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  }

웹팩버전은 4버전으로 맞춘다.

project-name$ npm uninstall webpack
project-name$ npm install --save-dev webpack@4.46.0

sass 사용자라면 sass 추가해 준다.

project-name$ npm install --save-dev node-sass sass-loader

이제 빌드를 실행해 보자

project-name$ npm run build
> projectname@1.0.0 build
> nuxt build

i Production build                                                                            18:22:29
i Bundling for server and client side                                                         18:22:29
i Target: server                                                                              18:22:29
i Using components loader to optimize imports                                                 18:22:29
i Discovered Components: .nuxt/components/readme.md                                           18:22:29
√ Builder initialized                                                                         18:22:29
√ Nuxt files generated                                                                        18:22:30

√ Client
  Compiled successfully in 13.39s

√ Server
  Compiled successfully in 4.93s


Hash: 9d157b303b96a691ec50
Version: webpack 4.46.0
Time: 13388ms
Built at: 2021. 12. 05. 오후 6:22:44
                         Asset       Size   Chunks                                Chunk Names
../server/client.manifest.json   17.6 KiB           [emitted]
                    0b3816a.js    489 KiB        9  [emitted] [immutable]  [big]  vendors/app
                    10a2076.js   6.58 KiB        4  [emitted] [immutable]         components/tutorial
                    173abfd.js   5.13 KiB       10  [emitted] [immutable]
                    7fa868a.js    215 KiB        2  [emitted] [immutable]         commons/app
                    8fe1c4a.js  644 bytes        7  [emitted] [immutable]         pages/inspire
                    9c30163.js   12.6 KiB        0  [emitted] [immutable]         vendors/pages/index/pa
ges/inspire
                      LICENSES  407 bytes           [emitted]
                    a9e266d.js   2.36 KiB        8  [emitted] [immutable]         runtime
                    b7013cb.js   1.85 KiB        3  [emitted] [immutable]         components/nuxt-logo
                    bca6f50.js   55.9 KiB        1  [emitted] [immutable]         app
                    cc290d9.js  946 bytes        5  [emitted] [immutable]         components/vuetify-log
o
                    ea69820.js   22.3 KiB  6, 3, 5  [emitted] [immutable]         pages/index
 + 2 hidden assets
Entrypoint app = a9e266d.js 7fa868a.js 0b3816a.js bca6f50.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  0b3816a.js (489 KiB)

Hash: 175a7a8548a8947c0f4d
Version: webpack 4.46.0
Time: 4933ms
Built at: 2021. 12. 05. 오후 6:22:49
                     Asset       Size   Chunks             Chunk Names
   components/nuxt-logo.js   6.36 KiB        1  [emitted]  components/nuxt-logo
    components/tutorial.js   7.21 KiB        2  [emitted]  components/tutorial
components/vuetify-logo.js   5.45 KiB        3  [emitted]  components/vuetify-logo
            pages/index.js   55.3 KiB  4, 1, 3  [emitted]  pages/index
          pages/inspire.js   18.8 KiB        5  [emitted]  pages/inspire
                 server.js    674 KiB        0  [emitted]  app
      server.manifest.json  667 bytes           [emitted]
 + 6 hidden assets
Entrypoint app = server.js server.js.map
i Ready to run nuxt start

웹팩빌드가 정상적으로 넘어가면 설정이 잘 된것이다.

에러가 발생한다면 에러조치 이후 다음단계로 넘어가야 한다.

CapacitorJS 설치

해당 프로젝트 폴더로 이동 후에 패키지를 추가해 준다.

project-name$ npm install --save-dev @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android

CapacitorJS 초기화

Capacitor 초기화를 진행한다. 여기서 Package ID 는 구글스토어플레이 와 맥 앱스토어에 등록되는 ID로 중복이 불가하기 때문에, 유일한 값으로 해야 한다.

등록할 때 변경이 가능하다고 하니, 대충 등록하고 이후 수정하기로 했다.

Web asset directory 는 dist 로 설정한다.

project-name$ npx cap init
√ Package ID ... <Package ID>
[?] What is the web asset directory for your app?
    This directory should contain the final index.html of your app.
√ Web asset directory ... dist
√ Creating capacitor.config.ts in <Project Folder> in 4.42ms
[success] capacitor.config.ts created!

성공 후 capacitor.config.ts 생성이 된다.

이 파일의 webDir 은 nuxt 빌드 시 생성되는 폴더와 일치해야 한다.

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'package id',
  appName: 'project name',
  webDir: 'dist',
  bundledWebRuntime: false
};

export default config;

ios, android 플랫폼을 추가한다

project-name$ npx cap add ios
project-name$ npx cap add android

그리고 gradle 연관설정 들을 생성하기 위해서 sync 를 진행한다.

project-name$ npx cap sync android

이제 generate 명령어로 dist 폴더에 빌드파일을 생성한다.

project-name$ npm run generate

dist 폴더가 생성되면 이제 웹에 작성된 웹자원 들을 디바이스로 복사 해야 한다.

project-name$ npx cap copy

실행하면 적절한 위치에 [andoid || ios] 에 복사한다.

마지막 단계이다. 안드로이드 스튜디오에서 프로젝트를 열어보자

project-name$ npx cap open android

안드로이드 스튜디오 프로그램이 열리고, 자동으로 gradle 빌드 성공 후에 avd 로 디바이스 를 실행 시켰을 때, 문제없이 실행된다.

앱빌드 정리

앱을 빌드하기 위한 최종 워크플로는 다음과 같다.

npm run generate dist 에 소스 빌드
npx cap copy 빌드된 앱을 iOS 및 Android 작업 공간에 복사
npx cap open ios또는 npx cap open android플랫폼용 기본 IDE에서 앱을 열고 디버그

이후 adb 로 디바이스 추가하고 실행하는법 이나, 자신의 스마트폰으로 디버깅 하는 방법들이 추가로 필요했는데, 이 부분은 링크로 대체한다.

Promise 패턴

richready2011 — Wed, 24 Aug 2022 15:37:18 +0900

@refer:

개요

일반적으로 프로그래밍은 하나의 실행업무가 종료되기 전까지 다른 업무를 하지 않는다.
예를 들어, 글쓰기폼 에서 글쓰기를 전송하기 위해 Form 전송을 하면, 서버통신이 완료되기 전까지 다른 업무를 하지 않는다.
(강제로 페이지를 이동하기 전에는)

대부분의 프로그래밍이 이런 동기방식 으로 작동한다.

하지만 자바스크립트의 ajax 통신같은 비동기방식 은 결과가 나올때 까지 모든것을 중지하지 않는다.

선행된 비동기방식 업무 가 완료됐을때 완료됐다는 callback 을 주게 되면 반응하는 구조로 되어 있다.

사용자가 페이지에 접속해서 우측상단에 있는 로그인박스에 계정정보를 넣고 로그인버튼을 누른 후에, 사용자는 로그인이 완료될 때까지 현재페이지에서 스크롤을 움직여가며, 나머지 컨텐츠 들을 확인할 수 있다.

동기방식 이라면 로그인박스의 로그인버튼을 누를 경우 다른행위를 할 수 없게 된다. 모든 다른 행위가 중지되기 때문이다.

이것이 비동기방식 이 인기를 얻게된 이유 중 하나이다.

콜백방식

비동기방식 에서 하나의 프로세스가 끝난 후에 다른 프로세스를 실행해야 할 경우에 일반적으로 callback 을 함수에 준다.

function aProcess(callback1) {

    if(callback1) {

        setTimeout(function() {

            // 어떤 작업을 끝낸 후 callback함수를 호출
            callback1();

        },1000);

    }

}

aProcess( function() { console.log('callback1 run') } );

그렇다면 aProcess -> callback -> callback2 은 어떻게 해야할까?

function aProcess(callback1, callback2) {

    if(callback1) {

        setTimeout(function() {
            callback1();

            if(callback2) {

                setTimeout(function() {
                    callback2();
                }, 1000);

            }

        }, 1000);

    }

}

aProcess( function() {
    console.log('callback1 run');
}, function() {
    console.log('callback2 run');
} );

이런 비슷한 형태가 될 것이다.

물론 4단계가 필요한 경우가 흔하지는 않지만, 이런 callback 단계가 깊어질수록 효율적 코드관리가 어려워 지기 때문에 콜백지옥 이라는 표현을 종종 사용한다.

이런 A -> B -> C 단계를 수행해야 할 때, 효율적 코드관리를 위해서 Promise 명세가 나왔다.

명세는 설명서 같은 것이고, 브라우저 벤더사 혹은 라이브러리&프레임워크 개발자 들이 참고해서 뭔가를 만들어 낸다.

Promise 명세

Promise

Promise 는 어느날 갑자기 생긴 것은 아니고, 이전에 일정부분 구현이 되어 있었다.

이렇게 사용하던 것이 ecma 인터네셔널 에 정식채택이 되면서, 브라우저에도 탑재되기 시작했다.

최신브라우저 에서는 지원하는거 같은데, 일부 지원하지 않는 브라우저를 위해서 polyfill library 를 붙여 사용하는 것을 권장한다.

Promise Polyfill

기본적인 사용

위의 콜백형태를 프로미스 형태로 변경하면 아래와 같다.

function aProcess(callback1, callback2) {

    if(callback1) {

        setTimeout(function() {
            callback1();

            if(callback2) {

                setTimeout(function() {
                    callback2();
                }, 1000);

            }

        }, 1000);

    }

}

aProcess( function() {
    console.log('callback1 run');
}, function() {
    console.log('callback2 run');
} );

이 예제는

function aProcess(callback1, callback2) {

    new Promise(function(resolve, reject) {

        setTimeout(function() {
            callback1();
            resolve();
        }, 1000);

    }).then(function() {

        setTimeout(function() {
            callback2();
        }, 1000);

    });
}

aProcess( function() {
    console.log('callback1 run');
}, function() {
    console.log('callback2 run');
} );

이런 형태로 변경이 가능하다.

new Promise 를 선언하고 안에 resolve, reject 인자를 가진 함수를 지정하면, 내부함수에서 resolve() 를 수행하기 전에는 그 다음에 체인으로 연결되어 있는 .then 단계로 넘어가지 않는다.

즉 aProcess -> callback1 -> callback2 가 가능해 진다.

위에 2단계로는 뚜렷하게 다른점이 보이지 않는다. 5단계 정도까지 확장을 하면,

function aProcess(callback1, callback2) {

    new Promise(function(resolve, reject) {

        setTimeout(function() {
            callback1();
            resolve();
        }, 1000);

    }).then(function() {

        setTimeout(function() {
            callback2();
        }, 1000);

    }).then(function() {

        setTimeout(function() {
            console.log('callback3 run');
        }, 1000);

    }).then(function() {

        setTimeout(function() {
            console.log('callback4 run');
        }, 1000);

    }).then(function() {

        setTimeout(function() {
            console.log('callback5 run');
        }, 1000);

    })
}

aProcess( function() {
    console.log('callback1 run');
}, function() {
    console.log('callback2 run');
} );

위와 같은 나열이 예상된다. 처음 예제처럼 callback 안의 callback 을 호출하는 형태는 코드 자체가 무한하게 가로로 확장되는 구조를 가질 수 밖에 없다. (물론 코드의 indent 를 좀 정리하면 되지 않겠는가 라고 반문할 수도 있겠다.)

위에 코드를 조금 정리하면

function callback1() {
    console.log('callback1 run');
}

function callback2() {
    console.log('callback2 run');
}

function callback3() {
    console.log('callback3 run');
}

function callback4() {
    console.log('callback4 run');
}

function callback5() {
    console.log('callback5 run');
}


function aProcess() {

    new Promise(function(resolve, reject) {

        setTimeout(function() {
            callback1();
            resolve();
        }, 1000);

    }).then(function() {

        setTimeout(function() {
            callback2();
        }, 1000);

    })
    .then(callback3)
    .then(callback4)
    .then(callback5)

}

aProcess();

좀더 정리된 느낌의 코드가 된다.

Promise 메소드 들은 Promise 객체 를 리턴해 주는데, 이것을 이용하면 다른 형태로도 코드를 만들 수 있다.

function callback1() {
    console.log('callback1 run');
}

function callback2() {
    console.log('callback2 run');
}

function callback3() {
    console.log('callback3 run');
}

function callback4() {
    console.log('callback4 run');
}

function callback5() {
    console.log('callback5 run');
}

function aProcess() {

    return new Promise(function(resolve, reject) {

        setTimeout(function() {
            callback1();
            resolve();
        }, 1000);

    });

}

aProcess()
    .then(function() {

        setTimeout(function() {
            callback2();
        }, 1000);

    })
    .then( callback3 )
    .then( callback4 )
    .then( callback5 )

Promise 함수가 나 자신인 Promise 를 return 해 준다는 것은 Promise 객체의 기능들을 체인처럼 연결해서 사용할 수 있다는 것을 의미하는데, 조금 추상적일 수도 있어서, 체이닝패턴에 대해 간략히 보고 가도록 하자.

갑자기 체이닝패턴

function bitCoin() {
    console.log("constructor running");
}

bitCoin.prototype.sell = function() {
    console.log("절대 못팔아");
}

bitCoin.prototype.buy = function() {
    console.log("사기 무서워");
}

bitCoin.prototype.decision = function() {
    console.log("사기도 팔기도 무서워");
}

var inheritMethod = new bitCoin();
inheritMethod.sell();
inheritMethod.buy();
inheritMethod.decision();
// inheritMethod.sell().buy(); // Uncaught TypeError: Cannot read property 'buy' of undefined

위와 같이 prototype 으로 메소드가 있는 함수를 new 연산자를 통해 대입하게 되면 inheritMethod 는 bintCoin.__proto__ 에 대한 접근권한을 얻게 되고, 이 연결을 통해 inheritMethod.sell() 이 가능해 진다. 물론 inheritMethod.__proto__.sell = null 이런 코드로 bitCoin.sell = null 같은 위험도 동반된다.

프로토타입 이해하기

이런 여러가지 것들에 대한 이야기 보다 마지막 줄에 있는 inheritMethod.sell().buy() 이렇게 연결형으로 함수를 실행할 수 있게 만드는 것을 체이닝 패턴 이라고 하는데, 대표적인 예로 jQuery 가 $(selector).addClass('test').find('div') 같이 연결형으로 메소드를 실행할 수 있는 것은 이런 체이닝 패턴 을 가지고 있기 때문이다.

위의 예시에서 inheritMethod.sell().buy() 가 가능하게 만드는 것은 의외로 쉽다. return this 를 해주면 된다.

function bitCoin() {
    console.log("constructor running");
}

bitCoin.prototype.sell = function() {
    console.log("절대 못팔아");
    return this;
}

bitCoin.prototype.buy = function() {
    console.log("사기 무서워");
    return this;
}

bitCoin.prototype.decision = function() {
    console.log("사기도 팔기도 무서워");
    return this;
}

var inheritMethod = new bitCoin();
inheritMethod.sell().buy().decision(); // OK

이렇게 자신을 return 해주면 체이닝패턴 이 가능해진다.

var inheritMethod = new bitCoin().buy 이런 코드를 썼을때 inheritMethod 는 bitCoin.prototype.buy 와 동일해 진다.

이렇듯 Promise 도 체이닝패턴 으로 되어 있다.

function aProcess() {

    new Promise(function(resolve, reject) {
        resolve();
    });

}

aProcess().then(function() { console.log('yahoo') }); // Uncaught TypeError: Cannot read property 'then' of undefined

위와 같이 aProcess() 를 실행하고 나면 return 값이 없기 때문에, aProcess().then 은 사용할 수 없다.

function aProcess() {

    var inheritMethod = new Promise(function(resolve, reject) {
        resolve();
    });

    return inheritMethod;
}

aProcess().then(function() { console.log('yahoo') }); // yahoo

new Promise 는 Promise 를 return 해주게 되고, 그것이 inheritMethod 에 할당되며, 그리고 나서 return inheritMethod 을 해주기 때문에, aProcess() 는 Promise 객체를 다시 return 받게 된다. 그럼 Promise 가 가지고 있는 메소드를 사용할 수 있다.

위에 코드는 아래와도 동일하게 작동한다.

function aProcess() {

    return new Promise(function(resolve, reject) {
        resolve();
    });
}

aProcess().then(function() { console.log('yahoo') }); // yahoo

위와 같은 코드가 일반적으로 사용되는 듯 하다. 다시 Promise 예제코드 로 돌아오면

function callback1() {
    console.log('callback1 run');
}

function callback2() {
    console.log('callback2 run');
}

function callback3() {
    console.log('callback3 run');
}

function callback4() {
    console.log('callback4 run');
}

function callback5() {
    console.log('callback5 run');
}

function aProcess() {

    return new Promise(function(resolve, reject) { // `new Promise() 를 return`

        setTimeout(function() {
            callback1();
            resolve();
        }, 1000);

    });

}

aProcess()
    .then(function() {

        setTimeout(function() {
            callback2();
        }, 1000);

    })
    .then(callback3)
    .then(callback4)
    .then(callback5)

위에 코드가 어떻게 체이닝 패턴으로 사용할 수 있는지 설명이 된거 같다.
하지만 위에 코드에는 의도와 다른 결과 가 출력이 되는데, 잠시 접고 가자.

callback2 함수가 제일 나중에 출력이 되는 현상.
- 의도대로 라면 10초후 -> callback1 -> 10초후 -> callback2 -> callback3 -> callback4 -> callbak5 여야 하지만, 위에 코드 결과는 10초후 -> callback1 -> 10초후 -> callback3 -> callback4 -> callbak5 -> callback2 로 나옴

Promise 메소드 와 사용 예시

Promise 가 어떻게 돌아가는지 정확히 이해하지 못하더라도, 형태를 외우고 사용하는 데에는 큰 어려움은 없을 것이다.

간단히 실무에서 사용해 볼 만한 예시를 통해서 활용법을 보자.

검색을 해보면 대부분이 비동기 통신 에 관한 예제인 것을 확인할 수 있는데, 나 같은 경우에는 화면 동작과 관련해서 알아보고 싶었다.

가령 왼쪽에 있던 사각형이 우측으로 이동한 후, 이동이 끝나면 하단으로 이동하고, 끝나면 제자리로 가는 것을 해보면서, 단계별로 동작하는 Promise 에 대해서 알아보고자 한다.

Promise 의 resolve, reject

프로그래밍 할 때, 위와 같이 어떻게 돌아간다는 것을 모두 이해하지 않더라도, Promise를 사용할 때의 형태는 아래의 코드가 전부이기 때문에, 형태만 익숙해 져도 사용할 수 있다.

function rect() {
    return new Promise(function(resolve, reject) {
        if(true) {
            resolve();
        } else {
            reject();
        }
    });
}

rect()
    .then(function() {
        console.log('then 1');
    }).then(function() {
        console.log('then 2');
    }).catch(function() {
        console.log('error!');
    });

위와 같이 new Promise 를 return 해주고, 실제 사용할 때에 then 체이닝 으로 실행할 구문이 들어가 있다.
여기서 catch 구문이 추가되어 있는데, 이 블럭이 실행되는 조건은 두가지 이다.

rect() 함수에서 reject() 가 실행 되었을 경우
then 체인 실행 도중에 에러가 날 경우

이 조건중에 하나가 걸리면 catch 블럭이 실행 된다는 것을 기억하면 된다.

로직구현

기능

제자리에 있던 사각형이 우측으로 이동
이동이 끝나면 하단으로 이동
끝나면 제자리로 이동

<!doctype html>
<html>
<head>
</head>
<body>
<div id="circle" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background:greenyellow; border-radius:50%"></div>
<script>

function moveRight() {
    console.log('우측으로 이동');
}

function moveBottom() {
    console.log('아래로 이동');
}

function moveOriginal() {
    console.log('원래자리로 이동');
}

function init(status) {

    return new Promise(function(resolve, reject) {
        if(status) {
            console.log('초기화가 되었습니다.');
            resolve();
        } else {
            reject();
        }

    });

}

init(true)
    .then(moveRight)
    .then(moveBottom)
    .then(moveOriginal)
</script>
</body>
</html>

기본설계는 이렇게 될거 같다.

여기서 애니메이션을 넣어보자.

<!doctype html>
<html>
<head>
</head>
<body>
<div id="circle" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background:greenyellow; border-radius:50%"></div>
<script>

var circleObject;

function moveRight() {

    var start = 100,
        end = 200,
        moveTimer;

    moveTimer = setInterval(function() {

        if(start == end) clearInterval(moveTimer);
        circleObject.style.left = start + "px";
        start = start + 10;

    }, 500);
}

function moveBottom() {
    console.log('아래로 이동');
}

function moveOriginal() {
    console.log('원래자리로 이동');
}

function init(status) {

    circleObject = document.getElementById('circle');

    return new Promise(function(resolve, reject) {
        if(status) {
            console.log('초기화가 되었습니다.');
            resolve();
        } else {
            reject();
        }

    });

}

init( true )
    .then( moveRight )
    .then( moveBottom )
    .then( moveOriginal )
</script>
</body>
</html>

우선 오른쪽으로 가는 애니메이션을 작성하고.. 같은 방식으로 bottom 함수 도 구현하자.

<!doctype html>
<html>
<head>
</head>
<body>
<div id="circle" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background:greenyellow; border-radius:50%"></div>
<script>

var circleObject;

function moveRight() {

    var start = 100,
        end = 200,
        moveTimer;

    moveTimer = setInterval(function() {

        if(start == end) clearInterval(moveTimer);
        circleObject.style.left = start + "px";
        start = start + 10;

    }, 500);
}

function moveBottom() {
    var start = 100,
        end = 200,
        moveTimer;

    moveTimer = setInterval(function() {

        if(start == end) clearInterval(moveTimer);
        circleObject.style.top = start + "px";
        start = start + 10;

    }, 500);
}

function moveOriginal() {
    console.log('원래자리로 이동');
}

function init(status) {

    circleObject = document.getElementById('circle');

    return new Promise(function(resolve, reject) {
        if(status) {
            console.log('초기화가 되었습니다.');
            resolve();
        } else {
            reject();
        }

    });

}

init( true )
    .then( moveRight )
    .then( moveBottom )
    .then( moveOriginal )
</script>
</body>
</html>

위와 같이 실행할 경우 우측으로 이동 + 아래로 이동 이 한번에 작동하게 되는데, .then 에 연결된 함수가 실행되는 것이기 때문에, 자연스러운 현상이다. 하지만 의도한 것은 우측으로 이동 후 아래로 이동 이다.

의도한 바 대로 우측으로 이동이 끝날때까지 그다음 수행하는 .then 을 잡아두려면 .then 에서 실행하는 함수가 Promise 객체를 넘겨주면 된다.

<!doctype html>
<html>
<head>
</head>
<body>
<div id="circle" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background:greenyellow; border-radius:50%"></div>
<script>

var circleObject;

function moveRight() {

    return new Promise(function(resolve, reject) {

        var start = 100,
            end = 200,
            moveTimer;

        moveTimer = setInterval(function() {

            if(start == end) {
                clearInterval(moveTimer);
                resolve(); // Promise 종료
            }
            circleObject.style.left = start + "px";
            start = start + 10;

        }, 500);

    });
}

function moveBottom() {
    var start = 100,
        end = 200,
        moveTimer;

    moveTimer = setInterval(function() {

        if(start == end) clearInterval(moveTimer);
        circleObject.style.top = start + "px";
        start = start + 10;

    }, 500);
}

function moveOriginal() {
    console.log('원래자리로 이동');
}

function init(status) {

    circleObject = document.getElementById('circle');

    return new Promise(function(resolve, reject) {
        if(status) {
            console.log('초기화가 되었습니다.');
            resolve();
        } else {
            reject();
        }

    });

}

init( true )
    .then( moveRight )
    .then( moveBottom )
    .then( moveOriginal )
</script>
</body>
</html>

이렇게 소스를 변경하면 의도한 대로 moveRight 수행 후에 moveBottom 이 실행된다. 이와 같은 원리로 moveOriginal 까지 작성한 코드는 아래와 같다.

<!doctype html>
<html>
<head>
</head>
<body>
<div id="circle" style="position:absolute; top:100px; left:100px; width:100px; height:100px; background:greenyellow; border-radius:50%"></div>
<script>

var circleObject;

function moveRight() {

    return new Promise(function(resolve, reject) {

        var start = 100,
            end = 200,
            moveTimer;

        moveTimer = setInterval(function() {

            if(start == end) {
                clearInterval(moveTimer);
                resolve(); // Promise 종료
            }
            circleObject.style.left = start + "px";
            start = start + 10;

        }, 500);

    });
}

function moveBottom() {

    return new Promise(function(resolve, reject) {

        var start = 100,
            end = 200,
            moveTimer;

        moveTimer = setInterval(function() {

            if(start == end) {
                clearInterval(moveTimer);
                resolve();
            }
            circleObject.style.top = start + "px";
            start = start + 10;

        }, 500);

    });    

}

function moveOriginal() {

    var start = 200,
        end = 100,
        moveTimer;

    moveTimer = setInterval(function() {

        if(start == end) {
            clearInterval(moveTimer);
            console.log("종료");
        }
        circleObject.style.top = start + "px";
        circleObject.style.left = start + "px";
        start = start - 10;

    }, 500);
}

function init(status) {

    circleObject = document.getElementById('circle');

    return new Promise(function(resolve, reject) {
        if(status) {
            console.log('초기화가 되었습니다.');
            resolve();
        } else {
            reject();
        }

    });

}

init( true )
    .then( moveRight )
    .then( moveBottom )
    .then( moveOriginal )
</script>
</body>
</html>

이제 우측으로 이동 -> 아래로 이동 -> 처음자리로 이동 스텝이 단계마다 끝나고 다음단계가 진행되는 방식으로 확인할 수 있다.

이렇게 Promise는 대기상태를 제어해야 할때나, 내가 원하는 정확한 타이밍을 제어하고 싶을때, 혹은 ajax로 어떤 데이터를 받고 나서 그 다음에 어떤것을 수행하고자 할때 등에 사용 하기에 적합하다.

다른생각 - 개발 로그

프론트엔드 로드맵

로드맵!

우분투에 구글 NativeScript 설치

프레임워크

Fuse

Google Native-Script

React-Native

Google Flutter

가상화 환경 구성하기

OS 선택하기

우분투 설치하고, 한글 언어팩 등록하기

개발환경 설치하기

Nodejs 10 버전 설치하기

JDK 설치

KVM 설치 (옵션)

안드로이드 스튜디오 설치

네이티브 스크립트 설치하기

마무리

ES5 -> ES6

ES6 는 무엇인가

컴파일을 위한 TASK RUNNER

그 외에 브라우저가 채택하고 있는 표준

주요 변경 사항

let, const

Arrow function

function arguments

for/for in/for of

Template String

Module

Promise

Class

Generator

await/async

display: grid

grid 와 flex

grid 컨테이너가 가지는 속성

grid-template, grid-template-rows, grid-template-columns

grid-auto-columns, grid-auto-rows

grid-auto-flow

grid-gap, grid-column-gap, grid-row-gap

grid 아이템이 가지는 속성

grid-area, grid-column, grid-row

grid를 통한 일반적인 레이아웃 예제

자바스크립트의 몇가지 좋은 습관

전역 변수 사용의 최소화

Scope 마다 단일한 "var" 선언 사용

JSLint 를 당신의 친구처럼 생각 하라.

Use Strict 를 사용하자

모듈 패턴

개발자를 위한 개발 코드를 작성하자

어떻게 작동 하는지, 어떻게 보여지지 않는지

풍부한 옵션

최적화

웹에서의 폰트

컴퓨터 글꼴

글꼴 형식

글꼴 확장자

고정폭과 가변폭

Serif 와 Sans Serif

font-family 의 Serif, Sans Serif

시스템마다 지원하는 브라우저 폰트

웹폰트

사용법

최적화

Font Loading API 로 최적화

Google Webfont Loader

data-uri

preload

서브셋 으로 폰트 줄이기

폰트압축

Vue 컴포넌트 데이터 v-model 연동하기

Vue 컴포넌트 데이터 연동 정리

Vue 컴포넌트 데이터 연동 정리

데이터 단방향

이벤트 $emit 발생

.sync

v-model

자식컴포넌트 v-model 값 부모에게 보내기

Nuxt + Capacitorjs 환경 구축

`grid` 와 `flex`