자바스크립트 (96) 썸네일형 리스트형 코드저장(인터섹션 옵저버 api) HTML 삽입 미리보기할 수 없는 소스 [JS] 드래그 앤 드롭으로 이미지 파일 첨부 HTML 삽입 미리보기할 수 없는 소스 어려운 로직은 아니므로 주석으로 설명 다는 것을 대체함 클래스 추가 및 삭제 부분은 css 적용을 동적으로 하기 위함으로 드래그 앤 드롭과는 연관성 없음. const img = document.createElement("img"); const dropArea = document.getElementById("dropArea"); const fileInput = document.getElementById("fileInput"); // 드래그 영역에 파일을 오버하면 콜백함수 호출 dropArea.addEventListener("dragover", (e) => { // 드래그 기본 동작으로 이미지 파일을 브라우저에 드롭하면 //새로운 브라우저 창이 열리면서 파일이 열린다... [js] mosemove 와 event.offset 을 이용한 3d 입체로 움직이는 사각형만들기 (코드 저장용) 보호되어 있는 글입니다. [JS] input file 에 등록된 이미지를 임시로 읽어오는 방법 주어진 이미지 파일을 선택하면 해당 이미지를 읽어서 미리보기로 출력 이 기능을 잘 활용하면, 유저가 첨부한 이미지 파일을 서버로 전송하기 전에 미리보기로 형태로 제공해줄 수 있다고 합니다. react 나 vue 같은 라이브러리 및 프레임워크에서 사용하려면 별도의 패키지를 사용하거나 아니면 상황에 맞게 가공해야 하겠지만, 이런 방식이 있다는 것에 의미를 두어 봅니다. const wImage = document.querySelector('.image_input') wImage.addEventListener("change", (e) => { const reader = new FileReader(); reader.readAsDataURL(e.target.files[0]); reader.addEventListen.. [java script] Private Class Fields [ ES2019 ~] Private Class Fields 2015년 ES6 에서 처음 등장한 클래스 내에서 필드선언 시 해당 필드 변수의 좌측에 #을 붙임으로써 외부에서 해당 변수에 대한 접근을 차단하는 문법이 ES2019 에 등장했습니다. 즉, '#변수명' 으로 선언된 변수는 외부에서 직접적으로 접근할 수 없고, 해당 변수를 간접적으로 참조하여 접근할 수 있게 가능함으로써 내부 구현을 숨김 으로써 정보은닉 및 보호를 효과적으로 달성토록 도와줍니다. class ExampleClass{ publicField = 10; // Public Class Field 입니다(내/외부 자유롭게 접근 가능). #privaField = 5; // private Class Field 입니다(내부에서만 접근 가능. getPrivateField(.. [java script] Logical Assignment Operators [ ES11 (ECMAScript 2020~) ] : 논리할당연산자 &&= 연산자 (And-Assign) 좌측과 우측 변수가 모두 true 라면 좌측 변수에 우측 변수에 할당된 값을 할당합니다. let a = 5; let b = 10; // a 와 b 변수 모두가 true 라면 b 변수의 값을 a 에 할당합니다. a &&= b; // a는 b와 같은 값인 10이 됩니다. ||= 연산자 (Or-Assign) 좌측 변수가 false 인 경우에만 우측 변수의 값을 좌측 변수에 할당합니다. let a = false; let b = 10; //좌측변수 a 가 false 이므로 b의 값을 a에 할당합니다. a ||= b; // a는 b와 같은 값인 10이 됩니다. ??= 연산자 (Nullish-Assign) 좌측 변수가 null 또는 undefined 인 경우에만 좌측 변수에 우측.. [JS] 카멜표기법으로 표기된 문자열에 공백을 추가하는 2가지 방법 포스트 목적 문자열 사이에 공백을 추가해야 하는 상황이 발생하였는데, 이에 방법을 찾아보고 이를 나중에 다시 확인하기 쉽도록 정리한 포스트입니다. 문자열에 공백을 추가한다는 것은.. 예를 들어, 카멜표기법으로 표기된 문자열에 공백을 추가하여 출력해야 하는 상황에서 활용할 수 있습니다. 즉, 다음과 같이 카멜표기법으로 할당되어 있는 문자열이 있다면, const string = "RedColor" 아래와 같이 대문자 사이에 공백을 추가하여 출력할 필요가 있는 상황에서 사용할 수 있습니다. Red Color 방법1) 정규표현식 사용 첫 번째 방법은 정규표현식을 사용하는 것입니다. 정규표현식은 적은 코드수로 효율적인 문자열 처리가 가능하기 때문에 긴 문자열을 처리해야 하는 상황에서 일반적인 문자열 메서드를 사용.. [javascript] 간단한 무한 스크롤 단순히 무한 스크롤의 원리를 이해하고 활용하기 위한 용도로 작성해 보았던 무한 스크롤 인터렉티브 입니다. 시연 HTML 삽입 미리보기할 수 없는 소스 기존 JS 코드 const container = document.getElementById("container"); //추가되는 div 박스를 구분하기 위해 매기는 번호 let number = 6; // div 태그를 추가하는 함수 function addBoxFunc() { // scrollY 는 총 높이를 지속적으로 추적하는 용도이고, // Height 는 정적인 총 높이를 구하기 위한 변수입니다. const scrollY = window.scrollY + window.innerHeight; const Height = document.documentEle.. 이전 1 2 3 4 5 6 ··· 12 다음