[따라하며 배우는 자바스크립터, 리액트 A-Z - John Ahn]

배운 내용 정리

• 섹션 5: 자바스크립트 중급

   

this:

메소드 this는 해당 객체 참조

함수 this는 Window object 참조

생성자 함수 this는 빈 객체 참조

화살표 함수 this는 상위 스코프 this 참조

call(): 인자 값을 줘서 this가 가리키는 window 객체를 인자값으로 가리키게하고 바로 호출 func.call(object, arg1, arg2);

apply(): arguments를 배열로 전달 func.apply(object, [arg1, arg2]);

bind(): this에 객체만 바인딩하기 때문에 사용하려면 함수 호출 func.bind(object)(arg);

conditional operator: 조건식 ? 참이라면 실행할 명령문 : 거짓이라면 실행할 명령문

JS는 동기 언어로 비동기 부분은 브라우저의 도움으로 처리한다. call stack에서 비동기 함수는 Web APIs으로 보내져서 비동기 처리가 완료되면 콜백 큐로 함수가 들어오게 되고 callback queue에서는 web api의 콜백 함수들이 대기하게 된다.

이벤트 루프는 call stack과 callback queue를 계속 주시하고 있다가 call stack이 비게 되면 먼저 들어온 순서대로 콜백 큐에 있는 함수들을 call stack에 넣어준다.

Closure란 다른 함수 내부에 정의한 함수가 있는 경우 해당 내부 함수는 외부 함수의 변수 및 범위에 엑세스할 수 있다.

array methods:

map: 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

// 화살표 함수는 thisArg가 들어가지 않음
const map = arr.map(callback(currentValue[,index[,array]]),[, thisArg])

filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열 반환

const filter = arr.filter(callback(element[,index[,array]]),[, thisArg])

reducer: 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값 반환

const reducer = arr.reduce(callback[, initialValue])
// 4개의 인자
// 1. 누산기 accumulator
// 2. 현재 값 currentValue
// 3. 현재 인덱스 currentIndex
// 4. 원본 배열 array

undefined: 자바스크립트 엔진이 변수를 초기화할 때 사용

null: 개발자가 의도적으로 변수에 값이 없다는 것을 명시

===: 원시 자료형 비교

JSON.stringify: 객체가 깊지 않은 경우 비교

lodash library: 객체가 깊은 경우 비교

깊은 복사의 경우 lodash, ramda 등 라이브러리 또는 structuredClone 사용

함수 선언문: function 키워드 다음 함수 이름을 작성해 함수 이름 선언, 호이스팅 영향

함수 표현식: 변수에 함수 할당, 함수 이름 익명

IIFE: 즉시 실행 함수 표현 ( function(){} )()

사용 목적: 변수를 전역으로 선언하는 것을 피하고<( function(){} ) > IIFE 내부 안으로 다른 변수들이 접근하는 것을 막음<()>

Intersection-observer: 뷰포트와 설정한 요소의 교차점을 관찰하며 요소가 뷰포트에 포함되는지 포함되지 않는지 구별하는 기능 제공

observe() 메소드로 타겟 요소 선정, isIntersecting가 true라면 타겟 요소와 루트 요소가 교차한다는 뜻

순수 함수는 함수형 프로그래밍 패러다임의 한 부분으로 2가지 규칙을 갖는다. 같은 입력 값이 주어졌을 때, 언제나 같은 결과를 리턴한다. 사이드 이펙트를 만들지 않는다. 이 규칙을 따름으로써 클린 코드, 쉬운 테스트, 쉬운 디버깅, 독립적인 코드를 작성할 수 있다.

커링은 함수를 호출하는 것이 아닌 병합하는 것으로 커링을 통해 여러 인자를 단계별로 받아 원하는 시점에 최종 결과를 얻을 수 있어 함수 재사용성과 유연성에 향상된다. func()()()

strict mode: 기존에 무시되던 에러들을 발생하게 하고, 최적화 작업을 어렵게 만드는 실수를 바로 잡아준다.

적용법:

1. 파일에 use strict 지시자 입력

2. 함수에서만 사용하려면, function func() {"use strict"; return [];}

3. class 문법을 사용하면 자동으로 변경

4. html <script src="" type="module"></script> type="module"

    

이 부분은 자바스크립트의 꽃이 아닐까 생각이 드는 섹션이었다. 프론트엔드 면접 질문 3대장인 this, 실행 컨텍스트, 클로저 부분을 배울 수 있었다. 사실 대학다닐때 웹프로그래밍을 수강했음에도 이부분에 대해서는 따로 학습하지 못했다. 이번에 학습하면서 와 이게 이렇게? 라는 부분이 많았다. 아직 프론트엔드 개발자로서 지식이 참 부족하다는 생각이 들었다.

• 섹션 6: OOP

OOP: 여러개의 독립된 단위 "객체" 들의 모임

특징:

1. 자료 추상화

2. 상속

3. 다형성

4. 캡슐화

오버로딩(Overloading): 같은 이름의 메서드 여러개를 가지면서 매개변수의 유형과 개수가 다르도록 함

오버라이딩(Overriding): 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용

Polymorphism: 같은 메소드라도 각 인스턴스에 따라 다양한 형태를 가질 수 있는 것

Prototype: 자바스크립트 객체가 다른 객체로부터 메서드와 속성을 상속받는 매커니즘

생성자함수.prototype.함수 = function(){};

Object.create(prototype)

ES6 Classes는 Java와 사용법이 비슷했다.

Sub Class(Inheritance): 부모 클래스에 있던 기능을 토대로 자식 클래스를 만들 수 있는 것, extends 키워드 사용

super(): 자식 클래스 내에서 부모 클래스의 생성자/메소드를 호출할 때 사용

분명 Java 배우면서 OOP에 대해 알고 있다 생각했지만,  오버로딩, 오버라이딩이 헷갈리고 prototype이 나오자 당황해버렸다. 다시 재학습해야 할 것 같다.

• 섹션 7: 비동기

자바스크립트는 싱글스레드이기 때문에 하나의 일이 오래 걸리면 다른 작업들은 그 하나의 일이 끝날때 까지 기다려야 한다.

이러한 문제점을 해결하기 위해 비동기로 어떠한 일을 수행하게 된다.

비동기 요청이 다른 비동기 요청의 결과에 의존한다면 Callback, Promise, Async/Await를 통해 문제를 해결할 수 있다.

Callback(): 콜백 함수는 특정 함수에 매개변수로 전달된 함수를 의미하고 그 콜백 함수는 함수를 함수를 전달받은 함수 안에서 호출 된다.

코드 가독성이 떨어지고 에러 처리를 한다면 모든 콜백에서 각각 에러 핸들링을 해줘야 한다.

Promise: new 키워드와 생성자를 사용해 Promise 객체를 만들고 생성자는 매개 변수로 resolve, reject 실행 함수를 받는다.

const prom = new Promise((resolve, reject) => {});
prom
  .then((success) => {
  })
  .catch((err) => {
  })
  .finally(() => {
  });

Promise의 상태:

대기(pending): 비동기 처리 로직이 아직 완료되지 않은 상태

이행(fulfilled): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

거부(rejected): 비동기 처리가 실패하거나 오류가 발생한 상태

// 모두 이행되면 결과 값 실행
Promise.all(순회 가능한 객체).then(() => {});

// iterable 안에서 가장 먼저 완료된 프로미스 결과값을 이행하거나 거부
Promise.race(순회 가능한 객체).then(() => {});

fetch()는 promise를 지원하기 때문에 new promise 생성자를 사용하지 않아도 된다.

fetch(비동기 요청).then(() => {});

Async/Await:

비동기 코드를 마치 동기 코드 처럼 보이고 코드 가독성이 좋다.

await는 async 안에서만 사용해야 하고, try... catc구문을 사용할 수 있다.

async function func() {
   try {
      const res1 = await fetch("http://abcdefg.com");
      const json1 = await res1.json();
   } catch (err) {
      console.log(err);
   } finally {
      console.log("done.");
   }
}
func();

• 섹션 8: Iterator, Generator

Symbol은 유니크한 식별자를 만들기 위해 사용한다.

const sym = Symbol('val'); // 심볼 생성
console.log(sym.description); // val

// Symbol.for(key): 동일한 Symbol 공유 
const sym1 = Symbol.for("hi");
const sym2 = Symbol.for("hi");

console.log(sym1 === sym2); // true

// Symbol.keyFor(symbol): 특정 심볼의 키 반환
const sym3 = Symbol.for("hello");
console.log(Symbol.keyFor(sym3)); // "hello"

 Iterator는 Iterable 객체와 함께 사용되고 next() 메서드를 이용해 컬렉션의 요소를 순차적으로 접근할 수 있게 하는 객체다.

- next() 메서드를 호출할 때마다 객체의 다음 값 반환

- { value: 값, done: boolean } 형태의 객체 반환 vlaue 현재 값, done 반복이 끝났는지를 나타낸다.

const arr = [1, 2];
const iterator = array[Symbol.iterator]();

console.log(iterator.next()); // {value: 1, done: false}
console.log(iterator.next()); // {value: 2, done: false}
console.log(iterator.next()); // {value: undefined, done: true} 

Generator는 Iterator를 쉽게 구현할 수 있도록 도와주는 함수로 function* 키워드를 사용하여 정의한다.

함수 안에서 yield 키워드로 값을 반환한다.

Generator는 호출되면 바로 실행되지 않고, 반복 제어가 가능하다.

yield를 사용하여 값을 반환하고 이 값을 next() 메서드로 받아온다.

function* generator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generator();

console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

• 섹션 9: Design Pattern

디자인 패턴은 문제에 대한 일반적이고 재사용 가능한 솔루션을 말한다.

- Singleton 패턴: 클래스의 인스턴스화를 하나의 객체로 제한하는 디자인 패턴

- factory 패턴: 동일한 코드를 계속해서 반복할 필요 없이 동일한 속성을 공유하는 여러 객체를 만들어야할 때 유리

- mediator 패턴: 객체 그룹에 대한 중앙 권한을 제공

- observer 패턴: event-driven 시스템 이용하는 것을 말하고 게시자-구독자 모델이라고도 한다.

- module 패턴: export로 모듈을 내보내고 import로 모듈을 가져온다.

script 타입에 module로 명시하여 사용한다. 모듈의 특징으로는 항상 엄격 모드로 실행하고 지연 실행과 인라인 모듈 스크립트를 비동기로 처리할 수 있고, 외부 오리진에서 스크립트를 불러오려면 CORS 헤더가 있어야 하고 중복된 스크립트는 무시된다.

• 섹션 10: 프로젝트 만들기

2주차 회고:

1주차 KPT 회고할 때 분명 리액트가 시작되기 전에 밀린 강의를 마무리 하기로 했지만.. 아직도 자바스크립트 강의가 끝나지 않았습니다. 분명 배운 내용도 있어서 금방 끝낼 수 있다고 생각했는데 근거 없는 자신감이었습니다. 새로 보는 내용이네요.. 중간점검에 참여할 때 강사님께서 말씀하신 제출을 위한 발자국 굉장히 찔렸습니다ㅎㅎ.. 부끄럽네요.. 화요일까지 남은 부분 정리하여 업데이트 하겠습니다. 다음주가 마지막이 되는데 끝까지 포기하지 않고 과제까지 끝내보도록 하겠습니다! (중꺾마)