고고마코드

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' ] [ &#..

TypeScript 설치해서 JavaScript 로 변환해 실행시키는 과정입니다. 기본적으로 Node 설치가 되어 있어야 합니다. Windows 10 Node.js v16.15.0 TypeScript 설치 $ npm install -g typescript -g 옵션은 global 하게, 즉 전역에 설치를 하겠다는 의미이며 보통 개별 프로젝트에만 사용할 목적이 아니기 때문에 전역에 설치를 진행합니다. TypeScript 설치 & 버전 확인 $ tsc -v 이제 설치가 완료되었으니 타입스크립트 문법으로 작성을 해보고, 자바스크립트로 변환을 하겠습니다. Transpiling (트랜스파일링) TypeScript 예제 코드 (tstest.ts) enum Color1 {Red, Green, Blue}; tstest..

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..

Set을 활용하여 문자열 중복 제거하기 문자열을 Set 형식으로 만든다. let word = "aabbccddee"; let word_set = new Set(word); console.log(word_set_ary_join); Set(5) {'a', 'b', 'c', 'd', 'e'} Set을 Array 형식으로 변환 let word_set_ary = [... word_set]; console.log(word_set_ary); ['a', 'b', 'c', 'd', 'e'] Array를 String 으로 변환 let word_set_ary_join = word_s..