본문 바로가기

HTML + JAVASCRIPT + CSS

meterial ui datetimepicker 설정시 유의점 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 타입을 받아서 처리 할 수 있습니다. 하지만 문자열로 설정하면 값이 화면에 안그려지거나, 갱신이 안되는 경우가 발생합니.. 더보기
javascript hoisting JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 호이스팅을 설명할 땐 주로 “변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는” 것으로 말하곤 합니다. 따라서 변수를 정의하는 코드보다 사용하는 코드가 앞서 등장할 수 있습니다. 다만 선언과 초기화를 함께 수행하는 경우, 선언 코드까지 실행해야 변수가 초기화된 상태가 됨을 주의하세요. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. let과 const로 선언한 변수도 호이스팅 대상이지만, var와 달리 호이스팅 시 undefine.. 더보기
화면 크기 만큼 이미지를 꽉 채우고 이미지가 클 경우 스크롤이 생기게 하는 예제 화면 크기 만큼 이미지를 꽉 채우고 이미지가 클 경우 스크롤이 생기게 하는 예제 GO CODESENDBOX 이미지를 div tag로 감싸서 처리하면 쉽게 될 줄 알았는데 스크롤이 생기기 위해서는 height, width의 크기가 있어야 합니다. 작성한 예제는 top, left, right, bottom을 0으로 주어서 크기를 잡아 처리 했습니다. 작성한 예제 더보기
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 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.. 더보기
클립보드의 이미지를 업로드 후 화면 표기 처리 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 합성 사용하기 Reactjs에서는 상속보다 더 강력한 합성을 제공합니다. 상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다. 합성의 사용 예제는 아래와 같습니다. function SplitPane(props) { return ( {props.left} {props.right} ); } function App() { return ( ); }와 동일한 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 props로 전달할 수 있습니다. 참고자료 합성 (Composition) vs 상속 (Inheritance) 더보기
tailwindcss with ReactJS 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 ReactJS 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)로 동작 합니다. 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 시 오류 원인 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.. 더보기