Life with Programming

experience requirejs 기반 오래된 프로젝트를 webpack으로 전환후 개발중 가끔 require cycle이 발생하면, 초기 빌드 타임이 아닌, 실행중에 멈추는 현상이 발생...      원인파악이 어려운 경우가 종종 있어, 미리 detecting하는 방법 검색중, 빌드 과정에서 circular dependency를 체크해주는 plugin 발견.. ​   https://github.com/aackerman/circular-dependency-plugin  위 plugin이용하면 빌드(번들)시점에 미리 알수 있어 편리함..

 experience  가끔 복사 & 붙여넣기로 작성된 웹페이지에 LSEP 문자가 보이는 현상이 발생.. ​  윈도우 크롬에서만 재현되던가 했던듯... ​ 원인은 줄바꿈에 해당하는 Line Separator 문자(U+2028)가 크롬에서 노출되는 현상이라는.. ​ 크롬에서만 감지하는 인쇄 문자로 font와도 연관이 있는듯.. LSEP를 표시하는 font라면 노출이 된다는...   마찬가지로 Paragraph Separator를 의미하는 PSEP(U+2029)도 노출되는 듯.. ​ \u2028 \u2029 를 적절히 replace 해주면 되는 듯.. ​ ​ from : https://stackoverflow.com/questions/39603446/why-is-this-lsep-symbol-showing-up-on-chrome-and-not-firefox-or-edge

  experience 예전에 설치된 yarn버전을 classic 버전 중 최신으로 적용하려는데, self-update 는 not available하다하고... 방법에 대해서는 제대로 나와 있지 않음.. ​ nvm사용중이라 그런지, global yarn자체를 지우고 다시 설치하려해도 잘 안됨.. ​ ​ 검색해보니, 아래와 같이 하면 되는 듯.. ​ yarn set version latest ​ from : https://stackoverflow.com/questions/49689174/yarn-how-to-upgrade-yarn-version-using-terminal

experience 국제화 관련 자주 사용하지는 않지만... 뭔가 작업하다보면 가끔 보게되는....   그때마다 기존 스펙(?) 동작(?) 확인용 sample ​ https://codesandbox.io/s/intl-relativetimeformat-example-srjv1?file=/src/index.js

experience electron으로 구현한 client 앱에서 background로 인증token 갱신 등의 작업을 setInterval을 이용해 구현함..  그런데, 갱신이 정상적이지 않은 경우를 역추적하다가... setTimeout과 setInterval의 timer 동작이 어떻게 되는지 궁금.... ​​ ​  대략 정리하면 해당 앱이 동작하는 OS 및 브라우저 등의 환경에 따라 다르게 동작하는 듯.. ​ - 앱구동중 화면 덮기...  * setTimeout ** 노트북 모드(절전 모드, sleep 모드 등)에 따라서 설정한 time 이 지났을 때, 돌기도 안돌기도 함..    (setTimeout의 경우, 10초 설정 > 5초뒤 모니터 덮기 > 10분후 다시 on > 5초뒤 callback 동작 이런 경우도 존재..)   ** delay가 짧은 경우에는 바로 돌기도하는... ​ * setInterval ** 간단 테스트.. 결과..  예측 불가.. ** macOS의 경우 > 2시간 설정 > 30초 사용후 모니터 덮기 > ....(A) > 다음날 on  ( A 시점에 멈춘듯 하다가도 혼자 깨어나 timer가 돌기도 하는 것으로 보임.. @.@ ) ​ ​ 참조 : https://stackoverflow.com/a/6346917/14339016

experience anchor태그의 href에 uri를 적어두었는데, 해당 uri로 페이지 이동이 안되는 이슈 발견... ​ 어디선가 click이 취소된 것으로 보이나, 누가 막고 있는지 확인이 필요... ​ ​ ​ 간단히 javascript의 Event 객체의 preventDefault prototype을 override해서 해결 가능.. ​ var oldEPD = Event.prototype.preventDefault; Event.prototype.preventDefault = function() { debugger; oldEPD.call(this); }; ​ ​ from : https://stackoverflow.com/questions/20490931/how-to-find-what-is-causing-a-preventdefault-which-overrides-normal-click-behavior

experience Ajax 호출로 파일을 다운로드 받아야 하는 needs가 생김.. 추가로 전달해야 하는 파라미터가 많아 http method는 POST를 이용해야하는 니즈.. ​ jQuery에 이런류의 needs가 있지 않을지 이것저것 찾아본 결과.. ​ 주로 iframe을 이용하거나 form을 동적으로 생성해서 하는 방법들이 나오고, jquery 자체만으로는 dataType을 blob으로 설정이 불가능한 듯... ​ ​ 그냥 plain XMLHttpRequest를 이용해서 호출은 가능한 것으로 보임... ​ ex> 

 experience IntersectionObserver로 특정 element(sentinel) 를 기준으로 해당 element가 화면에 노출되면 특정액션(A)을 하고, 사라지면 다시 A를 해제하는 기능을 구현중 다음과 같은 현상이 발생..    - situation :  sentinel이 상당히 긴 페이지 중간 쯤에 있고, 현재화면(페이지 최상단)에서는 sentinel도 보이지 않는 상황!!  이후 페이지 가장하단의 element로 scrollIntoView 또는 scrollTop을 이동시켜 sentinel이 현재화면 하단에서 올라와서 위로 올라가버리도록 다음과 같이 시도!!     1. sentinel이 보여지는 화면 밑 부분으로 순간 나타남.   2. 현재 화면 밑에서 화면 위로 올라감.   3. 화면 위에서 더 위(현재 화면에서 안보이는 상태)로 사라짐..   이때, 생각은 1번 상황에서 callback이 실행되고, 3번 상황에서 callback이 또한번 실행될 것으로 생각했지만...    callback자체가 실행되지 않음..!! @.@       3번까지 가지 않고, 2번 정도에서 멈추게 되면 callback은 발생함!! (최종 상태(스크롤이 멈췄을때의 sentinel 위치)에서만 발생!)    즉, scrollIntoView나 scrollTop을 이용하는 경우, 해당 scrollParent의 scroll 이벤트는 발생하지만, IntersectionObserver는 최종 상황이 기준인 것으로 보임..

experience  angular4 + webpack + sass 등으로 구성된 프로젝트를 윈도우에서 빌드하기 위해 npm i 호출시 다음과 같은 에러와 함께 빌드 실패... ​ gyp verb check python checking for Python executable "python2" in the PATH  gyp verb `which` failed Error: not found: python2  ​ 윈도우 계열에서 node 이용시 위와 같은 오류가 가끔 발생하는데, 여러 프로젝트를 바꿔가며 지나가니, 어떻게 해결했었는지 기억이... @.@  ​ 대충 로그를 보면, python기반에서 동작하는 특정 module(sass관련으로 보임)이 있는 것으로 보이며, 윈도우에는 기본으로 python이 세팅되어 있지 않기에 발생한 것으로 보이는.... ​ ​ ​ 해결 방법 ; 윈도우용 빌드 툴을 설치하면 되는 듯... npm install --global --production windows-build-tools ​ 추가로 node버전이 올라가면서, 위 windows-build-tools도 설치가 필요없는 상황이 발생..  pc에 글로벌로 설치된 node버전과 이용하려는 해당 프로젝트에서 이용하는 node 버전이 달라서 문제가 발생하기도 함.. ( node-sass 버전과의 충돌 등 )     이런 경우는 nvm설치해서 node를 해당 프로젝트에 맞는 버전으로 선택해서 이용하도록 하여 해결가능...  ​  nvm이용하면 실행을 하려는 node 버전을 선택해서 진행가능..  windows에서 설치해보았는데, 이미 설치된 node 인식도 잘되는 듯. ​ ​ from : https://github.com/JeremyEnglert/JointsWP/issues/317 ​https://github.com/nodejs/node-gyp#installation   - 참조 : ...

experience runtime에 변경되는 특정 문자열이 포함되지 않는 정규식 작성하기 위해 찾아보니, javascript 정규식중에 ?! quantifier가 있는 것 확인.  그런데, 문제는 ?!를 쓰는 경우, 특정 단어가 검색하려는 단어 뒤에 오지않게는 동작을 잘 하는데, 특정 단어가 검색하려는 단어 앞에 오지않게는 동작은 하지 않는다는 점... ex> /a(?!b)/ 정규식으로 "ac"를 test하면 a가 잘 찾아짐(true).. "ab"인 경우는 못찾음(false).. but, /(?!a)b/ 정규식으로 "ab"를 test하면 못찾아야 할 것 같지만, 잘찾음(true)..   확인해보니,   ?!는 Look Ahead negative로 뒤 따르는 부분 기준인 듯... javascript에서는 Look Ahead positive(?=)과 Look Ahead negative만 지원 하는 듯... 관련 참고 내용(아래는 java기준) --------------------------------------------------------- given the string foobarbarfoo bar(?=bar)     finds the first bar (Find "bar" which has "bar" after it) .  bar(?!bar)     finds the second bar (Fin "bar" which does not have a "bar" after it). (?<=foo)bar    finds the first bar (Find "bar" which has "foo" before it). (?<!foo)bar    finds the second bar (Fin "bar" which does not have "foo" before ...