728x90 {Javascript}4 03.04.24 You Don't Know JS 스터디 후기 this는 도대체 어떻게 탄생했을까? 비동기 콜백지옥은 왜 만들어지게 되었나? 이번 글에서는 위 질문에 대한 궁금증을 조금이나마 해소하고 싶은 오랜 꿈이 있었습니다. 이에 열정 가득하고 실력 짱짱한 상우님 그리고 상권님과 함께 'You Don't Know JS'의 this와 프로토타입 및 비동기와 성능에 대한 책을 2023년 8월 29일부터 2024년 2월 14일까지 총 12회에 걸쳐서 스터디 한 내용을 회고하고, 당시 느꼈던 인사이트들을 공유하고자 합니다. 명시적 바인딩이 암시적 바인딩보다 우선순위가 높다. JavaScript에서는 함수를 호출할 때 this 키워드가 해당 함수를 호출한 객체를 참조하도록 설계 되었습니다. 바인딩은 특정 컨텍스트(context) 또는 객체에 함수를 연결하는 과정을 의미합.. 2024. 3. 10. 03.08.23{개발일기} debounce 활용 계좌번호 예외처리 UI 성능 최적화하기 서론 2023년 1월 30일부터 3월 7일까지 '오늘의집사'라는 프로덕트를 개발하면서 만났던 개발이슈 중, 마이페이지 계좌관리 기능의 계좌등록 기능을 구현하면서 은행별 계좌번호 입력갯수에 따른 예외처리 이벤트 핸들러 함수가 필요했습니다. 계좌번호 입력시 input 이벤트가 짧은시간 연속적으로 발생하는 상황속에, 은행별 계좌번호 입력칸마다 부족한 숫자 자릿수만큼 'X글자를 입력하세요!'라는 알람 문구를 노출 시켜야하는 요구사항이 있었습니다. 이로인해 계좌번호 입력시 input 이벤트가 과도하게 짧은시간 연속해서 해당 이벤트 핸들러 함수가 호출되므로 서비스 성능에 치명적인 이슈가 발생할 가능성이 다분하여 고민하게 되었습니다. 금번 포스팅에서는 이러한 문제를 어떤 관점으로 접근했고 어떻게 해결하였는지에 관한 .. 2023. 3. 8. 02.03.23{개발일기} Object와 Map 바르게 알고 사용하기 서론 Map객체와 Object 객체의 차이는 무엇일까요? 물론 Object와 Map은 둘다 유사하게 getter와 setter 메소드를 갖고 있고, 삭제 및 수정도 가능합니다. 하지만 Map을 사용하는 특별한 이유들이 MDN 공식문서에 잘 설명되어 있음을 확인할 수 있었습니다. 대괄호 표기법의 위험성 Object로 키-값을 관리하면 악성해커의 경우 쉽게 대괄호표기법을 활용해 키와 값을 재정의하여 보안에 취약할 수 있습니다. 무슨 근거로 보안에 취약한지 궁금하여 관련내용을 MDN에서 더 찾아보았는데, 이를 이해하기 위해선 먼저 Object 키에 접근하는 대괄호 표기법과 점표기법의 기능 차이부터 짚고 넘어가야 했습니다. 대괄호 표기법 vs 점표기법 '점표기법'은 변수로 특정 프로퍼티 값을 수정 불가능하지만,.. 2023. 2. 4. 01.11.23{개발일기}onerror와 addEventListener 둘 중 어느것이 더 나은가? AddEventListener와 onerror 용도 차이 고민 계기 image 태그에 src 속성값을 불러 올 때 404 에러 예외처리가 필요했고, 대체 이미지를 설정하는 과정에서 error이벤트 리스너를 통해 대체 이미지 주소로 src 속성값 핸들링이 필요했습니다. MDN으로 error event handler를 검색해보았을 때 크게 2가지 방식이 정의 되어 있음을 확인할 수 있었습니다. 첫번째 방식은 Element.addEventListener의 첫번째 파라미터 값에 'error'라는 이벤트를 넣고 콜백함수를 실행하는 방식이었습니다. element.addEventListener('error', function() { /* do stuff here*/ }); 다른 하나는 onerror 라는 이벤트 핸들.. 2023. 1. 11. 이전 1 다음 728x90
