메모장



underscore difference between two objects javascript

<script type="text/javascript" src="//s.zigbang.com/js/underscore/underscore.min.js"></script>
<script>
var people = [
{
name: 'Dave',
age: 26
},
{
name: 'Frank',
age: 23
}
];

var people1 = [
{
name: 'Dave',
age: 26
},
{
name: 'Frank',
age: 23
},
{
name: 'Frank1111',
age: 29
}
];

//_.differenceWith(people, people1, _.isEqual);

var difference = function(array,key){
var rest = Array.prototype.concat.apply(Array.prototype, Array.prototype.slice.call(arguments, 1));

var containsEquals = function(obj, target) {
if (obj == null) return false;
return _.any(obj, function(value) {
return _.isEqual(value[rest[2]], target[rest[2]]);
});
};

return _.filter(array, function(value){
return ! containsEquals(rest, value);
});
};

console.log(difference(people1, people,'age'));
</script>

amp와 pwa browser

https://developers-kr.googleblog.com/2016/06/the-mobile-web-is-open-for-business.html

amp와 pwa로 인한 장점을 정리한걸 보니
1. passive event listener로 자연스로운 스크롤 과 amp로 인한 페이지 성능향상
2. pwa를 통한 오프라인 혹은 불안정한 네트워크시 브라우져 자체 캐싱을 통한 해결
3. 앱 환경과 동일한 홈 화면 아이콘, 스플래시, 주소 표시줄 삭제한 환경 제공
4. credential management api를 통한 간편 로그인 지원
5. 푸쉬 api지원
6. 성공사례 

앞으로 관심을 가지고 하나씩 해볼 예정

FRONT(css,js) 관리를 위한 JSPM사용 방법 javascript

jspm은 module loader인 SystemJS를 기반으로 모듈을 불러온다. Traceur이나 Babel도 쉽게 적용할 수 있어 ES6 기준으로 개발하는데 편리하다.

 

JSPM설치 방법

1. Install jspm CLI:

    npm install jspm -g

2. Create a project:

    cd my-project    npm install jspm --save-dev

새로운 프로젝트 설정:

  jspm initPackage.json file does not exist, create it? [yes]: (Package.json파일이 존재하지 않는다면 새로 생성할 것인지 여부)  Would you like jspm to prefix the jspm package.json properties under jspm? [yes]: (Jspm에 있는 jspm package.json 파일을 수정할것인지 여부)  Enter server baseURL (public folder path) [.]:  (server 경로 설정)  Enter jspm packages folder [./jspm_packages]: (jspm package folder 경로)  Enter config file path [./config.js]: (jspm config.js파일 경로)  Configuration file config.js doesn't exist, create it? [yes]: (config.js파일이 존재하지 않는다면 생성할 것인지?)  Enter client baseURL (public folder URL) [/]:  (클라이언트 경로)  Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]: (ES6변환을 위해서 Treceur혹은 Babel을 사용할 것인지 여부)

***config.js 파일 용도 : 위의 내용 포함, jspm_package경로, front package경로, bundle.js에 합쳐질 package경로를 포함하고 있음

3. jspm Registry, GitHub or npm을 통한 패키지 설치:

    jspm install npm:lodash-node    jspm install jquery2.2.0=npm:jquery@2.2.0
jspm install jquery1.12.0=npm:jquery@1.12.0 jspm install myname=npm:underscore

(명령어) (옵션) (별칭=설치저장소:패키지명)

위와 같이 설치 가능하다.

설치할 패키지 검색 URL : http://kasperlewau.github.io/registry 

그리고 별명은 같은 패키지의 여러 버전을 관리할때 유용하다.

그 내용은 추후에 예제로 학습이 가능하다.

4. Write application code

lib폴더에 의존성을 거친 파일 코드를 작성한다.어떠한 모듈 포맷도 괜찮다.(ES6 포함)

 

lib/bootstrap.js

    import _ from 'lodash-node/modern/lang/isEqual.js';    import $ from 'jquery';    export function bootstrap() {      // bootstrap code here    }

lib/main.js

    import {bootstrap} from './bootstrap.js';    bootstrap();

5. Run the code

<!doctype html> <script src="jspm_packages/system.js"></script> <script src="config.js"></script> <script>
 System.import('build.js').then(function() {
console.log('build loaded!');
});
 System.import('jquery2.2.0').then(function(j) {
console.log('jquery2.2.0 loaded!');
console.log(j.fn.jquery);
});

 System.import('jquery1.12.0').then(function(j) {
console.log('jquery1.12.0 loaded!');
console.log(j.fn.jquery);
});

//multi import 사용 방법
Promise.all([
System.import('jQuery1.12.0'),
System.import('jQuery2.2.0')
]).then(function(modules) {
console.log('loaded!');
console.log(modules[0].fn.jquery);
console.log(modules[1].fn.jquery);
}); 
</script></html>

위와 같이 3번에서의 별칭을 사용하여 import를 사용하면 jquery버전별 관리가 가능하다.(패키지 버전별 관리가 가능하다는 얘기)

** 마지막  import multi parameter 방법은 promise를 사용하여 구현한다. (http://webframeworks.kr/tutorials/angularjs/angularjs_promise_deferred/)

6. Bundle for production

  jspm bundle lib/main --inject

위 명령어 실행 후 build.js, build.map.js파일 생성 후 웹서버를 통하여 실행하면 된다.

 

참고 URL :

http://haruair.com/blog/2929 
https://github.com/jspm/jspm-cli/blob/master/docs/getting-started.md
http://kasperlewau.github.io/registry
http://webframeworks.kr/tutorials/angularjs/angularjs_promise_deferred/

 


front-end 규칙 javascript

front-end 규칙




react.js 버그 javascript

현재 프로젝트에 react.js를 적용하면서 발견한 버그를 기록해 놓고자 한다.

1. jquery delegate방식 오류

jQuery(document.body).on('click','.test',function(){
/*
이 방식의 오류 발생은 다른 페이지로 이동 후 되돌아 왔을때 this.mounted()값이 'undefined'로 떨어지면서
setState(render)를 호출하지 못한다.
이벤트 발생 후 setState를 호출하고자 할때는 delegate방식은 피해야 한다.
*/

if(this.mounted()) {
this.setState({list:data});
}
});

2. infinite scroll시 스크롤 위아래를 빠른 속도로 많은 양의 데이터를 보여줄 시 render가 늦어 빈 화면을 보여주는 경우가 있다.
환경 : 안드로이드 크롬
구현: scroll 영역을 translate3d(0,0,0);으로 주어 gpu를 사용하였을 때
데이터 불러오는 개수 : 30개

계속 정리할 예정
정리되면 react 위키에다 정리해서 올릴 예정

1 2 3 4 5 6 7 8 9 10 다음