본문 바로가기
반응형

js29

[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] 유한수인지 판별하는 isFinite() 메소드 [js] 유한수인지 판별하는 isFinite() 메소드 정리 isFinite() 전역 함수는 주어진 값이 유한수인지 판별합니다. 필요한 경우 매개변수를 먼저 숫자로 변환한다. 문법 isFinite(testValue); 매개변수 ( testValue ) 유한한지 판별할 값이다. 반환 값 testValue가 양 또는 음의 Infinity, NaN, 또는 undefined면 false, 아니면 true가 출력된다. 예제) console.log( isFinite(Infinity), isFinite(NaN), isFinite(-Infinity), isFinite(0), isFinite(2e64), isFinite(-910), isFinite(null), isFinite('0') ); Infinity, NaN, -.. 2023. 3. 30.
[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.
[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] 자바스크립트 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] try...catch, finally 정리 try...catch문, finally 블록 정리 1. try...catch문이란? 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할 경우의 응답을 지정한다. try { // 수행하고싶은 로직을 수행한다. doSomething(); } catch (error) { console.error(error); } 위 코드에서 doSomething() 부분에서 error 발생시 console에 error가 출력된다. 2. try...catch문 문법 try { try_statements } [catch (exception_var) { catch_statements }] [finally { finally_statements }] try_statements: try 블록에서 실행될 선언들이다... 2023. 3. 23.
[js] 콜백함수(callback) 콜백함수란? 콜백함수를 매개변수로 받는 함수 만드는 방법, 콜백지옥이란? 콜백함수(Callback function)란? 1. 콜백함수는 다른 함수에 매개변수로 넘겨준 함수를 말한다. (함수에 파라미터로 들어가는 함수) 2. 함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출된다. 3. 함수를 순차적으로 실행하고 싶을 때 사용한다. 콜백함수를 매개변수(parameter)로 받는 함수 만드는 방법 예제코드) function sayOne(params){ console.log(1); params(); } function sayTwo(){ console.log(2); } sayOne(sayTwo); 1. sayOne은 콜백함수 필요한 함수 2. sayTwo가 콜백함수이다. 3... 2023. 3. 21.
[js] 동기적(synchronous)? 비동기적(Asynchronous)? JavaScript에서 동기적 / 비동기적의 차이 및 예제, 비동기적 실행 방식 등 자바스크립트(Javascript)는 동기적이다. 호이스팅(hoisting) 후 코드 블록을 순서대로 실행한다. 호이스팅이란? 2023.02.04 - [개발 용어 정리] - [js] hoisting(호이스팅) [js] hoisting(호이스팅) javascript_호이스팅(hoisting) 이란? = 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것이다. (var, 함수의 경우가 있다) 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 kfdd6630.tistory.com 동기적(Synchronous)이란? 1. 어떤 작업을 요청했을 때 그 작업이 종료되고 다음 작업을 수행하는 방식이다. 2. 프로.. 2023. 3. 21.
반응형