본문 바로가기

Javascript139

D3.js transform의 translate 함수 웹콘텐츠가 깔끔하고 근사한 디자인이 되려면 배치와 여백이 핵심이라고 할 수 있다.그것을 위해 우리는 CSS에서 float, margin, padding, border 등등을 이용한다. D3.js도 단순히 구현만 하는것이 아니라 그것을 배치하고 적절한 여백을 주는 것이 중요하다.그래야 콘텐츠가 보다 더 깔끔하고 근사하게 보일 것이다. 나는 항상 D3.js 콘텐츠를 구현할때 초기 여백 설정을 한다.D3.js는 SVG 기반으로 CSS와 다르게 따로 여백 함수가 있지는 않고 transform 의 translate 함수를 사용해서 여백을 설정해줘야 한다.그리고 콘텐츠 또한 설정한 여백을 기반으로 계산하여 만들어 줘야 한다. 초반에 이러한 여백 부여 방식에 적응하기가 쉽지 않았지만,자주 사용하면서 점차 익숙해져가고.. 2017. 3. 28.
D3.js v4 버전 바뀐점 https://iros.github.io/d3-v4-whats-new/#1 최근 이러한 사이트를 방문했는데,D3.js v4 버전의 바뀐점을 정말 잘 설명하고 있었다.고마운 사이트 이다. 굿! 2017. 3. 23.
vue.js router 쓰는법 최근 vue.js를 가지고 홈페이지를 개발하자는 계획을 세웠다.하지만 그냥 컴포넌트 단위로 사용했던 것과는 다르게 vue.js의 router과 vuex 등등 덧붙여 사용할 것이 있었다.또 webpack이나 es6 문법을 다시 사용해야 하는 약간의 번거로움이 있다.(앞으로 주구장창 사용해야 할거 같지만..ㅅ..) 여튼 본격적인 개발을 시작해야 하는데, 강좌 없이는 시행착오가 많을거 같다.그래서 찾아본 결과 아래 vue.js router 강좌를 찾았다.(일단은 강좌대로 했는데 나는 오류가 생긴다... 젠장 ㅠ -> 오류해결!) https://router.vuejs.org/kr/ 2017. 3. 20.
vue-cli를 이용한 프로젝트 시작 방법 아직까지 vue.js를 통해 대형 프로젝트 개발을 해보지는 않았지만 조만간에 규모있는 웹앱을 개발해야 되서 슬슬 작업 시동을 걸어야 했다.그러던 중 vue-cli에 관하여 알게 되었고, 본 cli를 사용하면 앱 개발의 환경을 단시간 내에 빠로고 쉽게 세팅할 수 있음을 알게 되었다. https://forum-archive.vuejs.org/topic/4596/vue-cli를-이용한-프로젝트-시작방법입니다 위는 vue-cli로 프로젝트를 세팅하는것에 대해 아주 잘 설명해 놓은 포스트이다. 2017. 3. 17.
vue.js computed와 methods의 차이 최근 앞으로 있을 프로젝트에 대비하여 Vue.js를 공부하고 있다.원래 성격자체가 깔끔하고 가벼운것 좋아하고 덕지덕지 붙어있는거는 싫어하기에 가장 마음에 드는 프론트엔드 프레임워크가 있다면 vue.js를 꼽고 싶다. 이러한 vue.js에는 다양한 개념들이 많이 등장하는데, 그중 최근 쓰면서 알게된 computed와 methods 차이점에 대해 말해보고자 한다.둘다 vue.js 안에서 함수를 정의하는 부분이고 데이터가 변동됨에 따라 안에 있는 함수를 재호출 하게 된다.둘의 차이점은 데이터가 변동되지 않는다고 가정했을때에 드러난다.데이터 변동이 없는 상태에서 computed는 이전의 계산된 값을 캐시해 두었다가 함수 호출시 다시 쓰게 된다.반면 methods는 사용될 때마다 함수의 계산을 다시 하게 된다.만.. 2017. 3. 13.
vue.js로 만든 예제 보는곳 js 프레임 워크로 뭘 사용할까 고민하던중 내 입장과 프레임워크의 스펙을 보고 vue.js가 좋겠다는 결론에 이르렀다.하지만 vue.js의 기초를 공부해 보아도 앞으로 복잡한 뷰를 어떻게 설계할지에 대한 고민은 가시지 않았다.아무래도 예제가 있으면 좋겠다라는 생각에 여러가지를 찾아보다가 vue.js 사이트에서 예제또한 제공해준다는 것을 알게 되었다. http://vuejsexamples.com/ codpen에 올려놓아 코드도 쉽게 볼 수 있다.(예~~)앞으로 더 분석해보고 여러가지로 직접 만들어야겠다. 2017. 3. 8.
jquery 확장 메소드 만들기 최근 js 라이브러리를 만들어보고 싶은 생각이 생겼다.뭐 뚜렷이 js 라이브러리를 어떤식으로 만들어야 된다는 강좌는 아직 국내에는 나와 있는것 같지 않고,해외에는 팁에 관련한 간단한 사항만 나왔었다. 그렇게 찾던중 jquery 확장 메소드 라는 것을 듣게 되었고,몇가지 간단한 방법으로 jquery 셀렉터를 구현할 수 있음을 알게 되었다. 아무래도 프론트엔트 작업을 하면서 jquery를 많이 사용하게 되니 알아두면 좋을거 같다.아래는 jquery 메소드를 만드는 방법을 쉽게 정리한 링크이다. http://annotations.tistory.com/89 2017. 3. 6.
D3.js 버전 업그레이드로 인해 변한 함수들 D3.js 버전업으로 함수들이 많이 변경되었다.몇번 써보니 보다 편리하게 바뀌었다.바뀐 함수들은 아래와 같다. (앞으로 계속 업데이트 할 예정이다.) d3.svg.diagonal() : 사라지고 path의 d를 직접 설정해주는 것으로 바뀌었다.(SVG path 속성만 잘 알고 있다면 직접설정하는것은 크게 어렵지 않다.직접설정을 하다보니 라인에 대한 자유도가 높아진거 같다.)d3.time.scale() -> d3.scaleTime()d3.time.format("%B") -> d3.timeFormat('%Y-%m-%d')d3.scale.domain([ ]).range([ ]) -> d3.scaleOrdinal().domain([ ]).range([ ])d3.svg.line() -> d3.line()d3.sv.. 2017. 2. 23.
javascript 태그의 defer/async 속성에 대하여 javascript를 사용할때 로딩 순서를 정해주는것은 중요한 작업이다.defer/async를 사용하여 javascript 코드를 동기나 비동기로 로딩할 수 있다고 한다.아래는 그에대한 자세한 설명이다. https://www.slideshare.net/pekuid/javascript-defer-async 2017. 2. 22.

티스토리툴바