대가는 결과를 만든다

three.js 라이브러리를 npm으로 설치하고 webpack 환경에서 사용할 때 알아두어야 할 사항이다. three.js example에서 사용하는 control이나 여러가지 loader들을 import 해서 사용할 때 three/examples/js/ 디렉토리 이하에 있는 것을 import 해서 사용하면 " THREE is not defined " 에러가 발생한다. 해결방법! 결론부터 얘기하자면, three/examples/js 디렉토리에 있는 것이 아니라 three/examples/jsm에 있는 모듈들을 사용 해야한다. (npm에 별도로 import해서 쓸 수 있는 three-obj-mtl-loader 같은 모듈들이 있긴 하지만, 모든 모듈들이 있는 것은 아니기 땜에 근본적 해결책을 알아야 한다.)..

PWA란? Vue나 React Cli로 프로젝트를 만들면서 PWA대헤 아마 한두번씩 마주쳤을 것이다. PWA란 무엇일까? 간단하게 말해서는 웹과 네이트 앱의 이점들을 가지도록 개발된 짬뽕 웹 앱이라고 보면된다. 그럼 Web App과 Native App의 장점들을 한번 가볍게 짚어보자. - Web App : App을 설치할 필요 없이 웹페이지에 접속하면 된다. 링크로 공유가 용의하다. - Native App : 운영체제와 잘 통합되므로 성능이나 UX면에서 더 자연스럽고 부드럽다. 오프라인에서도 동작한다. 한번 설치 후에는 홈 아이콘으로 쉽게 접근 가능하다. 위에 나열한 두 방싱의 장점들을 다 포섭하고자 PWA가 나왔다고 보면된다. 위의 장점들 말고도 더 있을 수 있다. (PUSH 알림 기능 등) PWA는 ..

1. 스코프란? - scope란 사전적 의미로 '범위'라는 의미를 지닌다. - 자바스크립트에서 변수에 접근할 수 있는 범위 혹은 변수가 영향을 끼칠 수 있는 범위라고 생각하면 된다. - 크게 나누면 전역, 지역 스코프로 나눌 수 있지만 스코프 레벨을 좀더 자세하게 나누자면, 함수 레벨 스코프, 블록 레벨 스코프(ES6), 렉시컬 스코프로 나눌 수 있다. 1-1. 함수레벨 스코프 - 자바스크립트에서 var 키워드로 선언된 변수, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 지닌다. - 변수는 함수 내부 전체에서(만) 유효한 식별자가 된다. 1-2. 블록 레벨 스코프 - ES6의 let, const 키워드는 블록레벨 스코프 변수를 만들어 준다. - 여기서 블록이란 if/else, while/for 내..

Web 3D Viewer에서 raycast를 사용하기 위해 마우스의 좌표값을 이용하게 된다. 이때 3D rendering이 되는 canvas의 절대 좌표가 고려되어야 한다. 고려되지 않는다면, 실제 마우스의 위치와 3D viewer 상에서 교차하는 위치가 오차가 발생할 수 있다. (canvas의 절대 좌표 위치가 x:0, y:0이 아니라면) 초기에는 이부분 처리를 viewer의 margin 값을 기준으로 tolerance 값을 하드코딩으로 부여했는데, 당연히 이렇게 부여하는건 부적절하다. 이참에 정리! 1. Viewport : 전체 웹페이지 중 브라우저 상에서 사용자가 보고 있는 화면 부분 2. 절대위치 : 전체 웹페이지 기준으로 해당 Element의 절대적인 위치 3. 상대위치 : 특정 Element ..

- 각 HTTPS와 HTTP의 전송의 경우 내부 데이터를 평문으로 확인이 가능한지를 Wireshark로 패킷 확인 해보자 - 보라색 부분이 HTTPS 통신 패킷, 연두색 부분이 HTTP 통신 패킷 - 각 통신에서 Application Data가 들어 있는 패킷을 열어보았다. (빨간 밑줄 친 패킷) - 위가 HTTPS 패킷(198163), 아래가 HTTP 패킷(198787) - 아래 비교 사진에서 볼 수 있듯이 HTTPS 패킷에서는 전송 내용을 평문으로 확인할 수 없도록 암호화되어 있는 반면에, HTTP 통신 패킷에서는 값이 평문으로 그대로 노출되는 것을 확인할 수 있다. - 이에서 확인할 수 있듯이, HTTP 전송의 경우 데이터 자체를 암호화 하지 않으면 패킷 도청으로 데이터 유출이 가능하다. 알아야할 ..

이터러블/이터레이터 이터러블/이터레이터 프로토콜 : 이터러블을 ES6의 for...of, 전개 연산자 등으로 동작하도록한 규약이다. 오픈소스나 브라우저에서 이 규약을 통해 ES6의 문법을 사용할 수 있도록 이터러블/이터레이터 프로토콜로 구현되어져 있는 부분들이 많이 있다. 예) immutable.js나 브라우저 dom API 등.. 1. 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]( )를 가진 값 //iteraable iterable = { [Symbol.iterator](){ return iterator; } } 2. 이터레이터 : {value, done} 객체를 리턴하는 next( )를 가진 값 iterator = { next(){ return i==0 ? {done:true} ..

자바스크립트는 2015년 이래로 매년 6월마다 새로운 ECMAScript 표준이 계속 나오고 있다. 'ES5', 'ES6', 'ECMAScript 2015', 'ES2018', 'ECMA 2017' 등으로 버전을 칭하는데 햇갈린다... 그래서 정리한다. 표기는 다음과 같이 두가지 방법이 있다. ECMAScript/ECMA/ES 연도 - 예)ECMA 2015, ES2015 ES 버전 번호 - 예)ES5, ES6, .... 따라서, 다음과 버전과 주요 차이점을 간단히 적어보자면 다음과 같다. ECMA 2015, ES2015 = ES6 : 클래스, promise 등 ECMA 2016, ES2016 = ES7 : 제곱 연산자, includes ECMA 2017, ES2017 = ES8 : async/await

ES6(ECMA2015) Promise를 좀 더 편하게 사용하기 위한 것으로 ES8(ECMA 2017)에서 발표된 문법이다. async await에 대해 정리해본다. 1. async는 function 앞에 위치 한다. 2. async를 function 앞에 붙이면 해당 함수는 항상 Promise륻 return한다. (항상 resolved promise로 값을 감싸 반환되도록 한다.) async function f() { return 1; } f().then(alert); // 1 // 혹은 명시적으로 promise를 return (위와 동일) async function f() { return Promise.resolve(1); } f().then(alert); // 1 3. await는 async함수 안..