본문 바로가기

Computer Science/React, React Native4

React Code Splitting(코드 분할) Code Splitting에 대하여 기록하고자 합니다. 해석을 해보면 코드 분할입니다. 보통 리액트 앱은 Webpack이라는 도구를 이용하여 하나의 파일로 번들링(Bundle)을 하는데요. 이 Bundle을 웹 페이지에 포함시켜 처음에 전체 앱을 한 번에 로드합니다. Client-Side-Rendering이라고 하며 단점으로는 서비스 규모가 커지면 번들 파일도 마찬가지로 커집니다. 번들된 파일이 크다면, 클라이언트 측에서 번들된 파일을 한 번에 실행하기 때문에 앱 초기 구동 속도가 Server-Side-Rendering보다 느립니다. 사실 개인 프로젝트 정도로는 딱히 느리다는 체감이 들진 않습니다. 무튼 이것을 해결하기 위한 하나의 방법으로 리액트에서 코드 분할을 지원합니다. 번들된 파일을 분할해서 로드.. 2019. 11. 29.
React 페이지 전환 시 스크롤 복원 React Router의 Link을 사용해서 페이지를 이동했을 때 SPA이다 보니까 스크롤이 이전 페이지에서 중간에 멈췄으면 다음 페이지에서 중간에서 시작하는 점의 문제가 있었습니다. 아무래도 유저의 입장에서는 스크롤이 위에서 시작했을 때 위로 올릴 필요가 없으니까 편합니다. 친절하게도 React Router는 이 점에 대해서 제공하고 있었습니다. https://reacttraining.com/react-router/web/guides/scroll-restoration React Router: Declarative Routing for React Learn once, Route Anywhere reacttraining.com 16.8 릴리즈 이후 훅스 사용을 권장하여 훅스의 예제도 있습니다. const .. 2019. 6. 28.
React Class and Hook Flow Diagram 2019. 5. 31.
React Full-Stack App 추천 가이드 프론트엔드 라이브러리 중 세계적으로 가장 인기 있는 라이브러리는 리액트입니다. 최근에 React(프론트엔드 라이브러리)와 AWS, Serverless를 경험해 볼 수 있는 정말 좋은 학습 가이드를 발견해서 공유하고자 합니다. https://serverless-stack.com/ Serverless Stack Free step-by-step tutorials for creating full-stack apps with Serverless Framework and React.js. Build a Serverless REST API with our Serverless tutorial and connect it to a React single-page application with our React.js tut.. 2019. 4. 20.