코딩정비소 코딩정비소

웹 사이트의 성능을 개선하기 위한 여러 가지 방법 중 하나로 코드 스플리팅이 있다. 코드 스플리팅은 뭘까? 코드(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 프로젝트에서 Firebase를 사용하여 로그인 기능을 구현해 볼 것이다. 생각보다 간단하다. 로그인 기능은 민감한 기술이지만, Firebase를 이용하여 인증을 추가하는 것이 매우 간단하다. 이번 포스팅에서는 React, React-hook Typescript 에 대해 알고 있다고 생각하여 자세한 내용은 생략하여 진행할 예정이니 참고바란다. 프로젝트 생성하기 프로젝트를 생성할 원하는 위치에 폴더를 생성하자. 필자는 react-typescript-login으로 진행하겠다. 폴더가 생성되었으면 프로젝트를 생성하자. 앞서 말씀드렸다 시피 react와 typescript로 프로젝트를 생성할 예정이므로 create-react-app을 활용하여 빠르게 프로젝트를 생성해보자. 더보기 npx create-r..