금일 핵심 내용
오늘 배운 핵심 내용은 fetch 활용도 만만하지 않다...!!
방어코드!!
자바스크립트로 코딩테스트를 하려면 내장함수의 시간복잡도에 대해서 잘 알아야한다.
데브코스
fetch! fetch! fetch! then! then! then!
오늘 팀원한테 선물한 짤이다. 콜백지옥이 가니 then이 기다리고 있었다.
간단하게 결론을 언급하자면 Promise를 이해해야 fetch, async await을 잘 이해할 수 있다. 오늘도 강사님 코드를 따라해보면서 큰 흐름은 이해했지만 직접 경험하지 않아서 내것이 아니라는 생각이 든다. 내일이랑 모레는 할게 없어서 레퍼런스 없이 state, Promise를 혼자 테스트할 겸 작성해보려고 한다.방어코드
.then((res) => { if (res.ok) { return res.json(); } throw new Error(`${res.status} Error`); })위 코드는 api를 요청한 후 들어오는 응답을 그냥 출력하는게 아니라 res값을 보고 판단하는 코드이다.
api 뿐만 아니라 코드에서 이러한 방어코드들이 중요한 이유는 심각한 버그를 나타날 확률을 줄여주고 문제점을 찾을 수 있게 해준다는 것이다.
이번 과제를 리팩토링하면서 방어코드를 달아봐야겠다.
프로젝트 및 과제
내장함수의 시간복잡도
코딩테스트 문제를 그래도 하루에 2개 이상은 풀이하려고 하였고 오늘도 블랙잭, 좌표 압축 문제를 풀이하였다. 블랙잭의 경우 브루트포스 문제라 간단하게 풀었지만 좌표 압축의 경우 시간초과로 고생했다.
JS의 내장함수를 간단하게 쓰다보니 시간초과를 예상하지 않고 풀이하였기 때문인데 오늘 내가 작성한 일부 코드를 보자.
arr.map((val) => { answer.push(sortedArr.indexOf(val)); });위 코드의 시간복잡도는 O(n^2)이다. indexOf가 O(n)의 시간복잡도를 가지고 있고 map도 O(n)의 시간복잡도를 갖고 있기에 두 가지를 중첩했을 때의 시간복잡도는 O(n^2) 이다. 이처럼 자바스크립트의 내장함수는 간편하지만 은근히 시간복잡도를 차지하는 경우가 있다.
비슷한 예시로는 shift()이다. push()와 pop()의 경우에는 O(1)이지만 shift()는 O(n)을 차지한다. 따라서 단순하게 push(), pop()을 생각하고 썼다가 시간초과가 많이 나는 현상을 겪었다.
이처럼 생각지도 못하게 내장함수의 시간복잡도로 인해 코테에서 시간초과가 나는 경우가 종종 있으니 이러한 부분을 주의하며 문제를 풀이해야겠다.
자바스크립트에서의 객체
JS에서 여러가지 이유로 잘 알아야하는 건 객체이다. 많은 데이터 형식을 다루기도 하면서 코딩 테스트에서도 배열 대신 객체를 사용했을 경우에 시간복잡도가 확 줄어드는 현상을 확인할 수 있다. 이에 관해 간단 명료하게 비교해 둔 포스팅이 있으니 참조하면 좋다.
자바스크립트 객체와 배열의 시간복잡도그 밖의 키워드
closest 공식 MDN
closest(selectors);
CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회한다. html에서 특정 태그를 삭제하는 과정에서 알게 되었다.
오늘의 후기
마리퀴리 공부법을 실천해보고 싶었다. 공부에서 공부로 사이클을 이어주려고 했는데 아직은 익숙하지 않아서 그런지 머리가 너무 아프다. 그래서 강제로 저녁먹고 좀 잤다. 자고 싶어서 잔게 아니라 뭔가 전원이 꺼진 느낌으로..?
과제도 마무리하고 강의도 들으니 머리가 좀 과부화됐다. 목,금은 가볍게 가져가야지..
