단일 조건 정렬 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..
내용 파일 형식의 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 - 이벤트 핸들러를 다른 방식으로 대체 가장 간단한 방법은 이벤트 핸들러를 다른 방식으로 대체하는 것이다. 예..
https://fonts.taedonn.com Fonts Archive fonts.taedonn.com 이슈 사항 개인 포트폴리오 작업 중, 아래와 같이 @font-face에 적용할 폰트를 서버에서 JSON을 통해 문자열로 불러오려 했더니, 띄어쓰기는 적용이 되지만 줄 바꿈이 적용이 안 돼서 나왔다,, 이슈를 해결하기 위해 문자열을 잘라서 태그도 넣어보고, 함수를 만들어 문자열을 나눠도 봤지만, 매번 렌더링 할 때마다 복잡한 함수를 실행해야 되기 때문에, 클라이언트의 과부하를 줄이기 위해 좀 더 근본적인 해결 방법을 찾아야 했다. 그러던 와중 태그에 대해 알게 됐고, 반신반의하며 태그로 문자열을 감싸봤다. 로컬 서버에서 결과를 확인해 보니, 제대로 줄 바꿈이 되어서 나왔다? 문제는 해결이 됐지만, 왜 줄..
유효성 검사 기준 @을 기준으로 앞 구간이 알파벳 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..
개인 포트폴리오를 작업하다 보면, 자주 용량의 압박에 시달립니다. 무료 호스팅을 지원하는 사이트들의 경우 대부분 저용량만 무료로 지원하고, 용량을 추가하기 위해서는 유료 결제를 해야 하기 때문입니다. 그렇다고 이미지 몇 개 쓰자고 이미지 호스팅 서버를 따로 구매할 수는 없기 때문에, 이 글에서는 무료로 이미지를 호스팅 하는 방법 중 구글 드라이브를 사용해 이미지를 호스팅 하는 방법을 다뤄보려고 합니다. 1. 구글 드라이브에 이미지 올리기 먼저 구글 드라이브에 이미지를 업로드합니다. 2. 이미지 공유 링크 가져오기 이미지 업로드가 완료되면, 이미지에 마우스 오른쪽 클릭을 한 다음, '링크 생성'을 누릅니다. 3. 링크의 액세스 권한 변경하기 링크의 액세스 권한을 '제한됨'에서 '링크가 있는 모든 사용자'로..
