Still growing

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. HTML Semantics semantic이란 코드 조각의 의미입니다. 다시 말해 해당 코드의 목적이나 역할을 뜻합니다. Semantic Element를 사용하여 HTML을 작성하면 아래와 같은 이점이 있습니다. SEO 최적화 - 검색엔진이 중요한 태그(ex. header)를 알기 쉽다. 접근성 강화 - 시각장애인이 화면 판독기로 페이지 탐색 시, 화면 판독기가 마크업을 푯말로 사용할 수 있다. 디버깅 용이성 증가 - 코드의 의미를 이해하기 쉽다. Semantic Element 종류 문서 혹은 본문 내부의 제목이나 로고, 저작 정보 등 메타 정보를 표기합니다. HTML Sem..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. MutationObserver란? DOM 변경을 관찰합니다. DOM3 이벤트 명세의 Mutation Events를 대체합니다. 구문 var observer = new MutationObserver(callback) callback: DOM 변경 시 호출될 함수. entries: 각 DOM의 변경을 나타내는 MutationRecord 형식의 오브젝트 배열. observer: Observer 자기 자신. 특정 조건이 되면 관찰을 중단하는 등의 용도로 사용 가능. 메서드 di..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. HTML이란 HyperText Markup Language의 약자로 사용자가 페이지를 넘나들며 정보를 얻을 수 있는(HyperText) 문서를 태그(tag)를 이용한(Markup) 문법으로 만드는 언어입니다. 기본 구조 Let's study HTML! 기본 구조 주요 태그 Semantic HTML 최상위 레벨에 html tag, 그 하위 레벨에 head, body tag 작성합니다. head tag head tag 하위에는 페이지에 표시되지는 않지만 페이지에 필요한 메타데이터를 작성합니다. meta tag 문서에 대한 설명. name과 content 특성을 사용하여 웹 로봇에..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 2021년 1월 15일에 Velog에 작성한 글을 옮겨온 글입니다. JavaScript의 this 키워드는 상황에 따라 다른 값을 참조하기도 하고, Java나 Python과 같은 다른 프로그래밍 언어와 다르게 동작하여 혼란을 야기할 때가 있습니다. JavaScript에서의 this는 무엇이고, 어떻게 동작하는지 알아보겠습니다. this란? this는 해당 키워드가 속한 개체를 참조합니다. JavaScript 엔진은 실행 중인 실행 컨텍스트의 LexicalEnvironment을 사용해 this 바인딩을 결정하는데요. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 다시 말해 th..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 프론트엔드 개발자를 위한 자바스크립트 프로그래밍(일명 노란책)을 공부하고 정리한 내용입니다. 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 엔진의 최적화 작업을 어렵게 만드는 실수를 바로 잡아줍니다. 이후 버전에서 사용될 몇 가지 문..