본문 바로가기

HTML + JAVASCRIPT + CSS/ReactJS+AngularJS +VueJS

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.. 더보기
react-staripts build에서 메모리 설정 하는 방법 react-staripts build에서 메모리 설정 하는 방법 npm run build 명령을 날리자 다음과 같은 오류가 발생하였습니다. 오류 [service@ip-10-52-00-00 project]$ npm run build > project@0.1.0 build /home/service/project > react-scripts build Creating an optimized production build... n [29108:0x45b8410] 54463 ms: Mark-sweep 479.1 (483.6) -> 478.3 (483.3) MB, 402.1 / 0.0 ms (+ 67.4 ms in 21 steps since start of marking, biggest step 12.2 ms, w.. 더보기
ReactJS code split ReactJS code split 13.code split from Daniel Lim code split 리액트 프로젝트를 완성하여 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포 합니다. 빌드 작업을 통해 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지, 공백 등을 제거하여 파일 크기를 최소화하고 브라우저에서 JSX문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 합니다. 이런 작업은 웹팩(webpack)이라는 도구를 사용합니다. 웹펙에서 별도의 설정을 하지 않으면 프로젝트에서 사용중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합처집니다. react standard code split Create-.. 더보기
Context API 12.context api from Daniel Lim Context API 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류의 전역 데이터 관리시 사용합니다. 또한 리덕스, 리액트 라우터, styled-components등의 라이브러리는 Context API를 기반으로 구현되어 있습니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 대문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트에서 state를 이용하여 관리 합니다. 최상위 컴포넌트에서 props로 state를 하위 컴포넌트까지 전달해야 하기 때문에 구조.. 더보기