lahuman & jabsiri 노트 lahuman & jabsiri 노트

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..

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에서 메모리 설정 하는 방법 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 13.code split from Daniel Lim code split 리액트 프로젝트를 완성하여 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포 합니다. 빌드 작업을 통해 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지, 공백 등을 제거하여 파일 크기를 최소화하고 브라우저에서 JSX문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업도 합니다. 이런 작업은 웹팩(webpack)이라는 도구를 사용합니다. 웹펙에서 별도의 설정을 하지 않으면 프로젝트에서 사용중인 모든 자바스크립트 파일이 하나의 파일로 합쳐지고, 모든 CSS 파일도 하나의 파일로 합처집니다. react standard code split Create-..

12.context api from Daniel Lim Context API 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능입니다. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 여러 종류의 전역 데이터 관리시 사용합니다. 또한 리덕스, 리액트 라우터, styled-components등의 라이브러리는 Context API를 기반으로 구현되어 있습니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간의 데이터를 props로 전달하기 대문에 컴포넌트 여기저기서 필요한 데이터가 있을 때는 주로 최상위 컴포넌트에서 state를 이용하여 관리 합니다. 최상위 컴포넌트에서 props로 state를 하위 컴포넌트까지 전달해야 하기 때문에 구조..

ReactJS Router Dom 11.react router dom from Daniel Lim 임광규 SPA SPA는 Single Page Application의 약어 입니다. 말 그대로 한개의 페이지로 구성된 애플리케이션을 뜻합니다. 전총적인 웹 페이지는 여러 페이지로 구성되어 있습니다. 라우팅 다른 주소에 다른 화면을 보여주는 것을 라우팅이라고 합니다. 리액트 라이브러리 자체에 이 기능이 내장 되어 있지는 않습니다. 리액트 라우팅 라이브러리는 리액트 라우터(react-router), 리치 라우터(reach-router), Next.js 등 여러 가지가 있습니다. 이중 가장 오랫동안 사용되었고 사용빈도 역시 높은 리액트 라우터를 알아봅니다. SPA의 단점 SPA의 단점은 앱의 규모가 커지면 자바스크..

ReactJS에서 IE 11 호환 처리 1. react-app-polyfill - 리엑트 개발에서 사용하는 다양한 문법을 변환해주는 라이브러리입니다. + Promise, window.fetch, Symbol, Object.assign, Array.from + [ IE9 Map, Set ]등 최소한만 포함하고 있어 사이즈가 작고 가벼운 게 특징 - 설치 $> npm install react-app-polyfill- 사용법 + stable은 package.json의 browserslist에 해당하는 브라우저에 대해 안정적인 코드를 사용 가능// index.js import 설정 // IE9의 경우 import 'react-app-polyfill/ie9'; import 'react-app..