프로그래밍(TA, AA)/자바스크립트 (28) 리스트형 [자바스크립트] ES2015(ES6) 알아보기 ES6과 ES205는 같은 의미를 가집니다. ES6 이후에도 ES2016, ES2017으로 자바스크립트 문법은 계속 발전해 나가고 있습니다. 오늘 포스팅은 ES6에 대해서 다뤄볼 것입니다. 우선 ES2015는 개선된 JavaScript문법입니다. ES6는 주목할만한 변화는 개선된 JavaScript문법을 사용한다는 점입니다. 새로운 Syntax들이 지원되어 개발자들이 코드량, 생산성을 늘릴 수 있게 되었습니다. ES6는 현재 해외에서 거의 표준처럼 사용되고 있으며, 브라우저 호환성이 훌륭하며, ES6를 기반으로 한 JavaScript 생태계가 확산되고 있습니다. ES6 브라우저 호환성은 https://kangax.github.io/compat-table/es6/ 에서 살펴볼 수 있습니다. ES6 코드는 .. [자바스크립트] 자바스크립트를 잘 사용하기 위한 67가지 규칙 다른 많은 언어들은 변하지 않도록 제한하는 것들이 있습니다. 예를 들어 빌트인 객체가 런타임에 수정되거나 확장되지 않고, 표준 라이브러리 이름의 바인딩이 할당에 의해 덮어 쓰일 수 없습니다. 이와 달리 자바스크립트는 모든 객체들의 수정을 거의 전적으로 허용합니다. 이런 설계가 특정 도메인(예를 들어, 신뢰할 만하거나 그렇지 않은 코드가 브라우저의 보안 경계 내에서 안전하게 섞인 경우)에서는 분명히 도전과제를 안겨줄 것입니다. 자바스크립트의 유연성은 혁신적인 사용자들을 자극해서 더 창조적인 방향으로 구성되고 성장할 수 있습니다. 선구자들은 다른 언어를 본떠 도구들과 프레임워크 라이브러리들을 만들었습니다. 루비를 본뜬 Prototype, 파이썬을 본뜬 MochiKit, 자바를 본뜬 Dojo, 스몰토크를 본뜬.. [자바스크립트] 브라우저 렌더링 브라우저에서 렌더링 성능은 중요한 요소 가운데 하나입니다. 렌더링 성능을 향상시키면 사용자가 느끼는 체감 속도를 개선할 수 있습니다. 자바스크립트로 동적인 작업을 실행할 때의 렌더링 문제를 최소화하여 성능을 높일 수 있습니다. 렌더링 과정렌더링이란 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정입니다. 이 과정은 다음과 같이 크게 2단계를 거쳐 이뤄집니다. 1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산2) 계산된 요소의 화면 표현 일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM 트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그립니다. 렌더링이 진행되는 과정다음은 HTTP 요청 후 응답을 통해 구현되는 전체적인 브라우저의 처리 과정입니다. 1) DOM 트리 생성 .. [자바스크립트] 성능을 높이는 코드 스타일 자바스크립트의 기본 요소인 반복문과 조건문, 문자열 연산과 함께 배열과 객체의 생성과 초기화, 문자열 연산, 정규 표현식, 변수 탐색 등을 어떻게 작성하느냐에 따라 자바스크립트의 실행 성능을 높일 수가 있습니다. 같은 기능을 실행하는 다양한 코드의 성능을 비교해 어떻게 작성할 때 성능이 더 좋은지 확인하는 것도 개발자에게 필요한 습관입니다. 아주 기초적인 코드이더라도, 키초적인 코드를 어떻게 작성하느냐에 따라서 자바스크립트의 실행 성능에 큰 차이가 날 수도 있습니다. 이후 개발을 하면서 성능 향상 문제를 해결하려 성능 개선 요소를 보며 하나하나 적용하기 보다는 제시된 최적화된 코드의 형태로 코딩하는 습관을 몸에 익혀 놓는 것이 성능 개선에 좀 더 효과적인 방법입니다. 물론 경우에 따라 직접 성능을 측정하.. [자바스크립트] 기본적인 웹 사이트 최적화 방법 HTTP 요청 최소화 HTTP 요청 최소화는 최적화에서 가장 기본적이면서도 중요한 부분입니다. 웹 사이트는 주로 마크업, 이미지, 스타일시트, 자바스크립트 등으로 구성됩니다. 각 구성 요소는 모두 웹서버에 있습니다. 이 구성 요소를 사용자의 컴퓨터로 가져오는 데는 네트워크 비용이 듭니다. 네트워크 비용은 곧 응답 시간으로 이어집니다. 그러므로 다운로드해야 하는 구성 요소의 개수를 줄이는 것은 가장 효과가 크고 중요한 최적화 방법입니다. 웹페이지에서 다운로드하는 구성요소의 개수는 HttpWatch나 YSlow로 알아볼 수 있습니다. 캐시가 없는 상태에서는 총 121개의 구성 요소를 다운로드 하고, 캐시가 있는 상태에서는 43개의 구성 요소를 다운로드합니다. 어떻게 121개의 구성요소만으로 구현해 HTTP .. 이전 1 2 3 4 5 6 다음
