note

[Deep Dive] 10-11장

10장 객체 리터럴 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다. 즉 객체는 변경 가능한 값이다. 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참고하고 조작할 수 있는 동작(behavior) var counter = { // 프로퍼티 num: 0, // 프로퍼티 키와 프로퍼티 값 // 메서드 increase: function() { this.num++; } }; 객체 리터럴에 의한 객체 생성 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래..

[Deep Dive] 07-09장

07장 연산자 연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다. 피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동사의 역할을 한다고 볼 수 있다. 산술 연산자 이항 산술 연산자 : 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 이항 산술 연산자 의미 부수 효과 + 덧셈 X (피연산자에 어떠한 효과도 없음) - 뺄셈 X * 곱셈 X / 나눗셈 X % 나머지 X 단항 산술 연산자 : 1개의 피연산자를 산술 연산하여 숫자 값을 만든다 단항 산술 연산자 의미 부수 효과 ++ 증가 피연산자의 값을 변경하는 암묵적 할당이 이루어짐 -- 감소 피연산자의 값을 변경하는 암묵적 할당이 이루어짐 + 어..

[Deep Dive] 04-06장

04장 변수 변수란 무엇인가? 왜 필요한가? 프로그래밍 언어는 기억하고 싶은 것을 메모리에 저장하고, 저장된 값을 읽어 들여 재 사용하기 위해 변수라는 메커니즘을 제공한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 간단히 말하자면 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. 변수에 값을 저장하는 것을 할당(대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다. 식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 변수, 함수, 클래스 등의 이름은 모두 식별자다. 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다. 식별자로..

[Deep Dive] 01-03장

01장 프로그래밍 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이 때 요구되는 것이 문제 해결 능력이다. 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 바로 코드다. 프로그래밍 언어 사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 변역기인 컴파일러 혹은 인프리터를 이용해 컴퓨터에 명령을 전달한다. 프로그래밍 언어는 구문과 의미의 조합으로 표현된다. 구문과 의미 프로그래밍의 목적은 문제 해결이고 작성된 코드는 해결 방안의 구체적 구현물이다. 그리고 이것은 프로그래밍 언어의 문법에 부합하는 것은 물론이고 요..

[제주코딩베이스캠프] JavaScript 2부

조건문과 반복문 조건문 if else if else switch 삼항연산자 let result = true ? 1 : 100; 반복문 for for in for of while do while forEach break : 해당 조건이 만족되었을때 반복문을 탈출 continue : 해당 조건이 만족되었을때 다음 루프로 넘어감 // for문 무한 반복 for (;;) { } // for in 문 무한 반복 let a = '19821'; for (let i of a) { s += parseInt(i); } let b = {'one':1, 'two':2}; for (let j in b) { console.log(j); } // while문 무한 반복 while (true) { } 함수와 클래스 함수 함수를 사용..

[제주코딩베이스캠프] JavaScript 1부

자바스크립트 자바스크립트는 버전업이 되어도 이전에 있었던 기능을 삭제하거나 기능을 변경 하지 않는다. ES5 부터 엄격모드, 배열메서드가 추가 ES6 부터 const, let, Promise, Arrow function, class 등의 문법들이 대거 추가 자바스크립트의 삽입 위치는 보통 body 태그의 맨 끝이다. 자바스크립트의 구조 문(statement)은 세미콜론으로 구분한다. 문은 값, 연산자, 키워드, 명령어, 표현식 등으로 구성된다. 공백은 병합한다. 주석 // 한 줄 주석 /* 여러줄 주석 */ 엄격 모드 "use strict"; use stirict 라는 지시자를 통해 엄격모드를 활성화 했을때만 최신 문법이 반영된다. 보통 코드의 최상단에 추가한다. class 문법의 경우 엄격 모드가 기본..

[Three.js] GIS Developer 님의 Three.js 강좌 - 5

GIS Developer 님의 Three.js 강좌 : https://www.youtube.com/watch?v=Oe4n0vyrSiU 카메라 (Camera) Camera를 상속받는 클래스 (Camera는 object 3D를 상속받는다 - PerspectiveCamera : 가까이 있는 물체가 멀리 있는 물체보다 상대적으로 크게 보이도록 원근감을 표현해서 렌더링한다. fovy, aspect, zNear, zFar를 인자로 받는다. 이 인자들을 통해 절두체가 구성된다. (절두체 안에 존재하는 물체가 카메라를 통해 보여지게 된다) zNear와 zFar 거리 사이를 벗어나면 렌더링되지 않는다. - OrthographicCamera : 물체간의 원근감없이 물체의 크기 크기대로 렌더링한다. zLeft, xRight..

[Three.js] GIS Developer 님의 Three.js 강좌 - 4

GIS Developer 님의 Three.js 강좌 : https://www.youtube.com/watch?v=L_70k2sAuds 사용자 정의 지오메트리(Custom Geometry) : 복잡한 형상을 만들 수 있다. BufferGeometry 에 대해 정의할 수 있는 속성 - position : geometry를 구성하는 3차원 좌표에 대한 정점(Vertex) - normal : 각 정점에 대한 수직 벡터 - color : 각 정점에 대한 색상값 - uv : 각 정점에 대한 텍스쳐 매핑 좌표 - Vertex Index는 setIndex 메서드로 지정 : position 속성으로 지정된 정점에 대한 인덱스 배열로 지정. ex) mesh를 구성하는 면의 최소 단위는 삼각형이고 이 삼각형은 3개의 정점으..

[Three.js] GIS Developer 님의 Three.js 강좌 - 3

GIS Developer 님의 Three.js 강좌 : https://www.youtube.com/watch?v=RxIwudO-YqY 재질(Material) Objct3D 의 Line을 상속받은 클래스 - LineSegments - LineLoop 재질(Material) 클래스 - PointsMaterial : Points 타입의 Object3D 객체를 위한 재질, 좌표를 점으로 렌더링 - LineBasicMaterial : Line 타입의 Object3D 객체를 위한 재질. 좌표를 순서대로 연결해서 라인으로 렌더링 - LineDashedMaterial : LineBasicMaterial 를 상속받는 자식 클래스 - MeshBasicMaterial : Mesh 타입의 Object3D 객체를 위한 재질. ..

[Three.js] GIS Developer 님의 Three.js 강좌 - 2

GIS Developer 님의 Three.js 강좌 : https://www.youtube.com/watch?v=ITA9no8Bsio 지오메트리 (Geometry) : 3차원 오브젝트의 형상을 정의 Three.js 에서 제공하는 기본 지오메트리 : 지오메트리는 기본적으로 BufferGeometry 를 상속받고 있다. * BufferGeometry - BoxGeometry : 가로, 세로, 깊이에 대한 크기와 가로, 세로, 깊이 각각에 대한 분할(Segments) 수로 정의된다. (분할은 LineBasicMaterial을 통해 시각적으로 확인 가능) - CircleGeometry : 원판의 크기인 반지름, 원판을 구성하는 분할 개수, 시작 각도, 연장 각도를 인자로 받는다. - ConeGeometry : ..