간단하게 자바스크립에 대해서 훑고 redux를 직접 구현하는 방식으로 수업이 진행되었습니다.
개인적으로 redux가 좀 어렵다고 생각했는데 구현하시는걸 보니 정말 어렵더라구요!! ㅎㅎㅎ
반복해서 하다보면 적응이 되겟죠?? ㅎㅎ 😀😀😀 (redux 구현하는 코드는 연습하고 개인 github에 올릴 예정입니다.👍)
자바스크립트
let a = 1;
let a = 2;
let a = function() {};위의 코드를 보면 변수 a에는 값을 넣고 있습니다.
즉, 함수도 값에 속하게 됩니다.
🤔 함수란??
함수: 값을 반환한다. (return값이 없으면 undefined 반환)
코드를 묶어놓은 형태라고 생각하면 될것 같습니다.
코드를 묶어놓은 형태 -> 실행 -> 값 반환
📚 함수를 사용하는 두가지 방법
함수 정의문: function Test() {}
함수식: const a = function Test() {};
한눈에 보이는 차이점? 은 세미콜론여부!
값이니까 세미콜론을 찍고 있습니다.
또한 함수식은 이름이 없을 수 도 있습니다.
const a = function() {};즉, 함수를 값으로 취급을 할 때는 이름이 생략 가능합니다.
함수 종류
📚 즉시실행함수
npm에 라이브러리를 보다보면 아래와 같은 코드를 종종 보게됩니다.
이름이 없는 함수이다보니 처음에 선언과 동시에 바로 실행되는걸 알 수 있습니다.
이러한 함수를 즉시호출함수라 하며 단 1번만 호출됩니다.
(function() {
// 코드 ...
})()📚 1급 함수
이번에는 함수에 인자로 값이 아닌 함수를 넘겨보도록 하겠습니다.
function foo(x) {
return x
}
const bar = foo(function test(){
console.log('test')
});
bar(); // test함수를 실행하면서 다른 함수를 리턴하고 있습니다. 이를 1급 함수라고 합니다. (higer order function)
react에서 HOC도 마찬가지로 컴포넌트 실행하면 좀더 업그레이드?된 컴포넌트를 리턴하는 형식입니다.
결국 react에 사용되는 것들도 js기반으로 나왔기 때문에 이해하기 위해서 기초가 정말 중요하다는 생각이 다시한번 들게 됩니다. 👍👍
📚 재귀함수
재귀함수는 자기 자신을 호출하는 함수입니다.
재귀로 호출할때는 함수식으로 사용할때 함수이름을 생략하지 않아야합니다.!
const foo = function test() {
test(); // 재귀함수 호출
}📚 화살표 함수
es6에 추가된 문법입니다.
📚 함수를 통해 생성된 객체
js는 타입이 느슨합니다. 만약 함수를 통해 생성된 객체가 어떤 함수로 만들었는지 검사를 하려면 매우 복잡하게 됩니다.
이때 사용하는 방법이 instance of 입니다.
객체 instance of 원본
이는 어떤 함수가 만든건지 알려줍니다.
그러나 좀더 명시적으로 객체를 만들고 싶다는 의견들이 나오고 그래서 나온게 es6에 추가된 class 입니다.
📚 class를 통해 생성된 객체
constructor를 사용하여 명시적이며 new 연산자를 통해 객체를 생성합니다.
이전에 함수를 통해 생성했던 방식보다는 명시적입니다.
📚 this
this란 실행 context 맥락상 누가 호출을 했는지를 나타냅니다.
즉, 호출수간 소유자와 연결이 됩니다.
📚 closure
외부함수 스코프가 있고 그 안에 내부함수가 들어가는 형태입니다.
반환된 함수가 외부의 스코프를 기억하고 있는 상태입니다.
클로저를 사용하면 캡슐화를 통해 외부함수에 있는 자유변수에 값을 보호할 수 있습니다.
📚 promise
비동기처리를 하기 위해 기존에는 ajax를 통해 콜백함수들을 통해 개발을 진행했습니다.
그러다보니 콜백함수안에 콜백함수... 콜백헬에 빠지게 되었습니다.
setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2);
setTimeout(() => {
console.log(3)
}, 1000);
}, 1000);
}, 3000);비동기 로직 작성시 위와 같은 코드를 방지하기 위해 나온 것이 Promise입니다.
const p1 = Promise((resolve, reject) => {
setTimout(() => {
resolve();
}, 1000);
reject();
});
const p2 = Promise((resolve, reject) => {
setTimout(() => {
resolve();
}, 2000);
reject();
});
p1
.then(p2)
.then()
.catch(() = {});Promise의 then의 콜백 함수는 resolve로 호출되며 catch로 넘겨준 콜백 함수는 reject로 호출됩니다.
그러나 생각보다 가독성이 좋거나 사용법이 간단해보이지는 않습니다.
비동기를 동기처럼 보이게 만드는 문법이 나왔습니다.
바로 async/await 입니다.
📚 async/await
비동기함수를 동기함수처럼 보이게 만들어줍니다.
사용법은 promise객체 앞에 await를 붙여줍니다.
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
async function main() {
console.log("1");
try {
const result = await delay(300);
} catch (e) {
console.error(e);
}
console.log("2");
}