Reimaginer

WebdriverIO test 5 + 5 분 완성 참고 http://webdriver.io/ https://www.youtube.com/watch?v=vPes7NKeYno&t=2s https://www.youtube.com/watch?v=XGrHJ4rKV5w&t=200s Selenium Standalone Test 해보기 1 - 테스트할 폴더 생성 및 초기화 mkdir webdriverio-test cd webdriverio-test npm init -y 2 - selenium-standalone 설치 및 실행 sudo npm install -g selenium-standalone sudo selenium-standalone install sudo selenium-standalone start 맥에서는 ..

파라미터 기본값 함수가 파라미터 값을 받지 못할 때 (undefined 이면) 기본값을 할당하는 구문이 추가되었습니다. function hello(firstName ='Barack', middleName = 'Hussein', lastName = 'Obama') { console.log('hello, ' + firstName + ' ' + middleName + ' ' + lastName); } hello(); hello('Michelle', 'L.R.'); hello(undefined, undefined, 'White'); [결과] hello, Barack Hussein Obama hello, Michelle L.R. Obama hello, Barack Hussein White 기본 값 자리에 표현식을..

Const ES6 이전에는 상수(읽기 전용 변수, 값을 다시 할당할 수 없는 변수)를 만드는 키워드가 없었습니다. 이제 const라는 키워드로 상수를 만들 수 있습니다. const pi = 3.141; let r = 2; console.log(pi * r * r); pi = 12; [결과] 12.564 TypeError: Assignment to constant variable. 상수의 scope const로 선언한 변수는 let으로 선언한 변수와 스코프 규칙이 같습니다. 즉, 블록 스코프입니다. 상수의 객체 참조 원시 타입이 아닌 객체를 상수로 만들게 되면 참조값(reference)가 저장 됩니다. 이 뜻은 const로 선언한 변수에 객체를 할당하게 되면 객체가 아닌 참조값이 고정(불변)되는 것입니다...

var vs let var 는 함수 스코프, let 은 블록 스코프 기존의 var는 함수 스코프 변수입니다. 우리가 기본적으로 알고 있는 블록 스코프가 아닙니다. 함수 내에 어디서든 선언하면 접근 가능합니다. (관련 내용 : http://chanlee.github.io/2013/12/10/javascript-variable-scope-and-hoisting/) 그래서 기본적으로 헤깔립니다. 코드가 길어지면 길어질 수록 변수가 선언된 곳을 찾는 것이 어려워집니다. var a = 12; function myFunction() { console.log(a); var b = 13; if(true) { var c = 14; console.log(b); } console.log(c); } myFunction(); ..

저는 현재 3년차 개발자로, 주로는 자바개발을 하고 자바스크립트도 가끔합니다. 예전에 인사이드 자바스크립트라는 책으로 공부를 했었는데요, 지금은 많이 까먹었습니다만, 그래도 프로토타입이 뭔지는 압니다. 그러나 현재 엄청나게 다양해지고 발전한 프론트앤드 기술은 잘 모릅니다. 이런 수준에서 이 책의 리뷰를 적어보겠습니다. 저는 지금 신림 프로그래머 그룹에서 진행하는 프론트엔드 스터디를 하고 있습니다. 제가 맡은 부분은 ECMAScript6(이하 ES6)입니다. 공식 문서를 보는 것을 약간 무서워(?)하고 블로그의 지식으로는 둥둥 떠다니는 지식들을 조립할 수능력이 부족하여 책을 추천받아서 읽어보았습니다. 책은 ECMAScript6 길들이기(나라얀 프루스티 저, 이일웅 역) 입니다. 책을 간단히 소개드리면, 2..

비호환 엔진에서 ECMA Script 6 실행 폴리필 / polyfill비호환 엔진에 없는 코드의 기능을 지원하기 위해서 삽입하는 코드 조각이다. 예를 들어서 ES6에서 제공하는 심볼을 사용하기 위해서는 core.js 같은 폴리필을 사용할 수 있다. 그러나 ES6 모든 기능에 폴리필을 쓸 수 없는(만들 수 도 없는) 기능들이 존재한다. 폴리필 목록은 아래 링크에서 볼 수 있다.https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#ecmascript-6-harmony (ES6)트랜스파일러 / transpilerES6 트랜스파일러는 ES6 소스코드를 ES5 소스 코드로 변환하여 거의 모든 자바스크립트 엔진에서 사용할 수 있게 해준..

이번에는 아라한사님과 재린님이 webpack에 대해서 준비해주셨습니다.https://webpack.github.io/ 기술적으로 많이 이해하지는 못했지만, 이번 스터디를 통해서 프론트와 백앤드를 분리하는 시나리오를 배웠습니다.많은 것을 알려주셨지만, 제가 얻은 얕고 좁은 지식을 정리해볼까 합니다. 우선 웹팩은 웹의 클라이언트 리소스들을 번들링(패키징)하는 도구입니다. 공홈에가면 웹팩 모듈 번들러라고 하는 군요. 모듈은 우리가 기본적으로 생각하는 기능단위를 생각하시면 될 듯합니다. 번들링은 검색해보면 세트로 묶어서 파는 것이라는 내용이 많이 나오는데요, 웹팩의 번들링은 js, css, img를 세트로 묶어주는 것을 말합니다. 이미지까지 묶인다는게 참 신기했습니다. 개념은 이 정도로 이해했고, 그러면 어떻게..

최근 자바스크립트에 정말 관심이 많습니다.1주 전부터는 사내에서 사람들을 모집하여 Node.js 스터디를 하고 있습니다. 책은 윤인성님의 모던 웹을 위한 Node.js 프로그래밍(3판) 입니다.예제 코드는 https://github.com/Yeomyeong/nodejs-study 여기에 잘 정리하고 있습니다. 현재 200쪽 가량 읽었는데 술술 읽혀서 참 좋습니다.초심자가 보기에는 참 좋은 책인듯 합니다. 끝까지 읽으면 리뷰를 좀 해보겠습니다. 목표는 사내에 노드로 만든 작은 서비스에 기능을 추가하는 것입니다.목표를 향해서 화이팅 ㅋㅋ

일하다가 특이한 문제를 해결한 경험이 있어 공유합니다. 1. 문제갤럭시 노트2, 갤럭시 S3 > 기본 인터넷 브라우저 > 상품 리스팅 화면 에서 나오지 말아야 할 것들이 나오고, 나와야 할 상품이 나오지 않았습니다. 2. 문제 분석해당 브라우저는 chrome inspect 로 디버깅이 불가능하여, 사내에 있는 weinre라는 툴을 사용하여 디버깅했습니다.문제시 되는 영역에 try { /* 문제 영역 */ } catch ( e ) { console.log( e ); }이렇게 코드를 추가하여 디버깅 하였습니다. 2. 문제 원인화면의 상품을 교체할 때, 특정 버튼을 제거하는 코드가 있었는데, 아래처럼 구현이 되어 있었습니다.var btnArea = productArea.querySelectorAll('.btn..