React

HTML - History API

하나의 페이지로 만들어진 웹을 SPA라고 합니다. SPA의 단점은 주소가 바뀌지 않는다는 것입니다. 초창기에는 주소 뒤에 # #!을 붙이고 뒤에 하위 주소를 넣었습니다. 따라서 해쉬뱅 대신 브라우저에서 제공하는 주소 API를 사용해 주소를 바꾸게 되었습니다. 주소 내역은 하나의 목록입니다, 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것입니다. 따라서 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 됩니다. 목록에 주소를 추가하기 위한 메소드가 HTML5에서 생겼습니다. history.pushState()와 history.replaceState()입니다. pushState replaceState history.pushState({data: 'pushpush'}, 'title을 pushState로', ..

React - ServerSideRendring

서버 사이드 렌더링은 결국 원래 브라우저가 해야 할 일을 서버가 대신 처리하는 겁니다. 서버 리소스가 많이 사용 된다는 단점이 있으며 갑자기 많은 사용자가 동시에 웹 페이지에 접속하면 서버에 과부화가 발생할 수도 있습니다. 따라서 사용자가 많은 서비스라면 캐싱과 로드 밸런싱을 통해 성능을 최적화 해주어야 합니다. CRA에서의 서버사이드 렌더링 구현 // src/index.server.js import React from "react"; import ReactDOMServer from "react-dom/server"; const html = ReactDOMServer.renderToString(Hello Server Side Rendering!); console.log(html); 일단 가장 기본적인 코..

React - React.lazy & Suspense & Loadable Components

import logo from "./logo.svg"; import "./App.css"; function App() { const onClick = async () => { const { default: notify } = await import("./notify"); notify(); }; return ( Hello React! ); } export default App; 위와 같이 컴포넌트를 작성하면 import()함수 형태로 메서드 안에서 사용하면, 파일을 따로 분리시켜서 저장합니다. 그리고 실제 함수가 필요한 지점에 파일을 불러와서 함수를 사용할 수 있습니다., 이렇게 import를 함수로 사용하는 문법은 비록 아직 표준 자바스크립트가 이니지만, stage-3단계에 있는 dynamic impo..

React - Redux MiddleWare >> redux-saga

JavaScript 제너레이터 함수 제너레이터 함수를 사용하면 함수에서 값을 순차적으로 반환할 수 있습니다. 심지어 함수의 흐름을 도중에 멈춰 놓았다가 다시 이어서 진행시킬 수도 있습니다. function* generatorFunction() { console.log("hello"); yield 1; console.log("generator function"); yield 2; console.log("function*"); yield 3; yield 4; } const generator = generatorFunction(); console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); console..