WIL

스파르타 이노베이션 캠프 3주차(리액트 입문)에 들어왔다.
드디어 본격적으로 리액트를 배우기 시작한다.
아직 자바스크립트 용어에도 익숙하지 않아서 이론이 많이 어렵다. 하지만 알고리즘 주간에도 그러했듯이 자연스럽게 익숙해지고 성장할 것 이다. 화팅!!

자바스크립트가 작동하는 방식.

“동기식 싱글 스레드 언어”(synchronous single-threaded language)

• 동기식 : 현재의 명령어가 실행완료가 다 돼야 다음 행으로 이동한다.+ 특정 순서에 의해 한번에 하나의 명령어만 수행한다.
• 스레드 : 프로세스가 할당받은 자원을 이용하는 실행의 단위.

ex) 멀티 스레드 : 한 프로세스 내에서 동작되는 여러 실행 흐름으로 프로세스 내의 Heap, Data, Code 영역을 공유.

##여기에 매우 정리가 잘 되어있다!!..
https://velog.io/@gil0127/%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9CSingle-thread-vs-%EB%A9%80%ED%8B%B0%EC%8A%A4%EB%A0%88%EB%93%9C-Multi-thread-t5gv4udj

“실행 콘텍스트(Execution Context)”

: 자바 스크립트 모든 코드가 실행되는 주위 모든 환경의 정보를 전부 가지고 있는 커다란 박스.

'메모리 컴포넌트' = 변수환경.
'코드 컴포넌트' = 실행 스레드.

1. Memory Allocation Phase(메모리 할당 단계)

   1. 코드의 처음부터 끝까지 쭉 훑어서 ‘변수’와 ‘함수 선언’을 찾는다.

   2. 변수와 함수선언을 메모리 컴포넌트에 순차적으로 저장.

   3. 모든 함수와 변수가 Execution Context의 메모리 컴포넌트 안에 ‘키-밸류 타입’으로 저장되는 단계

   4. 함수 블록 전체를 메모리 블록에 카피, 변수는 undefined타입으로 할당.

      (키:밸류 ⇒변수 : 값, 함수이름: 함수코드)

2. Code Execution Phase(코드 실행 단계)
   1. 순차적으로 코드 실행.
   2. 변수의 undefined 값을 바꿔줌.
   3. 함수 선언은 그냥 넘어감.
   4. ‘함수 실행’부분을 만나면 ⇒ 또 다른 “실행 콘텍스트(Execution Context)”를 생성. ⇒Local Exe~~
   5. return 코드가 오면 현재의 Execution Context를 끝내고, 상위 Execution Context로 코드 실행 권한을 옮김.
   6. 함수의 Execution Context는 삭제됌.

Execution Context가 또 다른 Execution Context를 호출하고 삭제하는 방식이 stack처럼 쌓인다 하여 Call Stack이라고 부른다. (= Execution Context Stack, Program Stack, Control Stack)

{Object} 자료형

https://kosaf04pyh.tistory.com/21

JS에서의 Class : 비슷한 object뽑아내는 기계.

• this : 기계로부터 새로 생성되는 object. (=instance)

functions 기계(구멍){
	this.q = 구멍;  //새로 생성되는 object에 {q : ‘consume}추가해주세요.
	this.w = ‘snowball’;
}

var nunu = new 기계('consume');
var garen = new 기계('strike');

<ES6 문법>

class Hero{
	constructor(){
		this.q = 구멍;
		this.w = 'snowball';
	}
}

-------------------------------------------------------
var nunu = {
	q : 'consume',
	w : 'snowball'
}

ES5, ES6.

ES란, ECMASCRIPT의 약어 뜻하며 자바스크립트의 표준, 규격을 나타내는 용어.
뒤에 숫자는 버전을 뜻하는데 ES5(2009년) ES6(2015년) 출시하였자.

ES6 이후에는 매년 업데이트가 되고 있는 반면, ES5와 ES6 사이에는 6년의 기간이 흘러 많은 기능들을 추가되었습니다.

1. let, const 키워드 추가.
2. Arrow fucntion 추가.
3. Default parameter 추가.

//es5

var bmi = function(height, weight){
    var height = height || 184;
    var weight = weight || 84;
    return weight / (height * height / 10000);
}

// 함수호출시 매개변수로 키와 몸무게를 할당하면, bmi를 리턴해주는 함수작성
// 파라미터가 없을시 작성자의 bmi를 리턴

//es6

const bmi = function(height = 184, weight = 84){
	return weight / (height * height / 10000);
}

4. Template literal 추가.

es5
var firstName = 'heo'
var lastName = 'beomsung'
var name = 'My name is ' + firstName + ' ' + lastName + '.'
//My name is heo beomsung.


//es6
const myName = `My name is ${firstName} ${lastName}.`
console.log(myName)
//My name is heo beomsung.

//es5 공백의 불편함
console.log("제"+ " " + "블로그에" + " " +  "방문해" + " " + "주셔서" + " " + "감사합니다")
//제 블로그에 방문해 주셔서 감사합니다

//es6 공백도 있는 그대로 인식
console.log(`안녕하세요 제 블로그에 방문해 주셔서 감사합니다`)
//안녕하세요 제 블로그에 방문해 주셔서 감사합니다

출처: https://hbsowo58.tistory.com/m/407