lahuman & jabsiri 노트 lahuman & jabsiri 노트

일반적으로 React에서의 상수는 .env를 활용해서 관리합니다. 하지만, 환경에 따라 상수를 변경해야 한다면 어떻게 처리해야 할까요? 정답은 build 이후에 환경 변수를 주입 할수 있게 설계 하면 됩니다. React에서는 public 이라는 디렉토리가 있고 이는 정적 파일을 보관하는 곳입니다. 또한 이 디렉토리에 있는 파일들은 빌드 시 자동으로 build 디렉토리에 복사 되며, 브라우저에서 접근이 가능한 파일로 사용이 됩니다. 전역 상수 파일 생성 먼저 환경 변수는 전역값으로 처리 하기 위해서 window 전역 객체에 env키를 이용해서 저장 합니다. // root 디렉토리에 키 값과 벨류 키값을 가진 _env-config.js 파일 생성 window.env = { REACT_APP_API: "V_R..

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. 내가 만든 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에서는 상속보다 더 강력한 합성을 제공합니다. 상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다. 합성의 사용 예제는 아래와 같습니다. function SplitPane(props) { return ( {props.left} {props.right} ); } function App() { return ( ); }와 동일한 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 props로 전달할 수 있습니다. 참고자료 합성 (Composition) vs 상속 (Inheritance)

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 데이터를 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의 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..