본문 바로가기

웹 프론트70

자바스크립트 - IIFE 란? (Immediately Invoked Function Expressions) IIFE란 IIFE는 Immediately Invoked Function Expressions의 약자이고 “Iffy”라고 발음합니다. 즉 즉시 호출 함수 표현식의 줄임말입니다. 즉시 실행 함수의 기본적인 형태는 다음과 같습니다. 함수의 선언과 표현 IIFE를 이해하기 위해서는 앞전에 설명했던 함수의 선언(Function Declaration)과 함수의 표현(Function Expression)의 차이점에 대해 이해해야 합니다. 많은 사람들은 단순히 표현식에서는 함수명이 생량될 수 있다고 알고 있지만 사실 이보다 좀 더 뚜렷한 차이점을 가지고 있습니다. 함수 선언(declartion)은 미리 자바 스크립트의 실행 컨텍스트(execution context)에 로딩되어 있으므로 언제든지 호출 할 수 있지만, .. 2018. 7. 26.
그래픽스 - 동차 좌표계와 투영행렬 동차 좌표계란? (x, y) 를 (x, y, 1)로 표현하는 것을 말합니다. 일반적으로 말해 임의의 0이 아닌 상수 w에 대해 (x,y)를 (wx, wy, w)로 표현하는 것입니다. 동차 좌표계를 사용하면 affine변환이나 perspective변환을 하나의 단일 행렬로 표현 할 수 있습니다. projective geometry에서 사용하는 좌표계가 동차 좌표이며 다른말로 projective좌표 라고 합니다. 투영행렬과 동차좌표의 관계 투영행렬에서, 카메라 공간상에 존재하는 점과 카메라 위치 사이의 깊이값(z)를 최종 결과점의 x,y,z에 각각 곱해지고, w에 저장됩니다. 바로 이 과정이 동차좌표계를 위한 과정입니다. 좌표공간에서의 3d좌표를 얻어내려면 w로 나눠내면 됩니다. 여기서 월드공간 카메라 공간.. 2018. 7. 16.
그래픽스 - Projection Matrix란? 투영행렬과 뷰행렬의 관계 뷰 행렬(View Matrix)란 랜더링 파이프라인 단계의 3번째 단계인 뷰 스페이스를 구성하는데 사용되는 설정을 위한 행렬이라고 한다면 투영 행렬은 파이프라인 단계의 투영 과정시에 이루어지는 작업을 위한 정보를 준비하는 것입니다. 투영 과정은 사실상 뷰 스페이스와는 별개의 과정이지만, 눈에 보이는 화면의 시점을 결정하는 성질을 가지므로, 카메라 객체과 뷰행렬과 함께 투영행렬을 함께 관리하도록 구성하기도 합니다. X,Y,Z로 3개의 정보로 이루어진 3차원 공간을 X,Y 좌표만으로 표현한다고 생각하면 조금 쉽게 이해할 수 있습니다. 이것은 2차원 면 위에 입체 도형을 표현하는 과정입니다. 투영이란 무엇일까? 투영(Projection) 이라는 것은 n차원의 공간을 n-1차원으로 표현.. 2018. 7. 15.
자바스크립트 - map 함수 JavaScript Map함수 foreach와는 다르게 map은 각 루트에서 return을 할 수 있습니다. map은 각 루프에서 return을 할 수 있다는 특징이 있습니다. map을 이용하면 return값으로 같은 길이의 배열이 나오게 됩니다. 배열의 값을 일괄적으로 바꿀때 유용하게 쓰일 수 있습니다. 2018. 7. 7.
3D 그래픽스 - 회전행렬 / 오일러각 / 축 각 표현 3차원에서의 물체의 위치 물체의 오리엔테이션은 매우 중요합니다. 만약 부메랑과 같은 어떤 물체를 던졌다면 단순히 물체의 위치만 이동하는 것이 아니라, 물체가 돌면서 날아가기 때문에 물체가 바라보는 방향(오리엔테이션)도 변하는 것이 자연스럽습니다. 카메라나 물체의 이동경로는 이동변환에 의해 쉽게 구현할수 있습니다. 그러나 물체 오리엔테이션의 변화는 오리엔테이션의 변화가 회전변환에 이루어진다는 점때문에 회전변화에 있어서 적절한 보간이 이루어져야 합니다. 이와 같은 회전을 표현하기 위해서는 3가지의 방식이 있습니다. (1) 회전 행렬 표현 기하 변환중 회전을 표현하기 위한 방법중 하나가 행렬입니다. 단순한 정점좌표에 행렬을 곱하면 변환작업이 완료된다는점과, 연속된 변환을 하나의 복합행렬로 나타낼 수 있다는 점.. 2018. 6. 23.
자바스크립트 - 유사 배열, 연관 배열 이란? 자바스크립트 객체란? 자바 스크립트의 객체의 프로퍼티 명을 키, 프로퍼티의 값을 값이라고 합니다. 객체 리터럴이 다중값 데이터 표현으로써의 객체라고 할 수 있습니다. 자바스크립트의 연관배열 일반적으로 숫자를 key로 값을 뽑을 수 있으면 배열이라고 합니다. 배열은 연속하는 숫자이므로 순서가 있는 값의 모음으로 볼 수 있습니다. 문자열에 한정되지 않고 임의의 타입의 키를 이용하여 키와 값의 모음을 다루는 데이터 구조를 연관 배열이라고 합니다. 연관 배열은 다른말로 맵이나 사전이라고도 부르며 내부 구현에 따라 해시(Hash)라고 부르는 언어도 있습니다. 연관 배열의 용도로는 키로 값을 뽑아내는 조작입니다. 스크립트 계열 언어의 언어기능으로 연관 배열 타입을 제공하고 있습니다. 특히 자바스크립트에서는 객체를 .. 2018. 6. 11.
자바스크립트 - 함수 호이스팅이란?? 함수 호이스팅이란? 함수 호이스팅이란 변수를 선언하고 초기화했을때 선언 부분이 최상단으로 끌어 올려지는 현상을 의미합니다. (초기화 또는 대입부분은 그대로 남아있습니다.) 아래의 sayWow를 보면 알 수 있습니다. sayWow처럼 함수 표현식이아니라 함수 선언식일 때는 식 자체가 통째로 끌어올려집니다. 위의 코드는 선언보다 호출을 먼저 하기 때문에 얼핏 보기에 잘 동작하지 않을 것 처럼 보입니다. 그렇지만 에러 없이 정상적으로 동작합니다. 왜냐하면 함수 선언식이 최 상단으로 끌어올려졌기 때문입니다. 위의 코드는 다음과 같습니다. 하지만 같은 함수여도 함수 표현식으로 선언한 경우에는 에러가 발생합니다. 다음 예시를 한번 살펴보겠습니다. 일단 처음 실행 시에는 전역 컨텍스트가 먼저 생성됩니다. sayWow.. 2018. 6. 8.
초기 자바스크립트의 실행 원리 및 발전 방향 초기 자바 스크립트의 실행 원리 현재 Html브라우저로 사용되고 있는 사파리,크롬등에서 사용하는 자바스크립트 엔진은 모두 JITC(Just-In-Time-compiler)방식을 사용합니다. 기본적으로 javascript는 인터프리터 언어로 대부분 알고 있고 초기에는 모든 javascript코드를 바로 JITC Native Code로 변환해서 통째로 읽는 방식으로 구현되었습니다. 즉 JITC와 Interpreter방식은 자바스크립트의 내부 엔진의 동작 방식입니다. -기본적인 실행 방식- 1. text 형태로 배포 2. 배포된 javascript code를 파싱하여 중간언어인 byte 코드 형태로 전환 3. native 코드로 변환 (Interpreter방식 JITC방식 2가지로 나뉨) Interpreter.. 2018. 5. 29.
동차좌표계란? 투영변환이란 무엇인가? 실세계의 한 점 Q = (x, y, z) 는 3차원의 점입니다. 이점이 투영 스크린상의 한점 (x, y) 의 2차원으로 변환되는 것이 투영 변환이라고 합니다. 투영 변환을 위해서는 동차 좌표계를 사용하는 것이 편리합니다. 동차 좌표계란 무엇인가? 3D에서는 기본적으로 3차원 좌표계이지만 어떤 목적으로 4차원으로 확장이 가능합니다. 어떤 목적을 위해 한 차원의 좌표(n) 을 추가한 좌표 (n+1)로 표현을 하는 것을 동차 좌표계라고 합니다. ex) 4차원 좌표 =(x,y,z,w) => x/w , y/w , z/w 투영행렬에서 동차좌표를 이용하는 이유 시점으로 보이는 점들의 위치가 중요한 것이 아니라 시점으로 부터의 방향이 중요하기 때문에 동차좌표를 사용합니다. 투영 행렬을 위 그림으.. 2018. 5. 23.
라디안이란 무엇일까? 왜쓰는 걸까? 각도의 표현 각도를 표현하는 방법에는 각도법과 호도법이 있습니다. 각도법은 degree 호도법은 radian이라고 합니다. 각도법은 원주를 360등분한것의 하나를 1도로 정한 것이라고 할 수 있습니다. 호도법 호도법과 각도법은 각도를 이해하는 관찰 시점의 차이일 뿐입니다. 호도법은 원의 기하학적인 특성을 활용한 각도의 표현 방법입니다. 호도법은 호의 길이를 이용하여 각도를 재는 방법을 말합니다. 각도법은 원의 중심에서 원이 작도되는 과정을 보면서 내 고개가 얼마나 올라갔나를 수치화 시킨 것이고, 호도법은 원을 작도하는 연필의 입장에서 (반지름 대비) 연필이 긁고간 길이가 얼마인가 를 보는 것입니다. 호의 길이가 반지름과 같게 되는 만큼의 각을 1 라디안이라고 정의합니다. 라디안은 절대적인 각도이며 실제 .. 2018. 5. 23.

티스토리툴바