Muscardinus

Page가 Dynamic Routes이고 getStaticProps가 있는 상태에서, 어떠한 페이지를 pre-render할 지를 알아야한다. 우리는 getStaticProps를 통하여 이를 해결할 수 있다. export async function getStaticPaths() { return { paths: [ { params: { id: '1' } }, { params: { id: '2' } } ], fallback: true, false, or 'blocking' // See the "fallback" section below }; } getStaticPaths 반환값 1. paths: 어떠한 path를 pre-render 할지를 결정한다. 예를 들어, dynamic route가 "pages/post..

When to use getStaticProps The data required to render the page is available at build time ahead of a user’s request. The data comes from a headless CMS. The data can be publicly cached (not user-specific). The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance. export async function getStaticP..

(만약 React로 개발할 경우 CRA(Create React App)으로 설치할 시 eslint는 자동으로 설치가 되어있다.) eslint와 prettier 설치 npm install prettier eslint npm install babel-eslint --save-dev npm install eslint-config-prettier --save-dev npm install eslint-plugin-prettier --save-dev .eslintrc { "env": { "browser": true, "es6": true, "node": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:prettier/rec..

다익스트라 알고리즘은 해당 블로그에서 잘 설명되었기에 참고하시기 바랍니다. https://alswnsdl.tistory.com/12 다익스트라 알고리즘(Dijkstra's algorithm) 개념 그래프 상의 최단거리를 구하는 알고리즘으로 ㅁ다익스트라 알고리즘 ㅁ벨만포드 알고리즘 ㅁ플로이드 와샬 알고리즘 이렇게 3종류의 기초적인 알고리즘이 있습니다. 최단거리를 구할때 경 alswnsdl.tistory.com #include #include #include using namespace std; struct Node { int n; int price; }; vector alist(5); void init() { alist[0].push_back({ 1,25 }); alist[0].push_back({ 2,5..

useSelector는 Redux의 상태값 조회를 위해서 사용하였던 기존의 connect를 좀 더 간결하게 사용하기 위해서 나왔다. 훨씬 간결하며 가독성을 상승시킨다. 하지만, useSelector를 무분별하게 사용할 경우, 과도한 rendering 유발해서 성능 이슈가 생길 위험이 있다. (저 같은 경우, 거래소를 만드는 과정에서, 무분별한 redux 사용 및 rendering 최적화를 고려하지 않아서, React에 많은 부담을 준 경험이 있습니다) 예를 들어보자 const { count, prevCount } = useSelector((state: RootState) => ({ count : state.countReducer.count, prevCount: state.countReducer.prevC..

기존의 flex 보다 조금 더 유연하고 편리하게 Element를 구성하기 위해서 Grid가 나왔다. Column & Row column은 '열'을 의미하고 row는 '행'을 의미한다. 하지만, 혼란을 없애기 위해서 앞으로는 column은 세로, row는 가로라고 이해를 하자. Template 가로 세로 구획을 나눌 때 부모요소에 우리는 template을 사용할 수 있다. grid-template-column -> 세로를 몇 개로 나눌지 결정 grid-template-row -> 가로를 몇 개로 나눌지 결정 각가을 나눌때는 auto 혹은 단위(fr: Fraction)을 사용한다. .parentNormal { display: grid; grid-template-columns: auto auto; grid-t..

더 많은 고객의 유입을 위해서는 Optimization은 어떻게 보면 필수적인 요소이다. 아래의 항목들은 주요 성능 최적화를 본 개발자의 기본 체크리스트이다. 상황에 따라서 더 추가하거나 제외할 수 있다. 1. Measure component level rendering performance with either of the following Chrome DevTools Performance Panel React DevTools Profiler 2. Minimize unnecessary component Re-Renders Override ShouldComponentUpdate where applicable Use PureComponent for class components Use React.memo ..

let SVG = d3.select('svg').attr('width', 500).attr('height', 500); SVG.style('background-color', 'pink'); const SVG_WIDTH = document.querySelector('svg').clientWidth; const SVG_HEIGHT = document.querySelector('svg').clientHeight; // --- let DATA = [23, 26, 67, 55, 49]; // to create an axis we need a scale let dataScale = d3 .scaleLinear() .domain([0, Math.max(...DATA)]) .range([0, SVG_HEIGHT]); ..