javascript에서 제공되는 console methods

오늘 javascript 강좌를 보다가 다음과 같은 코드를 보았다.

console.time('Label');
... 성능측정(시간 측정)을 하려는 코드
console.timeEnd('Label');

... 결과
Label: 13998.528076171875ms

time이라는 method는 인자로 받은 문자열을 기준으로 실행 시간의 시작을 의미하고, timerEnd method는 인자로 받은 문자열을 기준으로 실행 시간을 화면에 표출하고 종료 한다.
이외에 timeLog도 제공하며 시작이후 지금가지 시간을 표기한다.

console.time('Label');
... 성능측정(시간 측정)을 하려는 코드

console.timeLog('Label');
... 출력
Label: 7327.245849609375ms

console.timeEnd('Label');

... 결과
Label: 13998.528076171875ms

기본적으로 console의 info, debug, trace, log, warn 과 같이 로그 레벨을 기준으로 사용하거나, 특별하게 dir(object 형식으로 출력) method 정도 사용해보았다.

금일 알게된건 console에 더 많은 옵션들이 존재 한다는 것이다.

console의 옵션 정리

  • Console.assert()
    • 첫 번째 매개변수가 false인 경우 메시지와 스택 추적을 출력합니다.
  • Console.clear()
    • 콘솔의 내용을 지웁니다.
  • Console.count()
    • 주어진 라벨로 메서드를 호출한 횟수를 출력합니다.
  • Console.countReset()
    • 주어진 라벨의 횟수를 초기화합니다.
  • Console.debug()
    • "debug" 중요도로 메시지를 출력합니다.

참고: Chromium 브라우저는 58 버전 이후 브라우저 콘솔의 "Verbose" 레벨을 선택하지 않으면 이 메서드의 출력 결과가 보이지 않습니다.

  • Console.dir()

    • 주어진 JavaScript 객체의 속성 목록을 상호작용 가능한 형태로 표시합니다. 속성 값이 다른 객체라면 펼쳐서 살펴볼 수 있습니다.
  • Console.dirxml()

    • 객체를 XML/HTML 요소 형태로 나타낼 수 있으면 그렇게 표시하고, 아닐 경우 JavaScript 객체 형태로 표시합니다.
  • Console.error()

    • 오류 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
  • Console.exception() 표준 아님, 사용하지 않기를 권고

    • error()의 별칭입니다.
  • Console.group()

    • 새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그룹을 나오려면 groupEnd()를 호출하세요.
  • Console.groupCollapsed()

    • 새로운 인라인 그룹을 생성해, 이후 모든 출력을 한 단계 들여씁니다. 그러나 group()과 달리, groupCollapsed()로 생성한 그룹은 처음에 접혀 있습니다. 그룹을 나오려면 groupEnd()를 호출하세요.
  • Console.groupEnd()

    • 현재 인라인 그룹을 나옵니다.
  • Console.info()

    • 정보 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
  • Console.log()

    • 일반 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.
  • Console.profile()

    • 브라우저의 내장 프로파일러(Firefox 성능 측정 도구 등)를 실행합니다. 선택 사항으로 프로파일에 이름을 붙일 수 있습니다.
  • Console.profileEnd()

    • 프로파일러를 멈춥니다. 프로파일 결과는 브라우저의 성능 측정 도구(Firefox 성능 측정 도구 등)에서 확인할 수 있습니다.
  • Console.table()

    • 표 형태의 데이터를 표에 그립니다.
  • Console.time()

    • 주어진 이름의 타이머를 실행합니다. 하나의 페이지에서는 최대 10,000개의 타이머를 동시에 실행할 수 있습니다.
  • Console.timeEnd()

    • 지정한 타이머를 멈추고, 소요시간을 출력합니다.
  • Console.timeStamp() 표준 아님

    • 브라우저의 타임라인이나 워터폴에 마커를 추가합니다.
  • Console.trace()

    • 스택 추적을 출력합니다.
  • Console.warn()

    • 경고 메시지를 출력합니다. 추가 매개변수와 함께 문자열 치환을 사용할 수 있습니다.

몰라서 쓰지 못했던 옵션이 6개도 넘는다. 앞으로 프로젝트에서 많이 사용해보자!

출처

Posted by lahuman

댓글을 달아 주세요

느낌표 2개의 의미

const x = '';
!!x; //false

!!를 사용하면 빈값 등(i.e., except for false, 0, "", null, undefined, and NaN)은 false를 그 외엔 true를 리턴한다.

참고

Posted by lahuman

댓글을 달아 주세요

Reactjs 초기 프로젝트 구성하기

Reactjs 초기 프로젝트를 구성하려는 방법 중 가장 쉽고 널리 알려진 것은 Create React App를 이용하는 방법이다. 아래와 같이 실행하면 바로 프로젝트 구성이 완료된다.

npx create-react-app my-app
cd my-app
npm start

아쉬운 점은 무엇이 설치 되었는지 내가 알지 못하고, 또한 컴파일에 오랜 시간이 걸린다.

npm run eject를 이용해서 묶음을 풀어 보면 너무 많은 것들이 설치 되어 있다.

그래서 방법을 찾아 보던 중 @babel/preset-env와 plugins이라는 유튜브를 보고 한땀씩 진행을 해보았다.

우선 나에게 필요한 기본 모듈은 다음과 같다.

기본 모듈

  • react
  • react-dom
  • react
  • react-router-dom
  • dotenv
  • axois

이들을 모두 설치하고 기본 테스트까지 된 프로젝트를 만들어 보았다.

진행하면서 수정사항이 바로 바로 반영되는 React Hot Loader도 알게되어 추가 하였다.

또한 컴파일을 위해 웹팩 설정을 하고 한땀 한땀 진행해보았다.

어려운듯 쉬운듯 꽤 많은 시간이 소비 하고야 내가 원하는 결과를 확인 할 수 있었다.

ReactJS-Start

많이 삽질하면서 많이 배운 시간이었다.

참고자료

Posted by lahuman

댓글을 달아 주세요

Reactjs] Create-react-app 시작하기

reactjs 시작은 다음과 같다.

$> npx create-react-app my-app
$> cd my-app
$> npm start

위와 같이 명령어를 실행하여 기본 react 구조와 모듈이 포함된 프로젝트를 생성한다. 생성된 프로젝트의 구조는 다음과 같다.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

이후 프로젝트에 router, design 관련 모듈들을 추가 해서 반영하면된다.

참고자료

Posted by lahuman

댓글을 달아 주세요

How to fix “this is undefined” in Vue.

Vue를 써보고 있는데, Vue 안에 method를 선언하고 this를 호출하니 undefined가 발생하였다.

export default {
  methods: {
    sayHello: () => {
    	this.val = 'hello';
    	console.log(this.val);
    }
  },
  data() {
	  return {
	  	val: ''
	  }
  }
}

#### 결과
this is undefined

원인을 찾아 보니 다음과 같은 내용을 확인했다.

If you try to access this from inside of an arrow function that’s on a Vue component, you’ll get an error because this doesn’t exist!

Vue 구성 요소에있는 화살표 함수 내부에서 this에 액세스하려고 하면 존재하지 않기 때문에 오류가 발생합니다!

Vue 구성 요소 안에서 this를 사용하려면 화살표 함수를 사용하지 말아야 한다는 내용이다. 다음과 같이 수정하면 잘 동작한다.

export default {
  methods: {
    sayHello() {
    	this.val = 'hello';
    	console.log(this.val);
    }
  },
  data() {
	  return {
	  	val: ''
	  }
  }
}

#### 결과
hello

화살표 함수는 익명 함수를 만들때 사용하며, 다음과 같은 이유로 사용됩니다.

  • 보다 짧고 응축된 구문
  • 향상된 가독성
  • this 주변상황에서 취해진다.

Vue의 method 내부에서 사용하는 것은 크게 문제가 없지만, method 자체를 화살표 함수로 선언할 경우 this를 사용할 수 없다.

# Vue 내부에서 화살표 함수 사용 예
data() {
  return {
    match: 'This is a message',
  };
},
computed: {
  filteredMessages(messages) {
    console.log(this); // Our Vue component
    
    const filteredMessages = messages.filter(
      // References our Vue Component
      (message) => message.includes(this.match)
    );
    
    return filteredMessages;
  }
}

참고 자료


Posted by lahuman

댓글을 달아 주세요

D3에서 긴 텍스트에 대한 처리

이전 포스팅의 텍스트 줄바꿈 처리는 모든 브라우져에서 동작 하지 않는다. 확인 해본 결과 Firefox에서는 동작 하지만, 많이 사용되는 Chrome에서는 동작 하지 않는다.

모든 브라우져에서 동작하기 위한 코드를 찾아본 결과 Wrapping Long Labels을 발견 할 수 있었다.

위의 코드에서 wrap을 해주는 매소드에 보면 text 태그 하단에 들어가는 tspan이라는 태그를 발견 하였는데, 이를 이용하여 여러 라인 처리를 하는 것을 확인했다. 이를 활용하면 긴 문장에 대한 여러 방법으로 처리가 가능 하다.

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

SVG tspan element을 보면 tspan 요소는 SVG에서 여러 텍스트를 그리는데 사용되는 테그로 설명 된다. 해당 태그를 이용하면 첨부된 소스를 사용하지 않고도 여러 라인의 문자열 처리가 가능하다.

라이선스 관련

Released under the GNU General Public License, version 3.

참고 자료

  1. Wrapping Long Labels
  2. SVG tspan element


Posted by lahuman

댓글을 달아 주세요

[JAVASCRIPT] - 주소창의 parameter 제거

보통은 주소창에 parameter 값이 다음과 같이 표출된다.

https://lahuman.github.io/posts/?lang=ko

이때 해당 주소에서 parameter 값만 제거 하고 싶을 경우 다음의 스크립트를 이용하면 간단히 처리 할 수 있다.

history.replaceState({}, null, location.pathname);

parameter가 제거된 값은 다음과 같다.

https://lahuman.github.io/posts/

Posted by lahuman

댓글을 달아 주세요

Array.prototype.reduce VS for loop



Array.prototype.reduce Syntax


  arr.reduce(callback [, initialValue] ) 

  


  

[1, 2, 3].reduce(function(previousValue, currentValue, index, array){
      ....
      return currentValue
  }, '');
  • previousValue : initialValue(사용자가 정의한 초기값) 혹은 currentValue의 이전 index 값 ( arr[index-1] );
    처음 실행시 초기값이 있으면 초기값이 전달 되며, 초기값이 없을 경우 배열의 0번째 index 배열값이 전달 된다.
    이후 항상 currentValue의 이전 index 배열값이 전달 된다.   
  • currentValue : 배열의 현재 값
  • index : 현재 배열의 인덱스
  • array : reduce method가 호출된 배열
  • initialValue : 초기값 위에서는 '' 으로 되어 있음. 



Array.prototype.reduce Sample

var array = [1, 5, 10, 15, 20];
/* 초기값(initialValue)이 없을 때의 Array.prototype.reduce의 파라미터 값 확인 */
array.reduce(function(previousValue, currentValue, index, array) {
  console.log("index:"+index + ", previousValue:" + previousValue +", currentValue:"+currentValue +", array:" + array);
  return currentValue;
});

/* 초기값(initialValue)이 없을 때의 Array.prototype.reduce의 파라미터 값 확인 */
array.reduce(function(previousValue, currentValue, index) {
  console.log("index:"+index + ", previousValue:" + previousValue +", currentValue:"+currentValue );
    return currentValue;
}, undefined);


/* forEach 는 return 이 없다. */
array.forEach(function(element, index, array){
   console.log(element + " :: " + index + " :: " + array);
});

/* 일반적인 for loop */
var sum = 0;
for(var i=0; i < array.length; i++) {
  sum += array[i];
}
console.log(sum);


/* 초기값 (initialValue) 0을 준 경우 */
sum = 0;
sum = array.reduce(function(previousValue, currentValue, index) {
    return sum += currentValue;
}, 0);
console.log(sum);

/* 초기값 (initialValue)을 주지 않은 경우 */
sum = 0;
sum = array.reduce(function(previousValue, currentValue, index) {
    return sum += currentValue;
}, 0);
console.log(sum);



참고자료

 

 Understand Javascript Array Reduce in 1 Minute

 https://www.airpair.com/javascript/javascript-array-reduce#javascript-reducing-vs-looping


 Mozilla Docs for Array.prototype.reduce

 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce


 Facebook >> 생활코딩

 https://www.facebook.com/groups/codingeverybody/permalink/1058801940827008/



Posted by jabsiri

댓글을 달아 주세요

웹에서 간트 차트를 만들수 있는 쉽고 간단한 라이브러리를 추천 합니다.






사용 법은 다음과 같습니다.

<link rel="stylesheet" type="text/css" href="jsgantt.css" />
<script language="javascript" src="jsgantt.js"></script>
<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
<script>

  var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');
  g.setShowRes(1); // Show/Hide Responsible (0/1)
  g.setShowDur(1); // Show/Hide Duration (0/1)
  g.setShowComp(1); // Show/Hide % Complete(0/1)
  g.setCaptionType('Resource');  // Set to Show Caption

  if( g ) {

    g.AddTaskItem(new JSGantt.TaskItem(1,   'Define Chart API',     '',          '',          'ff0000', 'http://help.com', 0, 'Brian',     0, 1, 0, 1));
    g.AddTaskItem(new JSGantt.TaskItem(11,  'Chart Object',         '2/20/2008', '2/20/2008', 'ff00ff', 'http://www.yahoo.com', 1, 'Shlomy',  100, 0, 1, 1));
    g.AddTaskItem(new JSGantt.TaskItem(12,  'Task Objects',         '',          '',          '00ff00', '', 0, 'Shlomy',   40, 1, 1, 1));
    g.AddTaskItem(new JSGantt.TaskItem(121, 'Constructor Proc',     '2/21/2008', '3/9/2008',  '00ffff', 'http://www.yahoo.com', 0, 'Brian T.', 60, 0, 12, 1));
    g.AddTaskItem(new JSGantt.TaskItem(122, 'Task Variables',       '3/6/2008',  '3/11/2008', 'ff0000', 'http://help.com', 0, '',         60, 0, 12, 1,121));
    g.AddTaskItem(new JSGantt.TaskItem(123, 'Task Functions',       '3/9/2008',  '3/29/2008', 'ff0000', 'http://help.com', 0, 'Anyone',   60, 0, 12, 1, 0, 'This is another caption'));
    g.AddTaskItem(new JSGantt.TaskItem(2,   'Create HTML Shell',    '3/24/2008', '3/25/2008', 'ffff00', 'http://help.com', 0, 'Brian',    20, 0, 0, 1,122));
    g.AddTaskItem(new JSGantt.TaskItem(3,   'Code Javascript',      '',          '',          'ff0000', 'http://help.com', 0, 'Brian',     0, 1, 0, 1 ));
    g.AddTaskItem(new JSGantt.TaskItem(31,  'Define Variables',     '2/25/2008', '3/17/2008', 'ff00ff', 'http://help.com', 0, 'Brian',    30, 0, 3, 1, ,'Caption 1'));
    g.AddTaskItem(new JSGantt.TaskItem(32,  'Calculate Chart Size', '3/15/2008', '3/24/2008', '00ff00', 'http://help.com', 0, 'Shlomy',   40, 0, 3, 1));
    g.AddTaskItem(new JSGantt.TaskItem(33,  'Draw Taks Items',      '',          '',          '00ff00', 'http://help.com', 0, 'Someone',  40, 1, 3, 1));
    g.AddTaskItem(new JSGantt.TaskItem(332, 'Task Label Table',     '3/6/2008',  '3/11/2008', '0000ff', 'http://help.com', 0, 'Brian',    60, 0, 33, 1));
    g.AddTaskItem(new JSGantt.TaskItem(333, 'Task Scrolling Grid',  '3/9/2008',  '3/20/2008', '0000ff', 'http://help.com', 0, 'Brian',    60, 0, 33, 1));
    g.AddTaskItem(new JSGantt.TaskItem(34,  'Draw Task Bars',       '',          '',          '990000', 'http://help.com', 0, 'Anybody',  60, 1, 3, 1));
    g.AddTaskItem(new JSGantt.TaskItem(341, 'Loop each Task',       '3/26/2008', '4/11/2008', 'ff0000', 'http://help.com', 0, 'Brian',    60, 0, 34, 1, "332,333"));
    g.AddTaskItem(new JSGantt.TaskItem(342, 'Calculate Start/Stop', '4/12/2008', '5/18/2008', 'ff6666', 'http://help.com', 0, 'Brian',    60, 0, 34, 1));
    g.AddTaskItem(new JSGantt.TaskItem(343, 'Draw Task Div',        '5/13/2008', '5/17/2008', 'ff0000', 'http://help.com', 0, 'Brian',    60, 0, 34, 1));
    g.AddTaskItem(new JSGantt.TaskItem(344, 'Draw Completion Div',  '5/17/2008', '6/04/2008', 'ff0000', 'http://help.com', 0, 'Brian',    60, 0, 34, 1));
    g.AddTaskItem(new JSGantt.TaskItem(35,  'Make Updates',         '10/17/2008','12/04/2008','f600f6', 'http://help.com', 0, 'Brian',    30, 0, 3,  1));



    g.Draw();	
    g.DrawDependencies();


  }
  else
  {
    alert("not defined");
  }

</script>

주요 포인트 :

1. 표출 하려는 div 밑에 꼭 "var g = new JSGantt.GanttChart('g',document.getElementById('GanttChartDIV'), 'day');" 이부분을 선언 하셔야 동작 합니다.

2. jsGantt는 다시 그리기를 지원 하지 않습니다. 화면 재로딩을 이용하시기를 추천 드립니다.

3. 라인이 조금씩 깨집니다. 길어질 경우 보기 안좋을 수 있습니다.



URL : http://www.jsgantt.com/

DOWNLOAD : https://code.google.com/p/jsgantt/

Posted by lahuman

댓글을 달아 주세요





requirejs 는 어디에 쓰는 물건인가.


requirejs 홈페이지에 가면 "RequireJS is a JavaScript file and module loader" 라고 제일 첫 줄에 나온다.

"자바스크립트 파일과 모듈 로더다."


아직 뭔지 와닫지 않는다..


모듈이란. 

일반적으로 컴퓨터 분야에서의 모듈은 "독립되어 있는 하나의 소프트웨어 또는 하드웨어 단위를 지칭하는데 사용된다. "

라고 네이버 백과사전에 나와있다.


조금도 쉽게 말하면 JavaScript에서 jquery도 모듈이고, util성으로 만든 function들의 모음 js도 하나의 모듈로 볼수 있다.

requirejs는 이런 모듈을 로딩하는 역활을 하는것이다.

자 그럼 requirejs를 사용하기 위해서는 JavaScript 모듈화 작업이 필요하다.


모듈화.

JavaScript 모듈화 및 로더 작업을 할수 있는 방법으로 CommonJS 그룹과 AMD 그룹에서 명세를 정의해 놓고 있다. 


CommonJS는 서버 사이드 JavaScript에서의 모듈정의와 모듈로드에 초점이 맞춰저 있고 ( 대표 적인예 node.js) 

AMD(Asynchronous module definition) 는 브라우저 환경 ( 네트워크를 통해 모듈을 받아서 처리해야하는 ) 에서 모듈 정의와 모듈 로드에 초점이 맞춰저 있다. ( 대표적인 예 : require.js )

* 물론 둘다 서버사이드와 브라우저 환경에서 모듈화를 정의하고 사용할수 있지만 각자 특화된 부분이 있다는 것이다.


이 둘의 공통점은 모듈화에 있는데 이는 CommonJS에서 AMD가 파생된 그룹이기 때문이다.



RequireJS

그럼 제일 첫 부분에 적었던  "RequireJS is a JavaScript file and module loader" 부분이 약간은 이해가 될지 모르겠다.

RequireJS는 AMD모듈 정의서에 따라 개발된 대표적인 JavaScript 로더 중 하나로 AMD 모듈 로딩 표준을 따르기에 기본적으로 모든 모듈이 비동기적이다.

또한 javascript 모듈의 의존관계등의 관리도 쉽게 할수 있게도와준다.



참고자료


[1] NAVER helloworld - NHN 모바일Ajax팀 손병대

JavaScript 표준을 위한 움직임: CommonJS와 AMD 

http://helloworld.naver.com/helloworld/12864


[2] Nonblock Blog - Hanghee Yi

RequireJS – JavaScript 파일 및 모듈 로더 

http://blog.javarouka.me/2013/04/requirejs-javascript.html



Posted by jabsiri

댓글을 달아 주세요