기본 콘텐츠로 건너뛰기

라벨이 javascript인 게시물 표시

[javascript] javascript arrow function과 array.prototype의 조합

오늘은 javascript의  arrow function 을 좀더 간단하게 사용하는 방법에 대해서 알아보도록 하겠습니다. arrow function 은  => 의 형태로 함수를 표현하는 것을 의미 합니다. 함수 선언 함수 작성방법 1  : 일반적인 function 사용 let arrowFunctionTest = function ( arg1 ) { console . log ( arg1 ); return arg1 ; } arrowFunctionTest ( 'test' ); 함수 작성방법 2  : =>를 사용 let arrowFunctionTest = ( arg1 ) => { console . log ( arg1 ); return arg1 ; } arrowFunctionTest ( 'test' ); 2에서는 function대신에 =>를 사용하여 함수 표기를 하였습니다. 처음 보면 굉장히 어색할 수도 있지만 계속 보다보면 1번보다 2번이 더 익숙해 질 것입니다. callback 인자로 넘기기 자 그럼 이번에는 함수 선언이 아닌 arrow function을 callback인자로 넘겨보도록 하겠습니다. 콜백 인자 1  : 일반적인 function 사용 let list = [1, 2, 3, 4, 5]; let newList = list.map(function(item){ return item + 1; }); 콜백 인자 2  : =>를 사용 let list = [1, 2, 3, 4, 5]; let newList = list.map((item) => { return item + 1; }); javascript코드를 작성을 하다보면 리스트에서 값을 조작하여 새로운 리스트를 만드는 경우가 상당히 많습니다. 저는 이런 경우 코드를 아무리 잘 짜도 왠지 깔끔하지 않는것 같은 느낌이 들었

webpack을 이용한 javascript 모듈관리

안녕하세요 멍개입니다. javascript로 구현가능 부분이 많아지면서 javascript 코드의 양이 점점 많아지고 있습니다. 코드의 양이 많아질 수록 모듈화를 통해 코드를 관리를 하게 됩니다. javascript언어 자체에서는 모듈 시스템을 지원을 하지 않기 때문에 여러가지 도구를 활용하게 됩니다 그중의 하나가 webpack입니다. 즉, webpack은 javascript 모듈관리 도구입니다. webpack말고도 commonJS나 AMD(Asynchronous Module Definition)이 있습니다. webpack은 이 두가지의 기능을 모두 지원을 하기때문에 다른 도구보다 많이 사용되고 있습니다. webpack을 사용하면 어떤식으로 모듈을 관리를 할 수 있는지 알아보겠습니다. 우선 우리는 webpack을 설치를 해야합니다. 하지만 npm이 설치되어 있다면 매우 손쉽게 설치를 할 수 있습니다. $ npm install -g webpack 로컬환경에서 전역으로 사용하기위해 -g 글로벌 옵션 설정을 해줍니다. 아래와 같이 코드를 작성해줍니다. // test.js module.exports = {message: 'webpack'}; object하나를 외부에서 사용 할 수 있도록 하였습니다. // app.js console.log(require('./test')); 이제 test모듈을 app에서 사용하기 위해 require을 사용합니다. 이렇게 만든 app은 브라우저에서 직접 실행 할 수 없습니다 webpack을 이용하여 웹브라우저에서 사용할 수 있는 형태로  컴파일을 해주어야 합니다. 컴파일을 하지 않은채 웹 브라우저에서 호출을 해보도록 하겠습니다. 1 2 3 4 5 6 7 8 9 10 < !DOCTYPE   html > < html   lang = "en" > < h

[javascript] arrow function VS function this binding

es6에서는 arrow function을 사용한다.  근데 arrow function과 일반 function은 엄연히 다르다. app.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 this.test  =   "global variable" ;   var  normalFunctionTest  =  {     test :  "mung" ,     c :  function (){          console .log(this.test);     } }   var  arrowFunctionTest  =  {     test :  "mung" ,     c : () = > {          console .log(this.test);     } }   normalFunctionTest.c(); arrowFunctionTest.c(); cs $ node app.js mung global variable https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 가장 상단에 arrow function은 this를 바인딩 하지 않는다라고 설명이 되어있다. 그렇기 때문에 arrow function은 객체 메서드를 생성할 때 쓰지 않는 것이좋다. 문서를 보면 중간에 new와 함께 생성자로 사용하지 말라고 명시가 되어있다. Use of the new operator Arrow functions cannot be used as constructors and will throw an error when used with new. 이제 생성자에서 this 바인딩을 확인을

[bot] javascript에서 슬랙 연동

slack이라는 메신저를 이용하여 봇을 만들어 보자. python과 javascript를 이용하여 각각 만들어 보겠다. 우선 슬랙 챗봇을 만들기 위해서는 API발급을 받아야 한다. https://api.slack.com/docs/oauth-test-tokens 발급 받은 API를 잘 보관을 해두자  j avascript javascript에서는 slack-client라는 모듈을 통해 slack과 연동이 가능하다. $ npm install -s slack-client #모듈 설치 slack과 연동을 할 때에는 슬랙에서 발생된 이벤트를 잡고, 슬랙으로 메세지를 보내는것 이 두가지만 해주면 된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var  RtmClient  =  require( 'slack-client' ).RtmClient; var  WebClient  =  require( 'slack-client' ).WebClient; var  token  =   'xoxp-57134296533-58450905505-107647575157-0c9b2b4cd35b7ffdc28295fa60f4de41' ; var  web  =   new  WebClient(token); var  rtm  =   new  RtmClient(token, {logLevel:  'error' }); rtm.start(); var  RTM_EVENTS  =  require( 'slack-client' ).RTM_EVENTS; rtm.on(RTM_EVENTS.MESSAGE,  function  (message) {      var  channel  =  message.channel;      var

node.js python-shell을 활용하여 python 실행

node.js에서 모듈을 활용하면 c++,c나 python 코드를 불러와서 실행을 시킨 후, 그 결과값을 반환할 수 있다. 이번에는 python을 불러와서 실행하는 방법을 알아보려고 한다. $ npm install python-shell $ npm install python-shell -save 모듈을 설치를 해주자(모듈만 설치할떄는 첫번쨰 방법, 해당 모듈을 package에 추가시킬 때는 두번째 방법을 이용하여 사용을 하면 된다 app.js 1 var PythonShell  =  require( 'python-shell' ); cs 모듈을 추가를 해주자 이제 해당 모듈을 이용하여 파이썬 파일을 불러올 다양한 옵션을 설정해줄 옵션 객체를 정의를 하자 옵션객체 설정 1 2 3 4 5 6 7 var options  =  {   mode:  'text' ,   pythonPath:  '' ,   pythonOptions: [ '-u' ],   scriptPath:  '' ,   args: [ 'value1' ,  'value2' ,  'value3' ] }; Colored by Color Scripter cs option을 보아하니 다양한 것 들이 존재한다. 우선 mode는 text와 json이 존재한다. pythonPath와 scriptPath는 각각 파이썬이 설치된 경로 해당 스크립트 파일이 설치된 경로인데 값이 없어도 정상적으로 실행이 된다. 이유는 해당 pc에서 이미 파이썬 설치경로가 환경변수로 잡혀있기 때문이다. pythonOptions는  하나하나의 설명을 하지 않겠다.(파이썬을 실행 할때 어떤 방식으로 실행할지 결정해주는 것들이라고 보면 된다.) 이제