Javascript (13) 썸네일형 리스트형 [js][trouble-shooting] drag and drop 이벤트 구현 시 주의 사항 - drag 이벤트가 drag를 놓은 후에 또 발생함. 근데 clientX, clientY 값은 0임. 왜??? 문제drag 이벤트는 드래그인 중에 계속 발생한다.근데, 특정 조건에서는 drag를 놓을 때 한번 더 발생한다.문제는 이 때 clientX 같은 일부 값이 제대로 안들어있고 0으로 나와서 drag 이벤트 핸들러에 clienX 관련 로직이 들어있으면 에러가 나버린다. 코드import React from "react";export default function DADMoveTest() { return ( { console.log("onDragStart"); }} // 드래그를 놓을 때 한번 더 실행됨. clientX는 0임 onDrag={(ev) => { console.log("onDrag", ev.clientX); .. [javascript] 예외처리의 개념, 디자인 패턴, 비동기 함수의 예외처리 자바스크립트의 에러와 예외 처리에 대해 알아본다. 에러와 예외의 용어 구분두 용어는 통념상 동일하나, 프로그래밍적으로 다르다.에러 - 소스코드의 동작 과정 상에서 제어할 수 없는 에러이다. 일반적으로 하드웨어나 저수준 시스템적인 결함에 해당한다.예외 - 소스코드 로직에서 발생하는 문제를 처리하지 못할 때 발생한다. 따라서, 개발자가 처리하는 부분은 여기에 해당한다. 예외의 동작방식mdn의 참고 문서를 보자.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/throw throw가 던지는 건 사용자 정의 예외지만 동작은 일반적인 예외와 동일하다.예외가 발생하면,현재 함수의 실행이 중지된다. 즉, 해당 함수의 뒷 내용이 실행되지.. try catch문에 finally가 필요한 이유 finally 블록은 try catch 문의 실행 이후 무조건 실행되므로 리소스 해제 등의 작업에 적합하다.그런데, 굳이 finally를 쓰지 않고 아래처럼 try catch 뒤에 실행될 코드를 적으면 되는거 아닐까.function init() { try { throw new Error("에러1"); } catch (err) { console.error(err); } console.log("후속 작업");}init(); 아니다. finally만의 고유 기능 때문에 사용해야 하는 경우가 있다. 1. catch문에서 에러가 날 경우, 일반 코드는 실행되지 않지만, finally 문은 실행된다.finally를 사용하는 경우function useFinally() { try { throw.. [javascript] nodeList와 HTMLCollection의 차이 (children과 childNodes의 차이) dom의 프로퍼티인 children와 childNodes.그리고 nodeList와 HTMLCollection는 겉으로 보기에는 둘 다 dom 배열을 반환하지만, 다음 차이가 있다.html 노드만 반환하는가어떻게 배열 요소에 접근가능한가동적인가 정적인가1. html 노드만 반환하는가nodeList는 dom 외에 text 노드와 주석 노드를 가질 수 있다.HTMLCollection은 dom 만 요소로 가질 수 있다. 그러면 어떤 경우에 nodeList는 dom 이외의 노드를 가질까.nodeList를 반환받는 방법은 크게 두 가지이다.element.querySelectorAll() 의 반환값node.childNodes의 반환값이 중에서 querySelectorAll은 dom 노드로만 이뤄진 배열을 반환하고, .. [코딩 테스트, javascript] 배열의 균질적 분할 로직 로직의 목표배열 A를 넘겨주고 maxLength x를 넘겨주면, 해당 배열을 최대 길이 x를 넘지 않는 배열들의 배열(2차원 배열)로 반환.각 배열은 다른 배열과 길이가 2이상 차이나면 안됨.정리하자면, 최대 길이에 맞게 배열을 분할하되, 균질하게 요소를 나눠야 한다. function evenlySplitArray(arr, maxLength) { const result = []; const splitArrayLength = Math.ceil(arr.length / maxLength); // 필요한 배열의 갯수 const baseSize = Math.floor(arr.length / splitArrayLength); // 분할된 배열의 기본 크기(최소 크기) const extraLength = ar.. [nodeJS - trouble shooting] npx 실행 시 npm error code ENOENT가 발생할 때 원인 및 해결 과정 문제 설명react 프로젝트를 세팅하려고 creat react app(cra)프로젝트의 세팅 명령어인 npx create-react-app my-app 를 입력했다.그리고 아래 에러가 발생하였다.npm error code ENOENTnpm error syscall lstatnpm error path C:\Users\user\AppData\Roaming\npmnpm error errno -4058npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\user\AppData\Roaming\npm'npm error enoent This is related to npm not being able to find a file.npm error eno.. 자바스크립트 모듈 개념 잡기 1부. 모듈의 등장 주제자바스크립트에서 모듈 시스템이 등장한 배경에 대해 살펴본다,commonJS, AMD, UMD, ES6의 차이에 대해 기본적인 수준으로 이해한다. 1. 모듈 시스템 이전의 자바스크립트 : 스크립트 분할, 전역 네임스페이스, iife원래 자바스크립트는 대형 어플리케이션 제작을 위한 앱이 아니었다. 대신, 웹 페이지에 약간의 이벤트 기능을 추가하는 클라이언트 사이드 스크립트 언어로 시작하였다. 따라서 코드의 양이 많지 않았고 모듈 시스템의 필요성 자체가 크게 제기되지 않았다. 하지만 시간이 흐르며 웹 페이지의 규모가 커지고 자바스크립트 코드의 양이 늘어나자 몇 가지 대안이 추구되었는데, 이는 다음과 같다.1) 스크립트 분할가장 단순한 방법은 코드를 스크립트 파일로 분리하는 것이었다.기능에 따라 main.j.. [javascript] object의 property에 대하여(configurable, enumerable, writable) 흔히 알려진 object의 정보 자바스크립트의 object에 대해 일반적으로 많이 하는 정보는 다음과 같다. 넓은 정의 | 원시 데이터 값이 아닌 모든 데이터 (array, object, function ...) 좁은 정의 | property로 구성된 집합 property | property는 key와 value의 쌍으로 이뤄져 있고 value는 모든 데이터 타입이 가능하다. 그 중, 함수를 value로 삼은 property를 특별히 method라 부른다. 생성 방법 | 오브젝트 리터럴({})을 사용하거나 Object 함수를 사용한다. 이걸로 object를 다 안다고 말할 수 있을까? prototype 우리는 object의 property를 참조할 때, obj.proper1 이나 obj[proper1] .. 이전 1 2 다음
