ellemedit

#include <stdio.h>
#include <limits.h>

// paper color
#define WHITE 0
#define BLACK 1

class Paper {
  private:
    int x, y, size;

ellemedit

#include <stdio.h>

int result[2][2];

void multiplyTwoTwoMatrix(int result[][2], int m1[][2], int m2[][2]) {
  result[0][0] = (m1[0][0] * m2[0][0] + m1[0][1] * m2[1][0]) % 10000;
  result[0][1] = (m1[0][0] * m2[0][1] + m1[0][1] * m2[1][1]) % 10000;
  result[1][0] = (m1[1][0] * m2[0][0] + m1[1][1] * m2[1][0]) % 10000;
  result[1][1] = (m1[1][0] * m2[0][1] + m1[1][1] * m2[1][1]) % 10000;
}

ellemedit

atom settings

ellemedit

React.useEffect(() => {
  let canceled = false;
  axios.post().then((res) => {
    if (canceled) {
      return;
    }
    setState(res.data);
  });
  return () => {
    canceled = true;

ellemedit

suspenseAll

React Suspense hook sugar for fetching data concurrently.

Why this needed?

React suspense implementations is that catches a thrown promise in suspense tree. See useSWR and react-query. This blocks next hook till previous promise done if you don't prefetch.

ellemedit

import React from "react";
import { enableBodyScroll, disableBodyScroll, BodyScrollOptions } from "body-scroll-lock";

export const useScrollLock = (
  targetElement?: HTMLElement | Element | null | false,
  bodyScrollOption?: BodyScrollOptions
) => {
  React.useLayoutEffect(() => {
    if (!targetElement) {
      return;

ellemedit

import * as React from 'react';

export function useScreenEffect(handler: () => void, deps: ReadonlyArray<any>) {
  React.useLayoutEffect(() => {
    const enhancedHandler = debounceToNextAnimationFrame(handler);
    window.addEventListener("scroll", enhancedHandler, canUsePassive && { passive: true });
    window.addEventListener("resize", enhancedHandler, canUsePassive && { passive: true });
    enhancedHandler();

    return () => {

ellemedit

export const combineRef = <T>(...refs: (React.Ref<T> | string | void)[]) => {
  // basically, JSX elements allows string refs for backward-compatiblity
  // there's certain case runtime check needed
  if (process.env.NODE_ENV !== "production" && refs.some((x) => typeof x === "string")) {
    throw new Error("string refs are forbbiden");
  }
  return (node: T | null | undefined) => {
    for (const ref of refs) {
      if (!ref || typeof ref === "string") {
        continue;

ellemedit

제 경험이 당신의 next.js 프로젝트에 도움이 되거나 영감을 주면 좋겠습니다.

왜 퍼시스턴트 레이아웃이 필요한가요?

가장 근본적인 이유는 퍼시스턴트하지 않으면 모든 DOM 노드가 파괴되고 다시 생성된다는 점 입니다.

1. 이전 페이지의 DOM Node가 버려지기 때문에 항상 DOM 상태를 잃어버립니다. 예를들어 레이아웃에 흔하게 있을 수 있는 검색창 입력, 네비게이션 메뉴의 포커스 상태가 페이지 이동마다 사라집니다.
2. 당연하게도 CSS Transition이 불가능합니다. 애니메이션이 필요하다면 전혀 다른 방법으로 구현해야 합니다.

위 이유로 인해 애플리케이션의 사용성과 접근성이 떨어질 수 있습니다.

ellemedit

I don't know why distribution affect to problems.