들어가며
IN-GPS 프로젝트를 본격적으로 시작하기 전, 간단한 자바스크립트 문법들을 알고 가려한다. 하지만 웹쪽에는 무지했기에, 지피티 추천 키워드를 통해 가볍게 공부하려한다.
아래 내용들 또한 지피티의 설명으로 정리해봤다.
1. ES6+
Javascript를 배운 지 오래 되지 않았기에, 현재 ES6+ 문법을 활용해 코딩을 하고 있는데, 구글링을 하다보면 심심찮게 var 등 ES5 문법으로 사용된 것들을 볼 수 있다. 어디까지가 ES5이고 어디까지가 ES6인지 간략하게 정리해본다.
ES?
우리말의 사투리처럼 자바스크립트도 각 브라우저 벤더마다 고유의 기능이 추가되어 방언들이 난무했다고한다.
항상 그렇듯이 이럴 경우 개발자들은 항상 고통을 받는다.
이걸 해결하기 위해 나온 표준 버전이 ES5, ES6이라고한다. ES6은 2015년 발표되어 ES2015라고도 불린다.
ES는 ESMAScript의 약어로, 자바스크립트(JavaScript)의 표준화된 버전을 정의하기 위한 규격이다.
ES6에서 한 번 크게 바뀌고 ES7부터는 조금씩 바뀌어서 ES6+를 모던 자바스크립트라 부르기도 한다.
2. 화살표 함수
기존 함수 표현식에 대한 대안이라고 한다.
## 일반함수
const add = function(a,b) {
return a + b;
};
## 화살표 함수
const add = (a, b) => a + b;
형태를 보면 딱 람다식이 생각난다.
다양한 형태로 활용이 가능하다.
## 파라미터 1개
const square = x => x * x;
## 파라미터 없을 때
const hi = () => console.log('hi');
## 블록 본문
const sum = (a, b) => {
return a + b;
}
간결한 것 말고도 this바인딩에서 활용이 가능하다고 한다.
function Person() {
this.age = 0;
setInterval(function() {
this.age++; ## 일반 함수는 전역의 this를 참조한다.
}, 1000);
setInterval(() => {
this.age++; ## Person의 this 참조
}, 1000);
}
만약 일반 함수에서 해결하려고 할 경우 const self = this; 를 함수 이전에 선언해놔서 복사를 한 후 self.age++;로 처리해야한다.
일단 화살표함수 기억해두자
3. 비동기 처리
이번에 안드로이드를 하면서 코루틴을 사용해보면서 얼핏 경험해봤다.
먼저 블록/논블록, 동기/비동기에 대해 자세히 알아야할 것 같다.
먼저 블록은 함수의 실행이 끝날 때까지 다음 코드의 실행을 막는 것이다.
논블록의 경우는 작업이 완료될 때까지 기다리지 않고 다음 코드를 바로 실행하는 것이다.
동기의 경우 순차적으로 실행하는 것이다. 하나의 작업 이후 다른 또 하나의 작업이 실행되는 것이다.
비동기의 경우 호출 후 작업이 완료되기 전에 다음 코드가 실행되는 것이다.
여기까지 보면 너무 비슷하지않은가...?..
블록/논블록 은 기술적으로 명확히 구분이 된다고한다.
호출된 함수가 제어권을 계속 가지고, 호출한 함수에게 바로 return 하지 않으면 블록
만약 할 일이 남았는데도 제어권을 바로 return하면 논블록이라고 한다.
동기/비동기의 경우 추상적인 구분, 행위에 대한 것이라고 한다.
호출된 함수의 수행 결과 및 호출한 함수의 결과도 함께 신경쓰면 동기,
만약 호출 함수를 신경쓰지 않고 호출된 함수 혼자 신경쓰고 처리하면 비동기라고 한다.
그럼 비동기 작업의 경우 다른 작업들을 기다리지 않으니 성능이 좋지 않을까싶었다.
하지만 자바스크립트는 싱글 스레드 언어이다!!
그럼 비동기 작업을 어떻게 처리할까?
바로 이벤트 루프를 사용한다고 한다.
- 콜 스택 : 실행중인 함수들이 쌓이는 스택
- 태스크 큐 : 비동기 작업의 콜백 함수가 대기, 작업이 완료되면 콜백함수가 들어감
- 이벤트 루프 : 콜 스택이 비어 있을 때 태스크 큐에서 콜백 함수를 가져와 실행
아래 예시를 보자
console.log('Start'); ## start
setTimeout(() => {
console.log('Timeout');
}, 0);
console.log('End'); ## end- start console.log가 콜 스택에 올라가고 start가 출력된다.
- setTimeout이 콜 스택에 올라가고 실행된다. 콜백 함수가 태스크 큐에 등록되고 setTimeout은 콜 스택에서 제거된다.
- end console.log가 콜 스택에 올라가고 end 출력된다.
- 콜 스택이 비었으니 이벤트 루프가 태스크 큐에서 setTimeout 콜백함수를 콜 스택으로 이동시켜 실행해 Timeout이 출력된다.
이처럼 자바스크립트는 싱글 스레드이지만 비동기 + 논블록을 통한 방식으로 처리할 수 있다.
이제 이를 기반으로 callback, promise와 async/await에 대해 알아보자.
callback
전통적인 비동기 처리 방식이라고 한다.
function fetchData(callback) {
setTimeout(() => {
callback('데이터');
}, 1000);
}
fetchData((data) => {
console.log(data); // 1초 후 '데이터' 출력
});Promises
프로미스는 성공과 실패를 처리할 수 있다. 위 콜백의 한계(콜백 지옥)를 극복하기 위해 탄생했다고 한다.
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('데이터');
}, 1000);
});
fetchData
.then((data) => {
console.log(data); // 1초 후 '데이터' 출력
})
.catch((error) => {
console.error('에러:', error);
});async/await
async/await은 프로미스를 더 쉽게 사용할 수 있도록하는 문법이다.
async는 항상 프로미스를 반환하고, await은 프로미스가 처리될때 까지 함수 실행을 일시 정지시킨다.
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('데이터');
}, 1000);
});
};
const getData = async () => {
try {
const data = await fetchData();
console.log(data); // '데이터'
} catch (error) {
console.error('에러:', error);
}
};
getData();4. 구조 분해 할당
구조 분해 할당은 배열이나 객체의 값을 간편하게 추출하여 변수에 할당하게 해주는 문법이다.
여러 종류 중 지피티가 유용할거라는 객체 구조 분해 예시이다.
const person = { name: 'John', age: 30, job: 'Developer' };
// 객체 구조 분해 할당
const { name, age } = person;
console.log(name); // John
console.log(age); // 30함수의 파라미터로 객체를 받을 때 유용하다고 한다.
5. 전개 연산자
전개 연산자는 배열이나 객체를 쉽게 복사하거나 결합할 수 있게 해주는 문법이다.
... 세 개의 점으로 표시된다.
const numbers = [1, 2, 3];
const add = (a, b, c) => a + b + c;
console.log(add(...numbers)); // 6이건 쓸 일이 있을지 모르겠다...!
6, 7 모듈, 클래스
너무 간단해 생략했다...import...export....
사실 여기까지 엄청 어렵다하는 내용이 아니지만 보기만 하니 잘 와닿지는 않는다.
자바스크립트 자체를 써본 적이 없어 더욱 그런 것 같다.
개념보다는 직접 개발을 하며 더 알아보려한다.
확실히 언어 기본서는 정독을 하지 말라는 말이 맞는 것 같다. 그때그때 필요한 걸 배우는 게 더 잘 이해되는 것 같다.
8, 9, 10은 자바스크립트가 아니라 왜 리액트 개념이? (프롬프팅의 중요성)
그래도 위 정도면 리액트 책을 따라가는데 지장은 없을 것 같다.
소플의 처음 만난 리액트 를 통해 나머지 8 9 10도 정리해보도록 하겠다..!
