대가는 결과를 만든다

최근 3D model 사용에 있어서 obj+mtl의 구성을 glTF로 바꿔서 사용하기 위해 테스트와 이슈를 살피고 있는 도중, glTF로 변환하는 과정에서 texture에 입혀야하는 color가 반영되지 않는 이슈를 발견했다. 이에 mtl의 속성과 변환된 glTF의 속성을 비교하면서 원인을 찾고자 한다. mtl의 color에 대한 속성에 대해만 일단 살펴보겠다. 나머지 속성은 링크를 참고! 1. Material Color and Illumination : MTL 속성 중 color(색), transparency(투명도), reflectivity(반사도)의 값이 정의 되있는 부분이다. : 종류는 세가지가 있다 - Ka, Kd, Ks 1) Ka : ambient 반사도를 정의하기 위한 속성이다. - Ka r..

INTRO promise 패턴과 array method를 활용한 비동기 시퀀스 처리에 대해 예제와 함께 정리해보았다. 아직도 복잡하고 좀 익숙치 않다. 특히 맨마지막 4.개선은 아직 좀 더 익숙해져야 하겠다. array method에 대해 정리가 필요하다면 여기 참고 : https://developers.google.com/web/fundamentals/primers/promises?hl=ko 참고하여 예제를 정리했다. 예제 케이스가 참 좋은 것 같은데 설명 번역이 좀 엉성하긴하다. 여러개의 비동기 처리 콜은 하되, 결과 값은 순차적으로 저장 하도록 하는 예제를 살펴본다. 4.개선에서는 이전 비동기 콜 실행이 끝나는 것을 기다리는 것이 아니라 콜은 모두 동시에 하되, 결과는 순서대로 표시하도록 효율적인 ..

아래의 Array 메서드들이 ES6에서부터 사용가능한 메서드들인 줄 알았으나, 아니다. 모두 ES5에서 사용 가능한 메서드이다. 하나씩 예제코드와 함께 정리해보겠다. 목차 1. forEach 2. mp 3. some 4. every 5. filter 6. reduce 7. find 내용 다음 배열을 공통적으로 사용한다는 전제하에 예제 코드를 설명하겠다. var testArray = ["a", "b", "c", "d"]; 1. Array.forEach - 배열 전체를 돌며 해당 배열의 요소에 직접 어떤 작업 수행하고 싶을 때 "배열자체를 변경" - callback parameter : item, index, array testArray.forEach( function (item, index, array){..

function 대신 => 를 사용하여 간략화 한 ES6 문법이다. 1. parameter, 함수정의 부분 문법 //parameter 정의 () => { ... }//매개변수 없는 경우 x => { x.. }//매개변수 한개인 경우, 소괄호 생략 (x,y) => { ... }//매개변수 여러개인 경우, 소괄호 생략 불가능 //함수 정의 x => { return x * x } x => x * x//한줄의 구문인 경우, 중괄호와 return 생략될 수 있음 2. 함수 호출 화살표 함수는 익명함수, 콜백함수로 사용가능 //ES6 //익명 함수 const pow = x => x * x; console.log(pow(10)); //콜백 함수 const arr = [1, 2, 3]; const pow = arr.m..

Export 방법에는 두가지가 있다. 1. Named Export : 변수/함수/객체 명을 export, 초기화와 export 동시에 가능 //초기화와 동시에 export export const something = 5; export function sum(a,b){ return a+b; } //선언된 객체의 export const something = 5; const sum = function(a, b) { return a + b; }; export {something, sum}; - alias 지정 const somthing = 5; export {something as somethingNew}; //something이라는 상수는 somethingNew라는 이름으로 export된다. - 다른 모듈의 ..

1. 비구조화 할당 : 객체의 필드를 꺼내 새로운 변수를 대입하는 상황을 단순화 //ES5 var example ={ name : "james", age: "15", school: "some" }; var name = example.name; var age = example.age; //ES6 비구조화 할당 const example ={ name : "james", age: "15", school: "some" }; let {name, age} = example; console.log(name, age);//james 15 //ES6 함수 파라미터 응용 const example ={ name : "james", age: "15", school: ["some", "any", "how"] }; functio..

기본적인 내용은 제외하고, 개인적으로 기록하고픈 내용들만 정리한다. 1. String 1) startsWith() , endsWith() : 앞/뒤로 일치하는 문자열 판단 2) includes() : 문자열 포함여부 판단 let str = "A is B"; str.startsWith("A");//true str.endsWith("B");//true str.includes("is");//true 2. Array 1) for in의 문제 보완한 for of //for-in의 경우 index로 순회 : 상위 prototype의 값도 포함될 수 있음 let data = ["A","B"]; Array.prototype.getIndex = "C"; for(let index in data){ console.log(d..

(이슈를 설명하려고 적었던 글이였고, 블로그에 옮기는 과정에서 약간 수정한 글이라 조금 글이 매끄럽지 않음) 이슈 웹뷰가 아닌 일반 브라우저 app(pc, mobile 포함)에서는 모두 http=>https, www.realies.kr=>realies.kr로 redirect를 정상적으로 동작한다. 그런데 라인/카카오톡 같은 메신저에서 홈페이지 url을 공유 후 클릭하면 상황이 달랐다. 라인에서는 아예 웹사이트가 뜨지 않았고, 카카오톡에서는 유효하지 않은 인증서라는 문구가 한번 뜨고 나서 https로 연결이 정상적으로 되었다. 아래 과정으로 수정을 해서 이슈는 해결했지만, 애초에 ACM 인증서 설정 자체를 잘했다면 안해도 됬을 삽질이었다-_-;; 이슈의 원인을 파악하고, 해결한 방법을 설명하는 글로, 글이..