코드 땜장이

  프레임워크/라이브러리가가 발전함에 따라, 대부분의 애니메이션 처리들은 다른 코드에 의존하며 제작하게 되었다. 대략 8년전만 해도.... 애니메이션의 처리를 정밀하게 처리하기 위하여, requestAnimationFrame을 이용하긴 하였다.  requestAnimationFrame에 대해서 잠깐 설명하자면, 브라우저의 경우, 1초에 최대 60프레임을 동작 시킬수 있다. 각 프레임이 렌더링이 되고나서 호출이 되게 하는 부분이라고 생각하면 될 것이다. 즉 모든 requestAnimationFrame을 통하여 60번을 실행하게 되면, 최소 1초이내에 60회가 실행 된다고 보면되지만... 요청하는 내용과 기기의 사양에 따라, 1초보다 훨씬 긴 시간이 될 수 있다.  그 시절 requestAnimationFrame을 이용하여, 구현 할 수 밖에 없었던 것도 있긴하다. 라떼 이야기이긴 하지만, 어쨋든 우리나라에는 IE가 있었기 때문에, css에 의존한 애니메이션동작을 한게가 있었다. 하지만, 지금은 어떤 서비스가 IE를 지원을 할까? 마이크로소프트 공식 홈페이지도 IE를 지원하지 않을 것 같다.  프레임워크/라이브러리 발전에 따라 requestAnimationFrame을 사용할 수도 없는 환경이 되었다. 프레임워크의 경우 내 코드를 실행하는 주체는 프레임워크이고, 그 사이에 너무나 많은 코드들을 수행한다. 즉 프레임워크 외적의 무언가를 사용하여, 값을 변경하는 것은 공유자원에 여러 소비자들이 사용하는 동시성문제 수준의 오류가 발생 할 수도 있다.  가장 간단한 것은 다음과 같은 문제이다. <script setup > import { ref } from 'vue' const title = ref( 'title' ) const foo = function () { const $input = document . querySelector ( '#inputTest' ) $input.value = &#

  부끄러운 이야기이지만, 정규표현식을 공부를 한 적이 없다. 무슨말인가 하면, 그냥 인터넷에 전화번호 정규 표현식이라고 검색만 하고, 이메일 정규표현식이라고 검색만 해보고 사용을 해왔다.  뭐 그것이 나쁘다고 하는 소리도 아니고, 앞으로는 정규표현식을 매번 창조 할 것이라고 말하는 것도 아니다. 인류는 바퀴를 한 번만 발명 하였다.  오늘 이야기 할 이야기는 g 플래그이다. const aRegx = / a /g ; console . log ( aRegx . test ( 'a' )) ; // true console . log ( aRegx . test ( 'a' )) ; // false 단적인 예로 위의 코드가 true, false로 값이 나온다라는 걸 알고 있다면, 딱히 해당 포스팅을 굳이 볼 필요는 없을 것 같당... 자 위와 같은 상황이 왜 나오게 되는 걸까? g 플래그와 결과값 g 플 래그는 정규 표현식에서 모든 패턴 일치 를 찾는 데 사용됩니다. 코드 예시에서: aRegx 는  /a/g  정규 표현식을 사용합니다.  이는 문자열 내에서 모든 "a"를 찾도록 설정됩니다. 첫 번째  test호출은 "a" 문자열에서 첫 번째 "a"를 찾고  true 를 반환합니다. 두 번째   test호출은  이전 검색이 끝난 위치 에서 검색을 시작합니다.  즉,  첫 번째 "a" 이후부터 검색합니다. "a" 문자열에는  "a"가 하나만 존재 하기 때문에 두 번째 호출은 더 이상 일치하는 문자를 찾지 못하고, false 를 반환합니다. 결론적으로: g 플래그는 모든 일치를 찾도록 합니다. 이전 검색이 끝난 위치( lastIndex )에서 다음 검색을 시작합니다. 참고: lastIndex 속성을 사용하여 이전 검색의 마지막 위치를 직접 확인하거나 조작할 수 있습니다. g 플래그 없이 사용하면 첫 번째 일치만 찾고 검색을 종료합니다.

 자 일단 if ~ else를 사용하는 것이 나쁘다고 말하고 싶은 생각은 추호도 없다. 하지만, 뇌에서 그냥 흘러나오는 방식대로만 작성하는 것은 그렇게 좋지 않은 코드라고 생각하기 때문에 작성을 해본다.  else를 사용하지 않아도 되는 상황을 좀 생각해보도록 하자.  재밌는 것을 가져왔다.  혼인 신고가 가능한 나이에 대한 것이다.  남자는 만 18세, 여자는 만 16세에 달해야 하며, 만 20세 미만의 미성년자는 부모의 동의를 얻어야 한다.  자 우리가 프로그래밍 해볼 것은 이거다.  1. 16세 미만이면 결혼 불가능  2. 16세 ~ 18세 미만이면 여자라면 부모 동의를 받은 경우 결혼 가능.  3. 20세 미만이면 부모 동의를 받은 경우 결혼 가능.  4. 20세 이상이면 부모 동의없이 결혼 가능. function canIWedding (person) { if (person?.age) { if (person. age < 16 ) { console. log ( '한국에서 결혼 불가' ) } else if (person. age < 18 ) { console. log ( '여자라면 부모 동의 시 가능' ) } else if (person. age < 20 ) { console. log ( '부모 동의 시 가능' ) } else { console. log ( '결혼가능' ) } } else { console. log ( '출생신고 필요.' ) } }  뭐 일단 동의하고 시작할 것이 있다. 딱히 로직이 어렵지는 않다.  하지만 위의 로직을 그대로 들여다 보도록 하자. 말 그대로 그대로 말이다.  자 21세의 경우라고 생각을 해도록 하자.  1. 나이가 있는지 확인.  2. 나이가 있고

  ==을 이야기하려면 글을 몇개를 작성해도 끝이 없을 것 같다. 그 만큼 사용하기 까다로우며, 몇 가지 규칙들은 꽤나 많은 ===을 대신 할 수 있는 장점이 있다.  간단하게 null을 이용한, undefined, null 체크가 있다. if ( null == null && null == undefined ) { console . log ( 'A == null 은 null 과 undefined 를 체크 할 수 있습니다 .' ) }  위의 코드를 ===를 이용하여 체크하려면, if ( null === null || undefined === undefined ) { console . log ( 'A === null 은 null 만 체크가능 하여 , undefined 를 체크 하기 위해서는 길이가 길어집니다 .' ) } 하지만 ==는 아래와 같은 문제점이 있다. if ( [] == false ) { console . log ( '[] 는 false 입니다 .' ) } if ( [] == 0 ) { console . log ( '[] 는 0 입니다 .' ) } if ( [] == '0' ) { console . log ( '[] 는 \' 0 \' 이 아닙니다 .' ) } if ( 0 == '0' ) { console . log ( '0 은 \' 0 \' 입니다 .' ) } [] == 0이고, 0 == '0'이지만, [] == '0'이 아니게 된다. 삼단논법이 박살나는 순간이다. 참고로 []는 ''이다.... if ( [] == '' ) { console . log ( '[] 는 \'\' 입니다 .' ) } 자 그러면, 왜 []는 ''인지 생각을 해볼 필요