대가는 결과를 만든다

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 ..

이전에 Array method에 정리한 적이 있지만 reduce에 원리에 대해 정리해본다. reduce는 iterator에 항목들의 값을 하나로 축약 혹은 모아서 어떤 하나의 값으로 도출할 때 사용하는 메서드이다. 정의해보자면 다음과 같다. // f: 항목마다 실행하여 합칠 값을 반환하는 함수 // acc: (초기값이래로 계속 축적되거나) 반환될 최종값 // iter: iterator 배열 const reduce = (f, acc, iter) => { //acc를 따로 지정하지 않은 경우 두번째 파라미터가 iterator일 것이다. //iter를 iterator로 정의해주고, acc를 iterator원소 첫번째로 초기화 한다. if(!iter) { iter = acc[Symbol.iterator](); ..

OKR은 Objectives and Key Results의 약자로 의역하자면 "목표 및 핵심 결과 지표" 이다. 조직적 차원에서 목표를 설정하고, 그 결과를 추적할 수 있도록 돕는 목표 설정 프레임 워크이다. OKR은 구글의 핵심 목표설정 프레임워크 였고, 그를 이어 링크드인, 트위터 등 많은 회사들이 뒤따라 도입해왔다. 이 프레임워크에서 '목표'는 성과를 측정할 수 있는 방법이 존재하는 것이어야 한다. 주로 3~5가지의 핵심 목표와, 그밑에 각각 3~5가지의 주요 측정 가능한 결과로 구성된다. 1. OKR 목표 -야심차고, 장기적으로 내다볼 수 있는 목표 -목표 달성 진척사항을 추적/평가할 때 단위를 수치화 할 수 있는 형태로 설정 2. 주요 결과 - 단순히 Todo List가 아닌, 비즈니스 우선순위..

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

*iterator/iterable 프로토콜을 이용한 *map 함수를 직접 구현 해보고 원리를 파악해보자 // 샘플 배열 데이터 students = [ {name: "김구라", address: "등촌동"}, {name: "윤종신", address: "화곡동"}, {name: "김국진", address: "목동"} ]; // students 배열에서 각 학생의 이름을 조회하는 코드를 작성해보자 let names = []; for (const student of students){ names.push(student.name); } console.log(names);//["김구라", "윤종신", "김국진"]을 출력 // 위의 코드를 추상화해서 재사용성을 높인 map 함수를 구현해보자 // fn : 위에서 정의했..

이터러블/이터레이터 이터러블/이터레이터 프로토콜 : 이터러블을 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} ..

displacement mapping은 일일이 모델링하기 힘든 굴곡들을 displacement map으로 적용된 이미지의 밝고, 어두움을 기준으로 형성해주는 기법이다. 밝은 곳은 튀어나오고, 어두운 곳은 들어가도록 모델링한다. normal map은 눈속임 기법인 것에 반해 displacement map은 비트맵의 명도에 따라 실제 mesh를 생성해주는 기법이라고 할 수 있겠다. displacement sample model : https://threejs.org/examples/webgl_materials_displacementmap.html 출처 : https://cglink.com/terms/1172