[CODESTATES im16] Check Point3 문제풀이, Sprint Review

1. Check Point3 문제풀이

[ o ] : 정답

[ x ] : 내가 선택한 답 = 틀림

Q1. 'this' 키워드

[ ] The function that is currently being invoked.

[ o ] An object that the invoked function points to when executing.

[ ] A variable used for lexical scope lookup.

1. this: 함수가 아님

2. 호출된 함수가 실행할 때 가리키는 특정 객체입니다.

3. 정적 스코프 lookup에 사용되는 변수가 아닙니다.

lexical scope: static scope(선언될 때 저장되는 스코프)

[lexical scope] https://stackoverflow.com/questions/1047454/what-is-lexical-scope

Q2. 코드 실행 후 result?

var x = 10;
var strangeAdd = function (y) {
  var x = 20;
  return this.x + y
};

result = strangeAdd(10);

[ ] 10

[ o ] 20

[ ] 30

[ ] NaN

this가 정의된 곳과는 무관하게 실행되는 지점이 글로벌영역이기 때문에 result 의 this는 window이다. 그렇기 때문에 window.x를 불러오기에 답이 20이 된다.

Q3. 내 프로그램에서 'this' 키워드의 의미 결정 방식?

[ x ] Look to the function in which it is defined — that’s what the context is bound to.

[ o ] Look to where the function is called at call time to determine how it is called and evaluate from there.

1. 함수가 정의되어있는 문맥이 아닌 실행 방식에 따라 결정됨.
2. this는 함수가 실행될 때 실행되는 방식에 따라 결정됨.

Q4. 'this'에 적용되는 다섯가지 패턴?

1. global this: window
2. function 호출: window
3. method 호출: 부모 object (function의 부모는 window이기 때문에 사실상 2와 3은 같음)
4. new 연산자로 생성된 function영역의 this: 새로 생성된 객체(Construction Mode)
5. .call()이나 .allpy()호출: 첫번째 인자로 명시된 객체

Q5. 코드 실행 후 콘솔?

function foo(){
  console.log(this);
}

foo();

[ ] foo

[ ] console

[ ] A reference error will be thrown.

[ o ] Window or the global object.

this: free function invocation

전역에서 foo를 불렀기 이 this는 window가 된다.

Q6. 코드를 실행 후 콘솔?

var obj = {
  foo: function(){
    console.log(this);
  }
}

obj.foo();

[ x ] foo

[ ] console

[ o ] obj

[ ] window or the global object.

여기서의 this: 부모 객체

(닷노케이션 기준 왼쪽의 객체가 this가 된다고 보면 됨.)

Q7. 코드 실행 후 콘솔?

var obj = {
  foo: function(){
    console.log(this);
  }
}

var fn = obj.foo;
fn();

[ x ] foo

[ ] console

[ ] obj

[ o ] Window or the global object.

free function invocation : this = window

fn이 function() { console.log(this); }가 되는것이기 때문에 이 this가 free function invocation이 됨.

obj.foo()의 경우에는 함수를 불러오는 것이 아니니 method invocation이다.

var fn = obj.foo 의 위치가 중요한게 아니고 fn()의 실행 시점이 중요함.

this에서는 실행 위치가 중요함

Q8. 코드 실행 후 콘솔?

var obj = {
  foo: function(){
    console.log(this);
  }
}

var obj2 = {
  foo: obj.foo
}

obj.foo.call(obj2);

[ x ] foo

[ ] console

[ o ] obj2

[ ] window or the global object.

.call()이나 .apply()의 경우 실행시점에서 this의 값이 정해지는 것이 아니라 명시적으로 값을 정할 수 있다.

QnA

Q. JS에서의 주소

A. js에서는 주소 관리를 GC에서 하기 때문에 주소의 개념보다는 레퍼런스 참조의 개념으로 이해하는게 나을 것이다.

Q. Arraw function

A.

// function scope를 발생시키지 않음
const fn = () => {
}

// function scope 발생
const fn2 = function () {  
}

---

---

2. Sprint Review

2-1. JS- runtime(node)

JS runtime: JS가 실행되는 환경(js가 실행되는 환경에 따라 조금씩 다름)

내가 하려고 하는 것이 실행되지 않으면 실행하고자 하는 환경에서 지원이 되는지를 확인해야 함.

대표적인 환경: node vs browser

​ version이 존재함.

2-2. nvm: node version manager

필요한 이유: 버전에 따라 실행되는 코드가

node관리매니저가 많은데도 nvm을 사용하는 이유: 가장 편리하기 때문

$nvm install > 다운

$nvm ls > 여러 노드 버전이 뜸

$nvm use > 바로 버전이 변경됨

use로 node의 버전을 바꾸더라도 터미널 종료 후 다시 켜면 default버전으로 변경됨.

​ => 쭉 변경해서 사용하고 싶다면 default를 변경해야함

최신버전을 사용하지 않고 LTS(longterm support)를 사용하는 이유: LTS가 안전화된 버전이기 때문이다.

​ => 하위호환성이 뛰어나다.

2-3. *gitflow

remote: 내 컴퓨터가 아닌 곳

​ github

local:

• $git remote -v => origin
  • clone 받아 온 repo를 기본적으로 오리진이라고 잡음.
• $git remote add pair
  • remote환경에 pair의 URL 추가
• $git push origin master
  • origin: remote 이름
  • $git push 1 master 식으로 해당 remote환경에 push 가능
    • github repository의 설정에서 권한을 주어야 push 가능
• $git pull remote pair(remote 이름) master
  • repo의 기본 권한이 read이기 때문에 별다른 권한이 없어도 읽어올 수 있다.

3명이서 pair프로그래밍을 진행할 때

• 항상 나는 내 remote에 올리고 다른 사람들이 그걸 받아오는 형식으로 진행해야 함.

2-4. linting

• lint: 코드 룰()

  • 따르지 않으면 오류를 냄(prettier처럼 강제로 바꿔주지는 않음)

• prettier: 코드 형식, 모양(같은 문법을 어떻게 보여줄지의 형식)

  • 오류를 내지는 않고 자동으로 그 모양으로 바꿔줌

=> 같이 연결해서 쓴다면 저장할 때 원하는 방식으로 코드가 저장이 된다.(lint대로 prettir가 고쳐줌)