본문 바로가기
반응형

언어68

[js] 옵셔널 체이닝(optional chaining)_'?.' 옵셔널 체이닝(optional chaining)이란? 옵셔널 체이닝 "?."을 사용하면 속성이 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 진행한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); 출력값 TypeError: Cannot read property 'street' of undefined 위와 같이 에러가 발생한다. ?.이 추가되기 전엔 이런 문제들을 해결하기 위해 && 연산자를 사용했었다. let user = {}; // 주소 정보가 없는 사용자 alert( user && user.. 2023. 4. 18.
[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.
반응형