본문 바로가기

Web6

[WARN] caniuse-lite is outdated [WARN] caniuse-lite is outdated 프로젝트에 새 기능을 추가하기 위해 로컬에서 개발 중이었는데 언젠가부터 개발자 서버를 실행시키면 다음 메세지가 출력되었다. caniuse-list가 구식이니 다음을 실행하여 업데이트 하라 뭐 이런 내용이다. 친절히 메세지에 나온 명령어를 실행하였다. npx browserslist@latest --update-db 위 명령어를 실행하니 다음과 같이 에러 메세지가 출력되었다. 그러고보니 난 browserslist 패키지를 설치한 기억이 없는데..? 브라우저 호환때문에 이런 저런 패키지를 설치한게 있으니 그 중 하나의 의존성 패키지로 있는게 아닐까라는 생각이 났다. yarn.lock 파일을 열고 browserslist를 검색하였더니 역시나 존재하였다. .. 2022. 11. 23.
문자열을 정수형으로 변환 시 parseInt()와 Number 차이점 문자열을 정수형으로 변환 시 parseInt()와 Number 차이점 자바스크립트에서 문자열로 된 수를 정수로 변환 할 때 parseInt()를 사용하다가 Number()도 사용하게 되면서 문득 궁금한게 생겼다. 특정 진수(2, 8, 16진수)가 아닌 10진수 변경은 그냥 Number()만 쓰면 되지 않을까? 혹시 리턴되는 값에 차이가 있나? 라는 궁금증이 생겨서 찾아보았다. 우선 두 가지를 간단히 요약해보자면 다음과 같다. parseInt() 함수는 문자열 인자를 파싱하여 특정 진수의 정수를 반환한다. Number()는 자바스크립트의 원시 값(primitive)인 number를 위한 래퍼 객체(wrapper object)이다. Number 생성자는 숫자를 다루기 위한 상수와 메소드를 가지고 있다. 그럼.. 2022. 3. 18.
Date format 변경 (yyyy-mm-dd hh:mm:ss) Date format 변경 (yyyy-mm-dd hh:mm:ss) 기존에 흔히 알려진 방법은 new Date()로 새로운 Date 객체를 받고 메서드를 이용하여 연도, 월, 일, 시, 분, 초를 반환받아 이를 문자열로 연결하여 사용하는 방법인데, 이보다 깔끔하고 괜찮은 방법을 발견했다. const date = new Date().toISOString().replace('T', ' ').substring(0, 19); Date 객체를 toISOString() 메서드를 이용하여 ISO 8601 확장 형식에 맞춰진 문자열로 반환받는다. 그러면 '2021-09-11T14:57:58.761Z' 형식으로 문자열을 리턴받음. 1에서 반환 받은 문자열에 T를 공백으로 치환한다.. 2021. 9. 12.
Input type="number" 박스의 화살표 숨기기 Input box 화살표 숨기기 Input 요소를 사용할 때 타입을 지정할 수 있는데, 숫자만 입력하고 싶은 경우 아래와 같이 타입 속성의 값을 number로 작성하게 된다. 이렇게 작성된 코드는 다음과 같이 보이는데 숫자 타입이라서 Input 박스 끝에 값을 증가, 감소 시킬 수 있는 화살표가 나타나게 된다. 아래 스타일을 적용하게 되면 화살표가 안보이게 된다. /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance:.. 2021. 3. 5.
웹브라우저가 어떤 브라우저인지 확인하기 (navigator, userAgent) 웹브라우저 확인하기 평소에는 크롬이나 파이어폭스만 사용하다보니 인터넷 익스플로러(이하 IE)에 대해 신경쓰지 않았다. 현재 회사에서 퇴사자가 거의 시작만 해놓고 퇴사해놓은걸 떠맡아 개발중인데 원래 업무때문에 시간이 너무 없어 매일 조금씩 개발을 하다가 테스트를 진행하는데 갑자기 아차 했다.. 병원 인트라넷 페이지를 만들었는데 생각해보니 병원같은데는 IE를 쓸 것 같은 불안함이 엄습했다. 급하게 IE로 테스트를 해보니 역시나 일부 Javascript API를 제대로 지원못해서 기능이 제대로 동작하지 않았다. 그래서 IE의 경우 다른 방법으로 동작하게끔 처리했고, IE인 경우를 조건문으로 처리하기 위해 아래와 같이 처리하였다. // userAgent 값에 브라우저를 구분하는 고유의 값들이 있다. var ag.. 2020. 3. 19.
HTML 기초 HTML은 무엇인가? HyperText Markup Language, 하이퍼텍스트 마크업 언어 일부 뒤에 Language만 보고 프로그래밍 언어라고 오해하는 사람들도 있는데, HTML은 프로그래밍 언어가 아니고 마크업 언어이다. HTML은 요소(elements)로 구성되어 있다. 마크업 언어(markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 밝히고 표기하는 언어이다. HTML 요소(Element)의 구조 아래에서 맨 앞의 태그가 요소의 시작부분이고 마지막 태그가 요소의 끝부분이다. 그리고 그 사이 Hello World!!가 내용이 되며 태그의 시작부터 끝까지가 하나의 요소가 된다. Hello World!!블럭 레벨 요소(Block level element)와 인라인 레벨 요소(I.. 2019. 9. 25.