Computer Science/React, React Native 4

React Code Splitting(코드 분할)

Code Splitting에 대하여 기록하고자 합니다. 해석을 해보면 코드 분할입니다. 보통 리액트 앱은 Webpack이라는 도구를 이용하여 하나의 파일로 번들링(Bundle)을 하는데요. 이 Bundle을 웹 페이지에 포함시켜 처음에 전체 앱을 한 번에 로드합니다. Client-Side-Rendering이라고 하며 단점으로는 서비스 규모가 커지면 번들 파일도 마찬가지로 커집니다. 번들된 파일이 크다면, 클라이언트 측에서 번들된 파일을 한 번에 실행하기 때문에 앱 초기 구동 속도가 Server-Side-Rendering보다 느립니다. 사실 개인 프로젝트 정도로는 딱히 느리다는 체감이 들진 않습니다. 무튼 이것을 해결하기 위한 하나의 방법으로 리액트에서 코드 분할을 지원합니다. 번들된 파일을 분할해서 로드..

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 ..

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..