lahuman & jabsiri 노트 lahuman & jabsiri 노트

1.react 101 from Daniel Lim

[TIP ReactJS] Material-UI에서 애니메이션을 제거하여 성능 향상 처리 얼마전 회사 내에서 ReactJS의 디자인 라이브러리에 대한 비교를 하였습니다. 비교 디자인 라이브러리 목록 ant design Material-ui React-Bootstrap 비교 결과 우선 React-Bootstrap의 경우 애니메이션 효과가 전혀 없기 때문에 동일한 랜더링 결과를 확인할 수 없다고 판단되었습니다. 따라서 Material-UI에서 애니메이션 효과를 제거하는 코드를 반영해보았습니다. Material-UI에서 애니메이션 효과를 제거하는 코드 각 컴포넌트마다 애니메이션 효과를 제거할 수도 있고, 전체적으로 제거 할 수 있습니다. 아래는 모든 컴포넌트에서 애니메이션 효과를 제거하는 코드입니다. impor..

ReactJS Proejct Docker 이미지 생성 & 배포 하기 ReactJS 프로젝트를 docker 이미지를 생성하는 방법을 정리 합니다. 기본적으로 node 12.x 의 이미지에 nginx 이미지를 활용하여서 생성하였습니다. 자세한 내용은 Dockerfile 파일을 참고 하시면 됩니다. ReactJS 파일은 기본 명령어를 이용해서 생성하였습니다. $ npx create-react-app mycode1. 우선 ReacJS 프로젝트에서 다음 파일을 생성합니다. Dockerfile default.conf expires.conf 2. 이미지 생성하기 다음 명령어를 이용해서 이미지를 생성 합니다. # docker build -t ${image-name}:${version} . $ docker build -..

MATERIAL-COMPONENTS github source 바로가기 docker repository 바로가기 docker로 빠른 실행 해보기 $ docker run -d --name react-app -p 80:80 lahuman/test-react-app프로젝트 개요 오랜만에 진행하는 개인 프로젝트입니다. (간간히 짧은건 몇개 진행하였습니다.) 요즘 ReactJS를 활용하고 있는데요. 몇몇 컴포넌트들은 살짝 변경해서 공통으로 쓰고 있습니다. 이런 공통 컴포넌트들을 오픈소스화 해보려고 합니다. ReactJS + MaterialUI 기반에서 동작합니다. 기본으로 제공되는 component를 변경하였습니다. Datepicker 기존 datepicker에서 달력에 표시되는 포멧을 한글로 변경하고 삭제 등의 ..

요즘 ReactJS를 이용해서 개발을 진행하고 있습니다. 사용하면서 간간히 만나는 문제들을 풀어가고 있는데, API에서 DOWNLOAD를 구현하고 React에서 해당 결과를 받아 보니 처음 보는 ReadableStream가 튀어 나왔습니다. 처리 방법은 여러가지가 있었는데, 우선 나는 다음과 같이 처리 했습니다. ReadableStream을 blob으로 변경하여 file-saver 전달 하였습니다. 처리 코드 import fileDownload from 'file-saver'; const callFileDownload = async (file_name, file_path) => { const res = await CustomFetch('/fileDownload', { resp..

javascript에서 제공되는 console methods 오늘 javascript 강좌를 보다가 다음과 같은 코드를 보았다. console.time('Label'); ... 성능측정(시간 측정)을 하려는 코드 console.timeEnd('Label'); ... 결과 Label: 13998.528076171875mstime이라는 method는 인자로 받은 문자열을 기준으로 실행 시간의 시작을 의미하고, timerEnd method는 인자로 받은 문자열을 기준으로 실행 시간을 화면에 표출하고 종료 한다. 이외에 timeLog도 제공하며 시작이후 지금가지 시간을 표기한다. console.time('Label'); ... 성능측정(시간 측정)을 하려는 코드 con..

느낌표 2개의 의미 const x = ''; !!x; //false!!를 사용하면 빈값 등(i.e., except for false, 0, "", null, undefined, and NaN)은 false를 그 외엔 true를 리턴한다. 참고 Javascript “Bang, Bang. I Shot You Down” - Use of Double Bangs (!!) in Javascript.

Reactjs 초기 프로젝트 구성하기 Reactjs 초기 프로젝트를 구성하려는 방법 중 가장 쉽고 널리 알려진 것은 Create React App를 이용하는 방법이다. 아래와 같이 실행하면 바로 프로젝트 구성이 완료된다. npx create-react-app my-app cd my-app npm start아쉬운 점은 무엇이 설치 되었는지 내가 알지 못하고, 또한 컴파일에 오랜 시간이 걸린다. npm run eject를 이용해서 묶음을 풀어 보면 너무 많은 것들이 설치 되어 있다. 그래서 방법을 찾아 보던 중 @babel/preset-env와 plugins이라는 유튜브를 보고 한땀씩 진행을 해보았다. 우선 나에게 필요한 기본 모듈은 다음과 같다. 기본 모듈 react react-dom react react..