본문 바로가기

Issues/Javascript&jQuery

[javascript] 페이지 진입 시 새로고침인지 뒤로가기인지 확인하기! (window.performance.navigation.type == 1)
이슈 개발에서 데이터를 6개씩 끊어서 줘야하는데 최대 개수가 12개라서 api에서 페이징 처리없이 한번에 12개 상품을 주고, 더보기 페이징 처리를 display:none/block으로 처리해야했다. 그런데 기본 동작할때는 이슈가 없었는데, history back 할때 스크롤값과 기존에 더보기 했던 상품인데 더보기가 열려있지 않는 등 추가 이슈가 생겼다. 따라서 history관련 추가 작업이 필요했다. ==> history.state / history.replaceState() 그리고 현재 페이지 진입 동작이 새로고침이냐 뒤로가기냐에 따라서 다른 동작을 실행했어야했다. ==> window.performance.navigaion.type === 1 해결 if (window.performance.naviga..
[javascript] overloading 과 overriding
overloading 함수는 같고 매개변수가 다른것 (js에는 없음) function a(매개변수1, 매개변수2) { } function a(매개변수new1, 매개변수new2) { } overriding 이름이 같은 함수가 2개있으면 밑에 함수가 위에 함수를 덮어씌우는 것 function a() { console.log("test") } function a() { console.log("test2222") } a() //test2222
[javascript] es5환경에서 객체 반복 돌리기
webpack 환경에서만 작업하다가 오래된 소스에서 객체 반복을 돌리려는데 Object.entries() Object.keys() Object.value() for in 이런거밖에 생각이 안나서 찾아보았다.. for of for (var key of object) { key, object[key] //이런식으로 접근 가능! } key와 object[key]가 value로 key, value가 접근이 가능하다.
[html & javascript] 가상요소 이벤트 바인딩 (template 태그)
html
[javascript & html] 라디오 input 클릭했을때 확인 후 안되게 하기
(in 오렌즈프로젝트) 주문결제에서 배송비 쿠폰을 선택한 상태에서 배송지를 변경하면 confirm 이 뜨는데 "배송비 쿠폰이 리셋됩니다. 계속하시겠습니까?" >> 취소, 확인 중 선택 취소를 선택하면 >> checked 바뀌지 않고 그대로 확인을 선택하면 >> checked 변경 해결 $(document).on("click", "input[type=radio]", function () { if (confirm("배송비 쿠폰이 리셋됩니다. 계속하시겠습니까?")) { return false; //이게 포인트 } }) return false를 추가하면 된다.
[javascript & vue & scss ] 파일경로 ~ 와 @
언젠가부터 ~와 @가 나오는데 뭔지 몰라서 찾아보았다. 그리고 나서 vue 프로젝트를 하는데 @가 계속 나와서 확인해보니 vue에서는 src폴더를 바라보도록 설정되어있었다. 참고!! ~ 루트폴더 @ 현재폴더 vue에서의 @ src 폴더
[javascript & 비동기통신] new Promise() / fetch / try catch
상황 공통으로 비동기 통신하는 함수를 만들고 싶어서 common.js에 함수를 만듬. function requestApi(request) { if(!request) return ; $.ajax({ url: request.url, type: request.method ? request.method : "GET" dataType:"text", success(result){ return result; //하면 result 를 리턴해줄 것이라 생각 }, error(err){ console.error(err); } }) } 그리고 이걸 필요한 페이지에서 async await을 사용하여 썼지만 response가 undefined가 나옴!!! const requestWeather = async() => { try {..
[javascript] input에 숫자만 입력하게 하기 (keyup 이벤트와 input이벤트의 차이 !)
type이 text인 input박스에 숫자만 입력되도록 하는데 이벤트를 keyup으로 했더니 찰나의 순간이지만 문자가 보이고나서 지워지는 것을 볼 수 있었다. keyup대신에 input으로 바꾸니 아예 숫자를 제외한 건 입력이 안되는 것을 확인 할 수 있었다. keyup이벤트 개발자도구를 열어 콘솔에 아래 스크립트를 복사 붙여넣기 한 후 문자를 입력해보세요. $(".keyupTest").on("keyup", function () { const _value = $(this).val(); const regex = /[^\d]/ig; $(this).val(_value.replace(regex, "")) }) input이벤트 개발자도구를 열어 콘솔에 아래 스크립트를 복사 붙여넣기 한 후 문자를 입력해보세요. $..
[javascript] localStorage와 sessionStorage 차이점 정리
localStorage 로컬스토리지는 도메인별로 저장! 브라우저를 꺼서 새탭으로 켜도 강제로 지우지 않는한 무조건 남아있다. (=> 개발자도구에서 확인가능) * 시크릿모드에서는 탭을 끄면 사라지니 참고!! sessionStorage 세션스토리지는 세션이 끝나면 끝~ 브라우저를 종료하면 사라진다.
[Javascript] 가격 콤마찍기 / 돈 (,) 콤마 단위 붙이기 toLocaleString
const price = 13000; price.toLocaleString("ko-kr"); //'13,000' 참고 1. 혹시라도 13000.toLocaleString() 하게 되면 에러가 나니 꼭 변수에 담아서 사용!!! 2. money가 스트링이라면 Number()로 감싸서 처리하기.
[kakaoMap & javascript] 카카오 지도 연결했는데 크로스도메인 오류 날때 This request has been blocked; the content must be served over HTTPS.
상황 로컬에서는 잘 됐었는데 firebase로 배포한 후 카카오 developer 페이지에서 사이트 도메인 설정도 해줬는데 갑자기 안나던 크로스 도메인 이슈가 났다. 해결 head태그에 넣는 카카오 맵 url에 잎에 있는 http를 삭제하고 //로 시작하게 만든다. //dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=개인API키 전체코드 지도 페이지 참고 만약 아래와 같은 오류가 난다면 지도를 넣을 요소를 잘 찾는지 확인하면 된다. (ref(null) 로 불러와서는 value를 안쓴다거나 보통 찍어보면 못찾는다고 나온다. ) ’Cannot read property ‘defaultView’ of undefined’
[javascript & Mobile] web에서 focus 이벤트는 유저상호호환에 의해서만 가능하다 !!!
상황 모바일에서 검색페이지 진입과 동시에 검색어 입력 박스에 focus되면서 키패드를 올려달라는 요청 $(document).ready(function () { $("input[type='text']").focus() }) 결론 (웹에서는 컨트롤 불가능!) 웹에서는 유저상호호환이벤트에 의해서만 .focus() 가 가능하다. ex) 클릭 이벤트 등 따라서 검색페이지를 페이지가 아닌 버튼 클릭으로 팝업으로 열리면 유저가 발생시킨 클릭이벤트이기 때문에 focus가 가능하지만 그냥 DOM이 렌더링 된 후 강제 focus를 주는 것은 불가하다. (앱은 키패드를 강제로 만들어서 올리는 등 또 다른 방법이 있다고함~!)
[javascript & Mobile] 주소창 포함한 100vh 구하기 (jquery / javascript height 총 정리)
주소창 포함한 100vh 구하기 (window.outerHeight) 주소창 포함한 전체 높이 window.outerHeight 주소창 포함하지 않은 전체 높이 (safe-area포함) window.innerHeight 주소창 포함하지 않은 전체 높이 (safe-area 포함X) $("body").height() 또는 $("body").outerHeight() 참고 window.innerHeight와 $("body").height() 의 차이 window.innerHeight는 iphone의 safe-area 포함 !!
[javascript & 정규식] 특정문자열 제외하고 다 치환하기
소문자 숫자 - _ . 빼고 다 없애기 str.replace(/[^a-z\d\_\-\.]/g, "") 풀이 (*str은 들어올 문자열 임의로 썼습니다.) [^] 대괄호 안에 ^는 "제외"를 뜻한다. a-z는 소문자 \d는 숫자 -_. 는 정규식에서 쓰는거라서 각각 앞에 \를 붙여서 그냥 특수문자라는걸 알려주기 g가 있어야 글로벌이니 여러번 찾음 a-z \d - _ . 가 아닌 문자는 다 "" 공백으로 치환 막상 풀이를 보면 쉬운데 하려고 하니 생각하지 못했던 쉬운 방법
[javascript & Swiper] 슬라이드 가운데 오기 & loop 아닐때
상황 클릭하면 해당 슬라이드로 이동하고, active된 슬라이드가 가운데 위치하게 해야해서 Swiper의 centeredSlides 속성을 사용하여 가운데 오게 했다. loop일때는 이슈가 없었지만 loop가 아닐때 첫번째 슬라이드 옆에 공백이 생기는 상황이 발생하였다. 해결 centeredSlidesBounds new Swiper(".js__main__slider", { loop: false, centeredSlides: true, centeredSlidesBounds: true //이걸 같이 추가해줘야함!! }) centeredSlides와 함께 centeredSlidesBounds 속성을 추가해주었더니 해결이 되었다. 왼쪽에 공간을 채워줄 슬라이드가 없을때에는 가운데 정렬이 되지않는다. (0번째 슬..
[javascript & css] daum zipcode 우편번호 css 컨트롤하기 (iframe 안 css 수정하기)
다음 우편번호 API를 사용하는데 iframe마다 min-width: 300px 이 걸려있어 모바일에서 잘림현상이 발생하는데 iframe 안의 html과 css라서 수정이 안되었다. #document 해결 (소스는 구리지만..) contentWindow로 내부에 접근하여 거기서 다시 document.getElementById로 접근하여 css를 수정하였다. 테스트 하다보니 가끔 못찾는 경우가 있어 setTimeout을 걸어 처리하였다. const zipCodeIframe = document.getElementById("zipcodeWrap").childNodes[0].contentWindow.document.getElementById("daum_zipcode_view"); if (zipCodeIframe..
[javascript & HTML5] video tag autoplay + muted 음소거 해제하기 (html video태그)
동영상 full screen + muted + autoplay + loop 로 재생한 후 음소거 클릭이벤트로 컨트롤하기 음소거컨트롤버튼
[javascript & html] input file 첨부파일 n개 이상이면 자르기 (DataTransfer)
문제상황 리뷰 등록하는 페이지에서 이미지 파일은 최대 3개까지 첨부가 가능하다. 따라서 3개 이상 첨부 시, 앞에 3개만 보여줘야 한다. input file의 change 이벤트 안에 files를 찍으니 fileList라는 Object로 들어와서 강제로 수정하려고 하니 수정 불가 예) 첨부: 사진1, 사진2, 사진3, 사진4, 사진5 결과: 사진1, 사진2, 사진3 해결방법 DataTransfer() 로 다시 배열을 재구성하여 this.files에 담아주었다. const maxLength = 3; if (this.files.length > maxLength) { const transfer = new DataTransfer(); Array.from(this.files) //새로 배열 만들 그릇 .slice..

티스토리툴바