본문 바로가기

전체 글

[Vue2 vs Vue3] vue에 있는 ref 접근하기 ! this.$ref 사용하기 (template refs)
Vue2 vue2에서는 this.$refs로 가져온다. Vue3 vue3에서는 ref(null)을 선언하는데, 여기서 변수명은 꼭 위에 템플릿에서 사용하는 ref 이름과 동일하게 지정해야한다. ref는 mounted 전에는 없을 수 있으니 선언은 위에서 하되 mounted에서 value값을 담는다.
[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 포함 !!
[CSS] 보더가 겹쳐져 있는 메뉴 ACTIVE 주기
상황 각각의 네모박스는 label 안의 input checkbox로 되어있고 보더를 unchecked는 회색으로, checked는 검정색으로 처리 label에 모두 border: 1px solid #ddd; 를 주었더니 겹치는 부분 발생. 그리고 checked 된 애한테 검정색으로 색상을 바꿔주었더니 마음대로 되지 않았다. 해결 1. 모든 label에 보더를 준다. 2. 모든 label에 겹치는 만큼을 margin으로 빼준다. margin-top: -1px; (이렇게 하면 봤을때 맨 위에 빼고 모두 일정한 보더를 가지게 됨) 3. 첫번째 label에 margin-top: 0; (여기까지 하면 첫번째를 포함해서 모두 일정한 보더를 가지게 됨.) 4. checked 된 애한테 보더 색상 바꿔주면서 posit..
[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번째 슬..
[CSS& Mobile] 모바일 브라우저 주소창과 바텀시트 고정시키기
주소창과 바텀시트 고정시키기 body { overflow: hidden; position: fixed; } .wrapper { position: absolute; /*또는 position: fixed도 상관없음. 띄워져만 있으면 됨.*/ } BODY 에 overflow: hidden; position: fixed; 를 주면 모바일에서 브라우저의 주소창과 풋터가 움직이지 않는다. 대신 콘텐츠는 body위에 띄워져 있어야한다.
[Nuxt.js & Kakao map] 카카오 맵 연동하기
1. nuxt.config.js에서 카카오 맵 script 붙이기 head: { script: { src: "//~~~~~~" } } 2. created() 에서는 window.document를 "CSR"일때만 찾을 수 있음. (클라이언트 사이드 렌더링 ! SSR 서버사이드 렌더링이 아닐때) if (proccess.client) { //맵 그리기 함수 실행 }
[CSS & ie] translate 와 calc (같이 사용하지 않기)
ie에서 이슈 transform: translate(0, calc(100% + 25px)) 해결 transform: translateY(100%) translateY(25px);
[javascript] window.location.href 와 document.location.href의 차이
window.location.href 와 document.location.href 의 차이 앱(안드로이드)에서 봤을때 뒤에 흰화면이 보이냐 안보이냐의 차이. document 가 이동되기 때문

티스토리툴바