LANG - WORLD IS WIDE

개발자의 일본어 사전(開発の辞書)

開発者がよく使う単語コレクション

일본어 서적을 번역하면서 정리하는 개발 용어.

영어 단어를 그대로 쓰는 카타카나가 많지만 장음이나 표기법 등의 참고를 위해 함께 정리.

上書き [うわがき] – 덮어쓰기(overwrite)
受け取る [うけとる] – 받다(receive)
アクセス [あくせす] – 액세스(access)
値 [あたい] – 값(value)

コンポーネント [こんぽーねんと] – 컴포넌트(component)
コールバック [こーるバック] – 콜백(callback)
切り替え [きりかえ] – 전환(convert)
環境 [かんきょう] – 환경(environment)
組み合わせ [くみあわせ] – 조합(combination)
関数 [かんすう] – 함수(function)

サ

実装 [じっそう] – 마운트(mount)
疎結合 [そけつごう] – 소결합(loose coupling)
設計 [せっけい] – 설계(design)
スキル [すきる] – 스킬(skill)
座標 [ざひょう] – 좌표(coordinate)

タ

トリガー [とりがー] – 트리거(trigger)
デプロイ [でぷろい] – 배포(deploy)
ツール [つーる] – 툴(tool)
データ [でーた] – 데이터(data)
テキスト [てきすと] – 텍스트(text)

ナ

認証 [にんしょう] – 인증(identification)

ハ

振る舞い [ふるまい] – 동작(behavior)
ヘッダー [へっだー] – 헤더(header)
ボディ [ぼでぃ] – 바디(body)
引数 [ひきすう] – 인수(argument), 함수 호출 시 전달 값
パラメータ [ぱらめーた] – 파라미터(parameter), 함수 정의 시 전달 값
フロントエンド [ふろんとえんど] – 프론트엔드(frontend)
フロー [ふろー] – 흐름, 플로우(flow)

マ

マイグレーション [まいぐれーしょん] – 마이그레이션(migration)

ヤ

やりとり – 주고 받음
呼び出す [よびだす] – 호출(call)

ラ

ルーティング [るーてぃんぐ] – 라우팅(routing)
レンダリング [れんだりんぐ] – 렌더링(rendering)

A Simple Explanation of Currying Functions(Javascript)

currying function’s usages, pros and cons

‘Currying’ has the same spelling as Curry that we love.

But ‘currying’ is derived from the name Haskell Brooks Curry who was known as a mathematician and a logician.

Currying is a technique that converting multiple arguments function into a single argument functions sequence.

Like this.

func(a, b, c) -> f(a)(b)(c)

Three arguments function is converted into three functions with single argument each.

f(a) returns value and (b) takes this value as a parameter. (c) also do the same thing. Get’s (b)‘s return value and return.

//non-curried
function plusFunc(a, b, c){
  console.log(a + b + c);
}

plusFunc(1, 2, 3);   // 6

//curried
function plusFunc(a){
    return function(b){
       return function(c){
          console.log(a + b + c);
       }
    }
}

plusFunc(1)(2)(4);  // 7

Then what are the differences between Curried and Non-curried?

non-curried : Function will be immediately executed even though parameters are not passed.
? Function definition : func(a, b, c)
? Function execution : func(a)
? Execution result : func(a, undefined, undefined)

curried : Execution will be suspended if parameters are not fully passed.
? Function definition : func(a, b, c)
? Function execution : func(a)
? Execution result : func(a) waits for b parameter.

So we can use currying as below.

function setAppell(appell){
    return function(name) {
       console.log(appell + name);   
    }
}

const setName = setAppell('Mr.');
setName('Right');  // Mr.Right
setAppell('Mr.')('Baker'); //Mr.Baker

//ES6 화살표 함수
const setAppell = appell => name => console.log(appell + name);

const setName = setAppell('Miss.');
setName('Dior');  // Miss.Dior

If we use currying function, we can also pass event and value together.

const setNumber = (num) => (event) => {
     console.log(event.target.id+':'+num);
}

<div onClick="setNumber(2)(event)" id='myNum'>
  click
</div>

// myNum:2

What is Pros.

? Pros
– Reusable
– Reduced amount of code
– Readability

And Cons.

? Cons
– Deeply nested functions cause memory and speed issue. So Currying

Mathematical Explanations of Currying

Most of the functions can be implemented without using currying. but you can expect a good effect if you use currying to improve productivity through reusability or readability.

ジャバスクリプト、文字列操作(JAVASCRIPT & STRING)

Javascript文字列のメソッド : slice(), substring(), includes(), startsWith(), trim(), replace()…….

フロントエンド(React, Vue, Angular)もバックエンド(Nodejs)もジャバスクリプト(Javascript)が使われる時代になって、だんだんジャバスクリプトの文法が重要となりますね。

その中、文字列(String)関連のメソッドはよく使うのに、あまり覚えてはいないやつですね。😂

文字列関連のメソッドは一度覚えておくと自動に覚えられるぐらい使う頻度が高いので最初だけ頑張ればですね！

では、頻繁に使うメソッドの中slice(), substring(), includes(), startsWith(), trim(), replace(), indexOf(), test()をご紹介します。

slice(start index, (end index))

sliceメソッドはインデックスをパラメータで渡し、必要な文字列を抽出します。

スタートインデックス(start index)と終了インデックス(end index、省略可)を渡し、終了インデックスを省略する場合は文字列の最後までになります。

パラメータが０の場合は頭から一番目、-1は逆で後ろから一番目の意味になります。

const myWord = 'primavera';

myWord.slice(0,5);   // 'prima'
myWord.slice(-4);    // 'vera'
myWord.slice(3);     // 'mavera'

myWord.slice(3,1);    // '' -> slice()はスタートが終了より大きいと空を返す

substring(start index, (end index))

substringメソッドもsliceと同じくインデックスを渡し、文字列を抽出します。

基本的な操作は同様ですがsubstringはスタートが終了より大きいの場合自動に位置を交換してメソッドを実施します。

また、substringに負数を入れると０と認識します。

例えば(3, -1)を渡すと(3, 0)として認識します。それに(3, 0)はスタートが大きいので自動交換し、(0, 3)を実施します。

メソッド名が似たようなsubstrは’位置’と’文字数’をパラメータに渡すメソッドです。

const myWord = 'invierno';

myWord.substring(3);     // 'ierno'
myWord.substring(1,3);   // 'nv'

myWord.substring(3,1);   // 'nv' -> 自動にスタートと終了位置交換

myWord.substring(3,-1);  // 'inv' -> 負数は0, 自動位置交換

myWord.substring(-4);    // 'invierno' -> 負数は0, スタート(0)から最後まで

myWord.substr(1,3);      // 'nvi' -> スタート1から三つ

includes(文字列, (index))

includesは文字列の中、指定した文字列が含まれているかをチェックします。

パラメータは文字列(必須)とインデックス(省略可)を渡し、返すのはtrue或はfalseです。

このメソッドは指定文字はもちろん、配列の中で空の値を確認するためには使えます。

const myWord = 'alegria';

myWord.includes('le');       // true
myWord.includes('i');        // true
myWord.includes('rio');      // false

const myArray = ['dream','','king'];
myArray.includes('');       // true   -> myArray[1]が空なのでtrue
myArray.includes('dream');  // true   -> myArray[0]と一致
myArray.includes('drea');   // false  -> 要素は完全一致する場合のみtrue

startsWith(文字列, (index)), endsWith(文字列, (index))

startsWithメソッドも文字列が含まれているかをチェックします。

文字列のみ渡すと0インデックスから始まる指定文字の存在を確認し、BOOLEANを返します。

endsWithは指定文字で終わることをチェックします。

const mySentence = 'cafe con leche';

mySentence.startsWith('cafe');     // true
mySentence.startsWith('fe');       // false
mySentence.startsWith('fe',2);     // true

mySentence.endsWith('eche');      // true

trim()

trimは文字列両断の空白を除くメソッドです。

文字列変換の過程で入られた空白またはタイプミスで入った文字列は文字比較の時falseを返し、エラーになりがちです。

なのでtrimで空白を事前に除き、エラーを予防することができます。

文字列両断の空白、タップ、改行(/n)文字を除くことができますが、両断ではなく文字列中に入っているのは作動しません。

const mySentence = '  la casa de papel   ';

mySentence.trim();        // 'la casa de papel'

const mySentence = ' el amor \n';

mySentence.trim();       // 'el amor'

replace(指定文字, 変換文字)

replaceは文字列から指定した文字を探して変換文字に変換します。

文字列の中に指定文字が一つ以上存在するとき、最初に見当たるのだけが変更対象になります。

例えば ‘my_name_is_Ron’からアンダーバーを全部空白にするためreplace(‘_’,’ ‘)にしても結果は’my name_is_Ron’になります。

なので、文字列の中で存在する全ても指定文字を変換したい時は正規表現を使うと行けます。

const mySentence = 'my name is:Ron';

mySentence.replace(':',' ');        //'my name is Ron'

const mySentence = 'my_name_is_Ron';

mySentence.replace('_',' ');      // 'my name_is_Ron'

//正規表現ですべての文字を変換
mySentence.replace(/_/g, ' ');    // 'my name is Ron'

indexOf(指定文字, (start index))

indexOfは指定文字の位置を返します。

このメソッドは指定文字の前または後で文字列を切り取るとき有用なものです。

たとえ、’Z001-03’から後ろの’03’だけを抽出したいとき、indexOfで’-‘文字を探し、返しのindex +1位置から最後までカットすると’03’を切り取ることができます。

もし文字列の中指定文字が一つ以上の場合、頭から探し始め最初に見当たる文字位置を返します。

でもパラメータにindexを渡すと指定された位置から指定文字を探します。

注意点はstart indexを渡しても返す値は全体の文字列から何番目であるという数字を返します。

後ろから検索するのはlastIndexOfで、後ろから最初の指定文字の位置を返します。

この時も返す値は頭から何番目であるという数字です。

指定文字がなければ-1を返します。

const mySentence = 'Z001-03';

mySentence.indexOf('-');     // 4

mySentence.substring(mySentence.indexOf('-')+1);    // '03'

mySentence.indexOf('D');    // -1

const mySentence = 'Z001-03-02';

mySentence.indexOf('-');    // 4
mySentence.indexOf('-', 5);   // 7

mySentence.lastIndexOf('-')   // 7

test(文字列)

testは一般的に正規表現と一緒に使い、渡す文字列と比較し有効性を確認します。

パスワード、アルファベット、特殊文字、生年月日などの形式検査に使えます。

const mySentence = /a/;
const myWord = 'baby';

mySentence.test(myWord);   // true

/\d/.test('cookie');       // false \dは数字を意味(正規表現)
/\d/.test('cookie1');      // true

上の例以外にも山ほどメソッドが多いし、また新しく作られるメソッドもたくさんありますね。

また必要な機能のメソッドがあれば確認していきましょ！

あざーす！

Moment.js, A Simple Tool For Calculating Date And Time(feat.Nodejs)

Easy way to calculate date and time way better

Sometimes we need to calculate date and time.

Actually more than sometimes.

And this library, moment.js, is so powerful for your purpose.

Getting date, setting a date format whatsoever you want, subtracting date from date, counting days, and others.

Below listed some functions for your quick use.

Let’s dig it.

Install moment.js

Install library with below command.

npm install moment

Import the library with ‘require’ function.

var moment = require('moment');
moment();

//ES6 syntax
import moment from 'moment';
moment();

Let’s get started from parsing date.

const date = moment(""); //2022-01-23T11:15:00+09:00

We can display date using format() method with below tokens.

token	mean	example
YY(YY)	year	ex) YYYY -> 2022, YY -> 22
MM(MM)	month	ex) MMMM -> January, MM -> 01
DD	date	ex) DD -> 25
dd(dd)	day	ex) dd -> Tu, dddd -> Tuesday
hh	hour(12)	ex) hh -> 01
HH	hour(24)	ex) HH -> 13
mm	minute	ex) mm -> 07
ss	second	ex) ss -> 03
a	am, pm	ex) a -> pm
Do	ordinal	ex) Do -> 25th

//January Tu 2022, 01:07:21 pm
moment.format('MMMM dd YYYY, hh:mm:ss a'); 

//January Tuesday 2022, pm 01:17
moment.format('MMMM dddd YYYY, a hh:mm') 

// 01/25/2022
moment.format('MM/DD/YYYY');

isValid() method works well on it.

moment('2022-01-25','YYYY-MM-DD').isValid(); //true

moment('2022-02-30','YYYY-MM-DD').isValid(); //false

moment('My birth is 2022-1-25','YYYY-MM-DD').isValid(); //true

Also parsing every detail date is available by intuitive methods.

hour()	get hour
minute()	get minute
second()	get second
millisecond()	get millisecond
date()	get date (1~31)
day()	get day of week (0~6)
week()	get week of year (1~53)
month()	get month (0~11)
year()	get year

moment(new Date).hour(); //13

moment().millisecond(); //331

moment().week(); //5

To get the difference in date, use diff() method.

const theDate = moment('2021-01-20', 'YYYY-MM-DD');
const myDate = moment('2022-01-25', 'YYYY-MM-DD');

myDate.diff(theDate, 'days');     // 5
myDate.diff(theDate, 'year');    // 1
myDate.diff(theDate, 'month');  // 12

We can use this method for counting expire date or calculate D-day.

And there is a bunch of methods this library thanks to the last long maintenance till today.

Please check official web for further infomation.

momentjs.com

ジャバスクリプトで配列を結合(マージ)する良い方法(javascript)

配列を結合する便利な三つのやり方(concat(), …spread, push())

ジャバスクリプトを使ってデータを扱うことが多くなり、配列を使用する仕組みも増えていきます。

その中、マージ（結合）についてちらっと調べてみますね。

配列(array)はインデックスを持つ要素を順に並べる構造です。

一つの配列ならインデックスまたはメソッド（unshift(), push(), shift(), pop(), splice(), find(), includes(), join(), indexOf()など）を使って配列中のデータを便利に操作することができます。

配列間のマージ方法も同じくconcat(), push(), …spreadなどが存在します。

一つづつ確認してみます。

1. 配列結合の三つ方法

concat

concatenate(連結する意味)の略字であるconcat()は意味通り配列両方を繋ぎます。

次のように扱うので、サンプルから確認してみます。

[array1].concat([array2]…..)

[].concat([array1], [array2]……)

const color1 = ['blue', 'pink', 'white'];
const color2 = ['black', 'orange', 'yellow'];
const num1 = [100, 200, 300];
const num2 = [400, 500, [600, 700]];

const allColor = color1.concat(color2); 
//['blue', 'pink', 'white', 'black', 'orange', 'yellow']
console.log(allColor); 

const colorPlus = color1.concat('gold', ['silver', 'bronze']); 
//['blue', 'pink', 'white', 'gold', 'silver', 'bronze']
console.log(colorPlus);

const colorAndNum = color1.concat(num1);   
//['blue', 'pink', 'white', 100, 200, 300]
console.log(colorAndNum); 

const allNum = num1.concat(num2);   
//[100, 200, 300, 400, 500, [600, 700]]
console.log(allNum);

concatは一つ以上の配列を結合し、一つの配列にします。

配列中のデータの形式（タイプ）にかかわらず結合できるし、ネストされている配列（配列中にまた配列がある構造）の結合もできます。

…spread スプレッド

ES6から追加された文法の一つであるスプレッド構文は配列或はオブジェクトを速くて安全にコピーすることができます。

深いコピー(deep copy)方法でコピーするので、既存のデータとは違うメモリーアドレスを使いますね。

なので配列の結合方法の中では一番いい方法だと言えます。

const musician = ['Chet Baker', 'Miles Davis'];
const actor = ['Clint Eastwood', 'George Clooney'];

const favorites = [...musician, ...actor];    
// ['Chet Baker', 'Miles Davis', 'Clint Eastwood', 'George Clooney'];
console.log(favorites); 

const favoritesReverse = [...actor, ...musician];
// ['Clint Eastwood', 'George Clooney', 'Chet Baker', 'Miles Davis'];
console.log(favoritesReverse)

また、スプレッド構文は次のように非構造化ではよくつかわれています。

const myColor = ['beige', 'burgundy', 'charcoal', 'ivory'];

const [color1, color2, ...others  ] = myColor;
console.log(color1);   // 'beige'
console.log(color2);   // 'burgundy'
console.log(others);   // ['charcoal', 'ivory']

push

push()は配列の最後に要素を追加するときよく使うメソッドです。

push()メソッドとスプレッド構文を一緒に使うと配列の結合ができます。

でもこの方法は既存データの上に新しいデータを上書きするので既存データの変更に注意する必要があります。

const pizza = ['dough', 'cheese', 'meat', 'source'];
const pizzaAdd = ['parmesan', 'tabasco'];

pizza.push(...pizzaAdd);   

// ['dough', 'cheese', 'meat', 'source', 'parmesan', 'tabasco'];
console.log(pizza);

2. 総合

配列を結合する方法の中concat(), …spread, push()について調べてみました。

状況により必要な方法が違うので、システムやロジックを考えた上で選んだら問題はないと思います。

あざーす！

개발자의 중국어 사전(程序员的词典)

프로그래밍 관련 중국어(汉语)-한국어(韩语) 용어 사전

프로그래밍 관련 서적 번역 중 정리한 프로그래밍 관련 단어입니다.

中韩翻译过程中遇到的常用单词和编程术语。

ㄱ – ㅁ

내림차순 – 降序排序 (jiàng xù pái xù)
너비우선 검색 – 广度优先搜索 (guǎng dù yōu xiān sōu suǒ)
네임스페이스 – 命名空间 (mìng míng kōng jiān)
동적계획법 – 动态规划 (dòng tài guī huá) = 动归 (dòng guī)
디버깅 – 调试 (diào shì)
로직 – 逻辑 (luójí)
리스트 – 列表 (liè biǎo)
리턴 – 返回 (fǎn huí)
링크드리스트 – 链表 (liàn biǎo)
메모리 – 内存 (nèi cún)
메모이제이션 备忘录 (bèi wàng lù)
메서드 – 成员函数 (chéng yuán hán shù)
매핑 – 映射 (yìng shè)
무차별 탐색(brute force search) – (暴力解法 bào lì jiě fǎ) (=완전 탐색)
문자열 – 字符串 (zì fú chuàn)
미들웨어 – 中间件 (zhōng jiān jiàn)

ㅂ – ㅈ

바이너리 – 二叉(èr chā)
배열 – 数组 (shù zǔ)
선언 – 声明 (shēng míng)
순회 – 遍历 (biàn lì)
스택 – 堆栈 (duī zhàn)
액세스 – 访问 (fǎng wèn)
역직렬화 – 反序列化 (fǎn xù liè huà)
역추적 – 回溯 (huí sù)
오름차순 – 升序排序 (shēng xù pái xù)
오버플로우 – 溢出 (yìchū)
완전 탐색 穷举算法 (qióng jǔ suàn fǎ) (=무차별 탐색)
음수 – 负数 (fùshù)
의사 결정 트리 – 决策树 (jué cè shù)
의사코드 – 伪码 (wěi mǎ)
입력 – 输入 (shū rù)
조건문 – 条判断语句 (tiáo pàn duàn yǔjù)
직렬화 – 序列化 (xù liè huà)

ㅊ – ㅎ

카운터 – 计数器(jì shù qì)
캐시 – 缓存(huǎn cún)
큐 – 队列 (duì liè)
쿼리 – 查询 (chá xún)
텍스트 – 文本 (wén běn)
트리 – 树 (shù)
트리거 – 触发 (chù fā)
패키지 – 包 (bāo)
피보나치 수열 – 斐波那契数列(fēi bō nà qì shù liè)
클래스 – 类 (lèi)
클립보드 – 剪贴板 (jiǎn tiē bǎn)
할당 – 赋值 (fù zhí)
함수 시그니쳐 – 函数签名 (hán shù qiān míng)
해시테이블 – 哈希表 (hā xī biǎo)
헤더 – 头文件 (tóu wén jiàn)

やすくて速い正規表現(Easy Regular Expression)

正規表現の構成と意味、ジャバスクリプト(Javascript)でのお扱い

正規表現というのは検索パータンを指定し記号で表示したものです。

このアイデアはアメリカの数学者であるスティーブンコールクリーン(Stephen Cole Kleene)が1950年代に正義した正規言語(Regular Language)と関係がありまして、正規表現の文法は1980年代にパール(Perl)言語から使い始まりました。

主に、検索や置換の作業に使われ、皆が使うほとんどのプログラミング言語の中でサポートされている文法です。

例えば、次の文章の中で特定した条件を検索するとき正規表現の力を借りることができます。

The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.

‘too’ 文字列を検索する -> /too/
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
大、小文字を構わなく ‘t’ 文字を検索するとき -> /t/-gi
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
‘d’ から始まる単語及び文字のすべてを検索するとき -> /[d]\w+/-gi
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it.
‘ea’を含む単語を検索するとき -> /[a-z]*ea[a-z]*/-i
The greatest danger for most of us is not that our aim is too high and we miss it, but that it is too low and we reach it

正規表現の文法テストは次のページが助かります。

regexr.com

青いバーExpressionの下のインプットには表現を入れ書き、その下のボックスには検索対象になるテキストを入れればオッケーです。

まず、表現の意味について少し勉強してからJavascriptで楽に使う方法を確認してみます。

1. 正規表現の記号

/ . / → すべての文字

/ + / → 一つ以上の文字

/ ? / → ０または一つの文字

/ ^ / → 該当の文字を除く

/ – / → 範囲指定

/ * / → ０または一つ以上の文字

/ [ ] / → グループセット

/ { } / → 繰り返しの回数指定

/ \ / → エスケープ

/ \d / → すべての数字

/ \D / → 数字ではない文字

/ \w / → アルファベット、数字、アンダーバー

/ \W / → アルファベット、数字、アンダーバーではない文字

/ \s / → 空白文字

/ \S / → 空白ではない文字

/ \n / → 改行

基本的に正規表現を構成する記号は上記であり、この記号さえ覚えれば正規表現の基本的な仕組みは十分理解できると思います。

それではサンプルを参考しながら正規表現を分析していきましょう。

2. 記号の意味

\d \D \w \W \s \S \n

正規表現で一番基礎になる記号であるので覚えておくと役に立ち部分です。

dは数字、 wは英文字、 sは空白、 nは改行の意味であり、各文字の大文字は NOT(反対)を示します。

数字が一回以上繰り返す文字検索 👉 / [\d]+ /

数字ではない文字を検索（空白含む） 👉 / [\D] /

括弧(かっこ)が含まれている文字、数字検索 👉 / $[\w]+$ /

英文字、数字、アンダーバーではない文字検索 👉 / [\W]+ /

空白検索 👉 / \s /

上で紹介したregexr.comで検索対象になるテキストをいれてパータンを直接に作成してみるとすぐ正規表現になれると思います。

\ エスケープ Escape

大体エスケープというのは何ですかね。

キーボードの一番左一番上のキー(ESCと書かれているもの)がエスケープの略字です。エスケープの意味は逃れるのです。

こちらでは約束から逃れることだと認識すればいいと思いです。

例えば、正規表現で点(. dot)はすべての文字の意味にしようと約束した特別な文字ですね。

でもたまには’それ約束以外’に点をピリオド意味の点で使いたいときがありますね。

この時エスケープを使います。

エスケープを使わない限り、文字は約束した機能として動きます。

下の例で確認しましょう。

すべての文字を意味。 a, b, c, d, ?, !, @, , などすべての文字の中一つ 👉 / . /

エスケープを前につけるとただピリオド記号だけの意味 👉 / \. /

一つ以上の文字の意味 👉 / + /

エスケープを前につけるとただプラス記号だけの意味 👉 / \+ /

エスケープはよく使われる必須な機能であるので、そのままの文字にはならないのでエスケープが必要な特別な文字(. ? + *など）を覚えておく必要があります。

その文字の一部を下で紹介します。

. + ? ^ – *

上で紹介した特別な記号は特別な意味を持ちます。代表的な使い方は下の通りです。

小文字a~z或は大文字A~Z中一致する英文字検索 👉 / [a-zA-Z] /

color或はcolourを検索(‘u’があってもなくてもいい) 👉 / colou?r /

‘a’を含む単語検索 👉 / [\S]*a[a-zA-Z]* /

a-z或は空白(space)ではない文字検索 👉 / [^a-z ] /

英文字から始め必ず数字または特殊記号を含む文字列を検索 👉 / [a-zA-Z]+[\d!@#\$%\^*]+[\w]* /

{ } 中括弧(かっこ) curly brackets

中括弧は繰り返しの回数を指定し、これを使うと詳しい検索パータンの設定が可能です。

中括弧の中、一つの数字は全体の繰り返し回数の意味であり、二つの数字は頭と末の範囲を指定する意味です。

例え、{3}は３回繰り返しの意味であり、{1, 3}は範囲区間1から3の意味です。

{1, }のような表現も可能であり、これは+記号と同様な意味,　つまり一つ以上の意味であります。

Aが3回繰り返す文字を検索 👉 / [A]{3} /

3桁以上の数字を検索(3번以上繰り返し) 👉 / [\d]{3,} /

Aが二回から三回まで繰り返す文字を検索(繰り返す範囲指定) 👉 / [A]{2,3} /

繰り返し回数だけを指定すれば、意図しない結果が出ることがあるので、部分式(subexpression)と全後方一致検索を一緒に使うともっと効果的なパータンが可能です。

[ ] 角括弧(かっこ) Brackets

角かっこの中に記号を書き、検索パータンを指定します。直接に記号を書き込んだり、範囲指定記号の’-‘を使ってパータンを指定します。

指定する文字(a 或は A 或は b 或は B 或は c 文字)一つを検索 👉 [aAbBc]

aから eまで(a,b,c,d,e)の範囲内一つの文字を検索 👉 [a-e]

除外文字’^’があるので a-z 範囲に入らない文字(記号)を一つ検索 👉 [^a-z]

明記した記号の一つを検索 👉 [?!@#$%^&*()_]

c或はCから始め, a-zの中一つで終わる単語検索 👉 [cC][a-z]

[ ]を使うと一つだけの文字を検索するので一つ以上の文字を検索したいときには+記号（一つ以上の文字、０は不可）または＊（０または一つ以上の文字、０も可能）記号を付ける必要があります。

一つ以上のa-z文字を検索(必ず一つ以上の条件) 👉 [a-z]+

０個以上のA-Z文字を検索(なくてもいい) 👉 [A-Z]*

特定構成で成り立つ文字列の検索に効果的であり、例えばメールアドレスの文字列があります。

メールアドレス形式のabcd@xyz.comを検索するためには次のようなパータンを使うことができます。

/[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]+/

では、パータンを分析してみます。

先、メールのIDになる部分は英文字と数字が入るので、[a-zA-Z0-9]で始め一つ以上を意味する+記号を付けます。

その次、@が続きますので@を入れ, ホストのアドレスも一つ以上の英文字と数字を指定します。

.com形のアドレスなのでピリオドをそのまま使うためエスケープを使いまた一つ以上の英文字を入れてパータンを生成します。

もしIDの中に点が入るかホストアドレスが.co.jpなどの形になるときにはそれに対する応用が必要です。

3. まとめ

正規表現の第一印象はまるで外界言語みたいな姿で広く使われる既存の言語とは違う様子をしてますね。

軽く近づけられなくいやな気持がするときもありますが、少しだけでも調べてみたら意外と簡単な規則でパワフル機能を持っていいやつだなと思われる時が来るかもですね。

上で紹介した部分は代表的な機能を紹介するため簡単なパータンたちなので、上のパータンは不完全なパータンであります。もの正しいパータンを作るためにはもっと深く勉強する必要がありますね。

ご質問がありましたら、自由にコメントください！

あざーす！

AWS EC2 – From Launch New Instance To Install Everything We Need

Simple Explanation Of Setting up AWS EC2(Ubuntu18.04)

1. Launch New Instance In AWS

On a EC2 Management Console page, launch instances and choose Ubuntu Server 18.04 LTS with adequate instance type.

I chose t2 micro Type and launched.

On the next page, click Edit security groups and open port 22, 80, 443 for the next step.

Before launch the instance, you should select an existing key pair or create a new one.

If you don’t have any, create a new one and download key pair.

You should keep that key pair safe and don’t let be exposed to anyone.

We need an elastic IP address(Non-change address) for our accessibility.

Elastic IP lasts forever even if you stop the instance unless you release the IP address.

EC2 -> Network & Security -> Elastic IPs -> Allocate Elastic IP address.

Associate Elastic IP address and Choose an instance to stick them together.

Half way there.

Now you have your own instance and elastic IP address.

Keep going.

2. Connect To The Server Using SSH Client

You can use any SSH Client whatever you want.

This time I chose XShell7 that is free for Home/School.

Go to Authentication, write User Name ‘ubuntu’ and check Method Public Key.

Click Connect.

Browse and select the key pair that we downloaded.

If you get this message, now you are in.

3. Install Nodejs On Ubuntu Server

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

$ sudo apt-get install -y nodejs

Execute line by line and when it’s done, we can check by ‘node -v’ command.

If node version(v14.18.2 or something) is printed, installation is done.

4. Install MongoDB On Ubuntu Server

$ wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

If you see ‘OK‘ return with above command, you are ready for the next step.

$ echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list

If you see ‘echo “deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.4 multiverse” | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list‘, move forward.

$ sudo apt-get update
$ sudo apt-get install -y mongodb-org

If you feel like something goes on a busy process, just wait.

When it’s done, check an installation with this command.

‘mongo -version’

Start mongodb service with this command.

$ sudo service mongod start

When successfully started, no message output.

$ mongo

> use admin

> db.createUser({ user:'id', pwd:'pwd', roles:[{"role":"userAdminAnyDatabase","db":"admin"},{"role":"readWriteAnyDatabase","db":"admin"}]})

exit

Have to change some codes for accessibility and security.

$ sudo vi /etc/mongod.conf

binIp : 127.0.0.1 -> bindIp: ::, 0.0.0.0

#security -> refer to above capture. no space before ‘enabled’ makes error.

save it!(‘wq’ command)

If you want to give a access try, use Compass with 27017 port opened.

5. Deploy(git clone)

Use Git, clone your project to your instance and install dependencies.

$ git clone https://github.com/id/repo

$ cd repo
$ npm install

6. Run Server With PM2

Install pm2 and run your own server.

pm2 makes your server keep running if you close the shell.

$ sudo npm install pm2 -g

$ sudo pm2 start index.js //in my case with arguement -> sudo pm2 start src/index.js --node-args="-r esm"

Now, your server won’t stop unless you stop the PM2.

You can check the PM2 status with below command.

$ sudo pm2 list

7. Install Nginx On Ubuntu Server

Nginx has additional functions that Nodejs do not have.

Simply in two ways, security and load balancing.

$ sudo apt-get install nginx

We opened port 80 for Nginx access.

When Nginx works, clients come in through Nginx door and Nginx leads them to internal port.

$ sudo service nginx start

When Nginx started, access it with your ip address.

Like http://3.34.65.190

Nginx welcomes you if you are on right process.

Now, Change some codes as below with vi editor to complete Nginx work.

$ cd /etc/nginx/sites-enabled

sudo vi default

Comment out try_files $uri $uri/ =404; and add

    proxy_pass http://yourIP:port/;
    proxy_set_header Host $http_host;
    proxy_http_version 1.1;
    proxy_set_header X-Nginx-Proxy true;
    proxy_redirect off;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_pass takes clients to internal port that you set on Nodejs.

In my case, http://3.34.65.190:4000/;

Save it.

Next step is set a size limitation.

Nginx’s default file size setting is 1MB.

But if your page handles bigger than 1 MB files upload or download, this setting is necessary.

$ sudo vi /etc/nginx/nginx.conf

**client_max_body_size** 10M(limit size that you want);

Now, restart Nginx.

sudo service nginx restart

Now you can access you page that you made.

8. SSL certificate with Let’s Encrypt(http ->https)

Using Route53 service, get a own domain and manage DNS.

Redirect to your IP address and when you have your own domain, you can get a SSL certification with Let’s Encrypt for free.

$ sudo add-apt-repository ppa:certbot/certbot

$ sudo apt install python-certbot-nginx

$ sudo certbot --nginx -d yourdomain.com

Follow the direction, and then your web can get a SSL certification and https protocol is available.

The direction is simple.

1. enter your email address

2. Agree

3. Yes(or No)

4. choose No.2 (redirect http to https option)

And that’s it.

Important thing for the last step is opening the port 443.

Port 443 is a port for https.

Restart Nginx and access with your domain address.

Automatically https will welcome you.

Every 90 days, certification renewal is required and below is the command.

$ sudo certbot renew --dry-run

AWS : aws.amazon.com

CSS Combinators, make your CSS works easier (+,~, ,>)

Four combinators [Adjacent Sibling(+), General Sibling(~), Child(>), Descendant( )]

When set CSS Styles, below syntax is a basic.

h1 {
  color:#FFFF11;
  background: #000000;
}

.subTitle {
  font-size:13px;
  color:#FFFFFF;
  font-family:inherit;
}

#timeLine {
  background:gray;
}

But when you want to set Styles to a specific tag, using combinators is a smart selection.

combinators are mixed Styles. like ‘div + h1’ or ‘div > span’.

Any tags are mixable and there are four combinator types.

Adjacent Sibling (+)
General Sibling (~)
Child (>)
Descendant ( space )

1. Adjacent Sibling (+)

Adjacent Sibling uses + mark when specifies one element right after designated element.

h1 + p {
  color:orange;
}

Result is shown below.

<div>
  <h1>I'm h1 tag</h1>
  <p>I'm orange</p>
  <h2>I'm h2 tag</h2>
  <p>I'm a second p tag</p>
  <h1>I'm h1 tag again</h1>
  <p>I'm orange too</p>
<div>

There are two conditions for adjacent sibling.

Element should share the same parent and second element has to come only if right after first element.

In the above HTML result, there are three <p> tag lines but only two lines are matched to the condition.

Therefore only two matched elements are working as mentioned.

2. General Sibling (~)

General Sibling uses ~ mark when specifies elements come after designated element.

h1 ~ p {
  color:orange;
}

Result is shown below.

<div>
  <h1>I'm h1 tag</h1>
  <p>I'm orange</p>
  <h2>I'm h2 tag</h2>
  <p>I'm orange too</p>
<div>

There are two conditions for general sibling.

Element should share the same parent and second element has to come after first element.

In the above HTML result, every <p> tag after <h1>tag is working.

3. Child (>)

Use > marks when express child elements.

div > p {
  color:orange;
}

Result is shown below.

<div>
  <h1>I'm just h1 tag</h1>
  <p> I'm colored orange</p>
  <span>
    <p>I'm not the one</p>
  </span>
  <p> I also am colored orange</p>
</div>

Second element has to be a direct child of first element.

In the above HTML result, only two direct child lines are working.

Fifth line is not working because its position is parent-child-child.

4. Descendant

Use space when express descendant elements.

div p {
  color:orange;
}

Result is shown below.

<div>
  <h1>I'm just h1 tag</h1>
  <p> I'm colored orange</p>
  <span>
    <p>Count me in</p>
  </span>
  <p> I also am colored orange</p>
</div>

As long as second element is a descendant of the first element, every matched line is working.

Combinators are easy and simple for efficient CSS work.

I hope this post is helpful to your CSS design.

개발자의 영어 사전(Developers’ terms in English)

Developers’ terms in English and Korean for foreign works

공부와 번역 일을 하면서 문장 번역과 업무에 핵심이 되는 개발 용어들을 틈틈이 정리하여 업데이트하는 포스트

[A-Da-d](A,B,C,D)

anonymous function 익명 함수
arrow function 화살표 함수
ascending order 오름차순
assign 할당하다
braces { } 중괄호 (=curly brackets)
brackets [ ] 대괄호
boilerplate 상용구
cascade 연속, 종속
closure 클로저 (자바스크립트 클로저 포스팅)
curly brackets { } 중괄호 (=braces)
declarative programming 선언형 프로그래밍
deprecated 더 이상 사용되지 않는, 사라지게 될
descending order 내림차순
DOM (Document Object Model) 문서 객체 모델
duplicate 복사하다, 복제하다

[E-He-g](E,F,G,H)

execute 실행하다
first-class function 일등 함수 (함수와 변수를 구분하지 않는 함수)
function 함수
function call operator 함수 호출 연산자 ( )
functional programming 함수형 프로그래밍
global variable 전역변수

[I-Li-l](I,J,K,L)

IIFE (Immediately Invoked Function Expression) 즉시 실행 함수
immutable 불변의
imperative programming 명령형 프로그래밍
impure function 불순 함수
inheritance 상속
invoke 호출하다
LOC(Lines of Code) 코드 라인
local variable 지역변수
loop 루프 / 반복 실행

[M-Pm-p](M,N,O,P)

manipulate 조작하다
memoization 메모이제이션(동일한 계산(또는 함수 생성) 반복 시 이전 계산 값을 메모리에 저장하여 반복 계산을 피함)
migration 이동, 이주
method 메서드
mutable 가변의
object 객체
object literal 객체 리터럴
object oriented programming (OOP) 객체 지향 프로그래밍
operand 피연산자
opinionated 의견이 있는, 고집이 있는, 방안을 제시하는, 제한을 두는(Angular 프레임워크 특징 설명 시 자주 사용)
parallel 병행의, 병렬의
parentheses ( ) 소괄호
parse 분석하다
pure fuction 순수 함수
quotation mark 따옴표

[Q-Tq-t](Q,R,S,T)

reactive programming 반응형 프로그래밍
recursive function 재귀 함수
regular expression 정규 표현
REST (REpresentational State Transfer) REST
response 응답, 리스폰스
request 요청, 리퀘스트
robust 탄탄한, 강력한
shallow copy 얕은 복사(동일한 객체를 참조)
snippet 조각, 단편, 코드 조각
syntax 문법
ternary operator 삼항연산자

[U-Xu-x](U,V,W,X)

UI (User Interface) UI
unopinionated 의견이 없는, 방안을 제시하지 않는, 제한을 두지 않는(Express 프레임워크 특징 설명 시 자주 사용)
variable 변수

[Y-Zy-z\d](Y,Z,0,1,2,3,4,5,6,7,8,9,ETC)