고고마코드

textarea에서 keyup으로 입력한 값의 이벤트를 감지하고 후처리하는 기능이 있는데, 붙여넣기 또는 잘라내기의 경우는 keyup의 이벤트를 감지하지 못했다. 문제의 코드 $(document).on("keyup", "#contents", function(){ // event } keyup은 모바일에서 자판으로 입력하는 것들은 감지했지만 붙여넣기, 잘라내기 등의 이벤트는 감지하지 못 해서 원하는 기능이 제대로 작동하지 않았다. 해결한 코드 $(document).on("input", "#contents", function () { // event } input은 모든 변경내역을 감지했으며 해당 코드로 해결할 수 있었다.

input file 로 이미지 업로드를 하는 과정에서의 이미지 미리보기, 이미지 삭제 구현입니다. input file multiple 은 아래 글을 참고하세요. (준비중) html 삭제 input file 의 이름은 #_img 이고 각 class는 #-img-section, #-img-preview, #-img-remove 로 정하면 됩니다. #에 원하는 네이밍을 부여하시면 됩니다. 이 부분이 아래에서 쓰일 tag 명칭이 됩니다. src="이미지경로" 에 이미지가 있다면 src="이미지경로" 에 이미지가 없다면 #을 넣어주세요. 이렇게 나오도록 javascript 를 작성합니다. 에러 처리는 onerror로 해도 되고, js에서 이벤트 error를 감지해서 처리해도 됩니다. javascript js 코드..

a tag를 사용할 때 동적으로 disable처리를 해주어야 할 때가 있습니다. a tag에는 따로 disable속성이 없습니다. 그래서 동적으로 href를 변경하거나 지워야 합니다. 해결한 과정을 기록합니다. 방법 a tag 에 data-href 로 링크를 미리 담아둡니다. 또는 동적으로 여러개를 써야 한다면, data-href1, data-href2 이런 식으로 미리 담아두는 방법도 있습니다. 이벤트가 있을 경우 href 속성 값의 유무에 따라 동적으로 값을 추가하고 뺍니다. 테스트 코드 준비 버튼을 클릭하면 a 태그의 링크를 지우고, 다시 클릭하면 a 태그의 링크를 살리는 테스트를 진행하겠습니다. 결과물 코드 HTML 소스 toggle button 구글로 이동 이동JQuery 방식 $(documen..

크롬 기반 브라우저에서는 정규식 후방탐색을 지원하지만, 사파리에서는 후방탐색을 지원하지 않기 때문에 다른 방법으로 대체해야 합니다. 대체하는 방법을 작성합니다. 후방탐색 일반적인 사용 방법 var input = `test string`; var regExp = /(?

정규식 플래그에 관한 내용이 궁금하다면 아래 글을 참고해 주세요. 정규 표현식/정규식(RegExp) 플래그(Flag) 자세하게 알아보자! 정규식 패턴에 관한 내용이 궁금하다면 아래 글을 참고해 주세요. 예제로 정리한 정규식 패턴 1. Javascript에서 정규식을 만드는 두 가지 방법 RegExp 객체 const regExp = new RegExp(/reg/, 'g'); new RegExp(/pattern/, 'flag') RegExp 객체의 생성자를 호출해 정규 표현식을 만듭니다. 패턴과 플래그에 대한 자세한 내용은 다루지 않습니다. 해당 내용은 상단의 링크를 참고하세요. 정규 표현식 리터럴 const regExp = /reg/g; /pattern/flag 정규 표현식 리..

예제 코드는 Javascript로 작성되었습니다. 예제 코드에 플래그 활용이 포함됩니다. 플래그를 모른다면 아래 글을 참고하세요. 정규 표현식/정규식(RegExp) 플래그(Flag) 자세하게 알아보자! 1. 기본 dot(.) : 줄바꿈(\n)을 제외한 모든 문자(특수문자 포함) var test = `1a 2b @#`; test.match(/./g) [ '1', 'a', '2', 'b', '@', '#' ] \d:모든 숫자 \D:숫자가 아닌 것(\d의 반대) var test = `1a 2b @#`; test.match(/\d/g) test.match(/\D/g) [ '1', '2' ] [ &#..

javascript 기반으로 작성합니다만, 플래그는 모든 언어에서 비슷하므로 플래그에 대한 이해에는 도움이 될 것입니다. 하단으로 내려갈수록 기존 플래그를 활용하는 부분도 있습니다. 원활한 이해를 위해 플래그 순서대로 읽어주세요! 정규식 패턴에 대한 내용이 궁금하다면 아래 글을 참고하세요. 예제로 정리한 정규식 패턴 1. 정규 표현식을 사용하는 방법 정규 표현식 선언 방법 // new RegExp('정규식', '플래그'); let regExp1 = new RegExp('hello', 'g'); // /정규식/플래그; let regExp2 = /hello/g; regExp1 new RegExp('정규식', '플래그')는 ..

1. 오류 저는 swiper-bundle.min.js 를 호출했더니 발생한 오류입니다. 2. 원인 문제의 원인을 이해하기 위해서는 sourceMap이 무엇인지 부터 알아야 합니다. 우선 JS와 CSS는 특정 도구(webpack)들을 이용해 번들링 되어 난독화&압축됩니다. 우리가 가끔 jquery 구문의 오류가 발생할 경우 어디서 발생한 오류인지 찾기 어려울 때가 있습니다. 브라우저의 디버깅 툴은 난독화된 코드에서 에러를 가리키기 때문에 어디서 발생한 오류인지 찾기 어렵습니다. sourceMap은 원본코드를 어떠한 알고리즘으로 인코딩하여 키워드로 매핑시켜놓은 것을 뜻합니다. 브라우저에서는 이렇게 인코딩된 것을 디코딩하여 복원시킬 수 있습니다. 그리고 이러한 sourceMap 파일을 연결하는 것이 sourc..

Babel 이란? 자바스크립트는 실행 환경에 따라 최신 문법을 사용할 수도 있고, 사용하지 못할 수도 있습니다. 이러한 실행 환경에 맞춰서 항상 최신 문법의 자바스크립트로 코딩이 가능하도록 도와주는 도구입니다. Babel 을 사용하는 이유 예제 코드 let a = 1; let b = 2; const sum = (x, y) => x + y; console.log(sum(a, b)) // 3 흔히 람다라고 불리는 화살표함수(=>)는 ES6 부터 사용할 수 있습니다. 일반적으로 IE 에서는 ES5 까지만 지원하기 때문에 해당 코드를 사용하면 오류가 발생합니다. 이를 해결하기 위해서는 ES6 코드로 작성한 부분을 실행환경에 맞게 변경할 수 있어야 합니다. 이를 도와주는 도구가 'Babel' 입니다..

Split 할 때 맨 뒤에 구분자가 붙으면 배열에 빈 값이 하나 들어옵니다. 이를 제거하기 위해 데이터를 전처리 하는 과정이 필요합니다. 전처리 하기 위한 여러가지 방법입니다. split: 기본적인 방법 let text = "123.456.789."; let text_split = text.split("."); console.log(text_split); ['123', '456', '789', ''] split: 공백제거하기 방법 1: filter filter() 를 사용해 조건을 통과하는 값만 남긴다.let text = "123.456.789."; let text_split = text.split(".").filter(Boolean); conso..