갈미현 주간학습(2022.11.04)

주간 학습 공유

강의 및 실습

Simple Todo List 앱 만들기

1. 기본 컴포넌트 작성 및 추상화 개념 이해하기
• TodoList, TodoForm, Header, App

2. 모듈화

3. Promise, async & await, fetch의 비동기 이해하기

추상화

“복잡한 자료, 모듈, 시스템 등으로부터 핵심적인 개념 또는 기능을 간추려 내는 것” - 위키

• 관점 - 관심 있는 것을 중심으로 바라보는 것

• 사소한 것을 쳐내고, 핵심적인 기능을 뽑아내는 것

class ImplementAbstraction {
      // method to set values of internal members
      set(x, y) {
        this.a = x;
        this.b = y;
      }

      display() {
        console.log('a = ' + this.a);
        console.log('b = ' + this.b);
      }
    }

    const obj = new ImplementAbstraction();
    obj.set(10, 20);
    obj.display();

• 코드의 중복을 막고, 재사용성, 가독성을 높인다.

• 사용자에게 영향을 미치지 않고, 내부 구조를 수정할 수 있다.

• 추상화가 잘 되어 있으면, 각각이 독립되어 있기 때문에 다양한 응용이 가능하다.

추상적 자료형 단계의 예)

스택은 삽입한 순서대로 값들이 쌓이는 형태야.
스택의 제일 위에 값을 넣는 push연산과 반대로 값을 빼는 pop연산이 있어
스택이 비어있는 지 알아보는 empty연산이 있고
스택에 쌓인 값이 몇 개인지 알아보는 size 연산이 있어

자바스크립트 코딩의 기술

자바스크립트 코딩의 기술 - YES24

NTS, 티몬에서 UI 개발자, 프런트엔드 개발자로 근무했고, 지금은 외국계 기업의 웹 서비스를 현지화하는 업무를 맡고 있습니다. 번역서로는 『리액트 교과서』, 『처음 시작하는 리액트』가 있습니다. NTS, 티몬에서 UI 개발자, 프런트엔드 개발자로 근무했고, 지금은 외국계 기업의 웹 서비스를 현지화하는 업무를 맡고 있습니다. 번역서로는 『리액트 교과서』, 『처음 시작하는 리액트』가 있습니다.

https://www.yes24.com/product/goods/85019231

Part4. 조건문 - 거짓값이 있는 조건문을 축약하라

• false

• null

• 0

• NaN

• ‘’ (or “”)

['a', 'b'].indexOf('a') // 0 == false
['a', 'b'].indexOf('t') // -1 == true

• Array.includes() : 값이 있는 경우 true, 값이 없는 경우 false 반환

const employee = {
	name: 'Eric',
	equipmentTraining: true,
}

function listCerts(employee) {
	if (employee.equipmentTraining) {
		employee.certificates = "Equipment";
		delete employee.equipmentTraning; //조작
	}
}

function checkAuthorization(employee) {
	if (!employee.equipmentTraining) {
		return 'No Authorization';
	}
	return 'Has Authorization';
}

listCerts(employee);
checkAuthorization(employee);

1. delete employee.equipmentTraining 과 같이 함수 내에서 데이터를 조작하지 않습니다.

2. 데이터 조작이 불가피하다면, 엄격한 일치를 사용합니다.

if (employee.equipmentTraining !== true) {...}

Short Circuiting

//foo1() - 1초 
//foo2() - 100초

//방법 1
if (foo1() || foo2()) { console.log('yes'); }

//방법 2
if (foo2() || foo1()) { console.log('yes'); }