전체 글787

• 

  [JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법 OnClick 이벤트에서 DOM 요소 제거하는 방법 DOM 요소를 클릭했을 때, 해당 요소를 제거하려면 다음 순서대로 코드를 작성합니다. 1. DOM 요소를 가져옵니다. 2. click 이벤트 리스너를 추가합니다. 3. 이벤트 핸들러에서 가져온 요소에 대한 remove() 메서드를 호출합니다. 예를 들어, id 속성이 parent인 요소를 클릭했을 때, 요소를 제거하는 코드는 다음과 같습니다. const parentDiv = document.getElementById('parent'); parentDiv.addEventListener('click', () => { parentDiv.remove(); }); getElementById() 메서드를 사용하여 id 속성이 parent인 요소를 가져온 다음 cl.. JavaScript/DOM 2022. 11. 11.

• 

  [JavaScript]HTMLCollection과 NodeList 차이점 HTMLCollection과 NodeList HTMLCollection과 NodeList의 주요 차이점은 HTMLCollection은 동적이고 NodeList는 정적이라는 것입니다. 즉, DOM에 새로운 요소(Element)가 추가되면 HTMLCollection은 새로운 요소를 가져오지만, NodeList는 가져오지 못합니다. HTMLCollection 다음 두 메서드는 HTMLCollection 객체를 반환합니다. - getElementByTagName() - getElementByClassName() NodeList 다음 두 메서드는 NodeList 객체를 반환합니다. - getElementByName() - querySelectorAll() 차이점 1. 텍스트 노트 포함 여부 다음은 간단한 HTML.. JavaScript/DOM 2022. 11. 10.

• 

  [JavaScript]태그의 이름으로 요소(Element) 가져오는 방법 태그의 이름으로 요소(Element) 가져오는 방법 JavaScript에서 태그의 이름으로 요소를 가져와야 하는 경우가 있을 수 있습니다. 예를 들어, 다음 html 문서에서 태그에 해당하는 요소만 가져와야 하는 상황이 발생할 수 있습니다. JavaScript React Vue div tag1 div tag2 이번 포스팅은 JavaScript에서 getElementsByTagName() 및 querySelectorAll() 메서드를 사용하여 태그 이름으로 하나 이상의 HTML 요소를 가져오는 방법을 소개합니다. getElementsByTagName() 메서드 getElementsByTagName() 메서드는 태그 이름에 해당하는 모든 요소를 가져옵니다. 다음 HTML 예제의 body에는 3개의 p 요소와.. JavaScript/DOM 2022. 11. 10.

• 

  [JavaScript]함수로 클래스 만드는 방법 클래스 기반의 언어와 프로토타입 기반의 언어 ES6부터 JavaScript에서 class 키워드를 사용하여 클래스를 정의할 수 있지만, C++, C#, Java와 같은 클래스 기반의 언어에서 사용하는 클래스와 100% 동일하게 동작하지 않습니다. 따라서, JavaScript에서 class 키워드를 사용하여 클래스를 정의하는 문법을 이해하기 전에 클래스 기반의 언어와 프로토타입 기반의 언어에 대해 간단하게 구분할 수 있어야 하고 class 키워드가 도입되기 전에 JavaScript에서 클래스를 어떻게 정의했는지 알아야 할 필요가 있습니다. 클래스 기반의 언어는 클래스로 객체의 기본적인 형태와 기능(필드와 메서드)을 정의하고 new 키워드와 생성자로 객체를 생성할 수 있습니다. 다음 예제는 클래스 기반의 언.. JavaScript/함수 2022. 11. 9.

• 

  [JavaScript]Target과 CurrentTarget 차이점 Target과 CurrentTarget 차이점 Target과 CurrentTarget은 DOM Event Interface의 프로퍼티라는 공통점을 가지고 있지만, 이 두 개의 프로퍼티는 결코 동일한 프로퍼티가 아닙니다. 이번 포스팅은 DOM Event Interface의 프로퍼티인 Target과 CurrentTarget 차이점을 소개합니다. 이벤트 이 둘의 차이점을 설명하기 전에 JavaScript에서 이벤트가 무엇이며 어떻게 동작하는지 이해해야 합니다. 웹 사이트를 사용하는 사용자가 HTML 요소에 대한 사건을 일으키는 행위를 이벤트(Event)라고 말합니다. HTML 요소에 대한 사건은 다음과 같은 행위입니다. - 로그인 버튼을 클릭 - 로그인하기 위해 아이디를 입력 - 검색창에 검색 키워드를 입력 .. JavaScript/Tip 2022. 11. 8.

• 

  [JavaScript]div 태그에서 텍스트 입력하는 방법 div 태그에서 텍스트 입력하는 방법 이번 포스팅은 input, textarea 태그를 사용하지 않고 div 태그에서 텍스트를 입력할 수 있는 방법을 소개합니다. contenteditable 속성 div 태그에 텍스트를 입력할 수 있는 방법은 contenteditable 속성을 true로 설정하는 것입니다. div 태그의 contenteditable 속성을 true로 설정하고 텍스트를 입력하면 다음 스크린샷처럼 파란색 테두리가 활성화되고 텍스트를 입력할 수 있습니다. 파란색 테두리를 비활성화하려면 div 태그의 스타일에 outline을 none으로 설정합니다. 텍스트 가져오는 방법 div 태그에는 onChange 이벤트가 존재하지 않으므로 div 태그에 입력한 텍스트를 가져오려면 jQuery를 사용하거나.. JavaScript/Tip 2022. 11. 8.

• 

  [JavaScript]XMLHttpRequest의 readyState 이해하기 XMLHttpRequest의 readyState란? XMLHttpRequest의 readyState 프로퍼티는 XMLHttpRequest 객체의 상태를 보여줍니다. readyState 프로퍼티의 값이 변경될 때마다 readystatechange 이벤트가 실행되므로 해당 이벤트에서 readyState 프로퍼티의 값을 확인하는 것이 좋습니다. 값 상태 설명 0 UNSENT XMLHttpRequest 객체는 생성되었지만 open() 메서드가 호출되지 않았습니다. 1 OPENED open() 메서드가 호출되었습니다. 2 HEADERS_RECEIVED send() 메서드가 호출되었습니다. 3 LOADING 응답을 로드 중입니다. 4 DONE 요청 완료되었습니다. 이번 포스팅은 readyState가 변경되는 과정을.. JavaScript/JavaScript 문법 2022. 11. 7.

• 

  [JavaScript]XMLHttpRequest 사용 방법 XMLHttpRequest란? JavaScript에서 XMLHttpRequest 객체를 사용하여 서버에 동기 또는 비동기식 요청을 보낼 수 있으며, 요청에 대한 응답 정보를 웹 페이지에 로드할 수 있습니다. 따라서, 웹 페이지를 다시 로드하지 않아도 웹 페이지의 일부를 변경할 수 있습니다. XMLHttpRequest() 객체 사용 방법을 요약하면 다음과 같습니다. - XMLHttpRequest 객체를 생성합니다. - open() 메서드로 요청에 필요한 정보를 설정합니다. - send() 메서드로 서버에 요청을 보냅니다. - 응답에 대한 콜백 함수를 생성합니다. 이번 포스팅은 XMLHttpRequest 객체 사용 방법을 설명합니다. XMLHttpRequest 객체 생성 new 키워드를 사용하여 XMLHtt.. JavaScript/JavaScript 문법 2022. 11. 7.

• 

  [Java]자바 프로그램을 강제로 종료하는 System.exit() 메서드 System.exit() 메서드 System.exit() 메서드는 System 클래스에 존재하는 void 타입의 정적(static) 메서드입니다. 아래 코드는 System 클래스에 존재하는 exit() 메서드 구문입니다. public static void exit(int status) { Runtime.getRuntime().exit(status); } exit() 메서드는 int 타입의 매개 변수를 전달받으며, 실행 중인 자바 프로그램을 강제로 종료합니다. 매개 변수는 상태 코드를 의미하며 0이 아닌 상태 코드는 비정상적인 종료로 간주됩니다. System.exit() 메서드를 호출하면 JVM이 먼저 종료되고 프로그램이 종료됩니다. JVM이 먼저 종료되므로 System.exit() 메서드 이후의 코드는 .. Java 2022. 11. 3.

• 

  [Java]람다 표현식에서 Unchecked Exception 처리 람다 표현식 Unchecked Exception 처리 Java 8에 도입된 람다 표현식(Lambda expression)은 이름이 없는 익명 함수로 메서드의 동작을 간결하게 작성할 수 있습니다. 그러나, JDK에서 제공하는 함수형 인터페이스는 예외(Exception)를 다루는 경우가 거의 없습니다. 따라서, 개발자가 람다 표현식에서 발생하는 예외를 방지하기 위해 예외를 처리하는 코드를 구현해야 합니다. 람다 표현식 예외를 처리하는 코드를 구현하면 한 가지 문제가 발생하는데, 람다 표현식 사용 목적과 다르게 간결했던 코드가 장황하고 복잡해집니다. 이번 포스팅은 람다 표현식에서 예외가 발생하는 경우와 예외를 올바르게 처리하는 방법을 소개합니다. 문제가 발생하는 코드 먼저 람다 표현식에서 예외가 발생하는 경우.. Java/함수형 인터페이스 2022. 11. 3.

• 

  [티스토리]일일 방문수 7,000명 달성 일일 방문수 7,000명 달성 2022년 11월 1일 화요일 일일 방문수 7,101명을 달성하였습니다. "이번 연도 일일 방문수 6,000명만 유지했으면..."이라고 생각했는데 6,000명 달성한 지 일주일 만에 7,000명을 달성했네요. 제 블로그를 방문해주신 많은 분들에게 감사의 인사를 드립니다. 2022년 3월 29일(2,000명 돌파) - 일일 방문수 2,091명 방문 2022년 5월 3일(3,000명 돌파) - 일일 방문수 3,166명 방문 2022년 7월 26일(4,000명 돌파) - 일일 방문수 4,036명 방문 2022년 9월 20일(5,000명 돌파) - 일일 방문수 5,340명 방문 2022년 10월 25일(6,000명 돌파) - 일일 방문수 6,083명 방문 앞으로 계획 티스토리 복구.. 티스토리/블로그 결산 2022. 11. 2.

• 

  [Java]UUID를 문자열로 변환하는 방법 UUID UUID(Universally Unique Identifier)는 고유한 데이터 또는 리소스를 식별합니다. 데이터 또는 리소스는 객체, 파일, 문서, 이미지 등이 될 수 있으며, UUID가 광범위하게 사용되는 경우 전역 고유 식별자인 GUID라고 부르기도 합니다. UUID는 32개의 16진수 기반의 문자와 4개의 하이픈(-)으로 구성된 총 36개의 문자입니다. 36개의 문자는 8-4-4-4-12와 같이 표현되며 UUID의 크기는 128 Bit입니다. java.util 패키지에 존재하는 UUID 클래스는 Java 7부터 사용할 수 있으며 UUID 생성 방법은 다음과 같습니다. public static void main(String args[]) { UUID uuid = UUID.randomUUID.. Java 2022. 11. 2.