본문 바로가기
반응형

전체 글281

[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.
[MongoDB] 몽고DB Dump & Restore (Backup) Dump 서비스할 웹사이트의 데이터베이스는 DBNAME이며 접근을 위한 uri와 password를 설정파일(.yaml)로 미리 작성한다.uri에는 엔드포인드와 username, db명이 포함된다. (mongoDB uri string Path) password의 경우 !로 끝날경우 uri에 포함될 시 파싱에러가 발생하여 별도로 분리해야한다. uri: uri: "mongoDB주소(mongodb://id:pathword@ ~ / db명 ? replicaSet = ..)" password: "mongoDB비밀번호" 웹사이트의 db로부터 백업을 받을 때 다음의 명령어를 이용한다. mongodump --config="YAML파일 이름".yaml --forceTableScan Restore 설정파일 ("YAML파일 .. 2023. 4. 4.
[Nextjs] client의 IP주소를 가져와 비교하여 특정 IP주소에서만 홈페이지 이용을 허용 [Nextjs] client의 IP주소를 가져와 비교하여 dev, qc서버를 허용하고 싶은 IP 주소 (ex. 회사 IP주소 or 집 IP 주소)가 아니라면 리다이렉트하기 1. Next.js에서 client의 IP주소를 가져오는 방법 axios.get("https://geolocation-db.com/json/").then((res) => { console.log(res?.data?.IPv4); }); 출력값 "내가 사용하고 있는 IP주소가 string 형태로 출력" 2. router를 사용하여 외부주소로 리다이렉트하는 방법 import { useRouter } from "next/router"; const router = useRouter(); router.push("redirect하고 싶은 주소");.. 2023. 4. 3.
[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.
AJAX란?, AJAX사용방법 AJAX란? AJAX (Asynchronous JavaScript And XML)는 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술이다. * 서버는 데이터를 요구하면 데이터를 보내주는 프로그램이다. 유튜브, 넷플릭스 등은 고객(클라이언트)이 영상 데이터를 요구하면 서버에서 영상데이터를 보내준다. 네이버 웹툰, 카카오 웹툰 등은 고객(클라이언트)이 웹툰(이미지) 데이터를 요구하면서버에서 웹툰데이터를 보내준다. 데이터를 가져오기 위해서는 개발자가 만든 API를 사용해야 한다. 원하는 데이터 URL이 뭔지 알아야하고 해당 URL로 GET요청을 해야한다. 따라서 GET요청을 하는 URL을 직접입력하여 요청하거나 요청 위 코드와 같은 버튼을 눌러 해당 요청 URL을 GET하는 방법이 있다. 하지만 위와 같.. 2023. 3. 29.
[Next.js] window is not defined, document is not defined 1. Next.js에서 window is not defined, document is not defined가 출력되는 이유 1. Next.js는 서버측에서 움직이는 SSR(Server Side Rendering)과 클라이언트 측에서 움직이는 CSR(Client Side Rendering)을 수행하는 프레임워크이다. 2. document, window 두 객체는 클라이언트 측에서만 정의되는 전역 변수이다. 3. 서버측에서 Redeing을 할 때, 코드를 읽으면서 document와 window 두 객체를 읽을 수 없기 때문에 window is not defined, document is not defined 두 error가 출력된다. 4. 따라서 document, window를 쓴다면 서버쪽에서 docume.. 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.
[Next.js] <Link> 태그 사용 Next.js에서 URL 혹은 경로이동을 할 때, Link 태그 사용 pages 하위 디렉토리 구조일 때 pages/index.js pages/about.js pages/blog/[slug].js import Link import Link from 'next/link' 사용하는 방법 // pages/index.js Home // pages/about.js About Us // pages/blog/[slug].js Blog Post Link의 props정리 필수 값 1. href ... 이동할 경로 혹은 URL을 입력한다. 옵션 값 1. as ... 브라우저의 주소창에 표시될 URL을 입력한다. 2. passHref (기본값: false) next Link에서 하위 컴포넌트로 href 속성을 전달해주는 역.. 2023. 3. 27.
반응형

티스토리툴바