항해99 👩‍💻30일차 TIL

🎉오늘의 한 일🎉

1. 개인과제 테스트코드를 풀어보았다.

2. 자바스크립트의 this의 개념에 관하여 공부하였다.

3. blog에서 token문제를 해결하였다. 

4. CS 스터디 발표 준비(Key, Join, SQL injectioin).

 

🐣배운 점🐣

this란? 

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로
  일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.
• this는 어떤 위치에 있느냐, 어디에서 호출하느냐, 어떤 함수에 있느냐에 따라 참조 값이 달라지는 특성이 있다.

 바인딩이란?

• 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 메서드이다.

this의 사용

 this를 전역에서 사용한 경우

• 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 window라는 전역 객체를 참조한다.
• 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. (Node.js에서 전역 객체는 global 이다.)
• 브라우저라는 자바스크립트 런타임에서 모든 변수, 함수는 window라는 객체의 프로퍼티와 메소드이다.

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

 

this를 함수 내부에서 사용한 경우

• 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
• 객체안에 선언된 함수를 전역에 선언된 함수와 구분하기 위해 메소드라고 한다.
• 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
• 즉, 모든 함수는 객체 내부에 있다.
• 이때 this는 현재 함수를 실행하고 있는 그 객체를 참조한다.
• 정리하면 함수 내부에서 this의 값은 함수를 호출하는 방법에 의해 바뀐다.
• 그리고 또한 엄격모드 여부에 따라 참조 값이 달라진다.
• 엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다.

 

Sloppy mode(비엄격모드,느슨한모드)

기본값으로 브라우저에서는 window인 전역 객체를 참조한다.

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

 

strict 모드(엄격모드)

스크립트의 시작 혹은 함수의 시작 부분에 "use strict"(또는 'use strict')를 선언하면 strict 모드로 코드를 작성 할 수 있다.

f2를 객체의 메서드나 속성 (예 : window.f2() ) 으로써가 아닌 직접 호출했기 때문에 this는 undifined이다. 

function f2(){
  "use strict"; // 엄격 모드 참고
  return this;
}

f2() === undefined; // true

 

화살표 함수

화살표 함수에서 this는 자신을 감싼 정작 범위이다. 전연 코드에서는 전역 객체를 가리킨다.

참고로 화살표 함수를 call(), bind(), apply()를 사용해 호출할 때  this의 값을 정해주더라도 무시한다. 사용할 매개변수를 정해주는건 문제 없지만, 첫 번째 매개변수(thisArg)는 null을 지정해야한다. 

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

 

객체의 메서드로서

함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용한다. 다음 예제에서 o.f() 를 실행할 때 o 객체가 함수 내부의 this와 연결된다.

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // 37

간단하게 함수를 먼저 정의하고 나중에 o.f를 추가할 수 있다. 결과는 동일하다. 

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

 

생성자로서 

함수를 new 키워드와 함께 생성자로 사용하면 this는 새로 생긴 객체에 묶인다.

 

 

📌Trouble Shooting 📌

로그아웃 기능을 구현하려는데 계속 프론트단에서 token이 로컬스토리지에 담기질 않아서 구현되지 않았다. 결국 메니저님게 여쭤보고 해결이 되었는데 원인은 백엔드 쪽에서는 브라우저의 cookie로 token을 보내는데, 프론트단에서는 로컬스토리지에 token을 담아서 작업하려하니 문제가 생긴 것이었다. 사실 나는 로컬스토리지가 res.locals 같은 가상의 저장공간이라고 생각했는데 실제로 브라우저에서 확인할 수 있는 공간이었다! 부끄러움과 동시에 아직도 공부할 것이 많다는 생각이 들었다. 알고나면 별게 아닌 것 같은데 그 과정까지가 쉽지 않은 것 같다. 오늘은 로컬스토리지에 관해서 더 공부해봐야겠다.