Three.js 란? The aim of the project is to create an easy to use, lightweight, 3D library. 웹기반의 3D그래픽 표현작업을 간소화 해주는 라이브러리인 Three.js입니다. 주요 브라우저 업체들이 지원하는 웹기반 3D표현기술인 WebGL을 lightweight한 가벼움과 간단한 코드 작성만으로 멋있는 3D 그래픽을 만들 수 있습니다. API 구조의 인터페이스로 구성되어 있어 자바스크립트를 다루시는 분들이라면 익히기 쉽고, 외국에서도 이미 많이 사용하고 있습니다. 물론, IE나 모바일기기 브라우저에서 WebGL이 호환되지 않지만, Three.js에는 WebGL의 결과물을 캔버스나 SVG로 변환하실 수 있어 동일한 모양의 결과물을 확인할 수 ..

Node.js 를 공부하고 있다면 비동기, 이벤트 루프, 단일 Thread 에 대해 많이 들어보셨을겁니다. Node.js 는 기존의 웹 모델의 multi-thread 방식의 문제점을 보완해주는 이벤트 기반의 비동기 방식 프레임워크로 API 실행시, 하나의 Thread로 데이터 반환까지 기다리지 않고 다음 API를 실행시켜주는 뛰어난 처리 성능을 자랑하죠. 기존의 웹 모델이 서버에 요청이 오면 Thread를 생성하여 작업하는 멀티-Thread 방식이지만, 단일한 Thread로 짧은시간에 많은 요청을 처리하기 위해서 Event Callback 방식을 사용합니다. 어떻게 돌아간다는 것이죠? 하나의 Thread에서 이벤트 루프를 돌려, 이벤트가 발생하면 해당 되는 함수를 실행시키기 때문에 단일한 Thread로 ..

디자인 구현을 위한 9가지 원칙 웹 사이트를 구축하는 프로젝트는 보통 '기획-디자인-개발-테스트' 순서로 진행됩니다. 기획자가 사이트를 기획하면 기획서를 바탕으로 디자이너가 디자인을 합니다. 그 후 디자이너가 만든 화면 이미지를 보고 퍼블리셔나 개발자가 HTML을 퍼블리싱하고 프로그램 요소를 추가하게 됩니다. 저는 프로젝트에서 종종 퍼블리싱과 프로그래밍을 동시에 하는 롤을 맡아왔습니다. 디자인된 결과 이미지를 보고 브라우저에서 디자이너가 디자인한 결과물과 동일하게 나오도록 HTML 마크업과 CSS 스타일을 작성합니다. 이러한 작업을 할 때 저는 디자인된 화면과 픽셀 단위까지 동일하게 나오는 것이 중요하다고 생각하고 공을 들이는 편입니다. 최근에는 모 사이트를 기존의 것과 화면은 동일하게 하되, 서버단 일..

안녕하세요. 계속해서 underscore 관련 포스팅을 이어나가겠습니다. 이번에 다룰 내용은 함수입니다.bind, bindAll, partial, memoize 로 함수를 합성해보겠습니다. 1. _.bind( function, object, *arguments)원본 function파라미터에 대한 새로운 wrapper함수를 반환합니다. var accu = { currentValue : 0, add: function (val) { this.currentValue += val; }, substract: function(val) { this.currentValue -= val; } }; accu.currentValue = 5; accu.add(2); accu.substract(3); console.log('현재..

마이크로서비스 아키텍처의 모습은 현재까지 데이터 처리 단위를 최소로 나누어 처리하는데 집중하는 모습입니다. 하지만 궁극의 마이크로서비스 아키텍처가 지향하는 모습은 데이터 처리 뿐만 아니라 web page와 같은 웹사이트 전체를 담아낼 수 있는 아키텍처를 지향합니다. 일반적인 웹 페이지 기반의 서비스를 마이크로 서비스 아키텍처로 적용하여 구축 시 현실적인 어려움점이 많습니다..Data layer에 대한 부분은 데이터 종류, 비즈니스 도메인, 또는 사용기술에 따라 분리하고 별도의 작은 서비스 단위로 설계하고 구현하는 것은 UI에 비하여 비교적 용이합니다. 그러나 Web frontend 부분은 세부적으로 나누는 기준이 애매모호합니다.이번 아티클에서는 마이크로 프론트엔드 (Micro frontend) 라는 이름..

안녕하세요. underscore 알아보기 (1)에 이어 후속 내용을 이어가도록 하겠습니다. 이 전에 each, context(this), find, countBy, reduce, some, contains, every, max, min, sortBy, groupBy 를 알아보았습니다. 이번에는 reject, filter, partition, toArray, values, object, defference, shuffle, sample, invoke, first, rest, last, initial ,union, intersection, uniq, zip, compact, indexOf, range 를 알아보겠습니다. 1. _.reject, _.filter, _.partition, _.difference ..

안녕하세요.자바스크립트 라이브러리인 언더스코어에 다한 포스트를 하려고 합니다.매우 작은 용량과 간단한 사용이 장점이며자바스크립트로 array []나 object {}를 다룰때 필수적으로 필요한 라이브러리입니다.약 100여가지의 함수가 있지만 ES5, ES6를 거치면서 안쓰게 되는 함수도 있고 (ES5, ES6의 내장함수가 더 빠르기 떄문)쓰임이 겹치는 경우도 있습니다. 문장 몇개와 예제 하나면 이해가 되는 함수들이 있는 반면에 난해한 함수도 있습니다.활용도가 높은 함수 위주로 설명하겠습니다. 테스트를 진행할 샘플 데이터 입니다.var data = [ { "productName": "Change Gout", "mf_compony": "Jam3", "mf_country": "Canada", "date": "..

hash bang, 해시뱅 이라는 개념이 있습니다.트위터의 url에 #!이 들어간걸로 유명해졌는데 지금은 트위터에서는 사용하고 있지 않습니다.작동원리 라고 하면www.aaa.com/#!/bbb이라는 url이 있다면#!/bbb를 브라우저가 저장하고 있다가 서버에게 받은 HTML 구조의 name 값을 찾아가는 원리입니다.단일 싱글 페이지를 작성하는데 유용하며, 앵커 기능을 활용한 것입니다. 이 해시뱅은 url의 변경없이 단일 페이지에서 페이지를 이동한 것 같은 효과를 내기위해 사용되었습니다.#뒤의 부분을fragment identifier 라고 부릅니다. 장, 단점을 설명합니다. 장점 단점 - 애플리케이션의 상태 공유, 북마크, 검색엔진 색인- HTML5의 표준성을 활용 할 수 있다.- 향상된 속도 - 스크립..

자바스크립트로 개발을 해오던 사람이라면 한번쯤은 들어봤을 리액트, 앵귤러입니다.그리고 둘중에 무엇을 선택해야 할지 고민한 경험도 있을것 같습니다.우선 결론부터 이야기 하자면 어떤 환경, 목적을 가진 애플리케이션이냐에 따라다르다고 할 수 있겠습니다. 아래의 글은 https://www.sitepoint.com/react-vs-angular를 번역하였습니다. 앵귤러는 프레임워크이고 리액트는 UI구성요소 라이브러리 입니다.이제부터 자세히 소개해보겠습니다.선택하기에 앞서 해봐야 할 질문들은 다음과 같습니다. 1. 도구 자체에 대한 질문 - 얼마나 안정감 있는가, 무엇을 기반으로 하였는가- 어떤 기능을 가지고 있는가- 아키텍쳐와 패러다임이 어떤가- 다른 툴, 개념과 호환이 되는가 2...

Node.js 기초부터 튼튼히 (2)내장 모듈 안녕하세요!! 다들 5월 황금연휴는 잘 보내셨는지요. 노동절, 석가탄신일, 어린이날 줄줄이 붙어있다니~ 캬 ^0^/ 다들 잘 쉬었다면 백 투더 일상으로 돌아와서 저와 함께 노드JS의 내장되어있는 모듈들을 공부해요~ Node.js는 다양한 모듈을 지원합니다. Node.js 문서를 참고하여 직접 실행해보면서 사용법을 익히도록 합시다. ↓↓↓↓↓↓최신 문서를 참고하시고 싶으신 분은 아래 링크로 이동 ↓↓↓↓↓ https://nodejs.org/docs/latest/api/index.html 자, 시작해볼까요? 음.... 본격적으로 내장 모듈을 알아보기 전에 내장 모듈 호출하는 법부터 익힙시다. require( {모듈명} ) require()로 내장된 모듈 또는 객..