본문 바로가기

프로그래밍/JavaScript9

[JavaScript] npm vs yarn npm 자바스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자(Node.js에 기본 내장)이다. command-line client인 npm과 온라인 데이터베이스인 npm registry로 이루어져 있다. 일반적으로 command-line client를 npm이라고 볼 수 있으며 실제로 npm에는 npm registry까지 포함되어 있다. npm 명령어 npm init : package.json 생성 npm install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치 npm install package_name@버전 : 특정 패키지의 특정 버전 설치 npm install 주소 : 특정 저장소 내 패키지 설치. 주로 github을 설치한다. npm in.. 2022. 6. 5.
[JavaScript] splice()와 slice() splice() 배열의 기존 요소를 삭제 또는 교체, 새 요소를 추가해 기존 배열의 내용을 변경한다. developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Array.prototype.splice() - JavaScript | MDN Array.prototype.splice() splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. The source for this interactive example is stored in a GitHub repository. If you'd like developer.mozilla.org slice() 배열을 복사해 .. 2021. 3. 23.
[JavaScript] 이벤트 처리(event handling) 자바스크립트 이벤트 모델 자바스크립트는 이벤트 드리븐(event-driven) 모델에 기반한다. 웹페이지 안에서 발생한 여러 가지 이벤트에 따라 대응하는 방법들(이벤트 핸들러)을 이용해 처리한다. 이벤트에 대응해 처리를 담당하는 함수를 이벤트 핸들러라고 한다. 이벤트 발생 형태 애플리케이션 사용자가 발생시키는 이벤트 예) 버튼 클릭, 키보드 입력 등 애플리케이션 스스로 발생시키는 이벤트 예) 페이지 로드 등 자바스크립트 주요 이벤트 분류 이벤트명 발생 타이밍 주 대상 요소 읽기 abort 이미지의 로딩이 중단되었을 때 img load 페이지, 이미지의 로딩 완료 시 body, img unload 다른 페이지로 이동할 때 body 마우스 click 마우스 클릭 시 - dbclick 더블클릭 시 - mous.. 2020. 9. 13.
[JavaScript] DOM 및 Form 객체 DOM(Document Object Model) 개요 DOM이란? 웹 페이지의 HTML문서 구조를 객체로 표현하기 위한 계층구조로서, 문서를 나타내는 최상위 객체는 document 객체이다. 웹 페이지가 로드될 때, 웹 브라우저는 페이지의 DOM을 생성하고 트리 구조로 관리한다. 각각을 노드(node)라고 하며 엘리먼트 노드, 텍스트 노드, 속성 노드가 있다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준안이다. DOM은 HTML과 XML 문서에 대한 응용 API로서 문서를 구조적(계층적인 트리 구조)으로 정리하여 문서의 내용과 시각적인 형태를 변경할 수 있도록 지원한다. HTML 문서의 DOM 표현 방법 이미지 출처: commons.wikimedia.org/wiki/Fil.. 2020. 9. 13.
[JavaScript] 함수 자바와 비교했을 때 리턴 타입, 매개변수, 사용 부분이 다르다. 함수의 역할 일반적인 호출 가능한 형식으로서의 함수(일반적인 함수 역할) 값으로서의 함수(함수객체): 변수에 할당 가능 다른 함수의 인자로 전달 가능 다른 함수의 반환값(return)으로 사용 가능 다른 객체(인스턴스)를 생성할 수 있는 함수: 생성자 함수라고 함, new 이용 함수를 정의하는 방법 3가지 1. 선언적 정의 방법(이름 있는 함수) function 함수명(매개변수1, 매개변수2,..){ 문장; return 리턴값; } 함수는 프로그램의 파싱(컴파일) 단계에서 생성되므로, 함수 정의 전에 호출이 가능하다. 2. 함수 리터럴(익명 함수) var 변수명 = function(매개변수1, 매개변수2,...){ 문장; return 리턴값.. 2020. 9. 13.