반응형

js 9

JavaScript / Vanilla JS :: input file 이미지 미리보기, 삭제 :: image preview and remove

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 태그 동적 비활성화 :: a 태그 링크 제거

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

JavaScript 에서 정규식 활용하는 방법들

정규식 플래그에 관한 내용이 궁금하다면 아래 글을 참고해 주세요. 정규 표현식/정규식(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 변환까지

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 을 사용해 오류 없는 javascript 코드를 만들자!

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' 입니다..

JavaScript: split 공백값 제거하는 여러가지 방법

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

JavaScript 문자열 중복 제거하기

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

반응형