[JavaScript] 팝업 띄우기
2023. 1. 9. 20:52
프로그래밍/JavaScript
팝업 띄우기 오늘 그만보기 기능을 추가하여 간단한 팝업을 만들어봄 팝업 html 👇 오늘 그만보기 닫기 해당 경로에 이미지 추가 필요 팝업 js 👇 // 팝업 다시보지 않기 $("#check").click(function () { if ( document.pop_form.chkbox.checked ){ setCookie( "mainPopup", "done" , 1 ); } $(".layerPopup").addClass("hide"); }); // 쿠키 세팅 function setCookie( name, value, expireDays ) { const todayDate = new Date(); todayDate.setDate( todayDate.getDate() + expireDays ); documen..
[JavaScript] if문 없애기
2023. 1. 3. 20:24
프로그래밍/JavaScript
if문 제거하기 중복된 if 조건들은 변경사항이 발생하면 프로젝트내에 모두 찾기하여 일일이 수정해야 하기 때문에 좋은 코드가 아님 이를 개선해보자 1. 개선 전 코드 function executePayment(paymentType) { if(paymentTpye === "KAKAO") { return "카카오 결제 처리" } else if(paymentType === "NAVER") { return "네이버 결제 처리" } else if(paymentType === "COUPANG") { return "쿠팡 결제 처리" } else if(paymentType === "PAYCO") { return "페이코 결제 처리" } else if(paymentType === "APPLE") { return "애플 ..
[JavaScript] JavaScript 배열의 요소를 삭제
2022. 12. 13. 20:38
프로그래밍/JavaScript
JavaScript에서 배열의 요소 삭제하는 법 1️⃣ pop 함수를 사용하여 배열의 마지막 요소를 삭제 2️⃣ shift 함수를 사용하여 배열의 첫 번째 요소를 삭제 3️⃣ splice 함수를 사용하여 배열 요소를 삭제 4️⃣ filter 함수를 사용하여 조건에 일치하는 새 배열을 생성 5️⃣ delete 연산자를 사용하여 배열 요소를 삭제 pop 함수를 사용하여 배열의 마지막 요소를 삭제 pop() 함수는 배열의 마지막 요소를 삭제 반환 값은 삭제된 요소의 값 var arr = ['A', 'B', 'C', 'D']; console.log('*****pop 함수 호출 전 배열의 길이*****'); console.log(arr.length); // 4 var popResult = arr.pop(); co..
[JavaScript] 문서의 DOM이 모두 로드된 후 실행하기 (로딩의 순서)
2022. 12. 9. 20:33
프로그래밍/JavaScript
브라우저가 HTML 파일을 읽어오는 순서 사용자에 의해 웹브라우저 시작 👉 브라우저의 웹문서 읽기 👉 DOM 생성 👉 $(document).ready 메소드 실행 👉 각 요소들이 로드되기 시작 👉 모든 요소의 로드가 완료되면 $(window).load 메소드 실행 됨 Ready $(document).ready 브라우저에서 DOM이 완성된 시점 DOM트리 생성 직후이므로 window.onload보다 빠름 (HTML의 소스코드만의 로딩이 끝나서 어떻게 표현할 것인지나 내부속성이 완성) $(document).ready(function(){ // 태그 등의 셋팅이 완료되었을 시점에 이벤트 발생 }); DOMContentLoad document.ready와 비슷함 window.addEventListener('DO..
[JavaScript] 데이터 타입 확인
2022. 11. 30. 20:35
프로그래밍/JavaScript
JavaScript 데이터 타입 확인 typeof typeof 연산자는 operand의 타입을 나타내는 문자열을 리턴 typeof operand typeof(operand) 예제 document.writeln(typeof "ABC"); // string document.writeln(typeof 1); // number document.writeln(typeof 1.2); // number document.writeln(typeof { name : "nana"});// object document.writeln(typeof null); // object document.writeln(typeof [1, 2, 3]); // object document.writeln(typeof true); // boole..
[JavaScript] 뒤로가기 시 페이지 정보 및 스크롤 위치 불러오기
2022. 11. 28. 20:42
프로그래밍/JavaScript
비동기로 불러온 데이터 sessionStorage에 저장 페이징 처리를 비동기로 한 경우 뒤로가기 시 스크롤 위치를 가져오기 위해서는 조회해서 불러온 데이터의 정보도 같이 저장해 둬야 함 이를 위해 sessionStorage에 스크롤 정보 및 조회한 데이터 정보를 저장함 또한 비동기로 페이징 처리 한 경우 스크롤의 위치는 callBack함수에서 설정해줘야 함 // 뒤로가기, 새로고침 시 정보를 계속해서 합치지 않도록 구분하는 값 let scrollSearching = false; // 데이터 조회해서 페이징 처리하는 함수 예시 function axiosPaging(){ axios({ }).then(function (response) { // 뒤로가기, 새로고침인 경우 페이지 정보 ssesionStorag..
[JavaScript] localStorage와 sessionStorage 차이점
2022. 11. 23. 20:20
프로그래밍/JavaScript
localStorage 사용자 세션 데이터 유지 브라우저 닫았다가 다시 열었을 때도 지속 탭을 여러개 열어도 공유됨 명시적 삭제가 있을때까지 지속 변경 사항은 저장되어 현재 및 향후 사이트 방문 시 사용할 수 있음 * 정리 : 사용자가 브라우저 창을 닫았을 때 데이터는 삭제되지 않으며, 일, 주, 월 및 연도에 사용할 수있는 만료 날짜없이 사용자 정보 데이터를 저장한다. //Set the value in a local storage object localStorage.setItem('sample', 'valueText'); //Set the value in a local storage object localStorage.getItem('sample'); //Delete the value from loca..
[JavaScript] 자바스크립트 스크롤 위치 저장
2022. 11. 22. 20:07
프로그래밍/JavaScript
페이지 이동 시 스크롤 위치를 저장하고 싶은 경우 스크롤Y의 위치를 sessionStorage에 저장해 놓고 다시 페이지에 들어올 때 저장해 놓은 값을 가져와서 위치를 설정해주기 /** * 스크롤이 움직일때마다 값을 sessionStorage에 넣어줌 */ let scrollHeight = 0; addEventListener('scroll', (event) => { scrollHeight = $(document).scrollTop(); sessionStorage.setItem("scrollY", scrollHeight); }); /** * 스크롤 위치 지정 */ $(document).ready(function() { const scrollY = parseInt(sessionStorage.getItem("..