inspect view (검사)

'검사'에서 작성한 자바스크립트 파일이 보이지 않는 경우확장 프로그램은 내가 작성한 js 파일로 동작하고 있다. 그런데 chrome-extension:/// 경로에 해당하는 js 파일이 없을 수 있다.이 경우 해당 경로는 background script나 popup에 관련된 자바스크립트 파일을 보여주기 때문에, 작성한 js 파일은 별도로 다뤄질 수 있다.해당 파일은 웹 페이지의 DOM에 삽입되기 때문에, 페이지에서 직접 inspect view를 통해 확인할 수 없을 수 있다.

• format_list_bulleted ┝ 개발 언어/┝ html_css_js
• · 2025. 1. 16.
• textsms

크롬 익스텐션 개발 시 유의할 점

리소스 파일 다시 로드js파일 등 확장 프로그램을 수정한 후에는 크롬에서 확장 프로그램을 다시 로드해야 변경 사항이 반영된다. 새로고침한다고 해결되지 않으니 주의 (이걸로 삽질 ㅠ)또는 chrome://extensions/ 페이지에서 '새로고침'을 눌러주면 된다.

• format_list_bulleted ┝ 개발 언어/┝ html_css_js
• · 2025. 1. 16.
• textsms

test.html?name=:6 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

JavaScript가 HTML 요소보다 먼저 실행되어서 생기는 문제로 태그를 밑으로 옮기면 해결

• format_list_bulleted ┝ 개발 언어/┝ html_css_js
• · 2025. 1. 16.
• textsms

[js] Key 기반 컬렉션에 대하여

Key 기반 컬렉션에 대하여 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections Map 객체 Map과 Set은 '입력된 순서대로' 접근 가능한 요소들을 포함하고 있다. Map객체에 저장되어 있는 각 요소들을 [키, 값] 형태의 배열로 반복적으로 반환해주는 for...of 를 사용할 수 있다. var sayings = new Map(); sayings.set("dog", "woof"); sayings.set("cat", "meow"); sayings.set("elephant", "toot"); sayings.size; // 3 sayings.get("a"); // undefined sayings.has("b");..

• format_list_bulleted ┝ 개발 언어/┝ html_css_js
• · 2023. 10. 16.
• textsms

[js] 기본적인 배열 / 버퍼와 뷰

기본적인 배열 배열 생성 아래 구문들은 동일한 배열을 생성한다. const arr1 = new Array(a, b, ..., n); const arr2 = Array(a, b, ..., n); const arr3 = [a, b, ..., n]; 길이가 0이 아니지만 요소는 없는 배열 const arr1 = new Array(7); const arr2 = Array(7); const arr3 = []; arr3.length = 7; 객체의 속성에 배열 할당하기 const obj = {}; obj.prop = [a, b]; 또는 const obj = { prop: [a, b] }; obj.prop; // [a, b] 배열의 요소도 속성이므로 속성 접근자를 사용하여 접근할 수 있다. const arr = ["..

• format_list_bulleted ┝ 개발 언어/┝ html_css_js
• · 2023. 10. 16.
• textsms

[js] 배열 원소 다루기 : delete & splice

delete delete 연산자는 객체의 속성을 삭제한다. 구문 delete object.property; delete object[propertyKey]; delete objectName[index]; objectName : 객체 이름 property : 객체에 존재하는 속성 propertyKey : 존재하는 속성을 가리키는 문자열이나 심볼 반환값 delete 연산자로 삭제한 후 해당 속성에 접근할 경우 undefined 반환. 속성을 제거할 수 있는 경우에는 true를 반환하고, 제거할 수 없을 땐 false를 반환 예제 delete Math.PI; // false 반환 (설정 불가한 속성 삭제 불가) const myObj = { h: 4 }; delete myobj.h; // true 반환 dele..

• format_list_bulleted ┝ 개발 언어/┝ html_css_js
• · 2023. 10. 16.
• textsms