본문 바로가기

자바스크립트

04. Node 개발자동화 테스트 Grunt 설치( 맥북에어 ) 맥북에어 Grunt 설치방법 1 npm ( Node.js ) 및 그런트 다운 받기https://nodejs.org/en/http://gruntjs.com/sample-gruntfile 2. 노드 설치하기 다운받은 그런트 실행 파일을 클릭 후 설치 진행한다.그러면 아래와 같이 설치완료 문구가 출력된다.(맥북에어 기준) Node.js was installed at-/usr/local/bin/nodenpm was installed at- /usr/local/bin/npm 여기까지 노드 환경 설치는 끝났다. 3. 그런트 설치하기 그런트를 설치하기 전 맥북 터미널을 켠다.터미널 위치 : 응응 프로그램 > 유틸리티 > 터미널 그런트는 커맨드라인 도구이므로 터미널 창을 열고 전역적으로 설치한다.입력어 : sudo n.. 더보기
03. 자바스크립트 OOP구현과 상속에 대해... Javascript OOP구현과 상속에 대해... 1. 개요 오랫동안 UI를 개발해 오면서 자주 사용해 오던 개발방법 중 하나가 객체지향방법(Object-Orientied Programming )이다. OOP에서 중요한 몇가지 개념만 알아보자. 클래스 - '객체( 인스턴스 )를 정의해 놓은 원형이 되는 것'객체 - new 클래스를 이용해서 생성된 자료형 변수 또는 '인스턴스'라고도 한다.은익성 - 객체 또는 클래스 속성 중 외부 접근을 허용하는 것 이외의 모든 것들은 접근을 막는다.상속 - 이미 만들어진 기능을 파생시켜 하위 클래스를 만든다.오버라이딩 - 상위 클래스의 메서드를 하위클래스에서 기능만 바꿔 동일하게 선언해서( 덮어써서 ) 사용한다.다형성 - 여러개의 객체 내에 동일한 메서드가 있지만 모두 .. 더보기
02. jQuery를 이용한 데이터 출력 방법 JQuery를 이용한 데이터 출력 방법 1. 개요 프론트엔드 개발 시 ajax 통신을 이용해 외부에서 데이터를 가져와 UI에 값을 넣어주는 방법을 많이 사용한다. 이번 포스팅에는 UI구성이나 특성에 적합한 데이터 출력방법을 알아본다. 2. 구현방법 및 설명 첫번째, 템플릿을 활용한 값 출력a 설명: 복잡한 마크업형태의 묶음으로 구성되어 있고, 반복적으로 ui가 뿌려진다.참고: jQuery를 이용한 출력에 대한 전반적인 구성이나 기능위주로 설명되기 때문에 css와 같이 레이아웃 관련 내용은 생략한다. - 데이타 구성- 파일명 : person.jsonvar data = [{ name: "홍길동", age: "20", address: "서울", birth: "2016" },{ name: "이순신", age: .. 더보기
01. scope에 대한 이해 Javascript Scope에 대한 이해 1. 개요 자바스크립트를 이해하는데 아주 중요한 요소인 동적 생성 메모리 공간과 var, this 키워드에 대해 알아본다. 2. 설명 및 예시 첫번째, 동적 생성 메모리 공간 프로그래밍을 하는 동안 일정기간 동안 데이터를 저장해서 사용할 수 있다.자바스크립트에서는 크게 두가 종류의 메모리 공간을 사용할 수 있다고 생각하면 된다. 1. 오브젝트( Object )의 key-value 공간 오브젝트 내에서 키, 밸류 형태의 값을 생성해서 사용한다. - 예시var object = {key: value} - 사용방법object.key 또는 object["key"] 2, 함수의 스코프 공간 함수 내에서 var 키워드와 함께 생성해서 사용한다. - 예시function set.. 더보기
02. HTML5 Canvas 에서 그리기... 기본 사각형 그리기 캔버스에서는 채워서 그리기, 테두리만 그리기, 투명하게 그리기 등 세 가지 방법으로 사각형을 그릴 수 있다. function drawScreen() { context.fillStyle = "#000000"; //사각형 색상을 지정 context.strokeStyle = "#ff00ff"; //테두리 색상을 지정 context.lineWidth = 2; //라인두깨 context.fillRect( 10, 10, 40, 40 ); //x축 10, y축 10 위치에 넓이40 높이40의 사각형을 만든다. context.strokeRect( 0, 0, 60, 60 ); //x축 0, y축 0 위치에 넓이60 높이60의 테두리를 만든다. context.clearRect( 20, 20, 20, 2.. 더보기
01. HTML5 Canvas 이해... HTML5 특성 html5는 자바스크립트로 처리할 수 있는 즉시모드 비트맵 영역이다. 즉시모드란 캔버스가 화면 위에 픽셀을 그리는 한 가지 방법이다. 이 점이 바로 html5 캔버스 보류 모드를 쓰는 플래시, 실버라이트, SVG와 확연히 다른 부분이다. 보류 모드에서는 화면에 그릴 오브젝트의 리스트들이 그래픽 렌더러에 있으며, 코드 내에서 지정한 오브젝트의 특성에 따라 오브젝트를 화면에 그린다. 이 방법에서는 프로그래머가 로우레벨의 연산 작업을 하지 않아도 되지만, 반면에 비트맵 화면의 최종 렌더링을 마음대로 조절하기가 힘들다. html5 캔버스를 지원하는 브라우저 - IE9 이상, 크롬, 사파리, 파이어폭스, 오페라 등이 있다. 브라우저가 캔버스 기능을 지원하는지 알아보는 데 modernizr.js 자.. 더보기

티스토리툴바