본문 바로가기

개발/자바스크립트 35

[자바스크립트] 크롬 개발자 도구의 좀 더 이득보는 기능들 자바스크립트를 개발하다 보면 크롬 개발자 도구(F12)로 작업을 할 때가 있습니다. 편하거든요. 근데 그동안 크롬을 써보면서 기본적인 기능만 써오곤 했습니다. 근데 블로그 글을 읽다가 좋은 글이 있어서 공부 겸 정리를 하려고 합니다. 많은 기능 중에 4가지에 대해 살펴보겠습니다. 1. 콘솔의 마지막 실행 결과 참조 = $_ 2. 객체를 쉽게 파악하게 해주는 명령어 = table 3. 변수를 클립보드로 복사하는 명령어 = copy 4. XHR 요청 반복하는 기능 = Replay 1. 콘솔의 마지막 실행 결과 참조 = $_ 콘솔을 하다보면 순차적인 기능, 메소드를 확인해야 할 때가 있었습니다. 하지만 이걸 편하게 해주는 $_ 명령어가 있습니다. 그동안은 메소드 결과를 변수에 추가한 후에 순차적인 작업을 진행.. 2020. 7. 30.
[자바스크립트] 최적화 #2 : 반복문 최적화(Duff's Device) 이전 포스트에서 for문을 최적화하는 간단한 방법에 대해 알아보았습니다. 2020/07/27 - [개발/자바스크립트] - [자바스크립트] 최적화 #1 : for 문을 최적화해보자 이번에는 for문을 최적화하는 2번째 방법에 대해 설명하겠습니다. 이전 포스트에서는 for문의 참조횟수를 줄임으로써 최적화를 진행했습니다. 이번에는 for문의 외부가 아닌 내부에서 최적화하는 기법을 소개하고자 합니다. 일반적으로 참조 최적화등을 아무리 많이 한다고 해봐야 반복문 안에 있는 코드가 오래걸린다면 아무 쓸모가 없습니다. 따라서 최적화의 1번째 원칙은 반복문 내부의 cost를 줄이는 것이고 제가 포스트 하는 것은 그 차후에 해야할 작업입니다. 아무튼 반복문을 실행했을때 반복문 내부의 코드를 실행하는 것 조차 시간이 걸립.. 2020. 7. 29.
[자바스크립트] 최적화 #1 : for 문을 최적화해보자 일반적으로 개발자들에게 for문은 아주 익숙하다. for ( var i = 0; i < 10; i++){ //do-something } 하지만 쓰다보면 조건절 속에 단순한 숫자를 때려박는 경우는 드물고 무언가의 length, size 를 넣게 되는 경우가 많다. for ( var i = 0; i < ojbect.length; i++){ //do-something } 이런 경우 우린 최적화 할 수 있다. 매번 조건절에서 비교를 할 때에 object.length를 참조하기 때문에 이 부분을 제거한다면 최적화가 가능하다. 배열의 길이, 객체의 size에 따라 다르겠지만, 대부분의 브라우저에서 25%의 시간을 절약할 수 있다. var test = ['a','b','c','d','e','f','g','h','i'.. 2020. 7. 27.
[자바스크립트] 마침표 표기법, 대괄호 표기법에 대한 비교 자바스크립트 성능 최적화라는 책을 읽다가 ' 브라우저 대부분에서 마침표 표기법(object.name)과 대괄호 표기법(object ['name']) 사용 시 눈에 띄는 차이는 없습니다. 사파리에서는 마침표 표기법이 빠르지만, 대괄호 표기법을 쓰지 말라고 권할 정도는 아닙니다.' 이라는 대목을 봤습니다. 그래서 사파리는 그렇다치고 평소에 자주 쓰는 크롬에선 어떨까 싶어 테스트를 해보게 되었습니다. 일단 마침표 표기법과 대괄호 표기법에 대한 설명을 간단히 하고 가겠습니다. let testObject = { testName : 'Kang' }; console.log(testObject.testName) // Kang console.log(testObject['testName']) // Kang 위의 예시를 보.. 2020. 7. 27.

티스토리툴바