DOM

DOM 1. DOM DOM(Document Object Model)에 대해 알아봅시다. 여기서 DOM이란? HTML, XHTML 또는 XML 문서의 프로그래밍 인터페이스를 나타냅니다. 이는 웹 페이지의 구조화된 표현을 나타내며, 프로그래밍 언어가 해당 구조를 조작할 수 있는 방법을 제공합니다. 2. 특정요소 찾기 그러면 DOM을 다뤄봅시다! DOM에서 특정 요소를 찾는 데 사용되는 주요 메서드로는 다음과 같이 있습니다. document.getElementById('아이디') : 해당 ID를 가진 요소를 찾습니다. document.querySelecter('css') : CSS 선택자를 사용하여, 첫 번째 일치하는 요소를 반환합니다. document.getElementsByClassName('class')..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 22.
• textsms

디버깅(Debugging)

1. 디버깅(Debugging)디버깅(Debugging)에 대해 알아봅시다!디버깅(Debugging)이란? 컴퓨터 프로그램 개발 단계 중 발생한 시스템의 논리적 오류 or 버그를 찾아내고 수정하는 작업 과정을 말합니다. 2. 디버깅 도구 및 기법JavaScript에선 디버깅을 수행하는 데 사용할 수 있는 몇 가지 도구와 기법이 있습니다.  1) 브라우저 콘솔대부분 웹 브라우저는 개발자 도구를 제공하며, 코드 실행 시 발생하는 오류를 보고하는 console이 포함되어 있습니다.오류 메시지, 경고 및 로그 메시지를 확인하여 코드에서 발생하는 문제를 식별할 수 있습니다.Chrome 브라우저에서는 F12를 누르고, Console 탭을 선택하여 콘솔을 열 수 있습니다.  2) 디버거대부분 브라우저는 코드 디버깅을..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 21.
• textsms

export와 export default의 차이

export와 export default의 차이 1. export와 export default의 차이 코딩을 하다보면, export를 사용하는 경우와 export default를 사용하는 경우가 있습니다. 이 둘의 차이는 뭘까요? 2. export export는 모듈에서 하나 이상의 변수, 함수 or 객체를 내보내는 데 사용합니다. 여러 개의 이름이 지정된 항목을 모듈에서 내보낼 수 있습니다. 예를 들어 봅시다. → 이 경우, aaa와 bbb를 내보내고 다른 모듈에서 가져올 때, 이름으로 가져올 수 있습니다. // 항목 1 const aaa = 'aaa'; // 항목 2 function bbb() { return 'bbb'; } export {aaa, bbb}; /* 이렇게도 사용할 수 있음 export..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 3. 9.
• textsms

this와 bind

this와 bind 1. this this는 실행 컨텍스트에 따라 동적으로 바뀌며, 함수가 어떻게 호출되는 지에 따라 값이 달라집니다. 주로 메서드 or 콜백 함수 등에서 사용되며, 함수가 어떻게 호출되느냐에 따라 this가 가리키는 대상이 달라집니다. 다음 코드를 보면 user.info( )를 호출할 때, this는 user를 가리킵니다. const user = { name: "Kim", info: function () { console.log(this.name); } }; user.info(); // Kim 2. bind bind 메서드는 함수의 this 값을 설정하여, 새로운 함수를 생성합니다. const user = {name: "Kim"}; function info() { console.log(..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 31.
• textsms

reduce 함수

reduce 함수 1. reduce 함수 reduce 함수는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 하나의 누적된 결과 값을 반환하는 함수입니다. reduce는 초기값(Initial Value)과 함께 사용될 수 있습니다. 2. 사용방법 다음 예제를 확인해보겠습니다. let numbers = [1,2,3,4,5,]; let sum = numbers.reduce((result, num) => result + num, 0); console.clear(); console.log(sum); // 15 위 코드에서 reduce는 배열 numbers의 각 요소에 대해 누적된 합계를 계산합니다. 초기값으로 0을 사용하고, 콜백 함수는 현재 요소(num)와 누적된 값(result)을 받아서 더한 후, 새..

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 31.
• textsms

생성자 (constructor)

생성자 (constructor) 1. 생성자 (constructor) constructor는 객체를 생성할 때, 호출되는 메서드입니다. 일반적으로 클래스 or 함수를 사용하여 객체를 만들 때, 이 생성자가 호출됩니다. 2. 사용방법 console.clear(); class Person { // 생성자 constructor(name, age) { this.name = name; this.age = age; } // 다른 메서드들도 정의할 수 있음 hello() { console.log(`안녕하세요 ${this.name}입니다. 나이는 ${this.age}살 입니다.`) } } // 객체 생성 const user = new Person("Kim", 20); // 생성자에서 초기화된 속성 확인 console...

• format_list_bulleted Front-End Study/JavaScript
• · 2024. 1. 29.
• textsms