얍얍 오늘은

오늘 할 일 가자 어제랑 같다 ….
백 로그 처럼 적는 거는 괜찮은 것 같다. 조금 압박 + 할 게 많다는 것을 인지
그런데 1,2,3번 60%는 하자 오늘 달성량은 정해놓고 여러가지 적자

• 1. NextCamp 강의들 듣고 food화면 layOut을 목표로 진도 나가보기
• Ajax
• 기본 LayOut pr날리기

2. 실행 컨텍스트 이론 공부

• 3. 매일 하는 TIL & 알고리즘 []
     — 알고리즘 프로그래머스 level2 땅따먹기
     — 알고리즘 스터디 []
     — tIL []
     — 운동 []

4. Http 공부

• http 메시지 복습 & 4장 공부[]

5.웹 자판기 리팩토링 try
— 리팩토링 추가는 필요 []
— reduce정규표현식 적용 하기
— timer 구조 깔끔하게 구조화 할 수 있는 부분 수정
1.2.3 우선순위 데로 하고 시간 되면 4,5 진행하기

늘 같은 반성을 하고 있다는 것은
… 아침에 늦게 오고
… 달성량 없다…
학습능력이 없는 걸까요?
그래도 화요일은 얼추 좀 달성들을 많이 했었다. 어제는 이상하게 좀 무너졌다. 원인????
일단 늦게 왔다.

• 화요일보다 1시간 더
• 세미나를 들어서 평소보다 공부 못함 ! + 스터디, 이래저래 , 아이스크림 사러 나가고 , 집중 안되서 그냥 책은 도끼다 좀 보고 … 음

왜 집중이 안되었나? 근육통으로 몸이 좀 더 피곤해서?.? 운동을 어제 안해줘서였나?
이번주는 갑자기 조금 운동 빡세게 해서 이럴 수 밖에 없는데 점차 풀어지면 괜찮아질 듯하다 !!!

매일 10Km씩 달리기 한다 해놓고 이번주 1번도 안했다. _= 하루키처럼 플랜 해보려 했는데

타입스크립트로 레벨 2 진행하기도 얼른 하고 싶은데 하아…

1. NextCamp Go Go !

Ajax 복습

비동기 js and xml (요즘은 거의 json )
일부분만 동적인 요청을 해서 전체를 새로고침 하지 않음 !

Ajax MDN
전체 웹페이지를 다시 블러오지 않고 점진적으로 또 부분적으로 인터페이스를 갱신할 수 있습니다.
이 기능을 써서 사용자가 취하는 동작이나 요구 -> 검색어 입력 지도 스크롤 새로운 위치 선택, 축척 조정 등에 더 잘 응답하는 응용 프로그램을 만들 수 있습니다.

비동기 영상 보고 공부하기 !!!

비동기_고고

하이
인사 - 스트레칭 intro
why ->

자바스크립트 싱글스레드 언어 , v8, 힙 , 이벤트 큐
이벤트 루프

JS
heap stack
memory 할당 실행 컨텍스트

이벤트 루프 - 문지기 같다 ㅋ
컬백큐 대기자들 <-> 밑에 비동기 애들

AJax(xmlHttpRequest), setTimeOut, Dom 이런 비동기 처리는???

Web API

call Stack

blocking

jsconf_async
발표를 보면서
내 언어로 알기 쉽게 풀어서 남들에게 설명 하는 능력도 키우고 싶다.
그리고 도식화 그림 & 코드 진행이 한 눈에 보이니 이해하기 쉽다.

할 일들

일주일에 하나씩 발표 듣고 정리해야 겠다..
미더엄에 글 쓰기 시작해야 겠다. 주제별로 정리해서
why?
블로그는 지금 일기씩으로 쓰고 여러가지 내용들을 한 번에 적고 있음
여기다 적고 분류해서 다시 정리하고 싶은 내용은 미디엄에 글 쓰기 !!!

고고

느려진 다는 것은 무엇일까??? -> 블락킹
네트워크 요청이나 이미지 프로세싱
동작들이 스택에 남아 있는 것을 블로킹이라 말하게 됩니다.

크롱한테 물어볼 것 들

1. 정규표현식
   정규표현식으로 찾아서 마지막 껏만 적용하는 부분을 … 잘 못하겠어서 _= ‘’’’

   1 2 3 4 5 6 7 8

   let template = latestHistorys.reduce((ac,c,ci)=>{ return ac+=`<p class="log">${c}원이 입력되었습니다</p>` },'') const lastLog= template.lastIndexOf('log'); template = template.slice(0,lastLog)+template.slice(lastLog).replace('log','log now') return template // 이런 방식을 적용했다 // 음...

실행 컨텍스트

연관개념 scope, hoisting, this, function, closure

• 정의 : 실행가능한 코드를 형상화하고 구분하는 추상적인 개념 -> 실행 가능한 코드가 실행하기 위한 환경

즉, 코드가 실행되는데 필요한 환경

실행가능한 코드는 크게 3가지로 분류하는데

1.전역 코드
2.함수코드
3.Eval Code

전역 코드
전역에 있는 코드들… 변수 할당

실행에 필요한 정보를 갖춰야 되는데 변수, 함수, scope, this바인딩을 결정합니다.

• 변수. 전역변수 , 지역변수, 매개변수, 객체의 프로퍼티
• 함수 선언

• 변수의 유효범위

• Eval… -> 문자열 구문으로 표현식을 하거나 실행시킬 수 있는 구문인데 보안에 취약하기 때문에 안 쓰는 편이 좋습니다.

실행 될 떄 마다 실행 컨텍스트가 생성되고 ,

실행컨텍스트의 3가지 객체

• 변수객체
• 스코프 체인
• thisValue

변수객체

1. 전역 컨텍스트의 경우 전역함수, 전역변수를 프로퍼티로 소유한다.
2. 함수 컨텍스트의 경우

스코프 체인

상위 컨텍스트를 참조하고 있어서 자기 자신안에서 못 찾는 정보는 상위 컨텍스트로 넘어가서 탐색을 한다.

this 는 함수 호출시 결정됩니다.

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

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}

foo();

3번부터 다시 보기 …

넘나 어려운 것 !

질문으로 할 만한 것

0. 이 js파일이 실행되는 실행 컨텍스트를 한 번 설명해주세요
   1.그렇다면 this가 뭐에요?
1. Hoisting이 뭔가요?
   Conceptually, for example, a strict definition of hoisting suggests that variable and function declarations are physically moved to the top of your code, but this is not in fact what happens. Instead, the variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.

실행컨텍스트_명세

요것도 한 번 읽어보기 !!!

강의

• ajax 다시 해보기 예제
• html template

html template

• 서버 사이드 렌더링
• 클라이언트

장단이 있음 보통 시니어가 정함 / 알고 있으면 좋음
서버사이드 렌더링 빠름 -> 서버 부하가 커짐
클라이언트 느림 -> 서버 부하 줄일 수 있음
끝

.replace / 정규표현식 !

template method화 & reduce조합으로 여러개를 처리하면 용이

태그함수 !

CORS

보안상의 이유로 다른 domain에서 요청하지 못하게 한 것 !

서버에서 헤드로 인정해주거나 Jsonp로 같은 domain에서 요청을 할 수 있다.

강의 들으면서 MD파일 적는 메모장 있으면 좋겠다.
개발자 도구 탭에서?.?

3C Web Applications Working Group은 새로운 Cross-Origin Resource Sharing (CORS) 메커니즘을 권하고 있습니다.
CORS는 웹 서버에게 보안 cross-domain 데이터 전송을 활성화하는 cross-domain 접근 제어권을 부여합니다.
모던 브라우저들은 cross-origin HTTP 요청의 위험성을 완화시키기 위해 (XMLHttpRequest와 같은) API 컨테이너 내에서 CORS를 사용합니다.

Tagged templates

tag함수

tag를 사용하면 template literal을 함수로 파싱할 수 있습니다.

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
41
42
43
44
45
46
47
48
49
50
51

var person = 'Mike';
var age = 28;

function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // 사실 이 예제의 string에서 표현식이 두 개 삽입되었으므로
  // ${age} 뒤에는 ''인 string이 존재하여
  // 기술적으로 strings 배열의 크기는 3이 됩니다.
  // 하지만 빈 string이므로 무시하겠습니다.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  // 심지어 이 함수내에서도 template literal을 반환할 수 있습니다.
  return str0 + personExp + str1 + ageStr;

}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

// tag함수 strings 인자로 받는 문자열들이 배열로 간격 대로 나눠서 들어오고 
// 나머지 인자들을 받는다. 


function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"