Still growing

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍(일명 노란책)을 공부하고 정리한 내용입니다. Event 메모리와 성능 최적화 자바스크립트에서는 페이지에 존재하는 이벤트 핸들러의 개수가 페이지 성능에 직접적으로 영향을 미칩니다. 원인 - 각 함수가 메모리를 점유하는 객체이다. 메모리를 많이 사용할수록 성능은 떨어진다. - 이벤트 핸들러를 많이 할당하려면 DOM 접근도 많아진다. 이는 전체 페이지의 응답성을 떨어트린다. 개선 방법 1. 이벤트 위임 - 이벤트 핸들러 개수 줄이기 이벤트 버블링의 장점을 활용하여 공통 부모 요소에 이벤트 핸들러를 하나만 할당해서 해당 타입의 이벤트를..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍(일명 노란책)을 공부하고 정리한 내용입니다. DOM 표준를 기준으로 2021.05.26에 작성된 글로 Deprecated라고 쓰여 있어도 대체로 브라우저에서는 동작합니다. 1. UI 이벤트 사용자 인터페이스에서 트리거 된 이벤트 load: 리소스(document, images, style sheets, scripts etc.)의 로드가 끝났을 때 발생. unload: 리소스(document, images, style sheets, scripts etc.)가 DOM에서 제거될 때 발생. unload는 모든 것이 해제될 때 발생하므..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍(일명 노란책)을 공부하고 정리한 내용입니다. HTML 코드는 코드 블럭 내에서 해석이 되어서 부득이하게 이미지로 올립니다. 자바스크립트와 HTML의 상호작용은 문서나 브라우저 창에서 특정 순간에 일어난 일을 가리키는 '이벤트'에 의해 처리됩니다. 이벤트는 '리스너'(핸들러)로 추적하며 리스너는 이벤트가 일어날 때만 실행됩니다. 전통적인 소프트웨어 공학에서는 이 모델을 옵저버 패턴이라고 부릅니다. 1. 이벤트 흐름 '이벤트 흐름'은 페이지에서 이벤트가 전달되는 순서입니다. 초기에 이벤트를 도입한 목적은 폼을 처리할 때 서버와 브라..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. ES5부터 추가된 strict mode란 무엇이고, 적용 시에 어떤 점이 달라지는지 알아보겠습니다. strict mode란? strict mode(엄격 모드)는 ES5부터 추가된 더 엄격한 문법 검사를 시행하는 모드로 non-strict mode와는 아래와 같은 차이가 있습니다. (strict mode의 반대는 non-strict mode 혹은 sloppy mode(느슨한 모드)입니다. 정식 명칭은 아니라고 합니다.) 기존에는 무시되던 경우를 에러로 발생시킵니다. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수를 바로 잡아줍니다. 이후 버전에서 사용될 몇 가지 문..

클라이언트 스토리지 - 사용자의 컴퓨터에 데이터를 저장하기 위한 브라우저의 API - 웹 브라우저에게 메모리를 제공 -> 웹 앱에서 사용자의 설정, 특정한 상태 등을 저장 가능. - 출처별로 분리되어 저장됨 -> 한 사이트에서 다른 사이트에 저장된 데이터를 읽을 수 없음. - (같은 사이트의 다른 페이지 내에서는 스토리지를 공유하므로 통신 메커니즘을 활용하면 가능.) - 데이터의 생명주기 설정 가능. - 저장된 데이터는 암호화되지 않음. 1. 웹 스토리지 - HTML5에 정의된 API, 현재는 독립적인 표준. - 본질적으로 문자열 키와 값을 대응시킨 영속적 연관 배열인 로컬 스토리지와 세션 스토리지 객체로 구성됨. - 너무 크지 않은 대량의 데이터를 저장하기에 적합. - 구형 브라우저에서는 지원하지 않음..

HTTP(HyperText Transfer Protocol) - 웹브라우저가 서버로부터 문서를 전송 받거나 폼의 내용을 보내는 방법, 해당 요청의 내용에 대해 서버가 응담하는 방법을 명세. - 일반적으로 스크립트의 제어를 받지 않으나 js에서 Window.location 설정, form.submit() 메서드 호출로 초기화 가능. Ajax(Asynchronous JavaScript and XML: 비동기 자바스크립트와 XML) - HTTP를 조작하는 데 특화된 웹 애플리케이션 설계 방식. - HTTP 조작으로 페이지를 불러오지 않고도 웹 서버와 데이터를 교환할 수 있도록 함.

클라이언트 측 자바스크립트 - 정적인 HTML 문서를 사옿작용이 가능한 웹 애플리케이션으로 바꾸는 역할. Window 객체 - 클라이언트 측 자바스크립트 프로그램의 전역 객체. - 메서드: setTimeout(), setInterval(func, interval, /*optional*/args...), clearTimeout(), clearInterval(intervalID) - 프로퍼티: document, location URL, history, navigator 브라우저 제조사와 버전정보, screen 데스크톱 크기 - alert(), confirm(), prompt() 간단한 대화상자, showModalDialog() HTML 대화상자 - onerror(오류를 설명하는 msg, 오류가 발생한 js ..

HTML에 Javascript 포함는 방법 태그 안에 직접 작성. 태그 사이에는 어떤 내용를 넣어도 경고 처리되고 무시됨. 필요하다면 코드에 대한 저작권이나 문서화된 설명을 넣을 수 있음. 확장성이 좋고, js 파일을 사용한 첫 페이지에서 한 번만 내려 받으면 그 다음 페이지는 브라우저 캐시에서 참조할 수 있음. 참조(http://code.google.com/apis/ajaxlibs/) (http://developers.google.com/speed/libraries/) onclick 같은 HTML 이벤트 핸들러 속성 안에 작성 javascript: 라는 특별한 프로토콜을 이용하여 URL 안에 작성. Javascript 실행 문서 내용을 불러오고 브라우저는 문서를 모두 불러오고 파싱해서 조작할 준비가 끝..