반응형 전체 글130 javascript에서 this 컨트롤 하기 * 해당 글은 정리가 잘 된 포스팅 글 전체를 가져온 글입니다. (공부를 위해 타이핑..) 같은 글이니 아래 링크에서 포스팅 확인하세요 :) https://poiemaweb.com/js-this this는 매개변수로 전달되는 인자값 이외에 argument객체와 this를 암묵적으로 전달 받는다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로터피나 메서드를 참조할 수 있다. 크게보면 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다. 자바스크립트에서 this는 함수 호출 방식에 따라 바인딩되는 객체가 달라진다. 1. 전역에서 선언된 함수에서의 this는 global(window, global)이다. 2. 함수 내부에서 사용하는 this - 엄격모드에서 일반 내부함수의 thi.. 2024. 4. 1. 브라우저 성능 최적화 앞 글에서 웹 최적화를 위해 reflow와 repaint에 대한 정리를 하면서 paint과정 외에도 composite라는 과정이 더 있는 점을 알게 되었다. composite는 브라우저가 각각의 레이어를 스타일 방식에 따라서 병렬적으로 레이어로 분류되고 paint을 한 후에 모든 레이어를 합치는 과정이다. 애니메이션을 처리하기 위해서 GPU도 사용하게 된다. GPU에서 애니메이션을 처리하므로 메인 스레드는 렌더링 레이아웃에 포커스를 둘 수 있게 된다. * 브라우저가 별도의 Layer 생성할 때 조건 * - video, canvas 태그 사용 - animation 이나 transition 사용 - will-change가 opacity, left, top, bottom, right, transform - i.. 2024. 3. 30. [vue2] 비밀번호 유효성 검사 연속문자 체크하기 비밀번호에 대한 요구 조건을 아래와 같이 정했다. 1. 최소 10자리 최대 16자리 2. 영문과 숫자 포함 필수 3. 공백과 특수문자는 미포함 내가 구현했던 방식은 실제 비밀번호를 입력하는 input에서 벨리데이션을 검사하고 비밀번호 확인란은 단순히 앞에 입력한 비밀번호와 일치하는지 안하는지 여부에 따져서 버튼을 활성화 시켜줬다. [invalid.js] - 정규표현식이나 유효성 모음 파일을 별도로 분리해서 사용했다. export default { pwValid: /(?=.*[a-zA-Z])(?=.*[0-9]){10,16}$/, repeatWord: ['0123456789', 'abcdefghijklmnopqrstuvwxyz','ABCDEFGHIJKLMNOPQRSTUVWXYZ'], keyboard: ['1.. 2024. 3. 25. css 성능 향상 브라우저 렌더링은 뷰포트가 변경되거나 자바스크립트에서 노드를 만지는 일이 있거나 HTML내에서 스타일을 변경하거나 할 때 반복적으로 동작한다. 이러한 순간마다 화면을 새로 화면을 그리고( reflow, repaint), 이 행동이 반복적으로 사용되게 되면 성능을 저하시킨다. 그렇기 때문에 렌더링은 최적화 시키는 방법을 알아두는 것이 중요하다. [Reflow (layout)] 레이아웃 단계는 렌더트리를 생성하면서 계산된 노드와 스타일을 기기의 뷰포트에 맞게 어떻게 위치 시켜 보일지를 결정하는 단계이다. 상대적인 측정값도 모두 절대적인 픽셀로 변환이 된다. 리플로우는 레이아웃 요소들의 수치를 계산해서 새로운 위치에 나타나게 하는 동작이 일어날 때마다 반복해서 실행되게 된다. 또한 DOM 하위, 상위에 있는 .. 2024. 3. 5. 이전 1 2 3 4 5 ··· 33 다음 728x90 반응형
