메모장



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 위키에다 정리해서 올릴 예정

웹앱 작업 시 고려사항 html/css


웹앱 작업 시에 고려 됐던 것들과 해결 방법에 대해서 써보고자 한다.
이미 발표자료나 공유된 자료가 많긴 하지만 내가 알고 이해할려면 정리를 해봐야할거 같다.

1. 하드웨어 가속기 사용(css translate)
 - css translate는 정말 마술같다고 할 수 있다. 안드로이드, ios 웹뷰에서 테스트 결과 정말 다르다. 
 - animation효과나 많은 양의 리스트에서 스크롤시 효과를 제대로 볼 수 있다.(쓰기 전과 쓰고 난 후는 Real)
 - 하지만 밧데리 사용량이 늘어난다고 한다 ㅠㅠ 적당히 써야한다.

2. 이미지 사용의 최소화
 - 디자이너와의 협의를 통하여 이미지 사용을 최소화하고 font-awesome에 있는 아이콘들로 대체하였다.
 - 이미지를 썼을 때와 font를 쓰는 것은 네트워크가 느릴때 확연히 차이를 느낄 수 있다.

3. tag depth 최소화 
 - 의미있는 마크업을 고려했지만 리스트 같은 경우 table,ul,ol태그 등과 같이 뎁스를 늘리는 코딩은 지양

4. a태그 href="#none" 사용시 router의 hash(#) URL의 문제 발생으로 href="javascript:void(0);"로 대체

5. img태그 사용시 리스트 스크롤 시 버벅이는 문제 발생으로 인해 background사용으로 대체
 - lazyloading 보다 background이미지를 쓰는게 훨씬 낫다.

6. loading 이미지 등 font로 표현하기 어려운 이미지는 svg로 대체

7. sass 사용
 - mixin 공통화, compass등을 통한 css 코딩 속도 향상

8. namespace 및 기능 모듈화

9. promise방식을 이용한 함수 지옥 탈출

10. template파일 관리 데이터를 붙이는 부분과 아닌 부분 혹은 데이터를 붙이는 url에 따라 template을 나누었다.

11. 폴더 구조 정립

12. svn을 통한 형상관리 

13. sass, jsx파일 컴파일 하기 전 dev폴더와 컴파일 후 release폴더로 구분

14. 구글지도 관련 크기에 맞춰 마커 이미지 삽입

15. 슬라이드 관련 plugin은 slick.js를 썼다.
- angular version, reactjs version등 jQuery 버전부터 다양한 버전을 지원하고 있다.(결국 업데이트가 잘되고 있단 얘기)

16. webview에서 클릭시 click이벤트를 걸면 android나 ios에서 한박자 느리다거나 하는 문제가 있어 tap이벤트로 교체

참고 : 

- 개인적으로 will-change사용은 모바일에서 아직 지원하는 브라우져가 있지 않아서 주저하게 된다.

- 깊게 들어가지 않고 속도 향상을 할 수 있는 방안에 대해서 이해하기 쉽게 해놓았다.

3. google map jQuery version - google map : 맵이 잡아먹는 메모리 용량이 제일 크다. 맵이 있는 곳에서 ios webview 메모리 문제가 발생한다면 구글맵을 어디선가 중복 호출 될 가능성이 크다.

* 향후 js 스타일 가이드는 airbnb의 스타일 가이드를 참고하려고한다.


lodash template을 이용한 renderTemplate 함수 javascript

회사를 옮기고 나서 일정 및 여러 이유로 angular나 react.js로 프로젝트를 진행하기 어려운 상황에서
SPA형태의 프로젝트를 진행할 때 html template과 data를 편하게 사용할 수 있도록 만들었던 함수를 정리할려고 한다.

요구조건
1. 내가 HTML,CSS, UI(jQuery)기능을 구현하느라 data를 붙일 시간이 없는 것
2. SPA를 해본 경험이 없는 개발자가 붙이기 쉽게 함수로 만들 것
3. API URL이 복수개로 지정가능하게
4. data type을 고려할 것
5. HTML URl이 복수개로 지정가능하게
6. Template Class명 지정 컨트롤 할 수 있게
7. HTML삽입 시 새로 붙여넣을 것인지(HTML), 기존 데이터에서 추가로 붙여넣을지(append)구별 할 것
8. HTML삽입 위치 지정가능 하도록
9. HTML, API 삽입 후 callback 함수를 통해 rendering된 HTML을 컨트롤 가능하게

위 내용들을 고려하여 renderTemplate함수를 만들어 보았다.

사용한 라이브러리

renderTemplate 특징
1. API URL이 배열인지 확인 아니라면 존재하지 않는 것으로 보고 renderHtml을 호출하여 HTML만 rendering
2. API URL[0]째가 string인지 확인 맞다면 renderHtml호출 아니라면 JSON.stringify를 통하여 URL[0]을 string으로 변환하여 renderHtml호출

3. renderHtml을 호출하면 HTML template이 this.cache에 존재 하는지 확인 있다면 cache를 통하여 재사용하고 아니라면
ajax를 통하여 template을 호출하고 templateHtml에 저장 후 this.cache에 저장

4. api data가 존재한다면 insert type이 'HTML'인지 'Append'인지 확인 후 api data를 template에 뿌려주고 지정한 위치에 rendering

api data가 존재하지 않는다면 HTML template만 rendering함

5. callback 함수 호출
6. 변수 초기화

renderTemplate은 위와 같은 형태로 구현을 했고 말로 설명하기가 어려워 그림으로도 그려보았다.


단점
1. template기능만 사용하면 되는 걸 lodash 라이브러리를 사용하여 무겁다.(mustache만 사용해도 될 걸...)
2. rendering될 때 바뀐 API Data를 비교하는 부분이 빠져있다.(이 부분을 추가했으면 더 빨랐을 걸 react로 옮기면서 더 이상 이 코드는 만지지 않고 있다...)
3. callback이 아닌 promise방식으로 구현했다면 더 간단하게 할 수 있었을 것 같다.(api data 호출 부분은 promise방식을 사용해 놓고선...)
4. 변수 선언이나 이런 부분에 가이드를 정확히 정해놓지 않고 급하게 하다보니 그 부분도 너무 아쉽다.



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