본문 바로가기
728x90
반응형

분류 전체보기539

axios와 fetch의 차이, 장점, 단점 axios와 fetch는 둘 다 JavaScript에서 네트워크 요청을 처리하는 방법 중 하나로, 각각의 장점과 단점이 있습니다. axios: 장점 간편한 에러 핸들링: axios는 HTTP 요청 중에 발생하는 에러를 쉽게 처리할 수 있도록 해줍니다. 예를 들어, 요청 실패, 타임아웃, 네트워크 에러 등에 대한 처리가 간단합니다. 요청과 응답 인터셉터: axios는 요청과 응답을 가로채고 변형시키는 데 사용할 수 있는 인터셉터(Interceptor)를 제공합니다. 이를 통해 요청과 응답의 전/후 처리를 커스터마이즈할 수 있습니다. 자주 사용되는 설정: axios는 기본적인 설정을 가지고 있으며, JSON 파싱, 쿠키 설정, 헤더 설정 등을 쉽게 할 수 있습니다. 크로스 브라우징: axios는 다양한 브라.. 2023. 10. 31.
[PIP 모드 키기] 리액트로 Picture In Picture 창 켜보기 라이브러리 사용 PIP 모드란? 오른쪽 하단 작은 창을 의미한다. PIP = Picture In Picture (사진 속 사진?) 리액트에서 라이브러리 사용하여 간단히 구현 가능하다. 😎 install npm i react-use-pip 😎 import import usePictureInPicture from 'react-use-pip' 😎Script const videoRef = useRef(null) const { isPictureInPictureActive, //PIP 모드가 활성인지 비활성인지 여부 isPictureInPictureAvailable, //PIP 모드가 지원되고 활성화되었는지 여부 togglePictureInPicture, } = usePictureInPicture(videoRef) 😎HTML { .. 2023. 10. 31.
[NextJs 시작하기] URL 생성 규칙 ✔ 컴포넌트의 기본 구조 export default function Home(){ return 'home'; } ✔ 기억해야할 규칙 component 를 export default 해야한다는것 (단 component 의 이름은 중요하지 않다.) URL 의 이름은 파일명이 된다. React 를 Import 할 필요없다.* (useState useEfftect같은 react method 를 쓰고 싶다면 임포트 해야한다.) 2023. 10. 24.
[NextJS 시작하기] 오토 라우팅 (?) version 13이후 라우팅 앱을 생성했을때, 기본적인 폴더 구조는 이러하다. (pages 폴더 제외) 자동 라우팅 가능은 pages 폴더에 생성하면 된다고 공홈에서 설명해주었으나 local:3000에서 라우팅 되지않았다. ✔ 폴더구조 2023년 6월 기준 NextJS 13부터는 pages 폴더가 자동생성 되지 않고, app 폴더가 생성된다. 이전 버전 : root/pages/about.js => /about 13부터 : root/app/about/page.js => /about 13버전 이후부터는 위처럼 라우팅 할수있다. 1. pages폴더 내에 있는 파일이름이 접속할 수 있는 URL의 이름이 된다. 2. pages폴더 내에 있는 파일에는 반드시 export default가 있어야 한다. 3. 404 error page를 next.. 2023. 10. 24.
[NextJS 시작하기] npx create-next-app@latest 생성하고싶은 경로에서 npx create-next-app@latest (.)점은 현재경로에 설치하겠다. 라는 의미 프로젝트 명 작성후 추가적 옵션을 선택하면된다. 13버전 이후 도입된 app router 기능을 사용하기위해 app router 옵션을 선택해준다. 13버전 이전 - page router 13버전 이후 - app router 😎개발 서버실행 실행 명령어 npm run dev 기본적으로 :3000 포트에 실행된다 😎 배포서버 npm run build 하면 .next 폴더에 배포버전이 만들어진다. 2023. 10. 24.
[대시보드] amcharts 라이브러리 사용 리액트 누적 막대 그래프 만들기 어렵지 않게 누적 막대그래프 만드는 코드 입니다. amcharts 라이브러리를 임포트 해줍니다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조는 이러합니다. Arr가 아닌 Obj 구조 var data = [ {"date": "2023-10-01","A": 5,"B": 2,"C": 0,"D": 1,"F": 1,"G": 1}, {"date": "2023-10-02","A": 12,"B": 13,"C": 0,"D": 1,"F": 1,"G": 1}, {"da.. 2023. 10. 17.
React PC/Mobile 접속 기기별 라우팅 react-device-detect npm install react-device-detect 인스톨 실패시 npm install react-device-detect --force import { BrowserView, MobileView, isBrowser, isMobile } from "react-device-detect"; function App() { return ( 브라우저 접속시 뜨는 페이지 모바일 접속시 뜨는 페이지 ); } 2023. 9. 20.
자바스크립트 비밀번호 정규식 2023ver 최소 8 자 및 최대 20 자, 하나 이상의 대문자 + 하나의 소문자 + 하나의 숫자 + 하나의 특수 문자 정규식 const regex_pwd = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#.~_-])[A-Za-z\d@$!%*?&#.~_-]{8,20}$/ 최소 8 자 및 최대 20 자, 하나 이상의 대문자 or 하나의 소문자 + 하나의 숫자 + 하나의 특수 문자 정규식 const regex_pwd = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&#.~_-])[A-Za-z\d@$!%*?&#.~_-]{8,20}$/ 최소8 자, 최소 하나의 문자 + 하나의 숫자 (특수문자X) const regex_pwd = /^(?=.*[A-Za-z])(?=.*\d.. 2023. 9. 18.
GROUP_CONCAT ORDER BY 그룹 콘캣 사용지 오더바이가 먹지 않은 이슈가 있다. SELECT CONCAT('[',GROUP_CONCAT('"',t200.LOGIN_DTM ,'"'ORDER BY t200.LOGIN_DTM DESC SEPARATOR ',' ),']' ) AS ARR FROM ( SELECT t100.ID ,t100.LOGIN_DTM FROM TB_MEMBER t100 WHERE t100.USER_ID = 'TEST01' ) t200 위형식은 그룹 콘캣에 오더바이를 넣어서 '배열' 형식으로 출력한것이다. GROUP_CONCAT(t200.LOGIN_DTM ORDER BY t200.LOGIN_DTM DESC) 그룹콘캣 오더바이만 사용시 위코드 처럼 사용가능 2023. 9. 18.
728x90
반응형

티스토리툴바