본문 바로가기
반응형

언어47

[js, ts] 정규식을 이용하여 공백, 전화번호에서의 -, 특수문자 제거 함수 [js, ts] 정규식을 이용하여 공백, 전화번호에서의 -, 특수문자 제거 함수등 export const trimAll = (str: string) => { const trimStr = str.replace(/\s/g, ""); return trimStr; }; 공백을 제거하는 함수이다. export const trimHpNumber = (str: string) => { const trimStr = str.replaceAll("-", ""); return trimStr; }; 전화번호 ( - ) 제거하는 함수이다. const EX_MARK: /[\{\}\[\]\/?.,;:|\)*~`!^\-_+@\#$%&\\\=\(\'\"]/gi, // 특수문자가 들어가 있는가? export const CHAR_DEL =.. 2023. 4. 7.
[js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) [js, Next.js] 웹페이지 접속기기 종류 체크(모바일, 웹) 1. 반응형 웹을 사용할 때, css의 @media screen을 통해 PC와 모바일 화면을 다르게 설정한다. 2. 독자적인 모바일 기기용 UI를 구현할 경우, 홈페이지에 접속하는 기기가 모바일 기기 여부 또는 안드로이드 인지 아이폰인지 종류를 확인을 해야하는 경우가 생긴다. 3. 모바일 화면에선 일부 css나 자바스크립트를 로드하지 않게 하여 성능 최적화를 노릴때도 모바일 기기 감지가 필수적이다. 모바일 / PC 구분하기 ​자바스크립트에서 접속자의 브라우저 정보 및 디바이스 정보를 가지고있는 User-Agent 라는 객체를 사용하여 아이폰, 아이패드, 아이팟, 안드로이드 기기 여부를 확인해 true/false를 반환하는 방식으로 간편하.. 2023. 4. 6.
[TypeScript] Object(객체)를 입력받아 values의 길이가 너무 긴 것을 "[values 글자 수 제한] + ... "로 바꾸기 [Next.js, ts, js] 객체의 values 길이 제한을 둬 "[values 글자 수 제한] + ... "으로 필터링하기 // 제한하고싶은 글자수 길이 let MAXLENGTH = 15; // 일반 함수식 + any타입을 제거하면 js에서 사용가능 export const dataLengthFilter: any = (list: any) => { for (let i = 0; i MAXLENGTH) { console.log(i, key, values.slice(0, MAXLENGTH-1)); list[i][key] = valu.. 2023. 4. 5.
[js] 배열 .filter() 메소드 ( 배열, 객체에서 필터링 ) [js] Array.prototype.filter() 메소드를 사용하여 여러가지 상황에서 사용할 수 있는 필터링 예제 Array.prototype.filter()란? filter() 메소드는 함수에 의해 구현된 테스트를 통과하는 배열의 요소로만 필터링된 원 배열의 일부에 대한 얕은 복사본을 만든다. 문법 (arrow 함수만 ) filter((element) => { /* … */ }) filter((element, index) => { /* … */ }) filter((element, index, array) => { /* … */ }) Array.prototype.filter() 예제 1. 배열 요소의 길이가 6보다 큰 배열을 출력하는 예제 const words = ['spray', 'limit', '.. 2023. 3. 30.
AJAX란?, AJAX사용방법 AJAX란? AJAX (Asynchronous JavaScript And XML)는 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술이다. * 서버는 데이터를 요구하면 데이터를 보내주는 프로그램이다. 유튜브, 넷플릭스 등은 고객(클라이언트)이 영상 데이터를 요구하면 서버에서 영상데이터를 보내준다. 네이버 웹툰, 카카오 웹툰 등은 고객(클라이언트)이 웹툰(이미지) 데이터를 요구하면서버에서 웹툰데이터를 보내준다. 데이터를 가져오기 위해서는 개발자가 만든 API를 사용해야 한다. 원하는 데이터 URL이 뭔지 알아야하고 해당 URL로 GET요청을 해야한다. 따라서 GET요청을 하는 URL을 직접입력하여 요청하거나 요청 위 코드와 같은 버튼을 눌러 해당 요청 URL을 GET하는 방법이 있다. 하지만 위와 같.. 2023. 3. 29.
[js] 현재 페이지 URL 관련 정보를 가져오기 Javascript를 사용해 현재 페이지의 URL을 가져오는 방법 예시 코드) React, js에서 현재 페이지 URL 관련 정보를 가져오는 방법 현재 페이지의 URL을 http://dev.kfdd6630.net:3000/blog/post?page=1 라고 가정하자. 1. window.location.href = 현재 페이지의 href (URL) 반환한다. console.log(window.location.href); 출력값 http://dev.kfdd6630.net:3000/blog/post?page=1 2. window.location.host = 호스트의 도메인 네임 / 포트 번호 반환한다. console.log(window.location.host); 출력값 dev.kfdd6630.net:3000.. 2023. 3. 28.
[js] 객체안에 함수넣기 [js] 객체안에서 함수를 사용하는 방법, 조심해야할 점 1. 객체안에서 함수를 사용하는 4가지 방법 const buttonData = [ { btnBlue: "로그인", active: function test() { console.log("파란색 로그인버튼 눌림!"); }, }, { btnBlue: "검색", active: function () { console.log("파란색 검색버튼 눌림!"); }, }, { btnWhite: "로그인", active() { console.log("하얀색 로그인 버튼 눌림!"); }, }, { btnWhite: "검색", active: () => { console.log("하얀색 검색버튼 눌림!"); }, }, ]; buttonData[0].active(); but.. 2023. 3. 27.
[js] Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등) Dayjs 라이브러리 (설치방법, i18n, 객체생성, get(), set(), DateFormat 설정 등) Dayjs 라이브러리란? Dayjs 라이브러리는 Javascript에서 날짜/시간을 쉽게 파싱하고 계산할 수 있도록 도와주는 Date 라이브러리이다. 1. Dayjs 라이브러리 설치방법 npm install dayjs --save 2. API 참조: i18n 100여개 이상의 다국어를 지원하고 사용하지 않은 것은 빌드에 포함되지 않는다. 100여개 이상의 다국어, 자세한 locale을 확인하는 링크 https://github.com/iamkun/dayjs/tree/dev/src/locale GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time lib.. 2023. 3. 24.
[js] 자바스크립트 Date객체 (기간 조회 및 날짜 계산) 자바스크립트 Date객체 (기간 조회 및 날짜 계산) 자바스크립트 Date 객체 기본적으로 자바스크립트의 Date 객체는 setMonth(), setDate()를 이용하여 날짜를 직접 지정할 수 있는 기능을 제공하고, setMonth(월 + N) 과 같은 기능을 통해 날짜 계산이 가능하다. 예) // 직접 날짜를 지정하는 방식 let birthday = new Date('February 2, 1997 03:24:00') let birthday = new Date('1997-02-2T03:24:00') let birthday = new Date(1997, 1, 2) // 월은 0부터 시작 let birthday = new Date(1997, 1, 2, 3, 24, 0) // Date의 연도에 0부터 99까.. 2023. 3. 24.
[js] 콜백지옥 코드 수정 콜백지옥이란? 1. 콜백지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다. 2. 콜백함수를 이용해서 비동기 로직처리 시, 코드가 깊어지는 것을 말한다. 3. 일반적으로 콜백지옥을 해결하는 방법에는 Promise 나 async & await를 사용하는 방법이 있다. 콜백지옥 -> Promise -> async & await 순서로 수정한다. 콜백지옥 예시 코드) class UserStorage{ loginUser(id, password, onSuccess, onError){ setTimeout(() =>{ if( id === 'kfdd6630' && password === '123' ) { onSuccess(id); } else{ onError(new Error('error.. 2023. 3. 23.
반응형