[React] Day_25 데일리 정리

 

미피랑 침대? 이건 진짜 결혼 바이럴이다 ;;;

 

히히 아침에 버그 수정해서 냅다 제출하고 행복하게 누워버린 림졍. (수업시간에 안누었음. 진짜임.)

그러고 코드카타 풀고 궁금한거 물어보고 실습... 도 하긴 했는데

실습하는 것보다 아직 이론정리를 안해서 ^-^

그으으으래애애애서어어어 적어보는... 특강정리 time.

(내일은 뭐하지. 아 코드카타 해야하는구나. 아 근데. 코테과제가 밀렸다. 노우...)

여튼 그건 제껴두고 오늘은 합-삐 쌈뽕하게 한번 가시죠 -!

렏 흐 고. 😎

 

 

싱나는(?) 특강정리 ^-^)b

 

달리기반 특강정리

this..... 다음, 에....뭐라구요? s...sc.. scope? 🤯

 

야바위같은 망원경자식...

 

 

This 정리

 

this 

어떠한 특정 객체를 가르키는 것. (뭐.. 예전에 객체 생성에서 생성자 함수라고도 불렸던 친구.)

우선 이전에 배웠던 친구로 데려와보자.

// this를 활용한 객체 생성 예시
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}

let person1 = new Person("림졍", 23, "여자");
let person2 = new Person("림졍 주니어", 10, "여자");

 

이후 this binding 정리 후 위의 예시가 어떤 형식으로 사용되었는지 다시 한번 보여주도록 하지.

(일단 킵하고 고.)

 

 

this binding (3) 

- 기본(전역) 바인딩 : 전역객체 (in 함수)

// 기본(전역) 바인딩 예시
function showThis() {
  console.log(this);
}

showThis(); // 브라우저(window), VsCosd(globad) 객체 출력 
// strict 모드에서는 undefined (뭣)

 

 

- 암묵적 바인딩 : 해당 객체

// 암묵적 바인딩 예시
const inside = {
    name: 'in',
    sayName() {
      console.log(this.name);
    },
  };
  
  const outside = {
    name: 'outside',
    sayName: inside.sayName,
  }
  
  outside.sayName(); // 'outside' 출력 (wow!)

 

 

- 명시적 바인딩: 특정 개체 명시적으로 설정 (관련 메소드 : call, apply, bind)

 

1) call : 함수 호출 시, this 값 명시적으로 설정. ( 첫번째 인자 = this 사용할 객체 / 나머지 = 함수 전달 매개변수 )

// call
const name = "림졍";

function greet() {
  console.log(`Hello, my name is ${this.name}`);
}

const user1 = {
  name: '림뎡'
};

greet.call(user);	// Hello, my name is 림뎡 (림졍이 아니다!)

 

2) apply: call이랑 비슷, but 두번째 인자로 매개변수 배열 받음.

function greet(greeting, punctuation) {
  console.log(`${greeting}, 내 이름은 얼렁뚱땅 ${this.name}${punctuation}`);
}

const user = {
  name: '림졍'
};

greetV2.apply(user, ['안녕', '!']); // 출력: 안녕, 내 이름은 얼렁뚱땅 림졍!

 

3) bind:  this만 지정, 나머지는 따로 해줘야..

function greet() {
  console.log(`안녕, 얼렁뚱땅 ${this.name}`);
}

const user = {
  name: '림졍'
};

const boundGreet = greet.bind(user);
boundGreet();	// 안녕, 얼렁뚱땅 림졍

 

 

- new 바인딩 : new 활용하여 생성자 함수 호출 ( 생성자 함수 내부의 this = 새로 생성된 객체 )

// 생성자 함수 정의
function Music ( title, artist) {
    // this는 새로운 객체를 가리킴 (ft. new 바인딩)
    this.title = title;
    this.artist = artist;
}

// new 연산자를 사용해 객체 생성
const favMusic = new Music('Rob the bank', 'Cal Scruby');

// 생성된 객체의 프로퍼티 접근
console.log(favMusic.title);	// Rob the bank
console.log(favMusic.artist);	// Cal Scruby

 

원래 자주듣던 래퍼인데.. 최근에 노래가 나온건 알고 있었지만...

...? 마미손 국힙이었네? 언제 수출당했음;;; (뮤비 썸넬 오늘 처음 봄)

(추가적인 설명은 생략한다.)

 

+) 화살표 함수 ( => )에서의 this → 상위스코프의 this를 물려받음

greetArrow() :  상위(함수)나 전역 스코프 의 this 자동으로 사용 → person보다 상위의 스코프인 window 출력

// 객체 생성
const person = {
    name: '림졍',
    // 일반 함수에서의 this
    greetRegular: function() {
        console.log('Regular function this:', this);
    },
    // 화살표 함수에서의 this
    greetArrow: () => {
        console.log('Arrow function this:', this);
    }
};

// 객체 메서드 호출 (브라우저에서 체킹)
person.greetRegular();
/* Regular function this: {name: '림졍', greetRegular: f, greetArrow: f}*/
person.greetArrow();
/* Arrow function this: Window {어짜고저짜고} */

 

Class 정리

 

Class

객체를 생성하기 위한 탬플릿

// 기존에 사용하던 친구 데려오기
// function Music ( title, artist ) {
//   this.title = title;
//   this.artist = artist;
// }

class Music {
// 위의 function, 이쪽으로 들어감 
constructor( title, artist ) {
this.title = title;
  this.artist = artist;
}

// 인스턴스에 의존해서 실행
displayInfo() {
  console.log(`${this.title} ${this.artist}`);
}
}
const favMusic = new Music('Rob the bank', 'Cal Scruby');

// displayInfo() : 클라스 메소드
favMusic.displayInfo();	// Rob the bank Cal Scruby

 

+) 정적 메서드 : 인스턴스 없이 Class 사용 가능

(단, Class 안에서의 메서드는 되도록 화살표 함수는 사용하지 말 것 : this가 window가 될 수 있음)

 // 인스턴스와 무관하게 실행가능한 정적 메서드
class Music {
  static displayInfo(title, artist) {
    console.log(`${title} ${artist}`);
  }
}

Music.displayInfo('Rob the bank', 'Cal Scruby');	// Rob the bank Cal Scruby

 

 

 

상속!

부모클래스 속성 및 메서드 → 자식에서 물려주기 가능. ( ??? : 이런 자본주의..사회 )

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // overriding
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex', 'Labrador');
dog.speak(); // 출력: Rex barks. 아, 순간 T-Rex인줄..읍읍

 

 

 

Scope 정리

 

Scope

변수와 함수가 유효한 범위

 

- 함수 스코프 : 함수 내에서 선언된 변수는 함수 내에서만 유효

function aeo() {
  var x = 'local';
  console.log(x); // 출력: local
}

aeo();	// aeo내의 x 잘 있어요!
console.log(x); // ReferenceError: x is not defined

 

- 블록 스코프 : ES6에서 도입된 let과 const 지원. 중괄호 {} 로 감싸진 코드 블록 내에서만 변수가 유효 ( 예외 : var )

{
  var z = "var: not blocked";
  let y = 'block scoped';
  console.log(y); // block scoped
}

console.log(z);	// 출력 - var: not blocked
console.log(y); // ReferenceError: y is not defined

 

- 스코프 체인: 스코프 체인은 변수를 찾을 때 현재 스코프에서 찾고, 없으면 상위 스코프로 이동하여 변수를 찾는 방식

let a = 'global';

function outer() {
  let b = 'outer';
  if (true) {
	  let d = 10;
  }
  function inner() {
    let c = 'inner';
    console.log(a); // 출력: global
    console.log(b); // 출력: outer
    console.log(c); // 출력: inner
    console.log("d:",d); // reference error!
  }

  inner();
}

outer();

 

[해설]

outer → inner 부름
a: inner X , outerX ,  전역 O → 'global'
b: inner X , outer O → 'outer'
c: inner O → 'inner'
d: inner X , outer X (블록 내부에 존재), 전역 X → reference error

 

- 렉시컬 스코프: 함수가 선언된 시점에서 상위 스코프를 결정. 함수가 선언된 위치에 따라 상위 스코프 결정 (실행되는 위치 X!)

// 아래 코드의 출력 결과는?
const y = 5;

function first() {
  const y = 20;
  second();
}

function second() {
  console.log(y);
}

first(); // 5
second(); // 5

 

[해설]

fitst() 내부 second, 선언 시점이 전역, 전역값인  y = 5
두번째도 마찬가지!

 

 

마무리 - ??? : 해치웠나..?

프로젝트 끝! 이얏호 일단 신나 ^-^!

 

마참내! 드디어! 큰 산 하나 넘겼다!

개인프로젝트였지만 우리 조원들외에도 프로젝트 때문에 이리저리 왔다갔다 하다보니

어느새 다른 분들이랑... 튜터님들이랑도..(?) 내적 친밀감을 다져보는 14일의 시간이었음. (벌써?)

이것저것 우다다다 처음해보는 것도 많고.. 맨땅에 헤딩도 많이 하고

근데 웃긴건 역시 해봐야 이해가 간다.. 내 기준 강의 <<<<<<<<<<<<< 실습... 읍읍...

실전파 림졍이라는 것을 다시금 느끼게 된 기간이었다.

아 이제 새로운거 배우면.. 또 뇌에 쥐나겠지..?

쉽지않은 다음주가 되기전에 언능 쉬어놔야겠당 ㅠㅡㅠ..

 

 

투-데이 KPT 회고

• Keep :  오늘은 빠르게 칼퇴하도록 TIL도 야무지게 작성함!
• Problem : 근데 알고리즘만 미뤄짐. 내일 어마무시한 친구랑 마주칠듯; 
• Try : 알고리즘도 이제 인트로에 추가추가 해주는 그날까지..

.

.

.

끝!