tobesimple

안녕하세요 . 투비심플 입니다. 저는 TbsGrid를 만들고 있는 오픈소스 개발자 랍니다. 저는 그리드를 개발하면서, 어떤 구조로 가야 하나 고민이 참 많았습니다. 이상적인 구조를 생각했어요.  근데, 도움이 안된다.... ㅠㅠ 저는 한가지 알겠더라고요. 일단 만들고 보자. 리펙토링은 쉽다. 라는 걸요. 여러분들도 일단 만들어보세용.

안녕하세요. 투비 심플 입니다. substr 함수는 deprecated 되는 함수 인데요. substring을 사용하다보니, 좀 복잡스럽네요. 그래서 substr 함수를 새로 만들었습니다. /** * t_substr * @param s substr 할 문자열 * @param startIndex 찾는 문자열의 시작 인덱스 * @param len 가지고 오고 싶은 문자열 갯수(없으면 끝까지) * @returns {string} 리턴값. 없으면 null return. */const t_substr = function (s, startIndex, len) { let result = null; try { s = s.toString(); if (arguments.length ==..

안녕하세요. 투비심플 입니다. 난 직장 일을 하기도 하지만, 개인적으로는 오픈소스 개발자 이기도 하다.Pure javascript로 개발하는 오픈소스 컴포넌트가 있다. 컴포넌트 개발은 prototype 만 고집했다.클래스란 것은 어차피 prototype 기반이기 때문에 prototype만 고집했다. 하지만 여러개의 객체를 생성해야 할 일이 있어서, 클래스 객체를 사용할 수 밖에 없었다. 다른 방안도 있겠지만.. Scroll 이란 객체를 생성했다. 코딩량이 늘어나니, 클래스 객체를 사용하는 것에 부담감이 발생했다.한페이지에 오백줄 이상 넘어가면 재미가 없다.  클래스에도 어차피 prototype을 사용할 수 있다고 한다.난 이론적이거나, 문법적인 면은 그다지 많이는 모르는 거 같다.해당 함수를 사용하는데 ..

Javascript로 컴포넌트 개발을 해본다고 치자.Html 안에 어떤 엘리먼트가 있다고 하자. 해당 엘리먼트를 어떻게 가져와야 할까? document.getElementById(엘리먼트 아이디) 로 가져와야 할까?document.querySelector(클랙스 셀렉터) 로 가져와야 할까? 난 후자의 클랙스 셀렉터로 가져오는 방법을 선호한다.많은 컴포넌트 들이 클래스 셀렉터로 가져오고 있다.단지, querySelector 는 non-live 라고 한다. 단순하게 설명하자면, class-div’ /> 가 있다고 치자. let element = document.querySelector(‘.class-div’);let element2 = document.querySelector(‘.class-div’); el..

자바스크립트 개발을 하면서, 루프문을 자주 사용하게 된다.개발에 신경쓰다보면, 자바스크립트 문법보다는 어떻게 쓸까를 고민하게 된다.일단 개발을 해야하니까. ㅠㅠ. 루프 문에는 for, foreach, map이 있는데. 어떤 것을 사용해야 할지, 정해야 할 때가 있다.  배열.map(() => { 내용 });위와 같이 map과 람다를 사용하게 되면 소스가 정말 간결해 진다. 난 foreach 문은 거의 사용하지 않는 거 같다. 주로 for 문을 많이 사용하는거 같다.일단 단순하게 하나만 고집하게 된다. for 문의 장점for (let i = 0, x = 0, len = 배열.length; i  for 문의 단점for (let i = 0, len = 배열.length; i  배열.map() 장점배열.map(..

해당 게시글은 앞으로 계속 업데이트 하겠지만,어떻게 하면 자바스크립트를 좀 더 빠르게 실행 시킬까 고민도 참 많았다. 우선적으로 HTML 안에는 여러가지 내용들이 있고,구글, 엣지, 사파리 브라우저들은 해당 내용들을 읽어서,브라우저 안에 컴포넌트들로 정보를 저장하게 된다. 결국 자바스크립트는 브라우저 컴포넌트 정보들을 이용하게 된다.싱글스레드이기도 하지만, 어찌 보면 멀티스레드라고 봐야 하나.... 객체에는 let 대신에 const 사용하기단순히 readonly 상태는 문제가 없지만, 값이 변한다면, 리터럴 아닌 이상은 const를 사용해야 한다(메모리 주소변경이 되지 않도록 한다)const는 추가의 개념으로 보고, let은 신규의 개념으로 보아야 한다.구글링을 하면서 찾게된  사실이기도 하다. let ..

개발중에 숫자 관련해서, 구현해야 할 내용이 많았다.그런데, 가끔 기본을 잊고 프로그램을 할 때가 있다.데이타베이스도 마찬가지 인거 같다. sum(null), 1 + null 등을 입력해봐서 실제로 어떻 값이나오는지 알아야 한다. Number 함수를 사용해서 테스트 했다.let a; // 선언만 한 상태. a == undefined console.log(`Number(a) ${Number(a)}`); // NaN (Not a Number)console.log(`Number(null) ${Number(null)}`); // 0console.log(`Number(' ') ${Number(' ') }`); // 0console.log(`Number('') ${Number('') }`); // 0console...