자바스크립트 이미지 preload 구현하기 이미지 변경 시 깜빡임 제거

2024-04-03 1. 방법 아래와 같이 코드를 구성하면 최초 페이지 접속 후 이미지가 지역변수에 담기게 되어 이후에 이미지 경로를 변경해도 깜빡임 현상을 제거할 수 있다. let images = []; //이미지 객체를 담을 변수 let imagesUrs = []; //동적이미지 url 정보르 담을 변수 실제 이미지 경로를 넣어주면 된다. document.addEventListener('DOMContentLoaded', function () { function imgPreload() { for(let i = 0; i < imageUrls.length; i++) { images[i] = new Image(); images[i].src = imageUrls[i]; } } imgPreload() } 메인 ..

• format_list_bulleted WEB/JavaScript
• · 2024. 4. 3.
• textsms

자바스크립트 File to Base64 | Base64 to File 구현하기

2024-03-25 1. 방법 File to Base64 전달받은 파일 정보를 FileReader로 읽어 들여 base64 문자열을 만드는 코드이다. //실제 파일을 base64로 변환하는 코드 function fileToBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = () => { reader.abort(); reject(new Error('파일을 읽는 도중 오류가 발생했습니다.')); }; reader.onload = () => { resolve(reader.result); }; reader.readAsDataURL(file); }); } // 사용 예제 as..

• format_list_bulleted WEB/JavaScript
• · 2024. 3. 25.
• textsms

자바스크립트 Object 크기 확인 하는 방법

2024-03-13 1. 방법 Object.keys(obj).length 통해 전체 키를 추출해서 사이즈를 확인하는 방법이다. const obj = { key1: 'value1', key2: 'value2', key3: 'value3' }; const keyCount = Object.keys(obj).length; console.log(keyCount); // 객체 obj에는 3개의 키-값 쌍이 있음 메인 이미지 출처 : 사진: Unsplash의Sies Kranen

• format_list_bulleted WEB/JavaScript
• · 2024. 3. 13.
• textsms

[JavaScript] textArea 자동 크기 조절 방법 (resize)

2023-09-22 1. 방법 숨겨진 textarea의 auto 설정으로 새롭게 입력받은 input 값에 따라 높이를 계산하고 이후 실제 textare에 적용한다. 실제 textarea에 바로 적용하지 않는 이유는 바로적용 시 auto 속성 값으로 인해 웹창에 스크롤도 같이 이동하기 때문이다.

• format_list_bulleted WEB/JavaScript
• · 2023. 9. 22.
• textsms

[JavaScript] contenteditable 붙여넣기 텍스트만 넣기

2023-09-14 1. 방법 contenteditable 을 이용한 태그에 붙여넣기를 하면 일반 텍스트가 아닌 html 형태로 들어가게 되는데 이를 일반 텍스트가 들어갈 수 있게 변경하는 방법을 알아보자. 위 코드는 해당 요소에 붙여 넣기 이벤트를 감지하고, 붙여 넣은 텍스트를 HTML 태그 없이 해당 요소에 삽입하며, 텍스트를 붙여 넣을 때 HTML 태그 속성을 포함하지 않도록 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의Ori Song

• format_list_bulleted WEB/JavaScript
• · 2023. 9. 14.
• textsms

[JavaScript] 선택된 라디오 버튼만 checked로만들기

2023-09-07 1. 방법 prop 를 사용해 우선 해당 클래스의 버튼들을 checked false로 만든 이후 선택된 라디오 버튼만 checked 로 만들면 된다. Option 1 Option 2 Option 3 2. JQuery 가져오는 방법 https://seeminglyjs.tistory.com/525 [JQuery] 선택된 라디오 버튼만 checked 되게 설정하기 2023-09-07 1. 방법 prop 를 사용해 우선 해당 클래스의 버튼들을 checked false로 만든 이후 선택된 라디오 버튼만 checked 로 만들면 된다. Option 1 Option 2 Option 3 메인 이미지 출처 : 사진: Unsplash의David Clode seeminglyjs.tistory.com 메인..

• format_list_bulleted WEB/JavaScript
• · 2023. 9. 7.
• textsms