(항해99)의 2주차 (220314-220320) WIL

항해를 시작한지 2주가 지났다. 처음 항해를 시작할 때 보다 어깨도 좀 아프고 허리도 좀 아프다. 

아직도 조난당했다는 느낌은 상당하지만, 이상하게 이 상황에 적응하고 있다.

적응하느라 몸이 좀 혹사당하는 듯 하다.

 

지난 금요일 부터는 알고리즘 주간이 끝나고 드디어 리액트를 배우는 주특기 주간이 시작되었다. 

이제 이틀 지났는데 알고리즘 주간이 굉장히 옛날처럼 느껴진다. 

처음 HTML, CSS, JavaScript를 거쳐서 알고리즘, 리액트까지 쉴 새 없이 새로운 것들이 들어오니

머리에 과부하가 왔는지 계속 집중이 안돼서 오늘은 좀 쉬엄쉬엄했다. 

 

그래도 하루에 앉아 있는 시간이 긴 만큼 뭔가 얻는게 있긴 하다.

알고리즘만 해도 처음에는 식도 쓸 줄 몰라 버벅이던게 이제는 문제가 꽤 재밌게 느껴진다.

문제는 처음 시작인데 리액트 역시 지금까지 배운 개념과는 너무 다르게 느껴져서 많이 헤매고 있다.

이제 가상dom이라는 개념이나 리액트가 어떤 방식으로 페이지를 구상하는지 같은

큰 개념들은 추상적으로나마 이해가 간다.

하지만 아직까지 문법적인 부분은 자바스크립트와 비슷한 것 같으면서도 다른 부분이 많아 어렵다.  

 

앞으로 돌아오는 한 주를 또 잘 보내면 이 어려운 부분들을 해결할 수 있을까? 

다음주 WIL에서는 더 발전한 나를 만나고 싶다. 

---

1. ES

 

ES는 ECMA(European Computer Manufacturer's Association) Script 의 약자이다. 

ECMA는 정보통신 분야에서 국제적으로 통용되는 표준을 관장하는 기구로 

ECMA Script 는 ECMA에서 만든 스크립트 언어의 표준이다. 

다시 정리하자면 ES는 전세계 어디서나 통할 수 있도록 스크립트 언어의 규칙을 정한 표준이다. 

 

Java Script는 ES를 기반으로 한 스크립트 언어의 한 종류이다.   

웹브라우저의 동적인 영역을 구성하기 위한 언어로

다양한 브라우저에서 Java Script가 잘 작동되도록 표준 규격이 필요했고 그 규격이 ECMA Script이다.

비유하자면 ECMA Script는 스크립트언어의 규칙을 지정한 설명서이며,

JavaScript ES6 : ES 버전6를 바탕으로 한 JavaScript 라는 뜻이다. 

 

*스크립트 언어 : 컴퓨터는 0, 1 만으로 이루어진 기계어만 알아들을 수 있다. 

기계어도 프로그래밍 언어라고 할 수 있지만, 사람이 알아듣기에는 너무 복잡하기 때문에

프로그래밍 작업을 위해서 사람이 알아들을 수 있는 언어를 사용한다. 

그 중 한 종류가 스크립트 언어이다.

( 컴파일언어, 인터프리터언어, 스크립트언어.. 종류가 무척 다양했지만 아직 구분하기 어렵다.)

이러한 사람의 언어에 가까운 언어로 작성된 코드는 일종의 번역 과정을 거쳐 기계어로 컴퓨터에 전달된다.

---

2. ES5 / ES6 

 

ES5는 2009년, ES6는 2015년에 출시된 ES의 버전이다. 

새로운 버전이 나온 만큼 기존의 기능이 개선되고 새로운 기능이 나왔는데

나는 애초에 ES6가 출시된 후 로도 한참 뒤에 프로그래밍 공부를 시작했기 때문에

내가 많이 접했던 문법을 위주로 ES5 => ES6의 변화된 부분을 확인해봤다.

---

1. let, const 

 

구글링을 해보면 오래된 문서들은 보통 var, 최근글에는 let, const가 많다.  

let과 const로 변수를 선언한 코드였는데 ES6에서 처음 추가된 키워드였다.

let과 const가 등장한 후 이전에 사용되었던 var는 이제 쓰이지 않는다.

기본적으로 const를 사용하는 것이 변수의 안정성을 높일 수 있고

let은 재할당이 필요한 경우에 한해 부분적으로 사용하는 것이 좋다고 한다. 

 

var는

1. function scope로 함수 내에서 선언하면 해당 함수 내에서는 어디서든 참조할 수 있다.

2. 값을 재할당할 수 있으며, 1 특성과 맞물려 어디서든 값이 재할당된다. ( var a = 3 을 선언한 뒤 a = 5가 가능하다. ) 

3. 2와 마찬가지로 어디서든 재선언할 수 있다. ( var a = 3 을 선언한 뒤 var a = 5가 가능하다. )

4. 호이스팅이 발생한다. 

*호이스팅: 선언하기 전인 변수를 참조하면 에러가 아닌 undifined가 발생한다. 

즉, 아래에서 선언된 변수가 선언 전부터 마치 변수는 선언했으나 할당되지 않은 값처럼 인식한다. 

 

let, const는 

1. Block scope 이다. 스코프를 작게 가져가 해당 블록에서만 참조가 가능하며 

변수를 참조하는 과정에서의 검색, 메모리를 차지하는 측면에서도 유리하다고 한다. 

2. let은 제한적으로 선언된 block안에서 재할당이 가능하다. const는 불가능하다. 

3. 재선언 할 수 없다. 한 번 선언한 let a , const a 는 다시 선언할 수 없다.

4. let은 호이스팅이 발생하지만, 1과 맞물려 block내에서 지역변수 let이 선언되기 전에는 

ReferenseError 가 발생한다. ( 일시적 사각지대 : block 시작 지점 ~ let 선언 전 까지의 구간 )

const는 한 번 선언한 후 어디서도 재선언할 수 없기 때문에 해당사항이 없다.

 

참고: var와 let, const의 차이 https://poiemaweb.com/es6-block-scope

참고: 호이스팅에 관한 자세한 설명 https://hbsowo58.tistory.com/411

---

2. Template literal

 

처음 템플릿 리터럴을 사용하면서 '정말 편한데 왜 항상 쓰지는 않는 걸까?' 라는 생각이 들었는데

이 또한 ES6에 처음 추가된 기능이라고 한다. 

``(백틱)안에 문자열과 ${변수}를 함께 적을 수 있으며,

별도의 '' 표시 없이 띄어쓰기가 가능하고,

문자열이 길어도 ＼n 없이 줄바꿈이 가능하다.

---

3. Arrow function 

 

아직 쓰는 방법이 익숙하지 않은 화살표 함수이다. 

함수를 간결하게 나타내 가독성이 좋아지고, 이후의 유지 보수 측면에서도 좋다고 한다. 

- 매개변수가 하나일 경우 ( ) 를 생략할 수 있다. 없거나 두 개 이상인 경우 표기해야 한다.

- 한 줄의 코드를 바로 반환할 때 { } 와 return도 생략할 수 있다. 단 객체 리터럴을 반환하는 경우에는 생략할 수 없다. 

- 실행 컨텍스트 생성 시 this 바인딩을 하지 않는다. 

---

 4. this 와 class 

 

객체(object)는 어떤 것(물질, 사물, 추상적인 것 뭐든 상관없다.)의 속성을 나열해 다른 것들과 구분한 결과물이다.

서로 연관된 변수와 메소드의 집합이 객체인데, 변수와 메소드를 집합할 때 class 키워드를 사용한다.

일반적인 객체지향언어가 class기반인데 반해 JS는 prototype 기반의 언어라고 한다.

es6에서는 클래스 기반의 언어와 유사한 class 키워드가 새로 도입되었다. 

 

*객체지향: 서로 관련이 있는 메소드와 변수를 그룹화해서 객체를 만들고, 객체를 필요한 상황에 꺼내 쓰는 것이 객체지향이다. 아직 잘 이해가 되지는 않지만 쉽게 말해 객체라는 틀을 만들어 필요할 때 계속 쓸 수 있도록 하는 것 같다.

 

객체를 만들기 위해 사용되는 것이 class 키워드로 객체의 속성(property)과 메소드를 정의할 수 있다. 

1. constructor(생성자) : 생성할 객체의 property를 정의한다. 이를 초기화한다고 한다. 

2. method: 해당 객체에서 사용할 수 있는 함수이다.

 

class 키워드로 객체의 틀(?)을 정의하고 나면, 틀을 사용해 새 객체를 만들 수 있다.

이 때 그 틀의 property와 method는 틀을 사용해 만든 객체에 모두 상속된다. 

 

// 클래스 선언
class Product {
	constructor(name, price) {
		this.name = name
		this.price = price
	}

	printInfo() {
		console.log(`상품명: ${this.name}, 가격: ${this.price}원`)
	}
}

// 객체 생성 및 메소드 호출
const notebook = new Product('Apple Macbook', 2000000)
notebook.printInfo() // 상품명: Apple Macbook, 가격: 2000000원

여기에서 this가 등장한다. this는 단어 뜻과 같이 생성될 객체 자신(이것)을 의미한다.  

es6에서 this는 this가 가리키는 변수가 포함된 부분으로 scope가 한정된다.

---

5. Promise 도입

기존의 비동기 처리를 위한 콜백 함수는 콜백 헬과 에러 처리의 어려움이라는 두 가지 큰 단점이 있다. 

promise는 ES6에서 추가된 표준 빌트인 객체로 promise 생성자 함수로 호출된 비동기 함수의 결과로 반환하는 객체이다. 

Promise 생성자 함수는 비동기 처리를 수행하는 콜백 함수를 인수로 받으며,

콜백 함수는 resolve, reject 함수를 인수로 받는다.

비동기 처리가 성공하면 resolve함수를 반환하며, 실패하면 reject함수를 반환한다. 

 

 

6. 비구조화 할당

객체 내 속성 또는 값을 해체해 각각 변수에 담아 사용하는 비구조화 할당의 표현을 사용할 수 있다.

- 코드가 간결하고 직관적이다. 

 

7. 스프레드 연산자

객체 또는 배열의 값을 다른 객체 또는 배열에 옮길 때 용이하게 사용할 수 있다.

 

8. 기본 매개변수

매개변수의 default 값을 설정해, 인수가 할당되지 않은 매개변수의 값을 지정할 수 있다.

---

https://www.w3schools.com/js/js_es6.asp#mark_global_methods

이외에도 위의 링크에서 추가된 기능들을 확인할 수 있다. 

JavaScript ES6

---

생활코딩의 자바스크립트 객체지향, 생성자, 상속 부분을 날잡고 들어야겠다. 리액트에도 중요한 개념인듯 하다.