'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글

[ReactJS] component optimization  (0) 2020.08.28
[ReactJS] component style  (0) 2020.08.27
[ReactJS] Hooks  (0) 2020.08.26
[ReactJS] component life cycle  (0) 2020.08.25
[ReactJS] component repeat  (0) 2020.08.24
[ReactJS] component  (0) 2020.08.21
Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글

[ReactJS] component optimization  (0) 2020.08.28
[ReactJS] component style  (0) 2020.08.27
[ReactJS] Hooks  (0) 2020.08.26
[ReactJS] component life cycle  (0) 2020.08.25
[ReactJS] component repeat  (0) 2020.08.24
[ReactJS] component  (0) 2020.08.21
Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글

[ReactJS] component optimization  (0) 2020.08.28
[ReactJS] component style  (0) 2020.08.27
[ReactJS] Hooks  (0) 2020.08.26
[ReactJS] component life cycle  (0) 2020.08.25
[ReactJS] component repeat  (0) 2020.08.24
[ReactJS] component  (0) 2020.08.21
Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글

[ReactJS] component style  (0) 2020.08.27
[ReactJS] Hooks  (0) 2020.08.26
[ReactJS] component life cycle  (0) 2020.08.25
[ReactJS] component repeat  (0) 2020.08.24
[ReactJS] component  (0) 2020.08.21
[ReactJS] jsx 101  (0) 2020.08.19
Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

'HTML + JAVASCRIPT + CSS > ReactJS+AngularJS +VueJS' 카테고리의 다른 글

[ReactJS] Hooks  (0) 2020.08.26
[ReactJS] component life cycle  (0) 2020.08.25
[ReactJS] component repeat  (0) 2020.08.24
[ReactJS] component  (0) 2020.08.21
[ReactJS] jsx 101  (0) 2020.08.19
ReactJS 101  (0) 2020.08.18
Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

Posted by lahuman
TAG reacctjs

댓글을 달아 주세요

Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

Posted by lahuman
TAG ReactJS

댓글을 달아 주세요

[TIP ReactJS] Material-UI에서 애니메이션을 제거하여 성능 향상 처리

얼마전 회사 내에서 ReactJS의 디자인 라이브러리에 대한 비교를 하였습니다.

비교 디자인 라이브러리 목록

  • ant design
  • Material-ui
  • React-Bootstrap

비교 결과

우선 React-Bootstrap의 경우 애니메이션 효과가 전혀 없기 때문에 동일한 랜더링 결과를 확인할 수 없다고 판단되었습니다.
따라서 Material-UI에서 애니메이션 효과를 제거하는 코드를 반영해보았습니다.

Material-UI에서 애니메이션 효과를 제거하는 코드

각 컴포넌트마다 애니메이션 효과를 제거할 수도 있고, 전체적으로 제거 할 수 있습니다.

아래는 모든 컴포넌트에서 애니메이션 효과를 제거하는 코드입니다.


import { createMuiTheme, ThemeProvider } from '@material-ui/core';

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButtonBase: {
      // The properties to apply
      disableRipple: true, // No more ripple, on the whole application 💣!
    },
  },
  transitions: {
    // So we have 'transition: none;' everywhere
    create: () => 'none',
  },
});

export default (props) => {
  <ThemeProvider theme={theme}>
    <div className={classes.root}>
    ....
    </div>
  </ThemeProvider>
}

결과

Material-UI에서 애니메이션 효과를 제거 후 UI 성능은 눈에 띄게 좋아졌습니다.

추가적으로 저성능 디바이스에서는 애니메이션 효과를 제거하고 사용하는 것을 추천합니다.

참고 자료

Posted by lahuman

댓글을 달아 주세요

ReactJS Proejct Docker 이미지 생성 & 배포 하기

ReactJS 프로젝트를 docker 이미지를 생성하는 방법을 정리 합니다.

기본적으로 node 12.x 의 이미지에 nginx 이미지를 활용하여서 생성하였습니다.

자세한 내용은 Dockerfile 파일을 참고 하시면 됩니다.

ReactJS 파일은 기본 명령어를 이용해서 생성하였습니다.

$ npx create-react-app mycode

1. 우선 ReacJS 프로젝트에서 다음 파일을 생성합니다.

2. 이미지 생성하기

다음 명령어를 이용해서 이미지를 생성 합니다.

# docker build -t ${image-name}:${version} .

$ docker build -t react-dockerfile:1.0 .

3. 이미지 테스트 하기

생성된 이미지를 docker run으로 테스트 합니다.

아래 명령어는 이미지를 띄우고 Ctrl + C를 이용해서 종료 하면 바로 컨테이너를 삭제 합니다.

# docker run -p 8888:80 --rm ${image-name}:${version}

$ docker run -p 8888:80 --rm react-dockerfile:1.0

로컬 PC의 8888 포트와 컨테이너 80 포트를 연결 하여서 띄우기 때문에 http://localhost:8888 을 브라우저에서 입력하시고 결과를 확인해세요.

4. 이미지를 docker repository에 올리기

마지막으로 만든 이미지에 문제가 없다면, 해당 이미지를 docker repository에 올립니다.

4.1 docker login 을 하세요.

저장하려는 repository에 로그인 하세요 기본으로 로그인시 docker hub에 저장하게 됩니다.

$ docker login
Login with your Docker ID to push and pull images from Docker Hub. If you don't have a Docker ID, head over to https://hub.docker.com to create one.
Username: lahuman
Password:
Login Succeeded

4.2 우선 이미지 태그를 다시 생성하셔요.

docker 이미지 태그는 docker hub 계정 정보가 함께 들어 갑니다.

# docker tag ${image-name}:${version} ${account}/${image-name}:${version}

$ docker tag react-dockerfile:1.0 lahuman/react-dockerfile:1.0

4.3 push를 하세요

마지막으로 이미지를 docker hub에 push 하세요.

$ docker push ${account}/${image-name}:${version}
$ docker push lahuman/react-dockerfile:1.0

[오류] denied: requested access to the resource is denied

  1. 로그인 정보를 확인하세요.
  2. tag에 계정 정보가 알맞게 저장 되었는지 확인하세요.
Posted by lahuman

댓글을 달아 주세요