본문 바로가기

Front-end100

[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.
배열중 가장 작은 날짜값 뽑아내기, 가장 큰 날짜값 뽑아내기 let min = startArr.reduce((prev,curr) => { // 이전것과 비교해 더 작은 것 리턴 return new Date(prev).getTime() { // 이전것과 비교해 더 큰 것을 리턴 return new Date(prev).getTime() 2023. 9. 5.
배열 합치기, 배열 중복 제거하기 var merged = checkItems.concat(temp); // 기존 배열 + 추가 배열 합치기 var unique = merged.filter((item, pos) => merged.indexOf(item) === pos); //중복제거 2023. 9. 5.
[대시보드] amcharts 라이브러리 사용 리액트 Pie 차트 amcharts 로 차트를 생성하는 코드이다. amcharts 중 버전 5 사용 amcharts 를 install 하고 import 해준다. import * as am5 from "@amcharts/amcharts5"; import * as am5percent from "@amcharts/amcharts5/percent"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조 let data = { {category : '기억' , value : 1 } , {category : '니은' , value : 1 } , {category : '디귿' , value : 1 } , .... .... {category : '히읏' .. 2023. 8. 30.
[대시보드] amcharts 라이브러리 사용 리액트 Bar 차트 amcharts 로 차트를 생성하는 코드이다. amcharts 중 버전 5 사용 amcharts 를 install 하고 import 해준다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조 let data = { {category : '기억' , value : 1 } , {category : '니은' , value : 1 } , {category : '디귿' , value : 1 } , .... .... {category : '히읏' , value : .. 2023. 8. 27.
ReactQuill 리액트 글쓰기 에디터 이미지 드롭하여 삽입하기 ReactQuill 을 사용하면서 기본만 사용하기엔 불편한 부분들이 많다. 정말 쉬운 작업으로 이미지를 드롭하여 인서트 할수 있는 기능을 소개한다. import ReactQuill , {Quill} from "react-quill" import '../../assets/css/quill.snow.css' import { ImageDrop } from "quill-image-drop-module"; Quill.register("modules/imageDrop", ImageDrop); const modules = useMemo(()=>{ return { // table: true, // tableUI: true, toolbar: { container: toolbarOptions, }, // ImageResi.. 2023. 8. 14.
728x90
반응형

티스토리툴바