TIL

책 <기초부터 완성까지, 프런트엔드> Til - 2

jjaeje 2022. 5. 15. 00:32

<기초부터 완성까지, 프론트엔드> 첫번째 til 에 이어서 두번째도 기록 위주로 블로그를 작성하려고 한다.

초반 개념은 이해가 잘 되었는데 뒤로 갈수록 읽어도 무슨 소린지 모르는 부분이 등장해서 이 부분은 기록해두었다가 나중에 유튜브로 찾아보기로 했다ㅠㅠ

 

참고로 오늘 포스팅은 전부 자바스크립트에 기반한 내용이다. 

 

 

 

class문법

프로토타입을 사용한 구현이 직관적이지 않고 번거로워서 ES2015부터 새롭게 등장한 문법. 

class Vehicle {
	constructor(){
    	console.log('initialize Vehicle');
    }
    
    run(){
    	console.log('run!');
    }
    
    stop(){
    	console.log('stop!');
        }
    }
    
    console.log(new Vehiche());

class 문법을 사용하여 선언한 클래스는 함수이다. 내부적으론느 프로토타입을 기반으로 동작한다.

 

 

scope(스코프)

  변수나 매개변수에 접근할 수 있는 범위. 함수와 블록 단위의 스코프로 나눌 수 있으며, 중첩된 스코프가 정의될 수도 있다.

 

- 함수 스코프: var, let , const

- 렉시컬 스코프: 변수나 함수를 어디에 작성하였는가에 기초하여 결정됨. 

- 함수 스코프와 블록 스코프는 스코프의 단위이고, 렉시컬 스코프는 이 스코프들의 범위를 결정하는 규칙. 스코프 체이닝에 대해 추가 공부하기.

 

 

호이스팅

 선언문이 스코프 내의 가장 최상단으로 끌어올려지는 것.

 

 

클로저(closure)

 함수의 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프를 벗어난 외부 스코프에서 실행될 때에도 자신의 렉시컬 스코프에 접근할 수 있게 해주는 것.

function foo(){
	var a = 1;
    function bar(){
    	console.log(a); // 1
       }
       return bar;
   }
   const baz = foo();
   baz(); // 1

코드는 아래와 같은 순서로 진행됨.

1. bar()함수는 렉시컬 스코프 체인을 통해 foo()함수의 스코프를 기억함

2. bar()함수를 전역변수 baz에 할당

3. 전역변수 baz를 사용하여 bar()함수를 호출

4. bar() 함수는 자신의 스코프에서 변수 a를 찾음

5. 자신의 스코프에서 찾을 수 없기 때문에 스코프 체인을 통해 foo() 함수의 스코프에서 찾음

6. foo() 함수의 스코프에서 변수 a를 찾아 1을 출력함

 

 

모듈 패턴 

회사에서 이거 개념 몰라서 제대로 골머리를 앓았다......

function myModule(){
let counter = 0;

	function increment(){
    counter += 1;
    }
    
    function decrement(){
    counter -= 1;
    }
    
    function getCount(){
    return counter;
    }
    
    return {
    	increment,
        decrement,
        getCount
       }
   }
   
   const myCounter = myModule();
   
   myCounter.increment();
   console.log(myCounter.getCount()); //1
   myCounter.decrement();
   console.log(myCounter.getCount()); //0

myModule() 함수는 increment(), decrement(), getValue() 함수들을 객체로 만들어 실행 결과로 반환함. 반환된 함수들은 기억한 렉시컬 스코프 체인에 의해 myModule()함수의 스코프에 접근할 수 있음.

 

 

모듈

전역 스코프를 오염시킬 필요가 없이 다른 모듈에 정의된 특정 변수나 함수를 불러올 수 있고, 자신의 모듈 안에 정의된 식별자들을 내보낼 수 있다. 

 

 

export

함수, 변수, 클래스 모두를 내보낼 수 있으며, 반드시 모듈의 최상위 위치에 존재해야 함

 

- 변수 내보내기

export const a = 1;

 

- 함수 내보내기

export function foo(){
	// ...
}

 

- 변수와 함수를 객체 형태로 한번에 내보내기

const b = 1;
function bar(){
	// ...
}

export { b. bar };

 

- 최상위 위치가 아닌 곳에서는 내보내기 할 수 없음

function baz(){
	export let c = 'oh'; // 문법오류 뜸
}

 

 

import

// ex.1 중괄호로 감싸서 가져올 항목 나열하는 경우
import { a. foo } from './a.js'
console.log(a); // 1

// ex.2 모듈이 내보낸 모든 식별자들을 하나의 이름으로 한 번에 가져올 경우
import * as all from './a.js';
console.log(all.a); // 1

 

- export default function 어쩌구 처럼 default로 내보낸 모듈은 중괄호 없이 임의의 이름으로 가져와 사용

export default function foo(){
 // ...
 }
 
 // 위에것 import할 경우 
 
 import bar from './a.js';

foo()를 default export로 내보낸 후 다른 경로에서 import할 때 중괄호 없이 임의의 이름인 bar로 가져와 사용할 수 있다.

 

 

 프로토타입, 프로토타입을 사용한 상속 구현, 생성자 빌려 쓰기, 호이스팅, 클로저 부분은 까다로워서 나중에 생활코딩으로 다시 복습하도록 해야겠다.