본문 바로가기

Javascript

(4)
JS(javascript) 객체 생성 관련 java의 lamda처럼 javascript에 function의 개념을 잘 잡아야 합니다. 일반적으로 onclick=goPage('main')으로 호출하서 사용하는 개념보다 더 엄청난 역활을 합니다. function goPage(type){ location.href="http://~~" } ES6부터는 class가 생겼고, java처럼 개념이 1:1로 매핑하려고 하는 부분이 있지만, 실제적으로는 기존의 prototype, function개념을 보기 편하게 mapping만 해놓은것이라고 보면된다. ■ JS 중요한 개념 function은 class로 생각하세요 function이 생성자의 인자값으로 사용이 가능합니다. ■ JS 소개 (하단 예제는 " 헤드 퍼스트 자바스크립트 프로그래밍 Head First Ja..
javascript (prototype, __proto__) java를 하다가 js코드에서 해당 keyword를 만나면서 혼란스러웠던 기억이 난다. 조금 정리를 해보려고 합니다. 1. 내가 혼란이 되었던 부분 1. 프로젝트 개발전에 프로토타입(prototype)을 만들어 보자고 한다. 그런데 갑자기 동일한 이름이 코드에서 사용되고 있어서, 이건 뭐지 라고 생각을 했다. 2. http://prototypejs.org/ 아주 예전에 jquery와 같이 비슷한 오픈소스가 있었다. 이름도 비슷해서 이것을 사용하는 줄 착각을 했다. 3. 코드 자체가 이해가 되지 않았다. function dataCall(){}; dataCall.prototype.name = "홍길동"​ 이런 코드의 패턴을 처음에는 받아들이기 쉽지 않았다. 함수에서 사용하려면, 이렇게 구성하면 되는데, 왜?..
이 사이트는 어떤 js framework (spa) 를 사용하고 있을까? 요즘 SPA(Single Page Application) 을 만들때, Frendend 부분에 대해서 아래와 같은 3개의 Framework에 대해서 검토 할 것이다. 기존에 jquery로 커버가 되었지만, 현재는 Web, Mobile, Tablet등 다양한 Device로 서비스를 하며서 아래 사항이 많이 사용된다. 해당 3개의 F/W에 대해서, 이 사이트가 일반 pure script인가? react를 사용했는가?? angular를 사용했는가?? vue를 사용했는가?? 궁금하지 않는가? 이것을 쉽게 파악하는 방법이다. 관심있는 서비스나 사이트를 보면서, 해당 사이트가 어떤 F/W을 사용했는지 인지 할 수 있다. → 3개의 확장 모듈 모두 공식 오픈소스 제공자에서 만든것이라, Official로 볼수 있다. →..
D3.js 현재 보면서 느끼는점 (version 7) 데이타의 Visualization은 이제 기본이다. 기획자 입장에서는 좀 더 interactive한 화면을 기획해야 하고, 개발자 입장에서는 좀 더 힘들어지는 부분이다. 회사에서 Backend / Frontend개발자가 구분되어 있는 경우도 있지만 Frontend개발자도 html/css의 publishing을 주로 역활을 하고, 다양한 차트의 Interact에 대해서는 개발자가 진행하는 경우가 많다. 세상에는 다양한 오픈소스 차트 Library가 있고, 유료로 제공되는 js들도 많이 있고, 사용률이 높다. 그중에서 좀더 다양한 화면을 구현할때, 검토하는 것이 d3.js이다. 처음 d3.js를 검색하고, https://d3js.org/ 에 들어가면, 어떤 느낌이 드실지 모르겠다. Step1) 접속후에 90..