Skip to content

Instantly share code, notes, and snippets.

View ynifamily3's full-sized avatar

Jongkeun Choi ynifamily3

62 followers · 78 following
View GitHub Profile
@ynifamily3
ynifamily3 / example.tsx
Last active November 13, 2023 01:40
전역 상태관리 예제 (useSyncExternalStore)
"use client";
import { todosStore } from "@/store/todoStore";
import { useSyncExternalStore } from "react";
export default function AAA() {
const todos = useSyncExternalStore(
todosStore.subscribe,
todosStore.getSnapshot
);
@ynifamily3
ynifamily3 / useRouterHelper.ts
Last active June 25, 2023 02:05
react-router-dom 헬퍼
import { useCallback, useMemo } from "react";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
const _getAll = (urlSearchParams: URLSearchParams) => {
const ret: Record<string, string[]> = {};
for (const [k, v] of urlSearchParams.entries()) {
if (ret[k]) {
ret[k].push(v);
} else {
ret[k] = [v];
@ynifamily3
ynifamily3 / heavy-main-thread.html
Last active February 6, 2023 14:07
worker example
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>무거운 계산</title>
</head>
<body>
<p>무거운 계산</p>
@ynifamily3
ynifamily3 / App.tsx
Created May 28, 2022 15:49
Masonry
import { useEffect, useMemo, useRef, useState } from "react";
function App() {
const data = Array.from({ length: 7 });
const [positions, setPositions] = useState<
Array<{ left: number; top: number }>
>([]);
const containerRef = useRef<HTMLDivElement>(null);
const heights = useRef<Array<number>>(
Array.from({ length: 10 }, () => Math.random() * 801)
@ynifamily3
ynifamily3 / useSupportBack.ts
Created May 19, 2022 01:14
모바일웹 백버튼 UX 대응
import { useCallback, useEffect, useRef } from 'react';
export function useSupportBack(listening: boolean, onBack: () => void) {
const fnRef = useRef(onBack);
const memoizedCallback = useCallback(() => {
fnRef.current();
window.removeEventListener('popstate', memoizedCallback);
}, []);
useEffect(() => {
@ynifamily3
ynifamily3 / useReactiveLocalItem.ts
Last active July 28, 2021 00:46
import localItemContext, {
setLocalItemValue,
} from "#/context/localItemContext";
import { useReactiveVar } from "@apollo/client";
import { useCallback, useEffect } from "react";
type UseReactiveLocalItemReturnType = <V>(
key: string,
defaultValue?: V,
) => [V, (value: V | ((prevState: V) => V) | null) => void];
@ynifamily3
ynifamily3 / dijkstra.cpp
Created June 11, 2021 00:04
복실
#include <iostream>
#include <vector>
#include <queue>
using namespace std;
int solution(int N, vector<vector<int> > road, int K) {
int answer = 0;
int village[51][51];
int INF = 10000 * 50;
bool visited[51];
@ynifamily3
ynifamily3 / machine.js
Last active May 24, 2021 10:37
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@ynifamily3
ynifamily3 / machine.js
Created May 24, 2021 08:47
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@ynifamily3
ynifamily3 / useApi.ts
Created March 25, 2021 09:59
useAPI Hook
interface CombinedStatus<T> {
status: "IDLE" | "PENDING" | "SUCCESS" | "FAILURE";
data: T | null;
}
function useApi<ApiResultType extends object, Payload>(
repoFunc: (
payload: Payload
) => Promise<ApiResultType>
) {
const _repoFunc = useRef(repoFunc);