HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS
-
meterial ui datetimepicker 설정시 유의점HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2022. 11. 4. 15:06
meterial ui datetimepicker 값 설정시 유의점 개인적으로 프로젝트 진행시 reactjs + mui 조합을 가장 많이 사용합니다. 익숙한 이유도 크지만, 기능 추가 등의 지원이 mui를 사용하는 가장 큰 이유 입니다. mui 4.X에서는 beta 버젼으로 제공 되었고 오류를 꽤 가지고 있었지만, mui-x 5.x에서는 좀 더 안정된 datepicker를 제공(22.06.24 기준 5.0.0-alpha.6) 하기 시작했습니다. mui-x 5.x 컴포넌트 중 datetimepicker를 사용할때 유의 사항을 작성하여 봅니다. datetimepicker의 value는 any 타입을 받아서 처리 할 수 있습니다. 하지만 문자열로 설정하면 값이 화면에 안그려지거나, 갱신이 안되는 경우가 발생합니..
-
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 12. 23. 02:15
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 내가 만든 React 모듈을 rollup으로 빌드 후 사용할때 위와 같은 오류를 만났습니다. 원인으로 peerDependencies 설정을 하지 않아서 발생했습니다. package.json에 다음과 같이 peerDependencies 를 설정하고 모듈을 배포 하면 해당 오류가 사라졌습니다. "peerDependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" },제가 사용한 rollup.conf 파일은 아래와 같습니다. import peerDepsExternal from "rollup-plu..
-
클립보드의 이미지를 업로드 후 화면 표기 처리HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 12. 17. 02:10
onPaste contentEditable 을 이용한 이미지 붙여 넣기 처리 페이스북 댓글창에서 클립보드에 저장(Ctrl+C) 된 이미지를 붙여넣기(Ctrl+V)를 하면, 이미지가 업로드 되는 것을 확인 할 수 있습니다. 이를 구현 하기 위해서는 우선 다음 HTMLElement.onpaste 이벤트에 대하여 알아야합니다. 간단하게 요약하면 붙여넣기를 처리할때 호출되는 이벤트 인데요. 붙여넣는 이벤트에서 이미지일 경우 업로드 처리를 하면 됩니다. 구현하기 구현은 React.js기반으로 구현 하였습니다. import React from "react"; import axios from "axios"; import MockAdapter from "axios-mock-adapter"; import "./style..
-
reactjs 합성 사용하기HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 7. 9. 00:04
Reactjs에서는 상속보다 더 강력한 합성을 제공합니다. 상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다. 합성의 사용 예제는 아래와 같습니다. function SplitPane(props) { return ( {props.left} {props.right} ); } function App() { return ( ); }와 동일한 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 props로 전달할 수 있습니다. 참고자료 합성 (Composition) vs 상속 (Inheritance)
-
tailwindcss with ReactJSHTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 2. 21. 18:02
tailwindcss with ReactJS tailwindcss는 html에 class를 이용해서 화면을 구성하는 방식의 css 라이브러리 입니다. 이 방식의 장점은 HTML만으로 직관적인 화면을 구성 할 수 있습니다. ReactJS에서 tailwindcss를 사용하기 위해서는 몇가지 설정을 해야 합니다. 다음 설정을 따라 하면 tailwindcss를 사용할 수 있습니다. 작업을 시작하기 전에 다음 사항을 유의하셔요. nodejs 12.13.x 이상 버젼만 가능합니다. 1. react 프로젝트 생성하기 npx create-react-app my-project cd my-project2. tailwind css 설정하기 npm install tailwindcss@npm:@tailwindcss/postcs..
-
JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJSHTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 2. 19. 17:59
JSON 데이터를 xlxs 형식으로 다운로드 하기 by ReactJS 일반적으로 json 데이터를 xlsx로 서버단에서 변환하고 response로 쏘아서 다운로드를 하고 있습니다. ReactJS를 사용하면서, 화면내에 있는 데이터를 xlsx로 다운로드 하고 싶어서 찾아보니, file-saver라는 모듈이 있네요. jons을 XLSX형식으로 변환하는 모듈은 xlsx을 사용하였습니다. 예제 #index.jsx import "./styles.css"; import { saveAs } from "file-saver"; import * as XLSX from 'xlsx'; export default function App() { const fileType = "application/vnd.openx..
-
Reactjs의 setState는 비동기(asynchronous)로 동작 합니다.HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 1. 10. 04:25
Reactjs의 setState는 비동기(asynchronous)로 동작 합니다. ReactJS의 useState는 비동기로 동작합니다. 다음의 코드는 이전 값으로 통신을 하게 됩니다. import React from "react"; import "./styles.css"; export default function App() { const [val, setVal] = React.useState(""); const callAjax = () => { console.log(val); }; const changeVal = (cVal) => { setVal(cVal); callAjax(); }; return ( Reactjs setState is asynchronous changeVal(e.target.valu..
-
Docker image로 vue build 시 오류 원인HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS 2021. 1. 7. 04:20
Docker image로 vue build 시 오류 원인 갑자기 빌드시 아래와 같은 오류가 발생했습니다. 원인은 yarn 설치시 NODE_ENV 를 production으로 설정되어 발생합니다. I found my problem. I was inadvertently setting NODE_ENV to production in my docker-compose so all NPM dev dependencies (including vue-cli-service) were not being installed. 를 보면, yarn install 시 vue-cli-servie를 설치 하지 않아서 발생합니다. 해결 방법으로는 ENV (환경변수)를 yarn install 후 build 하기 전에 설정하세요 해결 된 Doc..