이벤트(Event)

이벤트(Event) 1. 이벤트(Event) JavaScript에서 이벤트에 대해 알아봅시다! 이벤트(Event)란? 사용자 상호 작용 or 웹 페이지의 상태 변화와 같은 다양한 동작을 처리하는 데 사용됩니다. 이벤트는 일종의 신호로, 웹 페이지 or 애플리케이션에서 어떤 일이 발생했음을 알리는 역할을 합니다. 이벤트는 함수(핸들러)를 연결시켜 활동 발생 시, 동작(트리거)하게 합니다. 2. 이벤트 핸들러 종류 대표적인 DOM 이벤트 핸들러의 종류는 다음과 같습니다. 1) click 요소를 마우스 왼쪽 버튼으로 눌렀을 때, 발생합니다. 예를 들어, 다음과 같이 +1 버튼을 클릭 시, 숫자가 1씩 증가하게 할 수 있습니다. See the Pen Tistory_Front-End Study_JavaScript..

• format_list_bulleted JavaScript
• · 2024. 3. 24.
• textsms

브라우저 객체

브라우저 객체 1. 브라우저 객체 브라우저 객체에 대해 알아봅시다! 브라우저 객체란? 웹 브라우저 환경에서 사용할 수 있는 객체들을 말합니다. 이러한 객체들은 웹 페이지의 구조, 동작, 스타일 등을 조작하는 데 사용됩니다. 2. 브라우저 객체의 종류 주요한 브라우저 객체들은 다음과 같습니다. 1) Window 객체 모든 브라우저 객체의 최상위 객체로, 브라우저 윈도우를 나타냅니다. 전역 객체이기도 하며, 브라우저 창의 크기, 위치, 브라우저 히스토리, 타이머 등을 다룰 수 있습니다. window 객체의 속성은 다음과 같습니다. window { alert : 경고 메시지 출력 함수, confirm : 확인 메시지 출력 함수, prompt : 입력 메시지 출력 함수, setTimeout : n초 후에 함수를..

• format_list_bulleted JavaScript
• · 2024. 3. 24.
• textsms

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 JavaScript
• · 2024. 3. 22.
• textsms

디버깅(Debugging)

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

• format_list_bulleted JavaScript
• · 2024. 3. 21.
• textsms

데이터를 받아와서 상품 목록 만들기

데이터를 받아와서 상품 목록 만들기 1. 데이터를 받아와서 상품 목록 만들기 이번엔 데이터를 직접 받아와서 상품 목록을 만들어 봅시다! #1. assets 폴더 안에 oneRoom.js 파일을 생성한 후, post.js 파일 안에 다음과 같이 입력하여 데이터를 추가해 줍니다. export default [ { id: 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000, }, { id: 1, title: "Changdong Aurora Bedroom(Queen-size)", image: ..

• format_list_bulleted Vue.js
• · 2024. 3. 10.
• 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 JavaScript
• · 2024. 3. 9.
• textsms