코딩정비소 코딩정비소

웹 사이트의 성능을 개선하기 위한 여러 가지 방법 중 하나로 코드 스플리팅이 있다. 코드 스플리팅은 뭘까? 코드(code) + 스플리팅(splittin) 의 합성어로 직역하면 코드의 파편화, 코드를 파편화한다. 왜 코드를 파편화할까? React 생각해보자. React는 CSR으로 클라이언트에서 모든 페이지를 기억하고 있다. 즉 모두 자바스크립트로 페이지가 생성되고 만들어진다고 봐도 무방하다. 이 말은 다시 말하면 최초 진입 시에 모드 페이지의 정보를 로딩하여 생성하기 때문에 초기 진입속도가 굉장히 느리다. 그래서 이러한 초기 진입속도를 해결하기 위해서 등작한 것이 바로 코드 파편화 코드 스플리팅이다. 코드 스플리팅은 사용한 소스만 로드해서 사용하는 것을 의미하는데. React에서는 이러한 기능을 컨포넌트..

https://www.npmjs.com/package/react-icons react-icons SVG React icons of popular icon packs using ES6 imports www.npmjs.com react icon는 리엑트에서 사용하는 많이 사용하는 icon들을 쉽게 사용할 수 있도록 모아둔 패키지이다. 이 패키지를 사용하면 쉽게 다양한 아이콘들을 사용할 수 있다. 1. 설치하기 npm install react-icons --save 설치가 잘되었는지 확인해보기 npm ls --depth=0 설치가 제대로 되었음을 확인할 수 있다. 2. 사용해보기 import { FaBeer } from 'react-icons/fa'; class Question extends React.Com..

이번 포스팅에서는 React를 이용하여 modal을 구현해보는 시간을 가져보겠다. 개발 시간을 단축하고자 개발환경은 codepanio(http://codepen.io)를 사용했다. 처음부터 하나씩 구현해보도록 하자. React-hook React-Dom 을 이용하여 구현 해볼 예정이니, 관련해서 이상한부분 있으면 댓글로 남겨주시면 친절하게 답변해 드릴 예정이니 편하게 댓글 남겨주시면 된다 :) 프로젝트 생성하기 https://codepen.io/ 링크 따라 들어가면 다음과 같은 화면을 볼수 있다 좌측 상단에 Pen 버튼을 클릭하면 프로젝트를 생성할 수 있다. 이제 프로젝트는 생성이 완료되었으니, 모듈들을 설치해주자 우리가 설치해야 할 모듈들은 React, React-dom이다. 설치방법은 다음과 같다 우..