React
자주 쓰이는 마스킹(정규식) 방법
자주 쓰이는 마스킹(정규식) 방법
2022.08.12e-commerce 및 회원정보 등에서 자주 사용하는 마스킹 방법 (정규식) 1. 천 단위 콤마( , ) 추가하기 const addComma = (num: number) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); }; console.log('addComma - result : ', addComma(123456789)); 2. 휴대폰 번호 하이픈( - ) 추가하기 const addHyphen = (phoneNum: String) => { if (!phoneNum) return ''; return phoneNum.replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`); }; console.log('..
[React] moment 활용해서 보여지게 설정하기
[React] moment 활용해서 보여지게 설정하기
2022.05.251. moment 사용하기 사용하기 위해선 moment를 먼저 install을 해준뒤 import시켜주면 된다. 한국어 or 한국시간으로 표현하기 위해 언어도 같이 import 시켜준다. npm install moment =================== import moment from 'moment'; import 'moment/locale/ko'; 2. react-use를 사용하기 setInterval()를 사용하지 않는 이유 React에서는 state가 변하면 re-rendering 되기 때문에 setInterval()함수는 무한히 실행이 된다. useEffect를 사용해도 제대로 작동하기 않고, 무한루프에 빠지기 때문에 react-use를 사용하여 useInterval를 사용한다. npm i ..
메가박스 사이트 따라 만들기 - 탭 메뉴, SKIP 메뉴
메가박스 사이트 따라 만들기 - 탭 메뉴, SKIP 메뉴
2022.02.13탭메뉴, 스킵메뉴 .siblings() 선택한 요소의 형제 요소를 선택합니다. .parent() 선택한 요소의 부모 요소를 선택합니다. 결과 HTML, js 최신 영화 소식 새로운 이벤트 새로운 영화 style.css /* 스킵 메뉴 */ #skip { position: relative; } #skip a { position: absolute; left: 0; top: -40px; width: 140px; line-height: 30px; border: 1px solid #fff; color: #fff; text-align: center; background: #333; } #skip a:active, #skip a:focus { top: 0; } 출력
메가박스 사이트 따라 만들기 - 푸터영역
메가박스 사이트 따라 만들기 - 푸터영역
2022.02.13푸터 영역 Emmit 기능 ul>li.icon.s$*5>a[#]>span white-space: nowrap; : 두 줄로 만들 때 결과 HTML 트위터 페이스북 인스타그램 구글 플레이 아이폰 앱스토어 ARS 1544-0070 회사소개 채용정보 제휴/광고/부대사업 문의 이용약관 개인정보처리방침 고객센터 윤리경영 서울특별시 강남구 도산대로 156, 2층 메가박스중앙(주) (논현동, 중앙엠앤비사옥) 대표자명 김진선 개인정보보호 책임자 경영지원실 실장 박영진 사업자등록번호 211-86-59478 통신판매업신고번호 제 833호 Copyright 2014 by MegaboxJoongAng Inc. All right reserved style.css /* 푸터 */ .footer_sns { position: abs..
메가박스 사이트 따라 만들기 - Help 영역 반응형
메가박스 사이트 따라 만들기 - Help 영역 반응형
2022.02.13헬프영역 반응형 헬프 영역을 반응형을 고려하여 css를 부여합니다. 결과 style.css @media (max-width: 1024px) { .help article.help_box1 { width: 49%; margin-right: 2%; } .help article.help_box2 { width: 49%; margin-right: 0; } .help article.help_box3 { width: 100%; margin-top: 2%; } .help article { height: auto; } .service li { width: 25%; height: auto; } .service li:nth-child(1) { border-bottom: 1px solid #d7d7d7; } .service ..
메가박스 사이트 따라 만들기 - 메가박스 할인카드
메가박스 사이트 따라 만들기 - 메가박스 할인카드
2022.02.13메가박스 할인카드 min-height 영역이 없을 경우 min-height값을 줘서 영역을 잡아줍니다. 결과 HTML 메가박스 할인카드 T멤버십 일반 영화 2,000원 현장 즉시 할인(1일 5매) T멤버십 일반 영화 2,000원 현장 즉시 할인(1일 5매) T멤버십 일반 영화 2,000원 현장 즉시 할인(1일 5매) style.css /* 할인카드 */ .card { padding: 17px; } .card ul {} .card ul li { position: relative; border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 17px; min-height: 102px; box-sizing: border-box; } .card ul li span { p..
메가박스 사이트 따라 만들기 - 공지사항
메가박스 사이트 따라 만들기 - 공지사항
2022.02.13공지사항 한 줄 효과 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 결과 HTML 공지사항 전체 공지 전체 2019.05.26 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 전체 2019.05.27 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 전체 2019.05.27 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 전체 2019.05.28 [무대인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 영화관 공지 안양 2019.05.26 [영화인사] 터미네이터6 시즌 발표 및 영상 제작 10주년 기념 라이브 쇼 인덕원 2019.05.27 [..
TypeScript - 타입 별칭(Type Alias)
TypeScript - 타입 별칭(Type Alias)
2022.02.07타입 별칭(Type Alias) Interface랑 비슷해 보인다. Primitive, Union Type, Tuple, Function, 기타 직접 작성해야하는 타입을 다른 이름을 지정할 수 있습니다. 만들어진 타입의 refer로 사용하는 것이지 타입을 만드는것은 아니다. Aliasing Primitive type MyStringType = string; const str = 'world'; let myStr: MyStringType = 'hello'; myStr = str; // 별 의미가 없다. Aliasing Union Type let person: string | number = 0; person = 'Kdong'; type StringOrNumber = string | number; let a..