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 맥에서는 ..

Selenium Webdriver 5분 완성 참고 : https://www.youtube.com/watch?v=khwV5IWng-I node/npm 설치 필수! 1 - 테스트할 폴더 만들기 mkdir selenium-webdriver-test cd selenium-webdriver-test 2 - selenium-webdriver 설치 npm install selenium-webdriver 3 - WebDriver for Chrome 다운로드해서 현재 폴더 (selenium-webdriver-test)로 이동 https://sites.google.com/a/chromium.org/chromedriver/getting-started 4 - 테스트 코드 작성 touch test.js var webdriver..

파라미터 기본값 함수가 파라미터 값을 받지 못할 때 (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(); ..

비호환 엔진에서 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쪽 가량 읽었는데 술술 읽혀서 참 좋습니다.초심자가 보기에는 참 좋은 책인듯 합니다. 끝까지 읽으면 리뷰를 좀 해보겠습니다. 목표는 사내에 노드로 만든 작은 서비스에 기능을 추가하는 것입니다.목표를 향해서 화이팅 ㅋㅋ

16년 9월 9일 금요일 첫번째 front-end 스터디를 했습니다. 주제는 angular2 소개였으며, 범균님과 재섭님이 준비해주셨습니다. 정말 최근 front-end 흐름을 쫓아가지 못하는 저로서는 그냥 마냥 신세계였습니다.이런 무식자인 제가 느낀 점을 그냥 적어보려고 합니다. [그림1] angular2 architecture overview (출처 : angular2 공홈) 1. angular2 는 (컴포넌트를) type script로 작성한다.type script는 자유도 높은 javascript를 type safe하게 해주고 좀 더 객체 지향적으로 개발할 수 있게 해준다고 대략 알고 있습니다. 그 코드를 보니 자바와 비슷한 느낌을 받았습니다. 자바 개발자가 좀더 쉽게 적응할 수 있을 것 같습니다..

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

CharSet이 EUC-KR인 서버가 있습니다. 클라이언트에서는 jQuery를 이용하여 Form을 다루려고 합니다. myForm이라는 데이터를 전송하는 폼이 있습니다.그 폼의 input 벨류들을 모두 jQuery의 .serialize()를 통해서 직렬화하고(문자열로 만들고) 보내면 좋을것 같습니다. 그래서 아래처럼 함수를 작성했습니다. var myForm = jQuery('#myForm'); jQuery.ajax({ type : myForm.attr('method'), url : '/reimaginer/FormManager.ym', data : myForm.serialize(), success : function (res) { if(res === 'SUCCESS') { alert('등록되었습니다.'); ..