우아한테크 세미나 두번 째 시간 (자바스크립트 함수+리덕스) 👀
1. JavaScript 함수
자바스크립트 타입은 primitive type 과 object (객체)타입으로 이루어 져 있다.
함수
let x = 10;
function foo () {
}
let x = foo
//함수도 변수에 저장이 가능하다 자바스크립트 함수는 모두 값 을 반환한다.(return문 이후에 반환하거나 혹은 undefined이거나)
혹은 new 연산자로 하면 명시적 return 이 없어도 객체를 반환한다.
function foo () {
return 0;
}
//함수 정의문, 세미콜론으로 끝날 필요가 없음
const bar = function bar () {};
// 함수 선언식, 값으로 취급했기 때문에 세미콜론으로 끝내야함
bar() //하면 const bar 가 선언된 것이다. 이후의 function bar는 의미가 없기때문에 생략이 가능한 것이다.
const bar = function () {} //그래서 이것과 동일하게 작동 하는 것.
funcion foo(x) {
X();
return function () {
};
}
//결국 인자로 넘기는 x도 값이다. 전달 인자도 함수로 전달할수 있다.
const y = foo(function(){})
//함수식을 리턴할 수 도 있고, 형태와 위치가 다를뿐이지 값을 넣고 뱉고 하는 형태는 동일하다.
//함수를 값으로 취급하는 형태가 콜백 함수 이다.
//함수에게 대신 리턴해달라고 심부름을 시키는 과정과 유사함.
함수의 합성
함수를 인자로 받고, 함수를 리턴하는 함수를 high order function이라고 한다.
함수의 변형
함수는 코드를 묶고있는 값으로 이해하면 이해하기 쉽다.
es6 변형 된 함수
const foo = function (x) {
};
//undefined 를 리턴하더라도 undefined 도 값이므로 항상 return 한다
const bar = (x) => {
}
//함수가 값을 반환하는데 실제 리턴이 식일때
자바스크립트는 '식'과 '문'으로 나뉜다.
실행의 결과가 값 으로 마무리가 되면 식 ( 0;, 1+10, undefined;)
실행의 결과가 조건(conditional)이면 문( if, while,for,switch 등)
세미콜론의 유무로 식인지 문인지 구분 가능하다.
const x = 10 //immutable 한 값
const y = () => 10 // 변주를 할 수 있는 함수 형태
//결과는 10,10 으로 같지만, y는 수정 가능하다 자바스크립트 함수의 변형
뉴 연산자 함수
fuction foo () {
this.name= 10;
}
const y = new foo ();
// 뉴 연산자는 새로운 언어를 만들어 내는 것 , 인스턴스 객체
if(y instranceof foo) {
}
//foo 함수가 만든 instance인지 확인할 수 있다.
//만든 객체형태를 확인하는 위임으로서 위 함수를 지정해 줄 수 있다.
//코드적으로 누가 만들었는지를 확인할 수 있기 때문에
//spread operator 보다 더 정확한 코드를 작성할 수 있다.결국은 명시적인게 제일 좋다 그래서 클래스 함수가 생성된 것!
class bar (
constructor() {
this.name=10;}
}
console.log(new bar())
//명시적으로 생성자 (constructor) 구나, new 연산자를 호출하는 구나 라고 알 수 있다.
console.log(y)함수명이 대문자로 시작하면 생성자 함수, new 함수인데, class 로 만들면 new 로 호출하지않으면 호출이 안되게 만들어져있다.
실행 컨텍스트
const person = {
name : "김민태",
getName : () => {
return this.name;
}
}
console.log(person.getName())실행하는 맥락 상 소유자 'getName()' 를 실행함수가 확인하고, 소유자와 연결해서 소유자는 person이니까 확인해서 대답한다. 이걸 실행 context라고 한다.
소유자가 사라지는 순간 헷갈린다.
const man = person.getName;
console.log(man())
호출자가 없기 때문에 확인이 안되는 것 호출자가 확인이 안되면 전역객체(window)객체가 되어버린다. 그래서 name을 찾을 수 없어서 실행이 안된다.
하지만 바인드 함수를 사용하면(helper 함수) 소유자가 벗겨져도 항상 bind 된 값을 찾는다.
button.addEventListener('click',person.getName.bind(person))인데 아예 arrow function으로 만들면 this가 종속 되므로
call vs apply
person.getName.call(person)
person.getName.apply(person)
function foo (x) {
return function bar() {
return x;
}
}
const f = foo(10);
console.log(f())
//리턴값은 10이다. 함수의 호출 값이 생긴다.
//클로져, 푸함수가 리턴이 될때 푸함수의 스코프는 같이 사라지게 되는데
//안쪽
//포기하지 않고 에러를 파보자.. ㅠㅠ
const person ={
age :10}
person.age = 500;
자바스크립트는 근본적으로 막는게 불편해서 클로져를 사용해서 막았다.
function makePerson () {
let age = 10;
return {
getAge() {
return age;},
setAge(x) {
age = x>1 && x< 130? x: age;}}
//이런식으로 valid한 값 range안에 있는지 확인했다.
let p = makePerson();
console.log(p.getAge())
// 클로저는 많이 쓰이니까 제대로 이해하는 것 이 중요하다.
2. JavaScript 비동기 함수
자바스크립트 단계 중 가장 어렵다고 느끼는 부분이 있는데 개발의 두번째 허들은
비동기 이다
function foo () {
console.log("앗싸")
setTimeOut(funrction(y){consoloe.log("우싸")},2000)
}
setTimeout(foo, 5000);콜백 헬이 일어난다. 콜백지옥을 해결하기 위해 promise가 나왔다.
const p = new Promise((resolve, reject) => {
setTimeout(() => {resolve("answer");},1000);
resolve(); // 성공했다는 의미, then 후에 내용을 실행해준다 .
reject(); // 실패 했다는 의미catch 안에 있는 함수를 실행해준다..
});
p1.then(function(r) { console.log(r);}).catch(function () {})비동기 함수라고 선언하는 async, await 사용 방식을 통해 더 간단히 적용할 수 있다.
const delay = ms => new Promise(resolve=> setTimeout(resolve, ms))
//delay 시키는 코드 작성
async function main () {
console.log('1');
await delay(2000);
console.log('2');
}
//이렇게 하면 비동기 함수를 비동기 식으로 작동할 수 있다.
//예외를 잡으려면 try catch 문을 사용하면 된다.
main();리덕스는 간단해서 어렵다?
실제 리덕스의 오픈소스 코드를 파보면 간단한데 용어 탓인지 복잡하게 느껴지기도 한다.
리덕스 아키텍쳐란 ?
각 component에서 필요한 데이터들이 다양하고 여러개가 있어서, 한 군데 (store)에 모아두고 데이터를 모든 컴포넌트 한테 주고 각자 컴포넌트들은 원하는 것만 써서 그리고 할 수 있게끔 만드는 구조이다.
리액트에서 virtual dom이라는 컨셉을 가지고 나와서, 이제는 virtual dom을 리액트가 만들고,dom 으로 연결해서 컴포넌트에서 보여주는 화면을 virtual dom을 만든다음 이전버전이랑 비교해서 다른부분만 Dom에 반영하는 구조였다.
이를 간편하게 해주는 상태관리자가 redux이다.
redux는 스토어 하나를 가지고 있고, 스토어는 객체이다.
간단한 redux 만들기 및 구조 파보기
index.js 파일
import { createStore, actionCreator } from "./redux"
//redux 파일에서 별도로 createStore와 actionCreator 함수를 가져올거라서 이렇게 쓴다.
//실제로 createStore의 경우 redux 라이브러이의 내장함수이고 이 내장함수가 어떻게 작동하는지를 알 수 있다.
function reducer(state,action) {
if(action.type ==="abc") {
return {...state,
abc:"ok"};
} // spread operator 로 새로운 객체를 만들어서 해당 값만 고쳐줘 라는 의미 function reducer(state = {}, { type, payload }) {
switch (type) {
case "init":
return {
...state,
count: payload.count
};
case "inc":
return {
...state,
count: state.count + 1
};
case "reset":
return {
...state,
count: 0
};
default:
return { ...state };
}
}
const store = createStore(reducer);
//store에 만든 reducer를 연결해준다
function update () {
console.log(store.getState()
}
store.dispatch({type : "abc" })
console.log(store.getState())
store.person = {} ;
redux.js파일
export function createStore(reducer) {
let state;
const getState = () => ({...state});
const dispatch = (action) = {
state = reducer(state, action);
}
cons subscribe = (fn) => {
listener.push(fn)}
//값이야 라는 의미로 괄호로 묶어 주어야 한다.
return {
getState
dispatch
subscribe};
}더 디테일한 내용으로 작성해서 올려주신 코드
export function createStore(reducer) {
let state;
const listeners = [];
const publish = () => {
listeners.forEach(({ subscriber, context }) => {
subscriber.call(context);
});
};
const dispatch = (action) => {
state = reducer(state, action);
publish();
};
const subscribe = (subscriber, context = null) => {
listeners.push({
subscriber,
context
});
};
const getState = () => ({ ...state });
return {
dispatch,
getState,
subscribe
};
}
export const actionCreator = (type, payload = {}) => ({
type,
payload: { ...payload }
});