Intro

자고 일어났는데 …팔이 꺽여 있어서 한 동안 안 움직였다. 잠을 잘 못 잤다는 핑계로 다시 엄청 잤다 _=…
결국 11시 45분 도착 하아…

오늘은
오늘 할 일
1.웹 자판기 리뷰 & 리팩토링 & 질문

2. NextCamp 강의들 듣고 food화면 layOut을 목표로 진도 나가보기
3. 매일 하는 TIL & 알고리즘

운동 …

쉬는 시간에도 조금씩 하자

웹 자판기 리팩토링

폴더 구조 및 네이밍 수정
../js/view
../js/model
이런식으로

테스트 케이스 비슷한 메소드가 있으면 같이 하기

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

Naming 폴더관리 보다 ! 
VendingMachine이라는 이름이 많은데 전체를 관장하는 VendingMachine부분과 
근데 이름짓기 너무 어려웠다 VendingMachine은 VendingMachine인데 

의존성 전체가 서로 의존하고 있는 구조는 벼롤 좋지 않는 구조 
Controller도 View, Model이 주입되어 있는데 구조 자체가 다른 view나 Model들도 다 컨트롤러를 속성을 가져가야 하는 점은 별로 좋지 않은 구조

  startAutoClearLog(type){
    const autoClearTime = 2000
    const nextOrderTime = 3
    const autoClearId = setTimeout(()=> {
        if(type==="displaySelectedOne"&&this.checkHasMoney()) this.handleNextOrder(nextOrderTime)
        else if(type!=='notifySecondOrder'&& type!=='insertMoney') this.handleCancelButtonClicked()
      }, autoClearTime)
      this.emit('sendAutoClearId', autoClearId)
  }

 if(type==="displaySelectedOne"&&this.checkHasMoney()) this.handleNextOrder(nextOrderTime)
  else if(type!=='notifySecondOrder'&& type!=='insertMoney') this.handleCancelButtonClicked()

이런 상태들을 위로 분리 시킬 수 있는 것들이 많음 !!!

http 2장 & 3장 정리

• http 2장

메소드들 get, put, delete, post, connect, trace, …등등
keep-alive tcp연결 지속
쿠키 인증정보 지속하기 위함 조각
파이프라인으로 다른 요청들을 동시에 보낼 수 있다.

긱 메소드 별 기능
get 정보 가지고 오기
post 엔티티 보내기
put 파일 전송 수정?
delete 삭제
connect 터널링 ?

req 프로토콜 버전 상태값 상태 설명
req헤더 / 바디

• http 3장

http 메시지는
헤더 - 개행문자 -바디로 이루어져 있다.

Daily ES6

enhanced Object functionalities

객체 생성에서 좋아진 것들 정리하기

WeakMap

Daily Algorithm

내 풀이는 엄청 복잡하다.
자릿수들을 구한다음 자릿수를 구하면서 나온 나머지랑 빼준 수들을 역으로 재귀를 하면서 계속 자릿수를 구해서 넣어주는 연산을 했다. _=’’’’
어디서 저런 규칙을 놓친 걸까?
다들 3줄이면 풀었는데 ‘’’ 휴
1 1 …1
2 2 …2
3 4 …0 10 ->4
4 11 …1 11
5 12 …2 12
6 14 …0 20 -> 14
7 21 …1
8 22 …2
9 24 …0 100 -> 24
이게 그냥 3진수와의 차이는 0은 존재할 수 없어서 자릿수가 필요한 것의 차이 그런데 4로 쓰면 4만 써도 된다.
이 부분만 보정을 해주자 -> 여기서 로직을 어떻게 뽑았을까?

10
11
12
13 111 …1
14 112
15 114
16 121
17 122 122
18 124 200 4가 안들어간 건 다 똑같고
19 141 201 그냥 3진수 표현으로는

… 모듈러 연산이 3진수는 0,1,2로 돌린 거니까 이거 대신에 1,2,4로 돌린다라고 생각하면 되려나
안 된다. -1 해주는 보완점을 어디서 찾은 걸까 ㅜㅜ 아오

20 142 202
21 144 210
22 211
알게 된 사실
맨 마지막 자릿수는 3으로 나눈 나머지로 구할 수 있다.
16/3 5 5/3

다른 사람의 풀이

1
2
3
4

function change124(n) {
  return n === 0 ? '' : change124(parseInt((n - 1) / 3)) + [1, 2, 4][(n - 1) % 3];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function change124(n) {
  var src = [4,1,2];

  var result = '';
  while(n) {
    result = src[n%3] + result;
    n = Math.floor((n-1)/3);
  }
  return result;
}

// 아래는 테스트로 출력해 보기 위한 코드입니다.
console.log(change124(10));

nextStep 진도 공부

Module Pattern

public , private 권한을 함수와 closer을 통해서 구현할 수 있음

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

var module = (function(name){
  
  var _x = name

  const  _hello = ()=> {
       return `hello ${_x}`;
    }

    return { 
        hello : function() {
            var hello = _hello();
            return hello;
        }
    }
})(name="dali");

module.hello() // hello+dali

ES6 Modules

link

Server Considerations 요기서 부터 뭔 말인지 잘 모르겠음 _= 다시 한 번 읽어보기

Ajax

비동기 javascript

• 정의
  Asynchronous JavaScript and XML

• Why?

  브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했습니다. 더 좋은 UX를 제공할 수 있는 기술입니다.
  +예를 들어, 검색어 입력, 지도 스크롤, 새로운 위치 선택, 축척 조정 등)에 더 잘 응답하는 응용 프로그램을 만들 수 있습니다.

1. 페이지 일부분을 업데이트 하기 위한 정보를 서버에 요청할 수 있다.
2. 서버로부터 받은 데이터로 작업을 한다.

1
2
3
4
5
6

var httpRequest;
if (window.XMLHttpRequest) { // 모질라, 사파리등 그외 브라우저, ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 이상
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

요청을 하고 응답을 받은 후 처리할 함수 onreadystatechange

1
2
3

httpRequest.onreadystatechange = function(){
    // process the server response
};

• How

1. Ajax ( XMLHTTPRequest 통신 )
   이 기술은 웹에 데이터를 갱신할때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했습니다. 더 좋은 UX를 제공할 수 있는 기술입니다.