본문 바로가기

Develop/HTML & JavaScript & CSS

(52)
[JS 오류 해결] JavaScript 라이브러리 로드 실패, try/catch로 우아하게 대응하기! 요약외부 JavaScript 라이브러리 로드 실패 시 발생하는 스크립트 오류를 try/catch 문과 조건부 체크를 활용하여 안정적으로 처리하고, 서비스의 우아한 성능 저하(Graceful Degradation)를 구현하는 방법을 알아봅니다.본문웹 애플리케이션 개발 시, 외부 JavaScript 라이브러리(CDN 또는 자체 호스팅)를 사용하는 것은 흔한 일입니다. 하지만 네트워크 문제, 서버 오류, 경로 오타 등으로 인해 라이브러리 로드에 실패할 경우, 해당 라이브러리에 의존하는 스크립트에서 ReferenceError와 같은 치명적인 오류가 발생하여 전체 서비스가 멈추는 불상사가 생길 수 있습니다.이러한 문제를 방지하고, 특정 기능이 작동하지 않더라도 서비스의 핵심 기능은 유지되도록 하는 우아한 성능 저..
JavaScript logMessage 등록
JavaScript 배열 메서드 정리 JavaScript에서 배열은 데이터를 저장하고 처리하는 데 매우 중요한 역할을 합니다. 다양한 배열 메서드를 활용하여 데이터를 추가, 제거, 검색, 정렬할 수 있습니다. 이 글에서는 JavaScript의 주요 배열 메서드를 정리하였습니다.배열 조작 메서드1. push(element1, ..., elementN): 배열 끝에 요소를 추가let arr = [1, 2, 3];arr.push(4); // [1, 2, 3, 4]2. pop(): 배열 끝에서 요소를 제거let arr = [1, 2, 3];arr.pop(); // 3, 배열은 [1, 2]3. unshift(element1, ..., elementN): 배열의 시작 부분에 요소 추가let arr = [1, 2, 3];arr.unshift(0); //..
JavaScript 문자열 메서드 정리 JavaScript에서 문자열 처리를 위한 다양한 메서드를 활용하여 문자열을 검색, 변환, 조작할 수 있습니다. 이 글에서는 주요 문자열 메서드를 간단한 예제와 함께 정리해 보겠습니다.문자열 검색 메서드1. charAt(index): 지정된 인덱스의 문자를 반환합니다.let str = "Hello";console.log(str.charAt(1)); // "e" 2. charCodeAt(index): 지정된 인덱스의 UTF-16 코드(숫자)를 반환합니다.console.log("A".charCodeAt(0)); // 65 3. indexOf(searchValue, fromIndex?): 특정 문자열을 처음 찾은 위치의 인덱스를 반환합니다.let str = "JavaScript";console.log(str...
VSCode Extensions VSCode Extensions최종 업데이트 2022년 10월 15일해당 확장들은 제가 사용하는 확장 중 일부입니다.모든 확장을 반드시 설치하실 필요는 없습니다.단, Live Server 는 반드시 설치하세요.Extensions (확장) 설치하는 방법VSCode 설치 (https://code.visualstudio.com/download)VSCode 왼쪽 메뉴 아이콘 중 5번째 Extenstions (확장) 아이콘 선택원하는 확장의 이름 검색 후 InstallExtensions구분 이름 설명선택Korean Language Pack에디터 한국어 적용필수Live Server 선택Auto Rename TagHTML 태그 자동 수정선택Color Highlight컬러 코드 강조선택CSS PeekCSS ID와 Cl..
JavaScript ES6 공부하기(ES5 Base) feat.ChatGPT ChatGPT에게 물어 보았습니다.Q. javascript es5만 알고 있는데 es6를 쉽게 공부할 수 있는 방법이 있으면 알려 줘A. JavaScript ES5를 이미 알고 있다면 ES6를 배우는 것은 상대적으로 수월할 거예요.ES6는 기존 문법을 확장하면서 더 간결하고 효율적인 방법을 제공합니다.다음과 같은 단계를 통해 ES6를 쉽게 공부할 수 있습니다:1. ES6 주요 개념부터 학습하기ES6는 큰 변화가 있지만, 몇 가지 핵심 문법만 이해하면 금방 적응할 수 있습니다. 주요 ES6 문법은 다음과 같습니다:(1) let과 constvar 대신 let과 const를 사용해 변수와 상수를 선언할 수 있어요.let x = 10; // 값 변경 가능const y = 20; // 값 변경 불가능(2) 화살..
(참고) 사용자 입력 텍스트를 바이트(byte) 길이로 제한 https://hellcoding.tistory.com/entry/textarea-%EA%B8%80%EC%9E%90%EC%88%98-%EC%A0%9C%ED%95%9C-%EB%B0%94%EC%9D%B4%ED%8A%B8Byte-%EC%A0%9C%ED%95%9C textarea 글자수 제한 / 바이트(Byte) 제한 textarea 글자수 제한 / 바이트(Byte) 제한 클라이언트로부터 입력받고자 하는 텍스트가 긴 문자열의 경우, textarea태그를 설정하여 받게됩니다. 이 때, 입력받을 수 있는 최대 바이트수를 정해두고 hellcoding.tistory.com https://meetup.nhncloud.com/posts/319 사용자 입력 텍스트를 바이트(byte) 길이로 제한하는 Vue 컴포넌트 만들기 ..
[URL] 파라미터 추가 삭제 url parameters add/remove 출처 - https://motolies.tistory.com/681 function urlRemoveParam(url, key) { var rtn = url.split("?")[0], param, params_arr = [], queryString = (url.indexOf("?") !== -1) ? url.split("?")[1] : ""; if (queryString !== "") { params_arr = queryString.split("&"); for (var i = params_arr.length - 1; i >= 0; i -= 1) { param = params_arr[i].split("=")[0]; if (param === key) { params_arr.splice(i, 1); } } i..