Ellen's Web Note

임신 중반을 넘어가고 있는 시점. 구경하러 육아용품 매장에 방문했다가 유모차 하나를 발견. 아직 아기가 태어나려면 기간이 남기는 했지만.... 오래 고민하다가 눈에 밟혀서 결국 구매! 잉글레시나 일렉타 엘리멘트 유모차. 일단 디자인도 마음에 들었고 움직여보니 안정감도 있고 폴딩이 쉽더라구요. 손잡이 높이조절도 되고 시트도 양방향 설치 가능했어요. ​​ 차양막은 다리까지 다 덮일정도이고 한쪽은 메쉬로된 양방향 이너시트, 레인시트에 다리덮게?등등 사은품으로 받은 모빌까지 필요한 악세사리는 다 있는것 같아서 나중에 따로 더 구매할거는 없을 것 같아요. ​​ 주문하고 배송은 딱 일주일 걸렸고, 나중에 잘 사용할 수 있을것 같아요 :)

숫자만 입력 확인 const verifyNumber = (value: string) => { return !isNaN(Number(value)); }; 생년월일 입력 확인 const verifyBirth = (value: string) => { const regExp = /^((?:19|20)(?:[0-9]{2})(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))$/; return regExp.test(value); }; 전화번호 입력 확인 const verifyTelNumber = (value: string) => { let regExp = null; switch (value.length) { case 12: regExp = /(\d{4}).*(\d{3}).*(\d{4}..

export function removeConsole() { console.log = function no_console() { /* remove console log */ }; console.warn = function no_console() { /* remove console warn */ }; console.error = function no_console() { /* remove console error */ }; }

전화번호에 하이픈(-) 넣기 export const formatTelNumber = (value: string): string => { let formatvalue = ''; switch (value.length) { case 12: formatvalue = value.replace(/(\d{4})(\d{4})(\d{4})/, '$1-$2-$3'); break; case 11: formatvalue = value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3'); break; case 8: formatvalue = value.replace(/(\d{4})(\d{4})/, '$1-$2'); break; default: if (value.indexOf('02') === 0) {..

cra로 프로젝트 생성 > yarn create react-app cra_ts_jest --template typescript CRA 환경에서는 Test Runner로 Jest를 사용하고 있기 때문에 Jest를 따로 설치하지 않아도 yarn test를 통해 테스트코드를 실행할 수 있다. (프로젝트 생성 직후 yarn test 명령을 하면 App.test.tsx 테스트코드가 실행되는 것을 확인할 수 있다.) > yarn test PASS가 나온다면 완료. 실행 중 ' TypeError: expect(...).toBeInTheDocument is not a function '와 같은 에러가 발생한다면, 아래와 같이 설정. // src/setuptests.ts import '@testing-library/je..

번들링 후 번들 파일이 생성되기 직전에 후처리를 하는 기능 번들파일 하나에 대해서 동작하고, 번들된 자바스크립트를 난독화 하거나 특정 텍스트를 추출하는 용도로 사용한다. //my-webpack-plugin.js class MyWebpackPlugin { apply(compiler) { compiler.hooks.done.tap("My Plugin", (stats) => { //plugin이 완료됬을 때 동작하는 callback 함수 console.log("MyPlugin: done"); }); //번들 파일 후처리 //webpack 내장 플러그인 BannerPlugin compiler.plugin("emit", (compilation, callback) => { //번들된 main.js 파일의 소스를 가..

javascript, css, image, font등을 javscript코드로 가져와서 사용할 수 있게 함. 대표적 Loader 4가지 css-loader css파일을 자바 스크립트 모듈처럼 사용할 수 있도록 지원 (import './style.css') style-loader 자바스크립트 문자열 스타일 코드를 html에 주입시켜 브라우저에 스타일이 적용되도록 지원 //webpack.config.js { ... module : { rules:[ ..., { test: /\.css$/, use: ["style-loader", "css-loader"], }, ..., ] } } .css파일이 있으면 style-loader와 css-loader를 실행 file-loader 이미지 파일을 모듈러 사용할 수 있도..

모듈을 사용하게 되면 아래의 왼쪽과 같은 모듈간 의존 관계가 발생함. 모듈관계의 시작점을 통해 관계된 모든 모듈들을 ./dist/main.js 번들링 파일로 만듬. package 설치 > npm install -D webpack webpack-cli webpack : bundle 작업 실행(모듈로 연결된 스크립트 파일을 하나로 합침(이미지 왼쪽)) webpack-cli : webpack을 터미널 명령으로 사용할 수 있게 함. 실행파일(bundle file) 선언 ... ... webpack option --mode : "development" 개발환경의 정보를 추가, "Production" 운영에 배포하기 위한 최적화 설정 --entry : 모듈의 시작점 지정 --output : 웹팩의 모든 모듈을 합치..