javascript program diary

2018. 5. 13. 21:40

▶ "use strict"
간단히 말하면 use strict는 엄격한 코딩 규약을 적용시키는 것인데, *엄격한 코딩규약이란 무엇인지 *왜 사용하는지 등에 관해서는 아래의 링크를 참고하기 바란다.

http://jundol.kr/5
https://www.w3schools.com/js/js_strict.asp

▶ 함수나 변수명 앞에 underbar(_)를 사용하는 이유

자바에선 public인지, private인지 알릴 방법이 없기 때문에 _로써 이건 private입니다 라고 약속하는 것

function _listen() {
    _listenToLine();
    _listenToLineWorks();
    _listenToCotoha();
    _listenToBlApi();
    //_listenToMobile();
    // _listenToSkype();
}

▶표현식과 템플릿 문자열

-벡틱문자 (`)사이에 ${}을 이용하면, 문자열내에 변수나 수식 사용가능, 심지어 함수도 사용가능

-문자열의 개행을 기존 문자열 개행하듯 하면됨 \n 사용할 필요없음

template literals.라 불리며 String안에 변수가 위치하게 해준다.

이때 주의할 점은 싱글쿼테이션 '' 안에 들어가는 것이 아니라, `` 안에 들어가는 것임에 유의하자!

var foo = 'bar';
console.log(`Let's meet at the ${foo}`);
// Let's meet at the bar

1
2
3
4
5
6
7
8
9
let list = [1,2,3,4,5,6];
let num = list.filter(function(n){
    return n
});
 
 
console.log(`
num = ${num}
`);
Colored by Color Scripter
cs

https://stackoverflow.com/questions/35835362/what-does-dollar-sign-and-curly-braces-mean-in-a-string-in-javascript

▶nodejs에서 프로젝트 초기 설정파일을 불러오는 방법 : config 모듈

config모듈을 사용. 아래의 포스트 참고

http://valuefactory.tistory.com/205

▶nodejs에서 log를 기록해주는 모듈 : log4js

http://valuefactory.tistory.com/207

▶모듈의 함수나 프로퍼티를 외부로 보낼 수 있는 상태로 만드는 exports 키워드

흔히 require 키워드를 사용해 타모듈을 사용하는데, exports하지 않으면 require할 수 없다.

http://valuefactory.tistory.com/208

▶실행되는 js파일의 디렉토리를 나타내는 nodejs 내장 객체 : __dirname 객체

보통 프로젝트에서는 기본이 되는 프로젝트 루트 디렉토리에 app.js가 가장먼저 실행되는데, app.js의 상단부에 __dirname을 어떤 변수에 전역으로 담아놓고 사용한다.

app.js

'use strict';

global.__base = __dirname + '/';

(https://www.abeautifulsite.net/determining-your-apps-base-directory-in-nodejs)

nodejs internal object doc : https://nodejs.org/docs/latest/api/globals.html#globals_dirname

▶시스템 환경변수 값을 가져오는 내장 객체 : process.env 객체

nodejs에서는 다양한 내장객체를 보유하고 있는데 그중하나인 process는 process를 관장하는 객체들을 관리하는 객체이다. 이중 process.env는 process의 환경변수를 설정한다. cmd에서 node에 접속해 process.env 객체를 실행하면, 사용자의 환경에서 설정된 환경변수들이 나타나게 된다.

이때 주의해야할 점은, 환경변수를 수정하는 것은 가능하지만, 그러한 변경요소는 nodejs 프로세스 외부에서는 반영되지 않는 다는 점이다. 즉, 수정한 환경변수는 nodejs 프로세스 내에서만 사용할 수 있다.

(아래 환경변수들은 참고용으로 생략된 부분이 존재)

C:\dev\project\AI-HUB\test>node
> process.env
{ ALLUSERSPROFILE: 'C:\\ProgramData',
  APPDATA: 'C:\\Users\\daseul.kim\\AppData\\Roaming',
  CommonProgramFiles: 'C:\\Program Files\\Common Files',
  'CommonProgramFiles(x86)': 'C:\\Program Files (x86)\\Common Files',
  CommonProgramW6432: 'C:\\Program Files\\Common Files',
  COMPUTERNAME: 'CPX-SR1Y92T7IQK',
  ComSpec: 'C:\\WINDOWS\\system32\\cmd.exe',
  FSHARPINSTALLDIR: 'C:\\Program Files (x86)\\Microsoft SDKs\\F#\\4.1\\Framework\\v4.0\\',
  NVM_HOME: 'C:\\Users\\daseul.kim\\AppData\\Roaming\\nvm',
  NVM_SYMLINK: 'C:\\Program Files\\nodejs',
  OneDrive: 'C:\\Users\\daseul.kim\\OneDrive - Accenture',
  OS: 'Windows_NT',
  Path: 'C:\\Program Files (x86)\\Common Files\\Oracle\\Java\\javapath;%JAVA_HOME%\\bin;C:\\ProgramData\\Oracle\\Java\\javapath;C:\\WINDOWS\\system32;C:\\WINDOWS;C:\\WINDOWS\\System32\\Wbem;C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\;C:\\Program Files\\ODBC\\110\\Tools\\Binn\\;C:\\oraclexe\\app\\oracle\\product\\11.2.0\\server\\bin;C:\\Program Files (x86)\\;C:\\Program Files\\Microsoft VS Code\\bin;C:\\Users\\daseul.kim\\AppData\\Roaming\\nvm;C:\\Program Files\\nodejs',
  PATHEXT: '.COM;.EXE;.BAT;.CMD;.VBS;.VBE;.JS;.JSE;.WSF;.WSH;.MSC',
  PROCESSOR_ARCHITECTURE: 'AMD64',
  PROCESSOR_IDENTIFIER: 'Intel64 Family 6 Model 78 Stepping 3, GenuineIntel', 
  USERDOMAIN: 'DIR',
  USERDOMAIN_ROAMINGPROFILE: 'DIR',
  USERNAME: 'daseul.kim',
  USERPROFILE: 'C:\\Users\\daseul.kim',
  windir: 'C:\\WINDOWS' }
> process.env.port
undefined

https://nodejs.org/docs/latest/api/process.html#process_process

▶Error 생성자

const stack = (new Error().stack);

Error.prototype.stack

:The non-standard stack property of Error objects offer a trace of which functions were called, in what order, from which line and file, and with what arguments. The stack string proceeds from the most recent calls to earlier ones, leading back to the original global scope call.

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stack

★★★

▶generator 객체

Generator는 빠져나갔다가 나중에 다시 돌아올 수 있는 함수입니다. 이때 컨텍스트(변수 값)는 출입 과정에서 저장된 상태로 남아 있습니다.

Generator 함수는 호출되어도 즉시 실행되지 않고, 대신 함수를 위한 Iterator 객체가 반환됩니다. Iterator의 next() 메서드를 호출하면 Generator 함수가 실행되어 yield 문을 만날 때까지 진행하고, 해당 표현식이 명시하는 Iterator로부터의 반환값을 반환합니다. yield * 표현식을 마주칠 경우, 다른 Generator 함수가 위임(delegate)되어 진행됩니다.

이후 next() 메서드가 호출되면 진행이 멈췄던 위치에서부터 재실행합니다. next() 가 반환하는 객체는 yield 문이 반환할 값(yielded value)을 나타내는 value 속성과, Generator 함수 안의 모든 yield 문의 실행 여부를 표시하는 boolean 타입의 done 속성을 갖습니다. next() 를 인자값과 함께 호출할 경우, 진행을 멈췄던 위치의 yield 문을 next() 메서드에서 받은 인자값으로 치환하고 그 위치에서 다시 실행하게 됩니다.

function* idMaker(){
  var index = 0;
  while(index < 3)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // undefined
// ...

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function*

▶자바스크립트의 Class 선언

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes

▶Class 내부의 static 메서드

정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.

▶uuid 모듈

　고유 id 값을 생성한다던가 할때 사용하는 모듈인데, 난수를 랜덤하게 발생시켜준다.

const Uuid = require("node-uuid");

const uuid = Uuid.v1();

console.log(uuid);

//13533db0-5c33-11e8-9dca-737fa04a4ae9

▶co모듈과 yield

co 모듈의 가장 좆되는 점은, 가장 상위의 모듈에서만 co를 사용하면, 상위의 모듈에서 import하는 하위의 모듈에서 까지 yield를 자동 next처리 해준다는 점이다!!

위의 예에서보면, generatorTest2.js는 co모듈을 따로 사용하고 있지 않지만, co모듈을 사용하는 generatorTest1.js에서 호출 되고 있기 때문에 next()처리를 자동으로 하게된다.

//generatorTest1.js
const co = require('co');
const gT2 = require(__dirname + '/generatorTest2');

function p(str) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log(str);
      resolve(str+1);
    }, 1000);
  });
}

//동기화를 generator로 구현한 경우
co(function* genTest1() {
  var res1 = yield p(1);
  var res2 = yield p(res1);
  var res3 = yield gT2.genTest2(res2);
  console.log('generator1 then end');
});

//generatorTest2.js
function p(str) {
return new Promise(function(resolve) {
setTimeout(function() {
console.log(str);
resolve(str+1);
}, 1000);
});
}

exports.genTest2 = function* (res0) {
var res1 = yield p(res0);
var res2 = yield p(res1);
console.log('generator2 then end');
}

▶nodejs로 리모트 디버깅하기

노드제이에스는 리모트 디버깅을 제공한다. 구체적인 방법은 다음과 같다.

1. 리모트 디버깅을 사용할 에디터에 어느 서버에서 어느 포트를 이용해서 디버깅을 실행할지 컨피그파일 설정하기. 아래의 예는 visual studio code에 해당하는 것이고, 이 에디터는 프로젝트 안에 .vscode 폴더가 있으면 그 안에서 에디터 설정파일들을 찾아 읽는다. 디버깅 설정파일은 launch.json에 쓰여져 있다. 아래설정 파일에선 10.1.3.23서버의 3019포트를 디버깅 포트로 설정했다.

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "リモートポートへのアタッチ",
            "address": "10.1.3.23",
            "port": 3019,
            "remoteRoot": "/home/ec2-user/dev/AI_HUB/",
            "localRoot":"${workspaceRoot}" 
        }
    ]
}

2. 서버에서 노드 제이에스를 실행할시 --inspect 명령어를 옵션으로 추가한다.

NODE_ENV=unit-test node --inspect=3019 app.js

▶require는 새로운 인스턴스를 생성하는 함수가 아니다.

디버깅하다보면 require는 시스템이 구동되기전 우선적으로 먼저 불러지는 것을 알 수 있다. require은 새로운 인스턴스를 생성하는 것이 아니라, 단지 서로 다른 위치에 있는 파일들을 연결시켜주는 것을 뿐.따라서 새로운 인스턴스를 사용하고 싶다면 new해야한다.

▶http.createServer VS app.listen: 코드가 돌아가는 로컬을 서버의 역할을 하도록 하게 해준다.

먼저 http.createServer가 뭐하는 놈인지부터 알아보자.

var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.write('Hello World!');
res.end();
}).listen(8080);

여기까지보면, 이는 사실 express의 app 객체를 통해 app.listen(8080)하는 것과 차이가 없다. 도대체 뭐가 다른 걸까?

아래에 좋은 해답이 있어 긁어와봤다.(https://stackoverflow.com/questions/17696801/express-js-app-listen-vs-server-listen)

var express = require('express');
var app = express();

//app.configure, app.use etc

app.listen(1234);

and adding an http server:

var express = require('express');
var http = require('http');

var app = express();
var server = http.createServer(app);

//app.configure, app.use etc

server.listen(1234);

What's the difference?

The second form (creating an HTTP server yourself, instead of having Express create one for you) is useful if you want to reuse the HTTP server, for example to run socket.io within the same HTTP server instance:

var express = require('express');
var app     = express();
var server  = require('http').createServer(app);
var io      = require('socket.io').listen(server);
...
server.listen(1234);

However, app.listen() also returns the HTTP server instance, so with a bit of rewriting you can achieve something similar without creating an HTTP server yourself:

var express   = require('express');
var app       = express();

// app.use/routes/etc...

var server    = app.listen(3033);
var io        = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) {
  ...
});

▶res.sendStatus와 res.status().send의 차이

res.sendStatus는 단순하게 상태 번호만 전송해주고, res.status().send는 상태번호와 레스폰스를 동시에 보낼 수 있다.

res.sendStatus(200); // equivalent to res.status(200).send('OK')
res.sendStatus(403); // equivalent to res.status(403).send('Forbidden')
res.sendStatus(404); // equivalent to res.status(404).send('Not Found')
res.sendStatus(500); // equivalent to res.status(500).send('Internal Server Error')

▶변수를 파라미터로써 전달하면, 파라미터를 받은 함수가 처음의 변수를 계속 참조한다.

▶상황별 let과 const의 사용법

let : 원시형자료를 담는다 원시형자료 : 1. 숫자2. 문자열3. 불리얼4. null5. undefined6. 심볼(symbol)

const : 참조형 자료를 담는다

let : 변수를 담는다. let num =22; 로 선언했다가 나중에 num = 44;로 바뀔 수 있는 가능성이 있는 것을 변수라함

const : 상수를 담는다,상수는 대문자와 _ 스네이크바를 따르는게 암묵적 규칙이다. const GOOGLE_ID='da91love';

▶블록스코프{}안에서 사용한 let, const로 선언한 변수는, 그 블록안에서만 접근할 수 있다.

▶전역스코프, 함수스코프, 블록스코프에 유의하여 코딩하도록한다.

▶/** @param {데이터형} 파라미터명**/ 으로 파라미터 데이터형 표시하기

/**
 * expressを利用して指定したURLへのPOSTリクエストを待ち受ける。
 * @param {object} ws : object created when ws connected
 * @param {object} req : req object send when ws connected
 * @param {array} dataFromWs : pushed data array at _listenToTumblerStream
 **/

exports.startRecognize = function* (ws,req,dataFromWs){...}

▶즉시실행함수: 한번의 실행만 필요로 하는 초기화 코드 부분에 많이 사용

1
2
3
4
5
//일반 함수 표현식
(function(lang)console.log(lang))('javascript')
 
//arrow function 
((lang)=>console.log(lang))('javascript')
cs

▶Object.key, map, reduce를 사용하여, 객체안에 갱신된 값 캐치하기 (타이틀로만 보면 무슨말인지 모를거고 아래의 예를보기)

1
2
3
4
5
6
7
8
9
var entities = {"date":[1,1],"price":[],"day":[],"nights":[2,3]};
var values = Object.keys(entities).map(e => entities[e]);
var result = values.map(e => e.length);
var sum = result.reduce((a,b)=>{return a+b});
var final = Object.keys(entities).map(e => entities[e]).map(e => e.length).reduce((a,b)=>{return a+b});
console.log(values);
console.log(result);
console.log(sum);
console.log(final);
Colored by Color Scripter
cs

▶express에서 static으로 public과 bower_components를 동시에 설정하여 사용하기

https://stackoverflow.com/questions/21821773/configure-node-express-to-serve-static-bower-components

I use this setup:

app.use(express.static(__dirname + '/public'));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));

So any Bower components are loaded from HTML like this:

<script src="/bower_components/..."></script>

And any other client-side JS/CSS (in public/) are loaded like this:

<script src="/js/..."></script>

▶배열의 최대 최소값 : Math.min.apply(null, array), Math.max.apply(null, array),

https://programmingsummaries.tistory.com/108

▶javascript에서 함수 실행시간 측정

http://vnthf.logdown.com/posts/2016/10/06/javascript

var selector = "f1"
console.time(selector);
f1();
console.timeEnd(selector);

f1: 0.024ms

▶10진수 -> 2진수

https://unikys.tistory.com/334

var dec = 123;
var bin = dec.toString(2); // === "1111011"

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

▶default

default

저작자표시 비영리 변경금지

'C Lang > JS Program Diary' 카테고리의 다른 글

바벨에 필요한 모든 것 : 실행방법, 주요 함수, 사용법 (0)	2020.02.18
Babel이란? (0)	2020.02.18
New features of ES6, ES7, ES8, ES9 and ES10 (0)	2020.02.12
JavaScript 버전별 표준 (1)	2019.09.06

가치관제작소