◎ JavaScript/JavaScript🦎
[JS] 브라우저 URL에서 매개변수 값 추출하기 [JavaScript의 URLSearchParams 활용]
- 브라우저 URL에서 매개변수 값 추출하기 웹 애플리케이션을 개발하다보면 종종 현재 페이지 URL에서 특정 매개변수 값을 추출해야 할 때가 있다. 이를 위해서는 JavaScript를 사용하여 URL을 파싱하고 필요한 정보를 추출해야 한다. 이번 글에서는 JS의 URLSearchParams 객체를 활용하여 브라우저 URL에서 매개변수 값을 추출해 볼 것이다. 이 객체를 사용하면 URL의 쿼리 문자열을 쉽게 파싱하여 매개변수 값을 가져올 수 있다. 아래는 getValueFromPreviousPage 함수를 통해 이전 페이지에서 특정 매개변수 값을 가져오는 예제이다. 이 함수는 페이지가 로드될 때 실행되어 이전 페이지에서 전달된 매개변수 값을 추출하고, 해당 값이 존재하면 추가적인 작업을 수행한다. // 이..
[JS] 정규표현식으로 URL 검증하기 [간단한 형태의 URL을 체크하는 정규표현식 만들기]
- 정규표현식으로 URL 검증하기 URL을 체크하기 위한 정규표현식은 다양한 형식의 URL을 모두 고려하여야 한다. 다음은 간단한 형태의 URL을 체크하는 정규표현식이다. const urlRegex = /^(http|https):\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/; 이 정규표현식은 다음과 같은 URL 형식을 허용한다. http:// 또는 https://로 시작하는 URL 도메인 이름 (예: example.com) 옵션: 경로, 쿼리 문자열, fragment 등 - 정규표현식에 대한 설명 1) ^(http|https) URL은 "http://" 또는 "https://"로 시작해야 한다. 이 부분은 "http" 또는 "https" 문자열을 나타내며, "|"를 사용하여 둘 중 하나를 ..
[JS] HTML에서 엔터 키 입력 시 특정 함수 실행하기 [onkeyup 이벤트 핸들러를 사용하여 함수 실행하기]
- HTML에서 엔터 키 입력 시 특정 함수 실행하기HTML에서 키보드 이벤트를 처리하고자 할 때, 일반적으로 JavaScript를 사용하여 이벤트를 처리하며 onkeyup 이벤트 핸들러를 사용하여 엔터 키가 눌렸을 때 동작하도록 할 수 있다.아래는 해당 기능을 구현한 예시다. - 테스트 코드 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스
[JS] 긴 문자열을 6자리 해시로 변환하기 [간단한 해싱 알고리즘 만들기]
- 긴 문자열을 6자리 해시로 변환하기 JavaScript에서 긴 문자열을 6자리 해시로 변환하는 방법 중 하나는 SHA-256 등의 안전한 해시 알고리즘을 사용하고 그 결과를 base64 또는 다른 방법으로 인코딩하는 것이다. 하지만 SHA-256은 256비트의 해시 값을 생성하기 때문에 6자리 해시를 얻기 위해서는 이를 잘라야 하고, 이는 보안에 취약할 수 있다. 이번 글에서는 CRC32라는 테이블을 만들어 긴 문자열을 6자리 해시로 줄여볼 것이다. 그러나 이는 충돌 가능성이 있으며 보안적으로 안전하진 않아 간단한 문자열 체크섬 또는 일부 문자열 검증 용도로 사용하면 좋다. // CRC32 테이블 생성 const crcTable = new Uint32Array(256); for (let i = 0; ..
[JS] 자바스크립트로 복사하기 버튼 만들기 [클립보드에 텍스트 복사하는 이벤트 생성]
- 자바스크립트로 복사하기 버튼 만들기 아래 코드는 버튼을 클릭하면 입력된 텍스트를 클립보드에 복사하는 예제이다. 이 코드를 사용하면 'textToCopy'라는 ID를 가진 요소 안에 있는 텍스트를 복사한다. 클립보드에 복사된 후에는 경고 창으로 "Text copied to clipboard"와 함께 복사된 텍스트가 표시된다. - index.html Copy Text - copyButton.js // 버튼 요소 가져오기 const copyButton = document.getElementById('copyButton'); // 버튼에 클릭 이벤트 리스너 추가 copyButton.addEventListener('click', function() { // 복사할 텍스트를 가져오기 const textToCop..