0508-webGL

Author Avatar
John Doe May 08, 2018

WebGL

설명

mdn example따라 해보기

canvas에서 getContext webgl을 가지고 올 수 있으면 브라우저가 지원 가능하다 :D

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
main();
function main() {
  const canvas = document.querySelector("#glCanvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
    return;
  }

  // Set clear color to black, fully opaque
  gl.clearColor(0.5, 1, 0.3, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

canvas.getContext("webgl")-> 
gl.clearColor
  • WebGL 및 three.js는 더 공부하기 !!!

…설치가 안된다=ㅂ=
내일 멘토 분께 얘기드려봐야겠다 !

크롱 피드백

메인은 !

  • 웹 자판기 View도 하나의 클래스로 분리하거나 or 데이터를 VendingMachine이 가지고 있거나

클래스가 처리할 수 있는 일을 클래스가 처리할 수 있도록 !!!

myMoney와 snacksList, vmButtonTextList 등을
class가 있는 코드 중간중간 넣지말고,
init.js 상단에 위치시키는 게 좋겠어요.
(별도 파일로 분리하는 것도 방법)

Question Data가 -> 클래스랑 연관이 있을 때는 어떻게 해야 될지?

다 이런식으로 변경했군요.
실제서비스는 이런작업을 백엔드에서 해서 완성된 HTML을 클라이언트에 내려주겠죠.
그걸 가정하고 HTML을 우리는 직접만들었던거고요.

이렇게 수정한건 HTML이 줄어서 좋긴하고, 실험해볼만한 시도차원에서는 좋고요.
실제는 초기페이지를 JavaScript로 렌더링하느라(templating작업) 더 느려질 수 있을 거 같아요.
이대로 두고 참고는 하세요.
::: 그럼 어떻게 바꿔야 할까?.? -> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class Money {
  constructor(value){
    this.value = value;
    this.unit =  '원';
  }
}

class MoneyList {
  constructor(money, count){
    this.moneyList = new Array(count).fill(new Money(money));
    this.money = money;
  }
  get totalMoney(){
    const totalMoney = this.count*this.money
    return totalMoney;
  }
  get count(){
    return this.moneyList.length;
  }
  ...바보  굳이 돈뭉치라는 MoneyList를 만들 필요가 그리고 돈의 종류가 있어야지 !!!
}


Money를 이렇게 만들 필요가 있나? 너무 아날로그로 맞춰서 만드는 거 아닌가?.?
+ 나중에 ... 돈을 사용할 때 상당히 걸린다. 
해당 종류의 돈을 쓴다?.? 아니지 
useMoney가 해당 지폐를 꺼내긴 하는데 한 꺼번에 쓰잖아 ... 
머니를 클래스화 하면 좋은 점은 자판기에서 Money만 받도록 할 수 있다. 해당 Money만 오류 검출할 떄 용이 
class Money {
  constructor(value, unit='원'){
    this.moneyKinds = [10,50,100,500,1000,5000,10000,50000]
    if(this.moneyKinds.includes(value)){
      this.value = value
      this.unit =  unit;
    }
    else{
      console.log(`화폐는 ${this.moneyKinds}의 해당 돈으로만 만들 수 있습니다`)
    }
  }
}

삽질 02

이게 무슨 차이지?.? function 으로 하느냐 -> rederingView인스턴스로 하느냐…
크롱 이야기를 잘 이해 못 한 것 같다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const templateRender = (element, template)=> {
  element.insertAdjacentHTML('beforeend', template)
}

// redering Templeate
document.addEventListener("DOMContentLoaded", (e)=> {  
  templateRender(snackListElement, snacksHTMLTempleate)
});

// -> 
rederingView.templateRender.call(
    rederingView, 
    rederingView.getSearched('.snack-list'),
    rederingView.makeTemplate(rederingView.viewData.snackList, snackTemplate),
  );

// viewData랑 template이랑 연동이 되어 있어야 되는 것 아닌가?.?;;;

rederingView.templateRender('.snack-list', snackTemplate(rederingView.viewData.snackList))

Money 지갑처럼 빼서 쓰는 것 처럼 객체를 만드는 것은 … 그닥 좋은 생각은 아니였던 것 같다.

1
2
3
4
5
6
변동사항이... 좀 까다롭다.
12500원 쓴다고 할 때 리스트를 받아서 뽑는다?.?
+
돈을 꺼낸다 꺼내는 것도 탐색해서 가지고 오고 + 해당 리스트는 slice(i)...

그래도 장점도 돈 형식으로만 받을 수 있다를 할 수 있으니까 + 진짜 아날로그 현실 처럼 디자인을 수행하는 점에서 나름 재미는 있었음 :D ;;;

dailyAlgorithm

코딜리티 07-01

-> 올라가거나 내려가거나 같거나 -> 처음 올라간 경우, 내려간 경우 모두 +1, 이전에 올라갔을 때 다음 올라가면 +1 내려가는 경우 중 이전 높이와 같은 경우 +0 이전에 내려갔으면 모두 + …
이전 값이랑 차이를 기록 !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// 답이라도 보면서 다시 공부 ....
// 그러니까 예전에 쌓였던 거랑 같은 것만 기록해야 되서 도로 하나씩 빼주면서 같은 게 있는지 체크해줌 같은 거면 넘어가고 더 많이 빼주면 계속 빼주고 ... 우와 Stack Pop 이런 사고에 익숙하지 않은데 멋지넹  
// 기록해 놓으면 일일이 찾을 필요가 없고 이전 것들 몇개만 빼주면서 비교할 수 있다! 
function solution(H) {
    // write your code in JavaScript (Node.js 4.0.0)
    
    var counter = 0;
    var height = 0;
    var blocks = [];
    var i=0;
    
    while(i<H.length) {
        if(H[i] > height) {
            var newBlock = H[i] - height;
            blocks.push(newBlock);
            height += newBlock;
            counter++;
            i++;
        } else if(H[i] < height) {
            var lastBlock = blocks.pop();
            height -= lastBlock;
        } else {
            i++;
        }
    }
    
    return counter;
}

프로그래머스 최소공배수 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 그냥 생각한데로 풀어나가서 풀려서 기분 좋았다. 
// 종이에 적어서 나눠지면 그 수로 계속 나누고 안 나눠지면 다음수로 나누기 !

function nlcm(numList) {
  let nlcm = 1;
  let i =2;
  while(numList.length!==0){
    if(numList.some(v=>v%i===0)){
      nlcm*=i;
      numList = numList.map(v=> v%i===0 ? v/i : v).filter(v=>v!==1)
    }else{
      i++;
    }
  }
    return nlcm;
	}


// 배운 사실 
// numList 빈배열 while(numList)이러면 탈출될 줄 알았는데 실상은 무한 루프  length로 위에 처럼 지정을 해주자 
// 다른 사람들 풀이 따봉 만힝 받은 부분 보기 힘들고 + 유클리드 호제법을 사용한 부분이 많아서... 
// 나중에 재귀나 유클리드 호제법 공부해보면서 츄ㅜ가로

오늘의 링크 줍줍

hasOwnProperty