WEB/JavaScript
-
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() } 메인 ..
자바스크립트 이미지 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() } 메인 ..
2024.04.03 -
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..
자바스크립트 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..
2024.03.25 -
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
자바스크립트 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
2024.03.13 -
2023-09-22 1. 방법 숨겨진 textarea의 auto 설정으로 새롭게 입력받은 input 값에 따라 높이를 계산하고 이후 실제 textare에 적용한다. 실제 textarea에 바로 적용하지 않는 이유는 바로적용 시 auto 속성 값으로 인해 웹창에 스크롤도 같이 이동하기 때문이다.
[JavaScript] textArea 자동 크기 조절 방법 (resize)2023-09-22 1. 방법 숨겨진 textarea의 auto 설정으로 새롭게 입력받은 input 값에 따라 높이를 계산하고 이후 실제 textare에 적용한다. 실제 textarea에 바로 적용하지 않는 이유는 바로적용 시 auto 속성 값으로 인해 웹창에 스크롤도 같이 이동하기 때문이다.
2023.09.22 -
2023-09-14 1. 방법 contenteditable 을 이용한 태그에 붙여넣기를 하면 일반 텍스트가 아닌 html 형태로 들어가게 되는데 이를 일반 텍스트가 들어갈 수 있게 변경하는 방법을 알아보자. 위 코드는 해당 요소에 붙여 넣기 이벤트를 감지하고, 붙여 넣은 텍스트를 HTML 태그 없이 해당 요소에 삽입하며, 텍스트를 붙여 넣을 때 HTML 태그 속성을 포함하지 않도록 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의Ori Song
[JavaScript] contenteditable 붙여넣기 텍스트만 넣기2023-09-14 1. 방법 contenteditable 을 이용한 태그에 붙여넣기를 하면 일반 텍스트가 아닌 html 형태로 들어가게 되는데 이를 일반 텍스트가 들어갈 수 있게 변경하는 방법을 알아보자. 위 코드는 해당 요소에 붙여 넣기 이벤트를 감지하고, 붙여 넣은 텍스트를 HTML 태그 없이 해당 요소에 삽입하며, 텍스트를 붙여 넣을 때 HTML 태그 속성을 포함하지 않도록 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의Ori Song
2023.09.14 -
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 메인..
[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 메인..
2023.09.07 -
2023-07-29 1. 정의 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다. 이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉..
[JavaScript] 즉시 실행 함수 표현(IIFE) 알아보기.2023-07-29 1. 정의 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다. 이는 Self-Executing Anonymous Function 으로 알려진 디자인 패턴이고 크게 두 부분으로 구성된다. 첫 번째는 괄호((), Grouping Operator)로 둘러싸인 익명함수(Anonymous Function)이다. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지할 수 있을 뿐 아니라 IIFE 내부안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 즉..
2023.07.29 -
2021-06-29 1. 방법 정해진 interval 마다 분기 처리를 하면 로딩효과를 낼 수 있다. // 동적으로 내용 변경하는 함수 function updateDynamicContent() { let testSpan = $('.testSpan'); let currentContent = testSpan.text(); if (currentContent === '.') { testSpan.text('. .'); } else if (currentContent === '. .') { testSpan.text('. . .'); } else { testSpan.text('.'); } } // 0.3초마다 내용 변경 setInterval(updateDynamicContent, 400); 메인 이미지 출처 : 사진:..
[JavaScript] 자바스크립트를 . . . 로딩 함수 만들기2021-06-29 1. 방법 정해진 interval 마다 분기 처리를 하면 로딩효과를 낼 수 있다. // 동적으로 내용 변경하는 함수 function updateDynamicContent() { let testSpan = $('.testSpan'); let currentContent = testSpan.text(); if (currentContent === '.') { testSpan.text('. .'); } else if (currentContent === '. .') { testSpan.text('. . .'); } else { testSpan.text('.'); } } // 0.3초마다 내용 변경 setInterval(updateDynamicContent, 400); 메인 이미지 출처 : 사진:..
2023.06.29 -
2023-06-28 1. 방법 자바스크립트를 통해 특정 태그의 disabled를 조회하고 이를 추가하거나 제거하는 방법을 공유한다. // 요소의 disable 속성을 추가하는 함수 function addDisableAttribute(elementSelector) { let element = document.getElementById(elementSelector); if (element) { element.disabled = true; } } // 요소의 disable 속성을 제거하는 함수 function removeDisableAttribute(elementSelector) { let element = document.getElementById(elementSelector); if (element) { ..
[JavaScript] 자바스크립트 disabled 제어 방법(조회/추가/삭제)2023-06-28 1. 방법 자바스크립트를 통해 특정 태그의 disabled를 조회하고 이를 추가하거나 제거하는 방법을 공유한다. // 요소의 disable 속성을 추가하는 함수 function addDisableAttribute(elementSelector) { let element = document.getElementById(elementSelector); if (element) { element.disabled = true; } } // 요소의 disable 속성을 제거하는 함수 function removeDisableAttribute(elementSelector) { let element = document.getElementById(elementSelector); if (element) { ..
2023.06.28 -
2023-06-21 1. 방법 부모 창에서 자식 창 열기 자식 창을 열 때, 부모 창에서 변수를 설정하여 전달합니다. 예를 들어, child.html을 열 때 URL에 프래그먼트 값을 추가하여 전달할 수 있습니다. var fragmentValue = "전달할 값"; var childUrl = "child.html#" + fragmentValue; window.open(childUrl, "popup"); 자식 창에서 부모 창으로 데이터 전달 자식 창에서 window.opener를 사용하여 부모 창에 접근할 수 있습니다. var fragmentValue = window.location.hash.substring(1); // 프래그먼트 값 가져오기 window.opener.receiveData(fragment..
[JavaScript] 자식창의 정보를 부모창에 전달하는 방법2023-06-21 1. 방법 부모 창에서 자식 창 열기 자식 창을 열 때, 부모 창에서 변수를 설정하여 전달합니다. 예를 들어, child.html을 열 때 URL에 프래그먼트 값을 추가하여 전달할 수 있습니다. var fragmentValue = "전달할 값"; var childUrl = "child.html#" + fragmentValue; window.open(childUrl, "popup"); 자식 창에서 부모 창으로 데이터 전달 자식 창에서 window.opener를 사용하여 부모 창에 접근할 수 있습니다. var fragmentValue = window.location.hash.substring(1); // 프래그먼트 값 가져오기 window.opener.receiveData(fragment..
2023.06.21 -
2023-06-14 1. 방법 현재 URL 정보를 가져오는 방법은 window.location 객체를 사용하는 것입니다. window.location 객체는 현재 페이지의 URL과 관련된 정보를 제공합니다. 아래의 속성을 사용하여 다양한 정보를 얻을 수 있습니다: window.location.href: 전체 URL을 반환합니다. window.location.protocol: 프로토콜 (예: "http:", "https:")을 반환합니다. window.location.host: 호스트 이름과 포트를 반환합니다. window.location.hostname: 호스트 이름을 반환합니다. window.location.port: 포트 번호를 반환합니다. window.location.pathname: 경로 부분을 ..
[JavaScript] 현재 URL 정보를 가져오는 방법들2023-06-14 1. 방법 현재 URL 정보를 가져오는 방법은 window.location 객체를 사용하는 것입니다. window.location 객체는 현재 페이지의 URL과 관련된 정보를 제공합니다. 아래의 속성을 사용하여 다양한 정보를 얻을 수 있습니다: window.location.href: 전체 URL을 반환합니다. window.location.protocol: 프로토콜 (예: "http:", "https:")을 반환합니다. window.location.host: 호스트 이름과 포트를 반환합니다. window.location.hostname: 호스트 이름을 반환합니다. window.location.port: 포트 번호를 반환합니다. window.location.pathname: 경로 부분을 ..
2023.06.14 -
2023-06-09 1. 방법 let textArray = []; function handleClick(event) { let clickedDiv = event.target; let textValue = clickedDiv.innerText; if (textArray.includes(textValue)) { // 이미 클릭된 div인 경우 textArray = textArray.filter(item => item !== textValue); // 배열에서 해당 텍스트 값 제거 clickedDiv.style.backgroundColor = ""; // 배경색 원래대로 복구 } else { // 처음 클릭하는 div인 경우 textArray.push(textValue); clickedDiv.style.bac..
[JavaScript] 태그(ex div) 클릭 시 텍스트 값 가져오는 방법2023-06-09 1. 방법 let textArray = []; function handleClick(event) { let clickedDiv = event.target; let textValue = clickedDiv.innerText; if (textArray.includes(textValue)) { // 이미 클릭된 div인 경우 textArray = textArray.filter(item => item !== textValue); // 배열에서 해당 텍스트 값 제거 clickedDiv.style.backgroundColor = ""; // 배경색 원래대로 복구 } else { // 처음 클릭하는 div인 경우 textArray.push(textValue); clickedDiv.style.bac..
2023.06.09 -
2022-11-25 0. 사용 라이브러리 https://clipboardjs.com/ clipboard.js A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped clipboardjs.com 우리가 사용할 라이브러리는 clipboard.js 이며 이를 cdn 으로 불러와서 클립보든 복사 기능을 구현할 예정이다. 1. 스크립트 코드 스크립트 코드이며, class 선택자에 따라 동작하게 만들었다. 2. html 코드 test 입니다. copy 여기서 data-clipboard-action 부분은 복사할지 자를지에 대한 선택이며, 자르기 옵션은 cut 을 적어주면 된다. data-clipboard-target..
[JavaScript] 자바 스크립트 클립보드 복사 구현하기2022-11-25 0. 사용 라이브러리 https://clipboardjs.com/ clipboard.js A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped clipboardjs.com 우리가 사용할 라이브러리는 clipboard.js 이며 이를 cdn 으로 불러와서 클립보든 복사 기능을 구현할 예정이다. 1. 스크립트 코드 스크립트 코드이며, class 선택자에 따라 동작하게 만들었다. 2. html 코드 test 입니다. copy 여기서 data-clipboard-action 부분은 복사할지 자를지에 대한 선택이며, 자르기 옵션은 cut 을 적어주면 된다. data-clipboard-target..
2022.11.25 -
2022-09-07 암호화된 사용자 정보를 파라미터로 넘기는 과정에서 + 기호가 포함되어 있으면, 해당 기호가 공백으로 치환되어 전달되는 경우가 있다 이를 해결하는 방법을 알아보자. 1. 원인 아래의 참고링크에서 확인해보면 + 는 쿼리 스트링에서 하나의 의미를 가지는 문자열이기 때문에 이러한 문제가 나타난다고 한다. 비슷한 문자열로는 &를 예로 들 수 있다. 그래서 +를 적절한 다른 문자열로 치환을 해줘야 한다고 한다. 2. 해결 방법 아래와 같이 + 기호가 들어간 문자열을 encodeURIComponent 메소드로 감싸서 파라미터를 전달해주면 + 기호의 생략 없이 전달이 되게 된다. var param = vartest+12314 var encodedURL = "http://example.com/test..
[JavaScript] 자바스크립트 파라미터 + 기호 제거되는 문제해결2022-09-07 암호화된 사용자 정보를 파라미터로 넘기는 과정에서 + 기호가 포함되어 있으면, 해당 기호가 공백으로 치환되어 전달되는 경우가 있다 이를 해결하는 방법을 알아보자. 1. 원인 아래의 참고링크에서 확인해보면 + 는 쿼리 스트링에서 하나의 의미를 가지는 문자열이기 때문에 이러한 문제가 나타난다고 한다. 비슷한 문자열로는 &를 예로 들 수 있다. 그래서 +를 적절한 다른 문자열로 치환을 해줘야 한다고 한다. 2. 해결 방법 아래와 같이 + 기호가 들어간 문자열을 encodeURIComponent 메소드로 감싸서 파라미터를 전달해주면 + 기호의 생략 없이 전달이 되게 된다. var param = vartest+12314 var encodedURL = "http://example.com/test..
2022.09.07 -
2022-07-06 1. 방법 팝업창 호출을 a 태그에서 진행 시 발생할 수 있는 이슈사항으로 해결 방법은 아래와 같다. 함수 호출 뒤에 return false; 를 선언해 주면 기존 부모 창에 위치 변함없이 팝업창을 띄울 수 있다. 메인 이미지 출처 : Photo by Jason Hudson on Unsplash
[JavaScript] 자바 스크립트 팝업창 띄울때 기존 부모창 스크롤 상단 이동 해결방법2022-07-06 1. 방법 팝업창 호출을 a 태그에서 진행 시 발생할 수 있는 이슈사항으로 해결 방법은 아래와 같다. 함수 호출 뒤에 return false; 를 선언해 주면 기존 부모 창에 위치 변함없이 팝업창을 띄울 수 있다. 메인 이미지 출처 : Photo by Jason Hudson on Unsplash
2022.07.06 -
2021-12-07 View에 존재하는 기존의 데이터를 복사해서 사용자에게 전달해야 하는 경우가 있다. 이러한 기능을 손쉽게 처리하는 방법을 알아보자. - 예제 사용할 자바스크립트 코드는 document.execCommand("copy");라는 명령어이다. 이는 view에서 현재 select()된 text를 클립보드에 복사해주는 기능을 수행한다. 아래의 예제 자바스크립트 함수 코드를 보자. //클릭했을 경우 클립보드에 복사된다. function clickCopy(value){ var tempInput = document.createElement("input"); tempInput.style = "position: absolute; left: -1000px; top: -1000px"; //input 창 생..
[JavaScript] 자바스크립트 클릭시 복사 및 input value 값 복사하는법2021-12-07 View에 존재하는 기존의 데이터를 복사해서 사용자에게 전달해야 하는 경우가 있다. 이러한 기능을 손쉽게 처리하는 방법을 알아보자. - 예제 사용할 자바스크립트 코드는 document.execCommand("copy");라는 명령어이다. 이는 view에서 현재 select()된 text를 클립보드에 복사해주는 기능을 수행한다. 아래의 예제 자바스크립트 함수 코드를 보자. //클릭했을 경우 클립보드에 복사된다. function clickCopy(value){ var tempInput = document.createElement("input"); tempInput.style = "position: absolute; left: -1000px; top: -1000px"; //input 창 생..
2021.12.07 -
2021-11-20 팝업을 띄운 부모 창을 새로고침해야 하는 경우가 종종 있는데, 이럴 때 코드 한 줄로 부모 창을 새로고침 하는 방법이 있다. - 예제 function parentRefresh(){ opener.location.reload(); } 바로 위의 코드이다. 메소드명도 굉장히 명시적으로 표현되고 있으며 말 그대로 팝업을 띄운 부모 창(opener)의 경로(location) 정보를 새로고침(reload)한다. 위의 코드를 사용하면 기존의 부모창이 새로고침 되는 것을 확인할 수 있다. 메인 이미지 출처: Photo by XPS on Unsplash
[JavaScript] 부모창 새로고침 / 팝업 띄운창 refresh 방법2021-11-20 팝업을 띄운 부모 창을 새로고침해야 하는 경우가 종종 있는데, 이럴 때 코드 한 줄로 부모 창을 새로고침 하는 방법이 있다. - 예제 function parentRefresh(){ opener.location.reload(); } 바로 위의 코드이다. 메소드명도 굉장히 명시적으로 표현되고 있으며 말 그대로 팝업을 띄운 부모 창(opener)의 경로(location) 정보를 새로고침(reload)한다. 위의 코드를 사용하면 기존의 부모창이 새로고침 되는 것을 확인할 수 있다. 메인 이미지 출처: Photo by XPS on Unsplash
2021.11.20 -
2021-09-05 자바스크립트 함수를 호출할 때 a태그를 사용하여 호출하는 경우가 많은데 오늘은 이와 같은 방법을 빠르게 알아보자. -코드 사실 방법은 크게 두가지로 하는 href 링크를 이용해 자바스크립트 함수를 호출하는 방법이고 나머지 하나는 onclick 이벤트를 이용해 함수를 호출하는 방법이다.
[JavaScript] a 태그 자바스크립트 호출 방법 알아보기2021-09-05 자바스크립트 함수를 호출할 때 a태그를 사용하여 호출하는 경우가 많은데 오늘은 이와 같은 방법을 빠르게 알아보자. -코드 사실 방법은 크게 두가지로 하는 href 링크를 이용해 자바스크립트 함수를 호출하는 방법이고 나머지 하나는 onclick 이벤트를 이용해 함수를 호출하는 방법이다.
2021.09.05 -
2021-09-04 화면 이동이 아닌 현재 화면에서의 팝업창을 띄워야 하는 경우가 생길 수 있다. 간단한 공지사항이나 이벤트 정보의 경우 팝업창으로 보여주면 아무래도 사용자의 집중과 관심을 유도할 수 있다. 오늘은 이러한 방법을 자바스크립트를 통해서 구현하는 방법을 알아보자. - 예제 우선 방법은 a 태그를 클릭하면 팝업창이 뜨는 방식으로 구현할 것이다. 단순 팝업창만 띄울거기 때문에 컨트롤러 로직 및 차후 파라미터를 서로 forward 하는 방법까지는 다루지 않는다. 우선 아래는 구체적인 함수구현 부분이다. 크게 어려운 것은 없으며, 창 크기 및 창을 띄울 위치 이외의 window 속성을 지정하고 마지막으로 window.open을 통해 자신이 팝업으로 띄우고 싶은 url 맵핑 정보 이름 window 속..
[JavaScript] 자바스크립트를 이용한 팝업창 띄우기2021-09-04 화면 이동이 아닌 현재 화면에서의 팝업창을 띄워야 하는 경우가 생길 수 있다. 간단한 공지사항이나 이벤트 정보의 경우 팝업창으로 보여주면 아무래도 사용자의 집중과 관심을 유도할 수 있다. 오늘은 이러한 방법을 자바스크립트를 통해서 구현하는 방법을 알아보자. - 예제 우선 방법은 a 태그를 클릭하면 팝업창이 뜨는 방식으로 구현할 것이다. 단순 팝업창만 띄울거기 때문에 컨트롤러 로직 및 차후 파라미터를 서로 forward 하는 방법까지는 다루지 않는다. 우선 아래는 구체적인 함수구현 부분이다. 크게 어려운 것은 없으며, 창 크기 및 창을 띄울 위치 이외의 window 속성을 지정하고 마지막으로 window.open을 통해 자신이 팝업으로 띄우고 싶은 url 맵핑 정보 이름 window 속..
2021.09.04 -
2021-07-24 뒤로 가기 버튼을 구현하기 위해서는 크게 준비할 거 없이 a 태그 하나만 사용하면 손쉽게 구현할 수 있다. 오늘은 이와 같은 방법을 빠르게 알아보도록 하자. - 소스코드 // 히스토리의 back을 사용한 뒤로가기 링크 구현 뒤로가기 // 히스토리의 go를 사용한 뒤로가기 링크 구현 뒤로가기 위의 두 코드는 뒤로가기 버튼 구현 시 상당히 많이 사용하는 코드로 자신의 기호와 상황에 맞게 사용해주면 된다. (작성자는 가독성 면에서 back() 메서드가 조금 더 눈에 들어오기 때문에 자주 사용하곤 한다.) (버튼 형식으로 구현하고 싶으면 a 태그안에 button 태그를 넣어서 구현하면 된다.) 메인 이미지 출처: Photo by Toa Heftiba on Unsplash
[JavaScript] a 태그 뒤로 가기 링크 부여하기 history.back() / go(-1)2021-07-24 뒤로 가기 버튼을 구현하기 위해서는 크게 준비할 거 없이 a 태그 하나만 사용하면 손쉽게 구현할 수 있다. 오늘은 이와 같은 방법을 빠르게 알아보도록 하자. - 소스코드 // 히스토리의 back을 사용한 뒤로가기 링크 구현 뒤로가기 // 히스토리의 go를 사용한 뒤로가기 링크 구현 뒤로가기 위의 두 코드는 뒤로가기 버튼 구현 시 상당히 많이 사용하는 코드로 자신의 기호와 상황에 맞게 사용해주면 된다. (작성자는 가독성 면에서 back() 메서드가 조금 더 눈에 들어오기 때문에 자주 사용하곤 한다.) (버튼 형식으로 구현하고 싶으면 a 태그안에 button 태그를 넣어서 구현하면 된다.) 메인 이미지 출처: Photo by Toa Heftiba on Unsplash
2021.07.24