Front-end_dev

native javascript로 작성된 module(ex. NPM을통해 다운로드받은)들은 크게상관이없는데, Node.js addon 기술을 통해 C++기반의 코드로작성된 module을 node.js module로 binding했을떄 그 module을 못찾는 문제가 있음. 브라우저는 기본적으로 보안이슈떄문에 운영체제가 제공하는 함수들을 쓰지못함(즉 system call 불가능) 그래서 addon을통해 C++에서 system call할수있게 하는 module을 만들어 javascript로 binding하는경우가 많음. 해결법은 크게 3가지가있는듯함 1. module.paths에 module path를 추가해줌. (그냥 밑의코드 복붙하면됨 mainWindow만 본인 앱의 window변수로바꾸고) mainWi..

const log = console.log; const isIterable = a => !!(a && a[Symbol.iterator]); function *flatten(iter) { for(const a of iter) { // if(!isIterable(a)) for(const b of a) yield b; if(!isIterable(a)) yield* b; else yield a; }} function *map(f, iter) { for(const a of iter) yield f(a);} const flatMap = (f, iter) => flatten(map(f,iter)); log([...flatten([[1,2], [3,4]])]);// [1,2,3,4]log([...flatMap(a =>..

Javascript V8 Engine은 C++기반으로 만들어져있다.javasript에서 object의 property를 런타임시에 동적으로 마음대로 바꿀수잇다. 그럼 C++도 가능하다는뜻인데..함수포인터로간단하게 구현할수있다.아마 V8 Engine은 javascript object들을 map형태 혹은 다른 자료구조(테이블형식)로 관리하지않나 싶다. Javascript const str1 = 'this';const str2 = 'isfunction'; class C { m1() { console.log('foo'); } [str1]() { console.log('bar'); } [str1 + str2]() { console.log('baz'); }} C++ #include #include #include ..

GenTwoDimArr() 함수는 초기에 입력받은 파라미터로 2차원 배열을 생성하고 각 row가 초기에 입력받은 col값을 넘어섰을때 에러를 강제시킴. const GenTwoDimArr = (row,col) => { let arr = []; for(let i=0; i col) // if length of array is overflowed, it will be force to generate error return false; else { target[property] = value; return true; } } }); } for(let i=0; i

123456789101112131415161718192021222324252627282930313233343536373839404142// #1function myFunc() { return new Promise( (resolve, reject) => { console.log('start!'); setTimeout( () => { resolve('timed out'); },5000) }) } myFunc().then(value => { console.log(value) return myFunc();}).then(value => { console.log(value);}) // #2function myFunc(count = 0) { if(count { console.log('start!' + count); ..

템플릿 소스코드12345678910111213141516171819202122232425 파일이 다 올라갈 때 까지 기다려 주세요. progress = document.querySelector('#progress'); function complete() { progress.innerHTML = '파일을 정상적으로 올렸습니다. upload를 클릭해주세요.'; }Colored by Color Scriptercs 서버 소스코드 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667const http = require('http');const ..

제가 읽은 기술포스팅에서 탑3안에 드는 최고의 정보글입니다.알고리즘을 완벽하게 이해하진 못한건 함정;;베지어커브를 이런식으로 접근해서 subdivide하고, 베지어 곡선을 0도에서 360도 회전해서 shape를 드로잉하는건데 기반이되는 패스는 svg이고, 본예제에서는 svg에대해 완벽한 파싱은 아니지만 완벽한 파싱만된다면(어떻게 구현해야할지모르겠다는건 함정 하나더추가;;) 원하는 모든 shape에 대해서 subdivide 할 수 있고, distance 조절로 기하정보추가뿐만아니라 원래 shape의 원래 형상도 변경가능. 결론은 기존의 알려진 subdivision방식과는 전혀 색다른 방법입니다. https://webglfundamentals.org/webgl/lessons/webgl-3d-geometry-..

Subdivision에는 종류가 여러가지가 존재합니다 Linear subdivision , loop subdivision , butterfly subdivision, doo-sabin subdivision, catmull-rom subdivision. 크게 이렇게 5가지가 있고, 이 글의 주제는 Linear subdivision입니다. 다른 서브디비젼들의 공식은 검색해서 쉽게 찾아 볼 수 있습니다 정점을 쪼갠후에 버텍스배열,인덱스배열,노멀벡터배열,텍스쳐좌표배열을 어떻게 다시 재구성해줄것인가가 이슈입니다. 구현해보기위한 사전 아이디어1. (너무 어렵게생각) 1. 어떤 정점에서 출발해서, 거리가 가까운 순으로 모든 정점들을 배열로 구성. 2. 3개의 정점이 삼각형(면)을 만드는지 검사 3. 삼각형이 만들어질..

https://github.com/hyunsooda/obj2json wavefront-obj-parser라는 파서를 확장했는데 기존의 이 파서는 json파일을 부품(part)별로 나눠주지않고 그냥 한파일에 다 파싱되고, 조명정보도 기록되지않아서 부품별로 json파일을 따로 파싱해주고 그안에다가 mtl 파일을 따로 또 파싱해서 조명정보까지 넣어봤습니다.node가 os에 깔려있다면 다음명령어로 파싱해볼수있습니다.obj2json.js your_obj_file your_mtl_file obj파일을 mtl파일과 함께 파싱하고 webgl로 렌더링한 모습입니다.

증강현실이나 가상현실이나 둘다 그래픽을 띄워주는게 핵심이라서 그래픽스 처리가 기본이 되겠습니다. 저는 이번 첫 증강현실 예제에서 Argon.js를 기반으로 만들어봤는데요, Argon.js는 웹브라우저(Argon.js에서만든)를 기반으로 동작하는데 개발자는 웹페이지만 만들면 핸드폰에서 Argon브라우저로 제가만든 웹페이지로 접속하여 바로 띄어볼수있습니다. 단 이떄 서버를 열어서 웹페이지에 접속할수있게 해야됩니다그럼 이정도면 대충 기본 흐름은 파악했고... 유저에게 그래픽만 띄워주면 되는데 웹에서는 여러가지 방법이 있습니다. 첫번째는 CSS로도 할 수 있습니다. 단, 이때는 THREE.js같은 3D 라이브러리가 필요합니다두번째는 HTML5 Canvas로도 그래픽을 띄울수있는데 단, 2D이기때문에 현실감은 없..