1. 자바스크립트의 데이터타입 1) 기본타입 : Number, String, Boolean, null, undefined 2) 참조타입 : 객체(Object) - Array, Function, 정규표현식 - 자바스크립트에서는 한번 생성된 문자열은 읽기만 가능하지 수정은 불가능하다. - undefined는 값이 할당되지 않은 변수 / null은 개발자가 명시적으로 값이 비어있음을 나타냄 자바스크립트는 기본 데이터타입인 boolean, number, string와 null, undefined를 제외한 모든것이 객체이다. 기본 데이터타입인 boolean, number, string도 객체처럼 다룰 수 있다. 배열, 함수, 정규표현식 등도 결국 자바스크립트 객체로 표현된다. 객체는 단순히 key: value 형..
기록/JavaScript
DOM ContentLoaded : 모든 HTML 요소가 로드되고 준비가 완료되었을 때, 이벤트 핸들러 함수 내의 코드가 실행된다. 웹페이지가 로딩(DOMContentLoaded 이벤트는 DOM이 완성된 직후 발생한다.)되면 로컬 스토리지에 저장되어 있는 상태를 로드한다. 사이드 네비게이션의 상태 : 페이지 이동, 리로드(새로고침) 시에도 이전에 적용된 사이드 내비게이션 상태가 모든 웹 페이지에 동일하게 적용되어야한다. 따라서 사이드 네비게이션의 상태는 전역 상태로 관리하고 localStorage 나 DataBase 등을 사용해 영속적으로 관리할 필요가 있다. const $nav = document.querySelector('nav'); let isSideNavigationOpen = false; win..
See the Pen Untitled by seon.o.min (@seon-o) on CodePen. 사용자가 이미지를 드래그하여 다른 요소에 드롭할 수 있게 아래와 같이 작업을 수행해야합니다. 1. 드래그 대상 설정: 먼저 사용자가 드래그 할 수 있는 요소를 설정해야 합니다. 이는 HTML의 draggable 속성을 사용하여 설정할 수 있습니다. 예를 들어, Drag me!는 사용자가 드래그할 수 있는 div 요소를 만듭니다. 2. 드래그 이벤트 처리: 사용자가 드래그 대상을 드래그하기 시작하면 dragstart 이벤트가 발생합니다. 이 이벤트 핸들러에서는 드래그하는 데이터를 설정하고, 어떤 드래그 앤 드롭 작업을 수행할지 결정해야 합니다. 이는 DataTransfer.setData() 메서드를 사용하..
무한 스크롤(Infinite Scroll)은 웹사이트나 앱에서 사용자가 페이지 끝까지 스크롤하면 자동으로 새로운 컨텐츠를 추가로 로드하는 기법입니다. 이는 사용자 경험을 향상시키며, 사용자가 페이지를 새로고침하거나 다른 페이지로 이동하는 번거로움을 줄입니다. 무한 스크롤을 구현하는 기본적인 방법 1. 데이터 로드: 먼저 서버에서 데이터를 비동기적으로 가져와야 합니다. 이를 위해 Fetch API나 Axios 등의 라이브러리를 사용하거나, XMLHttpRequest 객체를 직접 사용할 수 있습니다. 이 데이터는 일반적으로 JSON 형식입니다. 2. 스크롤 감지: 사용자가 페이지 끝까지 스크롤했는지 감지해야 합니다. 이를 위해 JavaScript의 스크롤 이벤트를 사용하고, 페이지 끝에 도달했는지 확인하기 ..
각각의 Class에 해당하는 기능들을 만들고 조합하는 방법과 코드 클래스를 사용하여 코드를 모듈화하는 것은 코드의 재사용성을 높이고 유지보수를 쉽게 하는 데 큰 도움이 됩니다. ES6부터는 자바스크립트에도 클래스가 정식으로 도입되어 객체 지향 프로그래밍이 더욱 쉬워졌습니다. class MyClass { constructor(param1, param2) { this.property1 = param1; this.property2 = param2; } method1() { console.log(this.property1); } method2() { console.log(this.property2); } } let myInstance = new MyClass('Hello', 'World'); myInstance..
