단일 조건 정렬 sort()는 배열의 정렬을 조건에 맞게 재정렬한 후 반환해 주는 메서드다. 원하는 조건대로 정렬하려면 sort() 안에 배열을 재정렬 해주는 조건을 넣어줘야 되는데, 단일 조건의 경우는 다음과 같이 사용할 수 있다. 배열 정렬 예시 const data = [1, 7, 3, 5, 8]; const asc = data.sort((a, b) => a - b); // 오름차순 [1, 3, 5, 7, 8] const desc = data.sort((a, b) => b - a); // 내림차순 [8, 7, 5, 3, 1] 객체 배열 정렬 예시 const data = [ {name: "계란", price: 1500}, {name: "사과", price: 2000}, {name: "양파", price..
내용 비동기로 파일을 여러개 업로드 할 때, 마지막 파일의 업로드가 완료되면 콜백을 실행해야하는 경우가 있다. 이럴 때 파일 업로드 상황을 파악하기 위해 쓸데없이 코드가 길어질 수 있는데, axios에서는 이런 상황에서 쓸 수 있게 axios.all()이라는 메서드를 제공하고 있다. 이번 포스트에는 간단한 예시와 함께 axios.all() 사용법과 파일 업로드 progress를 구현하는 법을 정리했다. 설치 패키지 및 버전 "dependencies": { "next": "13.4.1", "axios": "^1.4.0", "typescript": "5.0.4", } 레이아웃 구성 먼저 간단하게 기능을 구현하기 위해 을 넣고, multiple 속성을 지정해 줬다. input에는 multiple 속성을 넣어줘..
내용 파일 형식의 input에 업로드한 이미지를 미리보기 형식으로 화면에 구현하는 법 알아보기 FileReader API로 미리보기 구현 FileReader API는 파일을 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해주는 Web API다. FileReader API는 readAsDataURL 메서드랑 조합해 파일을 base64 형식의 문자열로 변환할 수 있다. 변환한 문자열은 img 태그의 src값, background-image의 url값에 넣어 이미지 형태로 불러올 수 있다. 비동기로 실행되기 때문에 reader에 파일이 load된 이후에 이미지 영역에 넣어줘야 한다. 자바스크립트 사용 예시 const file = document.getElementById("my-file"); const pre..
오류 발생 조건 Keydown 이벤트를 실행할 때, 첫 keydown 이벤트가 두 번 실행되는 경우가 있다. 영어로 입력했을 때는 발생하지 않기 때문에 한글(?) 관련된 오류인 것 같은데, 이것저것 테스트해 봤더니, 크롬 브라우저에서 한글로 입력한 경우에만 오류가 발생했다. isComposing 메서드 이벤트 중복 실행을 방지하기 위해 isComposing이라는 메서드를 사용했다. isComposing 메서드는 keydown과 keyup 이벤트 사이에 같은 이벤트가 중복 실행되는 걸 체크해 true/false를 반환하는 메서드다. JavaScript 사용 예시 document.addEventListener("keydown", (e) => { if (e.isComposing) return; // 실행할 이..
Slick Slider로 작업 중 한 가지 버그를 발견. 슬라이드에 클릭 이벤트를 넣으면, 드래그해서 슬라이드를 스와이프 했을 때 클릭 이벤트도 같이 실행되는 버그다. 아무래도 클릭 이벤트는 드래그와 별개로 실행되는게 일반적으로 기대하는 바일텐데, 찾아보니 이미 2015년부터 깃허브 이슈탭에서 꾸준히 제기되었던 오류였다. 오류는 생각보다 간단하게 해결됐지만, 혹시나 해결 방법을 발견하지 못한 사람들을 위해 내가 썼던 방법을 소개하려 한다. 가장 문제가 되는 부분이 클릭 이벤트이기 때문에 클릭 이벤트라 지칭했지만, mouseover나 mouseup같은 다른 이벤트 핸들러도 같이 실행된다. 방법 1 - 이벤트 핸들러를 다른 방식으로 대체 가장 간단한 방법은 이벤트 핸들러를 다른 방식으로 대체하는 것이다. 예..
유효성 검사 기준 @을 기준으로 앞 구간이 알파벳 or 숫자 조합으로 이루어져 있는지 체크 @을 기준으로 뒷 구간이 알파벳 or 숫자 조합으로 이루어져 있는지 체크 @을 기준으로 뒷 구간에서 . 뒷 구간이 알파벳 or 숫자 조합으로 이루어져 있는지 체크 유효성 검사 기준을 코드로 작성하면 다음과 같습니다. const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; 이제 이 코드를 함수로 만들면, const pattern = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-za-z0-9\-]+/; function emailValidChk(email) { if(pattern.test(email) === false) { re..
유효성 검사 기준 -(하이픈)을 기준으로 첫번째 구간이 01[0,1,6,7,8,9](핸드폰), 02(집), 030~099(지역) 중 하나인지 체크 -(하이픈)을 기준으로 두번째 구간이 숫자 3~4 자리로 이루어져 있는지 체크 -(하이픈)을 기준으로 세번째 구간이 숫자 4자리로 이루어져 있는지 체크 유효성 검사 기준을 코드로 작성하면 다음과 같습니다. /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/ 이제 이 코드를 함수로 만들면, const pattern = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/; function telValidChk(tel) { if(pattern.t..
반응형 웹을 만들 때, 보통 PC, 모바일을 뷰포트의 넓이 기준으로 나눕니다. 하지만 때에 따라서 넓이와 상관없이 플랫폼을 구분해야 될 때가 있습니다. 이럴 때 Navigator 객체를 사용해 플랫폼을 구분할 수 있습니다. Navigator 객체 브라우저의 버전, 운영체계 등 브라우저에 대한 다양한 정보를 담고 있는 객체. 브라우저의 플랫폼 정보 navigator 객체에는 브라우저에 대한 다양한 정보들이 저장되어 있고, 브라우저가 실행중인 플랫폼에 대한 정보도 포함되어 있습니다. 이 정보를 바탕으로 아래와 같이 브라우저를 구분하는 함수를 만들 수 있습니다. const pc_platform = "win16|win32|win64|mac|macintel"; function platformChk() { if (..
