smile-haha

저번 포스팅에서 babel 셋팅하는 것을 설명한 적이 있다. 그 때는 webpack을 이용하지 않고 babel 만 이용해서 셋팅했는데, webpack으로 babel을 셋팅하면 프로젝트 파일이 묶여 나오면서 js를 변경(es6를 es5로 또는 리액트 jsx를 js로 변환 등)할 수있다. 일단 babel-loader와 사용할 프리셋들, babel-core를 설치해야 한다. $npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react /*webpack.config.js*/ const path = require('path'); const webpack = require('webpack'); var HtmlWebpackPlugin =..

/*package.json*/ { "name": "haLibrary", "version": "1.0.0", "description": "made by ha", "main": "index.js", "scripts": { "build": "webpack --mode development", "start": "webpack serve" }, "devDependencies": { "html-webpack-plugin": "^5.5.0", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1" } } packagae.json에 script 항목에 단축 명령어와 실제 명령어를 매핑해서 저장해 놓는다. 이렇게 셋팅하고 터미널에서 n..

webpack은 여러 파일(js,css,html 등)을 하나의 파일로 묶어주는 모듈이다. webpack을 이용하기 위해서는 일단 터미널에서 webpack을 이용할 프로젝트 폴더로 이동해서, npm이나 yarn 을이용해 webpack 모듈을 설치한다. (npm은 nodeJS를 설치하면서 같이 설치되며, yarn은 npm 설치후, "npm install -g yarn" 명령어로 설치한다.) ※ -g는 global 옵션으로 설치할 모듈을 프로젝트가 아닌 시스템의 node_modules 폴더에 설치한다. 터미널을 통해 명령어를 날리기 위해서는 -g 옵션이 필요하다. $npm insatll -g webpack webpack-cli $yarn global add webpack webpack-cli 설치 후 webp..

^0\d{1,2}(-|\))\d{3,4}-\d{4}$1. (일반적인) 전화/핸드폰 번호 특징 - 0으로 시작 - 0NZ-XXXX-YYYY 또는 0NZ)XXXX-YYYY 과 같은 패턴    ※ 유선전화의 경우 편의상 지역번호에 괄호를 치는 경우가 있다. - 첫번째 자리는 2자리(02) 또는 3자리 - 두번째 자리는 3자리 또는 4자리 - 세번째 자리는 4자리 2. 정규표현식^0\d{1,2}(-|\))\d{3,4}-\d{4}$let reg = new RegExp(/^0\d{1,2}(-|\))\d{3,4}-\d{4}$/);reg.test('010-2222-1234'); //truereg.test('02-332-1234'); //truereg.test('041)332-1234'); //true 3. 정규표현식..

1. 정규표현식 테스트 사이트2. 정규표현식 시각화 사이트  정규표현식을 작성할때, 저는 주로 크롬 개발자 도구의 console창에서 테스트를 해보고는 했습니다. 그런데 이번에 검색을 해보니 정규표현식을 테스트 하기 좋은 사이트가 있어서 소개해 보겠습니다. console에서 테스트하는데 불편함을 느끼지 못했지만, 사이트 들어가서 테스트 해보니 확실히 편합니다...저는 앞으로 테스트 사이트를 이용할 것 같네요...ㅋㅋ   1. Regex101 :: 정규표현식 테스트 사이트 regex101: build, test, and debug regexRegular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Pyt..

정규표현식은 문자열을 패턴화한 것으로, 문자열 검색/치환/검사에 사용된다. 아직 정규표현식에 대해 감이 안 잡힌다면 아래 글을 보고 오자! [정규표현식] 정규표현식(Regular expression) width javascript 🎈 정규표현식(Regular expression) 정규 표현식(정규식)은 문자열에서 특정 문자 조합을 찾기 위한 패턴 🎈 언제 이용하는가? - 특정 형식의 문자열(e-mail 주소/전화번호/URL/RGB값/HEX값 등)인지 검사 // smile-haha.tistory.com [정규표현식] javascript에서 정규표현식 사용하기 정규표현식은 문자열을 패턴화한 것으로, 문자열 검색/치환/검사에 사용된다. 아직 정규표현식에 대해 감이 안 잡힌다면 아래 글을 보고 오자! [정규표현..

정규표현식은 문자열을 패턴화한 것으로, 문자열 검색/치환/검사에 사용된다. 아직 정규표현식에 대해 감이 안 잡힌다면 아래 글을 보고 오자! [정규표현식] 정규표현식(Regular expression) width javascript 🎈 정규표현식(Regular expression) 정규 표현식(정규식)은 문자열에서 특정 문자 조합을 찾기 위한 패턴 🎈 언제 이용하는가? - 특정 형식의 문자열(e-mail 주소/전화번호/URL/RGB값/HEX값 등)인지 검사 // smile-haha.tistory.com 알아두면 두고두고 쓸모있는 정규표현식을 javascript에서는 어떻게 사용할까? javascript에서 정규표현식을 사용하는 경우는 다음과 같다. - RegExp에 정의된 함수를 이용하는 경우 (test,..

정규표현식(정규식)은 문자열에서 특정 문자 조합을 찾기 위한 패턴을 나타내는 문법으로개발/문서 작성에서 알아놓으면 유용하게 사용된다.1. 정규표현식(Regular expression)이란?정규 표현식(정규식)은 문자열에서 특정 문자 조합을 찾기 위한 패턴 2. 언제 이용하는가?2.1. 특정 형식의 문자열(e-mail 주소/전화번호/URL/RGB값/HEX값 등)인지 검사//핸드폰번호 형식(3자리 숫자 - 3자리 or 4자리 숫자 - 4자리 숫자)인지 체크const reg = /^\d{3}-\d{3,4}-\d{4}$/;reg.test('010-223-1234');//true 2.2. 문자열에서 특정 값 제거/바꿔치기//숫자 제거'smile-haha@123kkeoq'.replace(/[0-9]/g,''); /..

Map과 Set은 ES6에서 새로 도입한 자료구조이다. Map은 키와 값의 집합이라 할 수있고, Set은 중복을 허용하지 않는 배열이라 할 수 있다. 🎈Map Map은 키와 값을 연결한다는 점에서 Object와 비슷한데, 아래와 같은 차이가 있다. - Map은 프로토타입 체인에서 자유롭다. - Map은 저장된 키와 값의 쌍이 몇 개인지 알 수 있다. - Map은 객체를 키로 사용할 수 있다. - Map은 순서를 보장한다. 사용 방법은 아래와 같다. //생성 const students = new Map(); //const students = new Map([["01",{name:'ha',age:12}],["02",{name:'roh',age:17}]]); //추가 students.set("01",{name..

🎈 대상 배열 직접 수정 함수 push / pop / shift / unshift / splice / sort var arr=['a','b','c','d']; arr.toString();//'a,b,c,d' //push - 배열의 끝에 요소 추가 arr.push('e'); arr.toString();//'a,b,c,d,e' //pop - 배열의 끝 요소 제거 arr.pop(); //'e' arr.toString();//'a,b,c,d' //shift - 배열의 처음 요소 제거 arr.shift();//'a' arr.toString();//'b,c,d' //unshift - 배열의 처음에 요소 추가 arr.unshift('a'); arr.toString();//'a,b,c,d' //★splice - 임의의..