웹, 앱 체크 navigator.userAgent

navigator.userAgent user agent는 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있는 request header의 한 종류이다. 지금 사용하고 있는 브라우저의 navigator.userAgent를 콘솔에 찍어보면 아래와 같이 나온다. 사용하고 있는 OS의 종류, 브라우저의 정보를 담고있다. 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36' 하이브리드 앱을 제작할때 web view의 RRL이 로드되기 전에 userAgent를 수정하여 특정 문자열을 삽입하는 방법으로 웹인지 앱인지 구분..

2023.04.06

ios mobile fix item + keypad 이슈

ios mobile에 키패드 이슈 모바일 기기에서 input에 focus 되었을 때 가상 키패드가 올라오게되는데, OS에 따라 키패드가 올라왔을때의 영역이 다르게 동작해서 크로스브라우징 이슈가 있었다. ios에서 상단 fixed 헤더가 위로 밀려버리는 문제가 발생했다. 헤더가 위로 밀려버리는 현상 자체를 해결할순 없었고, 키패드가 올라왔을때 스크롤이 되지않게 input blur를 해주는 방향으로 작업되었다. 우선 모바일일 때 body에 mobile 클래스를 넣어준 후 키보드가 올라올만한 input에 focus 시 keyboard-on 클래스를 body에 추가해줬다. 그리고 그 상태에서 input이 아닌 다른곳을 터치하게 되면 input에 focus를 blur처리해줬다. 모달팝업 내에 가상키패드도 문제였기..

2023.04.06

vanilla JS로 siblings 구현하기

jQuery의 메소드 중 하나인 siblings()는 선택한 자신 요소를 제외한 형제 요소들을 모두 고르는 메소드다. 이를 바닐라 자바스크립트로 구현하려면 filter() 를 사용해 비교적 간단하게 구현할 수 있다. 예제코드 HTML one two three jQuery $(".one").siblings(); JavaScript const siblings = (el) => [...el.parentElement.children].filter(node => node != el); const one = document.querySelector('.one'); console.log(siblings(one)); // 함수에 엘리먼트를 넣으면 그 엘리먼트의 형제 요소들을 배열로 반환한다. // > (2) [li.t..

2023.02.13

input 글자수 입력 후 다음 칸에 focus

input maxlength 값 만큼 입력 후 다음 input에 자동으로 focusing 된다. 카드번호 입력, 비밀번호 1글자씩 입력 등에 사용된다. 카드번호 취소 취소 취소 취소 유효기간 취소 $(".section__joincard .form__item-input.flex input").keyup (function () { var charLimit = $(this).attr("maxlength"); if (this.value.length >= charLimit) { $(this).parent().next().find('input').focus(); return false; } });

2022.12.23

모바일 디바이스 체크

모바일 디바이스를 체크하여 PC웹 환경인지, mobile 환경인지 알아낼 수 있다. 이 코드를 활용해 모바일용, 또는 PC화면용 동작을 다르게 할 수 있다. function detectMobileDevice(agent) { const mobileRegex = [/Android/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i, /Windows Phone/i] return mobileRegex.some(mobile => agent.match(mobile)) } const isMobile = detectMobileDevice(window.navigator.userAgent) if(isMobile){ // 모바일 } else { // PC }

2022.12.12

async await promise

function sayHi(){ console.log("start"); } async function a(){ let promise = new Promise((resolve, reject) => { setTimeout(() => resolve(sayHi()), 3000) }); let result = await promise; console.log("end"); } a(); a함수를 실행하면 3초 뒤 sayHi가 실행 되고, 그 아랫줄이 순차적으로 실행된다. console창에 start가 먼저 찍히고, end가 나중에 찍힘

2022.09.30