const asyncCallback = (str, callback) => { setTimeout(() => { console.log(str); callback(); }, Math.floor(Math.random() * 1000)); }; const printAll = () => { asyncCallback('엄', () => { asyncCallback('준', () => { asyncCallback('식', () => { asyncCallback('이', () => { asyncCallback('어', () => { asyncCallback('떻', () => { asyncCallback('게', () => { asyncCallback('사', () => { asyncCallback('람', () =>..
https://xionwcfm.tistory.com/142 자바스크립트의 this를 이해해보자 ⚡this는 뭔가요? this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수입니다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참 xionwcfm.tistory.com 😎물론 과거의 나는 해놨지만. 과거의 나... 나자신만 알아보게 써놓으면 어쩌라는 것인지? 뭐지? 자기과시? 따라서... this의 개념이 희박한 현재 이벤트 루프를 다시 보니 this 개념이 부족해서 동작이 이해안되는 걸 체감하고 this부터 봅니다.. 😎미래의 나야 이 표 보렴 네가 중첩함수,콜백함수의 this가 헷갈려할 것을 알고있단다. 일반함수 호출 전역객체가 바인딩됩니..
🐕Promise는 뭐냐.. 비동기로 작동하는 코드를 제어할 수 있는 방법 중 하나입니다. 자바스크립트에서 비동기의 처리 순서를 보장하기 위해서는 콜백함수 기법을 사용하는 방법을 주로 사용했습니다. 예컨대 이런 코드를 작성해서 실행시켜보면 아주 직관적으로 이해가 됩니다. let UMJUNSICK setTimeout(() => { UMJUNSICK = "어떻게 사람이름이" } , 4) console.log(UMJUNSICK) // undefined 우리의 기대는 setTimeout을 통해 0.004초 뒤에 UMJUNSICK 변수에 "어떻게 사람이름이"를 할당해주고 출력해주는 것이었지만 안타깝게도 그것은 불가능했습니다. undefined가 반환되어 버리죠 아주 당연한 일입니다. 좀 더 심화해서 콜백을 사용할 ..
https://redux-advanced.vlpt.us/3/01.html 3-1. json-server 이해하기 · GitBook 3-1 json-server 사용하기 json server 는 아주 짧은 시간에 REST API 를 구축해주는 라이브러리입니다. 하지만, REST API 서버의 기본적인 기능을 대부분 갖추고 있는데요, 프로덕션 전용은 아닙니다. 프로 redux-advanced.vlpt.us 벨로퍼트님의 위 포스트와 모던 자바스크립트 딥 다이브 REST API를 보면서 실습한 내용입니다. 🐕 json-server부터 npm install 해줘야함 npm i -g json-server mkdir fake-server touch db.json 처음엔 로컬환경에만 설치하려고 했는데 그렇게 하니까 j..
🐕 useMemo는 왜 언제 써야 할까? useMemo의 Memo는 Memoization의 memo이다. 메모이제이션...DP를 공부할 때 같이 봤던 기억이 새록새록 난다. 메모이제이션이란 이미 해서 답을 구한 값을 또 계산하는 비효율을 막기 위해 이전의 답들을 기억하는 기법이다. 당연하게도 메모이제이션을 하기 위해서는 어딘가에 정보를 저장해두어야하고 그 어딘가라는 공간은 컴퓨터세계에선.. 한도가 존재한다. 메모이제이션을 통해 기존값을 재활용하면서 연산속도를 증가시킬 수 있지만 그 반대급부 또한 존재하는 기법이라는 것! 그리고 이 문제는 곧바로 useMemo에도 적용된다. 👻useMemo를 사용하면 좋은 시점 리액트의 함수형 컴포넌트는 결국엔 함수입니다. 그렇기 때문에 결국 리렌더링이 되면서 함수가 재호..
🐕 useReducer를 사용하면.. 너무 복잡한 state를 다뤄야할 때 유용합니다. 따라서 간단한 상태를 관리할 때에는 useState만으로도 충분하고 굳이 신경쓸 필요없이 익숙한 useState를 써도 좋지만 useState로 관리하려고하면 너무 코드가 길어질 때 쓰면 좋겠네요 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른값으로 업데이트 해주고 싶을 때 사용하는 Hook으로 리듀서는 현재상태와 액션값을 전달받아 새로운 상태를 반환하는 함수입니다. const reducer = (state, action) { return { ... } // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다. 이렇게 쓰면 되는데 state는 뭐 그렇다쳐도 action은 좀 생소합니다. act..
😎 난 타이머도 제대로 모른다. 실행컨텍스트와 이벤트루프에 대해 공부하면서 뼈저리게 생각한 부분입니다. 타이머는 어떻게 동작하는지 세부적으로 나눠서 생각하면 정말 어려워요 하지만 뭔가 헷갈리는게 있을 땐 일단 모던 자바스크립트 딥다이브 책을 펴보면 얼추 내가 궁금해하는게 이미 명쾌하게 적혀있다. 내가 기억을 못하는 것일 뿐... 물론.. 진짜 딥다이브에도 안나와있는 문제 상황들도 간혹 있긴하지만 그런 경우엔 눈물 흘리면서 영어의 파도를 헤쳐나가 답을 찾아야하죠.. 다행히 타이머의 경우엔 제가 제대로 안읽은거지 딥다이브에서 아주 상세하게 설명해주고 있었습니다. 오늘은 딥다이브를 참고해서 타이머를 다시 정리하는 시간을 가져봅니다. 😎호출 스케줄링을 알아야한다. Object [global] { global: ..
😎자바스크립트에는 이벤트루프가 있다. 이벤트 루프... 너무나도 어렵다. 라고 생각하기 쉽지만 추상적으로 이해하는 건 생각보다 어렵지않다!! 그만큼.. 인터넷에도 여러 추상적이게 설명해주는 명강의들이 존재한다. 하지만 영어와 친하지 않은 나같은 사람들을 위해 적극 추천하는 링크를 남기도록 하겠다. https://ko.javascript.info/event-loop#ref-635 이벤트 루프와 매크로태스크, 마이크로태스크 ko.javascript.info 아주 좋은 설명이 담겨있습니다. 후반부의 프로그레시브 바 등 실제로 웹 환경에서 써먹기 좋은 내용도 담겨있지만 그 후반부분은 우선 이벤트루프에 대한 이해가 선행되지 않으면 봐도 뭔소린지 모르니까.. 이벤트 루프에 대한 이해가 충분히 선행되어야만합니다. h..
