- setTimeout : 일정 시간 후 호출함. 사용법은 간단함. 함수를 실행하지 말고 함수 자체를 넘길 것 이란 경고 정도와 id 반환해서 clearTimeout(타이머식별아이디) 정도로 스케쥴 관리 하는 것만 하면 될 것 같다.
setTimeout(sayHi, 1000, "인자", "인자2");
- setInterval : 위랑 동일한 문법인데, 계속 반복하는가, 1회성인가 차이이다. (인터벌은 계속 반복), clearInterval 할 때 까지 지속 반복하니 잘 쓸것.
- 중첩 setTimeout : 일정한 간격으로 실행하는 방법인데, 딜레이 증가 시킨 후에 성공하면 딜레이 초기화 하는것도 넣어주는게 좋다. (뭐 별개 이야기로는 셋인터벌은 너무 작은 시간에 대해 반복되는경우, 반복카운터도 구현해야하고, 그게 근데 딱 잘라서 동작한다는 보장도 없기도하지만..하단에 그림으로 잘 설명 되어 있음.)
clear 하기 전까지 둘 다 메모리에 존재하는 것. 잊지않길.
- 대기시간이 0초인 setTimeout : 🙂한국말로 써있는거 맞지? 즉시 실행 한 것 과 같은 효과를 내는 것 처럼 보인다고 어필하는 것 같아. (실제론 0이 아니라 밀린다고 표현되고)
하단에 브라우저 환경에서 실제 대기시간은 0이 아니라는 부분은 "5번재 중첩 타이버 이후 대기시간을 4ms 로 강제" 하라는 부분이 명시되어 있어서인데, 그냥 넘어가도 된다. 구형브라우저 레거시 대응에 대한 것 때문에 명세변경을 못하고 있어서...🥺
- call/apply 데코레이터, 포워딩 : 재밌는 주제다. 데코레이팅 - 꾸며주고, 포워딩 - 이어주고 어떻게 하는지 알아본다고 한다.
- 코드 변경없이 캐싱 기능 추가하기 : 핵심은 코드 변경 없이 이다. 뭘까 좀 더 살펴보면 메모라이제이션과 흡사하다.
메모라이제이션이란? -> 9 * 7 = 63인데 이걸 계속 반복 할 때 마다 9 를 7번 곱하고 하고 있으니, 63이란 결과를 어디 저장해놓고 key나 인자로 9, 7 이 들어오면 첨에 한번 계산했던걸 서랍에서 쨘 하고 꺼내주는 걸 말한다. (즐겨찾기, 북마크 비슷하다고 볼 수 있다.)
- func.call 를 사용해 컨텍스트 지정하기 : 실행컨텍스트를 잘 생각해 보면 함수에서 worker.slow 를 받아서 func로 바꿔서 실행 하려고 해도 캐싱을 하려고 데코레이터를 만든 부분에서 func 자체의 this가 undefined 라고 표시하고 있다. 맞는 말인데 이렇게만 써두면 어 그런가보다 하고 넘어갈 수 있는데... 지금까지 잘 따라 온 사람들은 함수의 실행 위치에 따라 this 값이 바뀌는 부분을 생각 해 낼 수 있을거라 느낀다. - 근데 바로 아래 내려가면 설명 함 ... 아니 다음쪽 🔥 사라진 this 컨텍스트를 call을 통해서 원하는 범위로 고정할 수 있는 방법에 대해 설명을 하고 있다.
파랗게 선택 한 function (x)
하단의 설명한 부분에 문제는 없는 것으로 생각 됨.
- 여러 인수 전달하기 : 캐싱데코레이터를 조금 더 가지고 놀아본다. 인자를 2개를 받는걸 만들어 보려고 하는데, 이 경우 중첩맵을 쓰거나, 키를 중복으로 쓰는 라이브러리를 쓰거나, 두 키를 합해서 하나의 키로 만들어 해싱함수로 만든다고 세가지에 대해 소개하면서 마지막걸 썼다.
- func.apply : 아래 16줄 대신 쓸 수 있다고 한다.
스프레드로 args를 펴 발라 하나하나 분해해서 call에 넣어줬는데 apply를 쓰면 유사배열객체가 넘어가도 하나하나 분해해서 끄집어내 넣어주니 이 얼마나 좋은가. 하여 이것을 쓴다.
- 메서드 빌리기 : 앞에서 구현한 해싱을 개선해보자고 한다. args 대신 여러 인자를 받는 낡은 arguments 를 활용해서 해결하려 함. 유사객체배열에는 join이 없기 때문에, 이걸 사용하기 위해서 빈 array에서 join 메서드 call 을 통해 빌려 와 해결했다.
- 데코레이터와 함수 프로퍼티 : 음... 뭔가 주어를 살짝 빼먹고 하는 것 같아서 이해가 살짝 안되넹, 오리지널인이 되는 원본 함수에 func.calledCount 속성이 있으면, 중복된 친구인 데코레이터 속성은 감싼 래퍼이기 때문에 사용할 수 없는 그런 문제가 있나본데, 예시까지 들어서 slow 가 속성으로 있으면 데코레이터의 slow 는 래퍼라서 쓸수 없다는 소리같은데 확신을 못내리겠네... 뭔가 말을 장황하게 한 것 같은데 -_- 한국어 맞아?? 일어는 아예 해석을 포기했나 항목이 없고... 영어도 이상하고.. 일단 넘어가고 나중에 확신이 서면
- 함수바인딩 : 잃어버린 this를 찾아서... 맨날 사라지는 친구 어떻게 가져와서 잘 쓸지 고민될 때! !!!여러분은 바인딩을 합니다!!! 라고 광고...
- 사라진 this 🥺 : 사라지는걸 구경 해보자. 사용자라고 유저 객체를 만들고, 프로퍼티로 퍼스트네임에는 존 메서드 (ES6 문법으로) 세이하이라는 친구를 만들어서 내부의 this로 유저 객체에 접근하게 한 후, 퍼스트네임을 찍어주는 친구를 만들었다.
자 일단 그래 열심히 만들었으니 확인해보면 언디파인드가 뜨니 당황스럽다.
함수 실행 위치를 잘 생각해서 user.sayHi가 window가 있는 전역에서 실행이 되었다. sayHi 친구는 전역! 전역... global 에서 실행이 되었으니, 본문에서 말하는 부분인 window 에서 실행이 된 것이다. sayHi는 global 에서 firstName을 찾기 시작하지만, 집(user 라는)안에 들어있는 firstName 을 불러도 찾을 수 없...
그래서 해결책이라고 제시하는데
- 방법 1: 래퍼 : 가장 간단하다고 한다. (당신으 ㅣ입장에서) setTimeout을 사용해서 user를 받아 호출하기나 화살표 함수로 똑같이 구현 하는 등. 전역 렉시컬에서 벗어나게 하는 방법이다. 1000ms라는 1초의 시간 사이에 user의 firstName이 바뀔 수 있고, sayHi가 바뀔수도 있는 부분이다. 다른 사람을 부른다던가, 다른 내용을 동작하게 될 수 있다는것이다.
- 방법 2: bind : 모든 함수는 this를 수정하게 해 주는 내장 메서드 bind가 있다고 함. - 간단하게 함수.bind(this로 지정할대상컨텍스트) 지정하면 해당 내용으로 지정 된 함수가 실행되게 된다고 한다. 리액트에서 class 문법으로 작업 시, 엄격모드가 적용되어 bind가 안되어 있는 경우가 있기도 한다.
- 부분적용 : 인수 바인딩을 이야기 하네. 사용법은 간단. 기본 this로 바인딩할 컨텍스트 부분을 bind(null, 뒤에 인수를 넣는다) 써본적 없는데 써봐야징.
- 컨텍스트 없는 부분 적용 : bind의 컨텍스트 null 같은게 아니라 아예 없는걸 하고 싶단건데, 헬퍼 함수 partial 을 만들어 주면 된다.
모던JS 튜토리얼 읽으면서 드는 생각 메모 6장의 마지막 메모.
- 화살표 함수 다시 살펴보기.🔁 : 짧고, 독특하고, 유용하다. 현재 컨텍스트를 잃어버리지 않는다. (가장 스코프 체인 상의 가까운 컨텍스트에 쫄래쫄래 디스있니? 하고 놀러 가기 때문에)
- 화살표 함수에는 this 가 없다 : 두둥. 본문에서 접근하면 외부 값을 가져온다... 두두둥! forEach에 화살표 함수를 썼기에, 바깥의 group와 같아짐. 반대로 일반 function 을 쓰는 경우, 일반 함수 실행 컨텍스트에 따라 global 에서 찾게되고, title을 못찾거나 name을 찾게되면 엉뚱하게 빈값을 출력하는 모르는 경우 기가막힌 상황이 연출 될 수 있다.😭
기타 - 생성자가 없어서 new 불가(만들고 컨스트럭터 걸려있나 보던가..) 화살표 vs bind(this) - 바인드는 범위가 있고 화살표는 묶어서 한정짓지 않는다. 단지 this를 빌료와서 가장 가까운 스코프체인상 실행 컨텍스트에 가서 찾을 뿐.
잡담을 너무 많이 안썼네, 간단한 생각은 글로 쓰는것보다 다른 SNS에 적는편이 좋아서 여기에 안남기는 편이다.
그래고 긴 고민들이 많이 있으니 적어보려고... 커리어라는건 대체 어떤건지 모르겠다. 실력을 평가하는 기준에 있어 남들이 요구하는 스킬을 맞춘다 하더라도 결국 연차가 쌓이고나면 남의 선택과 강요에 의해 만들어진 기술이다. 이것은 과연 내가 만족한 결과인가 고민하게 되었다. 하고싶은것은 무엇이었을까 다시 생각하고 고민하게 되었다.
스스로 결정하고 스스로 발걸음을 내딛고, 스스로 선택을 하고 갈 길을 알아본다는건 대단히 중요했다. 실패할 수 있는 두려움을 가지고 약간은 준비가 안되고 부족할지라도.. 위에서 남들이 요구한 스킬이었다면 이번엔 내 자신이 요구하는 스킬을 채워나갈 수 있다는 자신감으로 새로운곳에 문을 두드렸고 결과는 나쁘진 않았다. (스스로는 나쁜 것 같았는데...)
고민은 결론을 내려놓고 시간을 소비하는 과정 같다.
언제 시행할지... 정말 해도 될지...
그냥 두려워도 하는게 중요한 것 같다.
hello world 를 처음 찍어보는 것 처럼... 글 쓰고보니 아직 플러터 시작도 안했네 ^ㄴ^
- 함수의 구분 : ES6 이전과 ES6 이후의 함수를 사용하는 목적과 몇가지 종류로 구분하는 이야기를 한다. 참... 과거엔 복잡했구나 싶다. ........ 그래서 ES6부터 크게 3개로 나눴구나...
화살표 함수 부족한 사람은 여기서 익혀가면 좋고... 생성자도 없고 프로토타입도 슈퍼도 agruments 도 없는 그런 슬픈 친구 하지만 깔끔한친구. 가장가까운곳에 척을 두고있는 친구... 언제나 생각하지만 얘 없었으면 코드 많이 너저분해지지 않았을까.(빌드기준) 뭐, 메서드의 부작용은 this 위치만 잘 알고 함수 생성 표현도 메서드쪽에 간단한 친구도 생겼으니 적재적소에 뭐든 잘 사용해야한다는 생각이 들었다.
아 근데 이 앞장에 클래스에서 생성자 없이 쓰면 사파리는 왜 안되거지? 크롬 72 이하에서도 안되던데... 미구현이 확실한건지 뭐라고 딱 말을 못하겠는게 아직 안되는게 많나보네? 음... 이건 좀 더 상세하게 알아봐야겠는데 요즘 잠깐잠깐 이 책에서 듣는거 말고 시간이 별로 없군... 음 Rest 파라미터, 함수에 요즘 새로나온 (이건 좀 아닌가)
급 회고 ???? 실은 읽는게 너무 느린거같아서 이 책 천페이지 넘는데 어느 세월에 하나하나 나눠서 읽고있어... 기존에 책 읽던 방식대로 훑고 넘어가고 아 전에 저기에 뭐가 있었는데 하고 인덱스 기억하는 식으로 해야겠다... 핵심적인 부분은 일단 차근차근 짚어서 넘어갔고, 이번달에 스스로 정한 CSS도 보는 진도율과 목표치에 부합하지 않으니 다시 기존 방식으로 돌아가야곘다. 하나 하나 짚어보고 생각하고 적자니 너무 오래걸렸다. 되풀이 하면서 생각해봐야지. ㅠㅠ
- static을 메서드명 앞에다가 잘못쓰면 에러도 안나고, 동작이 안되는 경우가 있네.. 아무래도 해당 클래스 내에서만 써야하는것 같은데 이렇게 잘못 제한을 잡아 막은 경우에는... 동작 안하는 건에 대해 어떻게 디버깅 하면 될까나... 흠~..... static 코드에서 안써야지.....에러로그로 안남네. - ref는 사용법이 뷰랑 비슷한듯. - 리액트 공식 한글 문서 11장 12장 내용 왜이렇게 헷갈리게 써놓은건지 모르겠네 자습서에 틱택토 해보면 해결되고 이해할 수 있는 내용을 꼬아놓은 것 같다. A는 B다 하면 되는데 A는 블라블라해서 와하니 B한걸 우리는 B라 하고, A' 라고 하는걸 그럼 이제 B' 라고 부를 수 있게 된거다. 라고 써둔거 같아서 보는데 너무 힘들었다. 공식문서는 뷰가 진짜 보기 편했다.
