lahuman & jabsiri 노트 lahuman & jabsiri 노트

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의 단점은 앱의 규모가 커지면 자바스크..

Centos7 swap 메모리 설정 1. swapfile 생성 $ fallocate -l 2GB /swapfile fallocate 명령어로 생성 안될 경우 아래 명령어로 생성. count 뒷부분이 swap file 용량 $ dd if=/dev/zero of=/swapfile count=5096 bs=1MiB2. swap file 권한 설정 $ chmod 600 /swapfile3. 스왑 포맷 형태로 파일 변환 $ mkswap /swapfile4. 스왑 파일 시스템 등록 $ swapon /swapfile5. 등록된 swap memory 확인 $ swapon --summary $ free -h6. 스왑 파일 삭제 6-1. 스왑 사용 비활성화 $ swapoff swapfile6-2. 스왑 파일 삭제 $ rm..

wsl2를 이용시 localhost:port로 접근 해결방법 오늘 갑자기 node로 띄운 후 접근이 안되었습니다. 해결 방법을 찾아보았는데 WSL2, 외부 네트워크와 연결하기를 보고 따라 해보니 잘되었습니다. 내용 자체는 외부와 연결이지만, 저의 경우 내부와의 접근도 안되어 시도 하였습니다. 먼저 아래의 내용을 가진 wsl2-networks.ps1을 생성합니다. $remoteport = bash.exe -c "ifconfig eth0 | grep 'inet '" $found = $remoteport -match '\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}'; if( $found ){ $remoteport = $matches[0]; } else{ echo "..

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

Express 에서 ReactJS 소스 코드 구동 ReactJS 프로젝트에서 다음의 명령어로 build를 하면 build 라는 디렉토리가 생성됩니다. $> npm run build ... buildingbuild 디렉토리를 express 의 ROOT 디렉토리로 복사를 합니다. 이후 아래와 같은 설정을 하여 ReactJS의 결과를 표출 하도록 지원 합니다. const express = require('express'); const path = require('path'); const app = express(); // Serve the static files from the React app app.use(express.static(path.join(__dirname, &#39..