💻개발/React,Vue

기본적인 캘린더 커스텀 후 import React from "react"; import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin! import "./CustomCalendar.css"; function CustomCalender() { const handleDayCellContent = (arg) => { const dayNumber = arg.dayNumberText.replace("일", ""); return dayNumber; }; return ( ); } export default CustomCalender; css 파일에 아래와 같이 추가해주었다. /*..

달력에 한국어 설정을 넣어주었더니 아래 사진과 같이 디자인적으로 마음에 들지가 않았다. 그래서 '일'을 없애고자 결심! import React from "react"; import FullCalendar from "@fullcalendar/react"; import dayGridPlugin from "@fullcalendar/daygrid"; // a plugin! import "./CustomCalendar.css"; function CustomCalender() { return ( ); } export default CustomCalender;​ 아래 블로그와 공식문서의 Content Injection 부분을 참고해서 코드 구현했다. https://develop-cat.tistory.com/4 [fu..

npm install react-cookie yarn add react-cookie # 전체 코드 import {Cookies} from 'react-cookie'; const cookies = new Cookies(); export const setCookie = (name : string, value : string, option?:any) => { return cookies.set(name, value, {...options}); import {Cookies} from 'react-cookie'; const cookies = new Cookies(); Set export const setCookie = (name : string, value : string, option?:any) => { retu..

위와 같은 코드를 쳤는데, f12를 보니 undefined라고 정의됌 react는 환경 변수 설정 시에 변수명에 REACT_APP_이라는 접두어가 꼭 필요함!! 작성할 때는 홑, 쌍따옴표 필요없다. 알아서 string으로 인식 줄 끝에 , ;가 필요하지 않다 루트 경로에 있는지 확인한다. .gitignore에 포함시키기 주석은 # 키=값 =의 양옆 띄어쓰기 금지 파일 변경하면 개발 서버 다시 시작해야한다. https://velog.io/@rmaomina/react-env React에서 .env 환경변수 사용하기 외부 api에 접근하기 위해 token 등이 필요한 경우, 배포하지 않고 개발환경에만 적용할 수 있도록 환경 변수를 설정해야 한다. .env 파일을 가지고 process.env로 가져오는데, nu..

📂Content Intro Vue.js 컴포넌트 기반의 SPA를 구축할 수 있게 해주는 프레임워크 컴포넌트(Component) 웹을 구성하는 로고, 메뉴바, 버튼, 모달창 등 웹 페이지 내의 다양한 UI 요소 재사용 가능하도록 구조화 한 것 SPA(Single Page Application) 단일 페이지 어플리케이션 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태 빠른 페이지 변환 적은 트래픽 양 Vue.CLI (Command Line Interface) vue 프로젝트를 빠르게 개발하고 빌드하고 서비스를 런칭할 수 있도록 해주는 툴 terminal을 통해서 text명령어를 입력해서 실행하는 도구 프로젝트 구조를 자동적으로 셋팅. 프로젝트 폴더 구조나 어떤 라이브러리로 구성해야하는지, 웹팩 설정..