Spread Operator

Spread Operator 마침표를 연달아 3개(...)를 찍는 문법을 스프레드 오퍼레이터(Spread Operator)라고 합니다. Spread의 뜻은 (펼치다, 퍼트리다) 이며, 한글로는 '펼침연산자' 라고도 합니다. 이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있습니다. Spread Operator는 대괄호, 중괄호, 소괄호 안에서만 사용 가능하며 외부에서 사용할 경우, 에러가 발생합니다. JavaScript Spread 연산자(...)를 사용하면 기존 배열이나 객체의 전체 또는 일부를 다른 배열이나 객체로 빠르게 복사할 수 있습니다. 1. Sperad Operator 기본 문법 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 ..

2023.12.22

정규식, 정규 표현식 regExp

웹 개발을 하다보면 유저가 입력한 텍스트에 대해 검증해야 하는 경우가 있습니다. 대표적인 예시로 회원 가입시 비밀번호 입력을 들 수 있습니다. ‘영문 대문자, 소문자, 특수기호로 이뤄져야 한다.’ 등의 검증 로직을 정규식을 활용하여 구현할 수 있다. 정규식 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. JavaScript에서는 정규 표현식도 객체로서, RegExp의 exec()와 test() 메서드를 사용할 수 있습니다. String의 match(), matchAll() (en-US), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있습니다. 정규 표현식 만들기 정규 표현식 객체를 생성하려면 정규 표현식 리터럴이나..

2023.05.31

웹, 앱 체크 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

input type=password ios/aos 폰트 크로스브라우징 이슈

이슈`input type="password"`는 값을 입력하면 value가●●●●● 형태로 출력이 되는데, 이 도트의 사이즈가 브라우저별로 상이하여디자인적으로 value가 input 가로사이즈 영역을 넘어서는 문제, 크로스브라우징 문제가 발생했다. 검색결과문제는 (2016년 기준) 비밀번호 입력란에 파이어폭스와 인터넷 익스플로러는 유니코드 코드포인트를 사용하는 '검은 동그라미'(●) 문자를 사용하지만, 크롬은 ' 25CF불렛'(•) 문자를 사용한다는 점이다. ios safari 에서도 큰 검은 동그라미 형태로 출력되어, 디자인적으로 input 가로사이즈 영역을 넘어서는 문제가 발생하게 되었다.  해결방법'pass' 라는 base64 사용자정의 글꼴을 사용하여 도트의 사이즈를 통일했다.placeholde..

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