코드리뷰 피드백 췌크
주석처리한 코드 지우기
지웠다!
앞으로 쓸모없는 코드는 그냥 지워뿔자
Object대신 Map 써보기
const routes = [{ path: "documents", component: DocumentPage }];이걸 Map으로 리팩토링 해보자.
const routes = new Map();
routes.set("documents", DocumentPage);이렇게 뚝딱 넣고...사용하면 편하구나?
얘도 forEach로 순회가 된다!
Array대신 Set 써보기
class Observer {
constructor() {
this.subscribers = new Set();
}
subscribe(observerCallback) {
this.subscribers.add(observerCallback);
}
unsubscribe(observerCallback) {
this.subscribers.delete(observerCallback);
}
notify(data) {
this.subscribers.forEach((subscriber) => subscriber(data));
}
}
export default Object.freeze(new Observer());옵저버패턴의 subscribers가 배열이었는데, 중복된 콜백들이 계속 들어와서 set으로 바꾸엇다!
잘 작동하는구먼~
옵셔널 체이닝
함수에 옵셔널 체이닝이 가능했다.
//if문
if(callback){
callback();
}
//옵셔널 체이닝
callback.?()신기한데? 점 표기법이 없는데도 가능하다니...!
함수 분리
이건 따로 함수파트를 만들어서 다뤄봐야겠다...
어떻게 분리할지 대충은 생각 나는데 코드가 뭉쳐있으면 좀 곤란하다.
고양이 사진 검색기 만들기
vscode 엔터칠때도 간격 유지
- Preferecnes > Settings 으로 진입.
- Trim Auto Whitespace 검색
- Editor: Trim Auto Whitespace 항목 체크 해제
콜백
결국 react도 콜백을 이용하여 부모로 값 전달(useState)넘겨줄때...
다 비슷비슷하다잉!
디바운스 with 클로저
export default function debounce(fn, delay) {
let timer = null;
return function () {
const context = this;
const agrs = arguments;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context, agrs);
}, delay);
};
}각기 다른 타이머를 유지하기위해 클로저를 생성한다!
또한 this바인딩을 위하여 변수에 저장해두고 arguments를 넘겨주기 위하여 이또한 저장...!
arguments를 넘겨주는 방법을 자세히 알아보자.
- 매개변수
fn으로 들어온 우리가 사용중이던 함수에return function에들어온 매개변수를arguemnts객체로 받아와apply에 넣어준다!
디바운스 삭제
검색했음에도 필요없는 디바운스가 하나 남아있었다.
timer변수는 클로저라 접근할수 없어서 어떻게할까 고심하던 와중.
함수에 메서드를 등록할수 있다는걸 깨달음!
export default function debounce(fn, delay) {
let timer = null;
const debounced = function (...args) {
const context = this;
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(context, args);
}, delay);
};
debounced.clear = function () {
clearTimeout(timer);
};
return debounced;
}지워브러~
과제
어제의 연장선으로...state의 정합성을 고민해봤지만 답이 나오질 않았다.
그래서 그냥 초기 상태와 비교해서 에러를 던져주기로 뚝딱 결정!
export const validateState = (initialState, nextState) => {
const initialStateType = getTag(initialState);
//객체만 하위 상태들 체크
if (initialStateType === "Object") {
for (const state in initialState) {
const initialStateKeyType = getTag(initialState[state]);
const nextStateKeyTyep = getTag(nextState[state]);
//초기 상태(객체)들의 키타입과 다음 상태들의 키타입 비교
if (initialStateKeyType !== nextStateKeyTyep) {
throw new Error("초기상태와 다음상태의 타입이 다릅니다!");
}
}
return nextState;
}
//배열...은 어떻게 처리하지?
if (!isEqaulType(initialState, nextState)) {
throw new Error("초기상태와 다음상태의 타입이 다릅니다!");
}
return nextState;
};주의할점은 초기상태를 null, undefined로 놓고, 다음상태로 다른 값이 들어온다면 안된다.
따라서 초기 상태를 정할때 숫자면 0, 문자면 "" 이렇게 타입을 정해주었다.
어라 이거...어디서 많이 본건데?
느낀점
사실 WIL작성하는 날짜였는데...한 주 회고를 실패했다. 강의, 과제, 저번과제 피드백까지 하느라 눈코뜰새없이 바빳다...
상식적으로 저번 과제 피드백기간에는 과제가 없어야하는 거 아닌가 싶기도 한데?!
아무튼 빡빡한 일정이라 좋으면서도 힘들었다...
함수에 옵셔널 체이닝을 쓸 수 있다는 것과 클로저 관리!
잘 알았따
