JavaScript6 HTML5 Drag and Drop API을 사용한 드래그 앤 드롭 기능 개요 기존의 마크업 언어를 사용해 드래그 앤 드롭과 관련된 기능을 구현하려면 외부 플러그인을 사용하거나 다른 이벤트 핸들러를 사용해 드래그 앤 드롭 기능을 비슷하게 흉내내는 방법을 사용했으나 HTML5에서 Drag and Drop API를 지원하게 되면서 다양한 드래그 앤 드롭 이벤트 핸들러가 추가되었고 이들을 사용해서 드래그해서 업로드, 드래그해서 객체를 이동하는 행위들을 쉽게 구현할 수 있게 되었다. 먼저 드래그 앤 드롭 기능을 사용하기 위해서는 DOM 객체에 draggable 속성을 추가해야 한다. 드래그하세요 이제 이 객체는 마우스로 드래그할 수 있게 되었다. 이제 이를 이용해 다양한 기능을 구현하기 위해서 다음의 이벤트 핸들러들을 사용한다. 1. dragstart(react에서는 onDragSt.. 2021. 12. 23. 자바스크립트 커스텀 에러 만들기 /* class 문법을 사용 extends, constructor, super 키워드를 사용 기본 제공되는 Error 객체의 파라미터는 3개 new Error(message, fileName, lineNumber) 하지만 에러 객체를 다루면서 http status code나 데이터를 넣을 일이 생길 경우 아래와 같이 에러 객체를 확장해서 사용 */ class CustomError extends Error { constructor(message, options) { super(message); this.flags = options.flags || ''; this.status = options.status || 200; this.data = options.data || ''; } } let error = n.. 2021. 10. 28. 자바스크립트 try-catch문을 여러번 쓰기 /* try-catch문에서 함수1 호출 -> 그 함수1이 함수2를 호출하는 구조라고 했을 때 아래와 같이 이중 try-catch 문을 구성할 필요는 없다. function test1 () { try { test2(); } catch(err) { return err; } } function test2 () { let x = null.split(','); } try { test1(); } catch(err) { console.log('catch error', err); } > console.log 출력값: 없음 아래의 예시처럼 구성해도 안쪽에서 일어난 error는 최외각의 catch문에 자동으로 걸리게 된다. function test1 () { test2(); } function test2 () { let.. 2021. 10. 28. 드롭다운 버튼과 리스트의 크기를 반응형으로 구현하기 드롭 다운 리스트를 구현 1. 상단부의 드롭 다운 선택버튼과 드롭 다운 리스트를 다른 컴포넌트로 분리 2. 상단부의 선택버튼은 반응형으로 크기에 따라 변하지만 하단부의 리스트는 반응형으로 크기가 변하지 않음 해결책 1 드롭 다운 리스트 CSS 수정 width: inherit; > 선택버튼과 리스트가 상속관계에 있지 않으면 사용 불가능 해결책 2 선택 버튼을 클릭하면 리스트의 Props에 자신의 width 값을 전달하고 리스트는 그 props의 width값으로 자신의 넓이를 설정 해결책 2-1 선택 버튼에 onClick={clickHandler} 부착 event.target 으로 클릭한 객체를 선택 > 이벤트가 발생한 객체를 선택 event.currentTarget > 이벤트 핸들러가 부착된 객체를 선택 .. 2021. 10. 24. 자바스크립트 유용한 에러 검출 문법 try-catch 자바스크립트를 실행할 때 에러가 발생하면 스크립트는 ‘죽고’(즉시 중단되고), 콘솔에 에러가 출력됩니다. 그러나 try-catch 문법을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 ‘잡아서(catch)’ 더 합당한 무언가를 할 수 있게 됩니다. try-catch 문법의 기본 구조는 다음과 같습니다. try { // 실행할 코드... } catch (err) { // 에러가 발생하면 실행할 코드 } try-catch 문법의 동작 알고리즘은 다음과 같습니다 1. 먼저, try {...} 안의 코드가 실행됩니다. 2. 만약 에러가 없다면, try 안의 마지막 줄까지 실행되고, catch 블록은 실행되지 않습니다. 3. 만약 에러가 있다면, try 안 코드의 실행이 중단되고(에러가 발생한 이후의 코드들은 실.. 2021. 8. 6. 자바스크립트 클래스(Class) 문법 constructor() 메소드 사용법 super() 메소드 사용법 /* 자바스크립트 클래스(Class) 문법 "constructor()" 메소드 사용법 "super()" 메소드 사용법 */ class Human { constructor(firstname, lastname, age) { this.name = firstname + lastname; this.age = age; this.gender = "male"; this.job = "student"; } getValue() { return {name: this.name, age: this.age, gender: this.gender, job: this.job}; } } let test1 = new Human('coding', 'kim', 19); console.log(test1.getValue()); // output .. 2021. 7. 19. 이전 1 다음