돌아보기

나에겐 개발자라고 하기엔 매우 안좋은 습관이 있다.

1. 세련된 방식을 찾아보지 않고 무식하게 개발한다.
2. 노가다라도 돌아가면 리팩토링 안한다.
3. 새로운 기술이나 문법나오면 미룬다 안본다.

자바스크립트를 처음 접한 것이 하필 2015년이고 그 뒤로는 아는 수준으로만 개발을 해왔던 터라 ES6에 나온 문법들도 어색하다. (라기엔 시간이 너무 흐른거 아닌가요)
비개발자 직업의 한계랄까.. 강의를 조금만 들어도 바로 나오는 내용인데 항상 바쁘게 무작정 만들기부터 하다보니 이렇게 된 것 같다. 그래서 지금 아주 기초부터 강의를 듣는, 이 시간이 너무나 행복하고 보람차고 씻어내는 기분이든다.

강의

벨로퍼트와 함께하는 모던 자바스크립트

1장. 자바스크립트 입문
https://learnjs.vlpt.us/basics/

학습 내용

1. 객체 구조분해 (비구조화)

다음과 같은 과정으로 더 코드를 효율적으로 깔끔하게 쓸 수 있다.
아래 보기의 경우 1단계가 가장 쉬워보이지만 코드 줄이 길어지고 반복해서 쓰게되는 것을 줄일 수 있다.

1단계

function print(hero) {
	console.log(hero.name);
}

2단계

function print(hero) {
	const { name, age } = hero;
	console.log(name);
}

3단계

function print({ name, age }) {
	console.log(name);
}

2. 화살표 함수

1단계

화살표 함수
const dog = {
	sound: ‘멍멍',
	say: function() {
		console.log(this.sound);
	}
}

메서드 축약 표현

const dog = {
	sound: ‘멍멍',
	say() { // 축약
		console.log(this.sound);
	}
}

*화살표함수는 this를 사용할 경우 에러

const dog = {
	sound: ‘멍멍',
	say: () => {
		console.log(this.sound);
	}
}
 // 에러 화살표 함수는 this를 모른다

3. getter/setter

get, set을 설정해서 은닉

1. 프로퍼티명은 언더바로 설정 (getter, setter와 이름 분리)
   *프로퍼티명을 _언더바로 하지 않으면 루프에 빠지는 케이스 발생할 수 있음
   RangeError: Maximum call stack size exceeded
   *참고 : https://pxd-fed-blog.web.app/getter-setter/

2. set 구문은 객체의 속성에 할당을 시도할 때 호출할 함수를 바인딩
   무슨말이냐면 보통의 함수처럼 ( )를 사용하지 않고 할당(대입)할 때 불러온다는 것

const numbers = {
	_a: 1,
	_b: 2,
	sum: 3,
	calculate() {
      console.log(‘calculate’);
      this.sum = this._a + this._b;	
    },
    get a() {
        return this._a;
    },
    get b() {
        return this._b;
    },
    set a(value) {
        this._a = value;
        this.calculate();
    },
    set b(value) {
        this._b = value;
        this.calculate();
    }
};
console.log(numbers.a); // getter
numbers.a = 5; // setter함수이기 때문에 set a안에 this.calculate()가 실행 -> sum도 업데이트 됨
console.log(numbers.sum); // 7 *연산을 하지 않고 기존에 업데이트 값 읽음

4. of 와 in

of >>>> 배열

const numbers = [0, 1, 2]
for (let i of numbers) {
	...
}

in >>>> 객체

const dog = {
	name: ‘강아지’,
	sound: ‘멍멍',
	age: 2
}
for (let i in dog) {
	console.log(i); 		// “name”, “sound”, “age” *** key와 동일
	console.log(dog[i]); 	// ”강아지", “멍멍", 2 *** values와 동일
}
console.log(Object.entries(dog)); 	// [[“name”,”강아지”], [“sound”,”멍멍”],[“age”,2]]
console.log(Object.keys(dog)); 		// [“name”, “sound”, “age”]
console.log(Object.values(dog)); 	// [“강아지", “멍멍", 2]

entries, keys, values

위의 예시처럼 오브젝트의 메서드들이 있는데 아래의 메서드들도 자주 사용했던 것 같다.

• Object.freeze()
• Object.getOwnPropertyNames()
• Object.getPrototypeOf()
• Object.values()

*참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

5. continue, break

break는 워낙 많이 사용하는데, continue는 써본 적이 없어서 볼 때마다 항상 새롭다..

for (let i = 0; i < 10; i++) {
	if (i===2) continue; // 다음 것
	if (i===5) break;
	console.log(i); // 0,1,3,4 *2는 continue에 의하여, 5는 break로 종료
}

배열 내장 함수는 다음 글에서 이어서...

기타 메모

codesandbox.io

온라인 코드 에디터로 크롬 > 더보기 > CodeSandbox 설치 로 바로 새 창으로 설치할 수도 있다.

eslint VS prettierrc

eslint : 코드 구현 방식을 방식을 일관성 있는 방식으로 구현
prettierrc : 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성