기타

<p></p><p>brew install zsh-autosuggestions</p><p>brew install zsh-syntax-highlighting</p><p></p><p>하고 나서</p><p></p><p>vi ~/.zshrc</p><p></p><p></p><pre spellcheck="false"><code class="language-null">source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
source /opt/homebrew/share/zsh-autosuggestions/zsh-autosuggestions.zsh</code></pre><p>하단에 위의 코드 추가할 것</p><p>저장한 후</p><p>source .zshrc</p><p>실행해서 적용시켜주고 테스트 해보면 잘 됨.</p>

brew install zsh-autosuggestionsbrew install zsh-syntax-highlighting하고 나서vi ~/.zshrcsource /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh
source /opt/homebrew/share/zsh-autosu

[기타] iterm2 설정 할 때 zsh-syntax-highlighting 경로 잘~ 입력하기

CodingTest

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/">BOJ</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/15657">15657.N과 M(8)</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : Middle</p></li><li><p>풀이시간 : 38m</p></li><li><p>유형 : 백트래킹 , DFS</p></li></ul><h2>문제</h2><p>N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다.</p><ul><li><p>N개의 자연수 중에서 M개를 고른 수열</p></li><li><p>같은 수를 여러 번 골라도 된다.</p></li><li><p>고른 수열은 비내림차순이어야 한다.</p><ul><li><p>길이가 K인 수열 A가 A1&nbsp;≤ A2&nbsp;≤ ... ≤ AK-1&nbsp;≤ AK를 만족하면, 비내림차순이라고 한다.</p></li></ul></li></ul><h2>입력</h2><p>첫째 줄에 N과 M이 주어진다. (1 ≤ M ≤ N ≤ 8)</p><p>둘째 줄에 N개의 수가 주어진다. 입력으로 주어지는 수는 10,000보다 작거나 같은 자연수이다.</p><h2>출력</h2><p>한 줄에 하나씩 문제의 조건을 만족하는 수열을 출력한다. 중복되는 수열을 여러 번 출력하면 안되며, 각 수열은 공백으로 구분해서 출력해야 한다.</p><p>수열은 사전 순으로 증가하는 순서로 출력해야 한다.</p><h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>3 1
4 5 2
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>2
4
5
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>4 2
9 8 7 1</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>1 1
1 7
1 8
1 9
7 7
7 8
7 9
8 8
8 9
9 9</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>4 4
1231 1232 1233 1234</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>1231 1231 1231 1231
1231 1231 1231 1232
1231 1231 1231 1233
1231 1231 1231 1234
1231 1231 1232 1232
1231 1231 1232 1233
1231 1231 1232 1234
1231 1231 1233 1233
1231 1231 1233 1234
1231 1231 1234 1234
1231 1232 1232 1232
1231 1232 1232 1233
1231 1232 1232 1234
1231 1232 1233 1233
1231 1232 1233 1234
1231 1232 1234 1234
1231 1233 1233 1233
1231 1233 1233 1234
1231 1233 1234 1234
1231 1234 1234 1234
1232 1232 1232 1232
1232 1232 1232 1233
1232 1232 1232 1234
1232 1232 1233 1233
1232 1232 1233 1234
1232 1232 1234 1234
1232 1233 1233 1233
1232 1233 1233 1234
1232 1233 1234 1234
1232 1234 1234 1234
1233 1233 1233 1233
1233 1233 1233 1234
1233 1233 1234 1234
1233 1234 1234 1234
1234 1234 1234 1234</code></pre><h3>문제 풀이 접근</h3><p>이 문제의 조건은 <br>1. 같은 수를 여러번 고르는 것이 가능<br>2. 비 내림차순 =&gt; A1,A2,A3,A4 가 있다면, A1&lt;=A2&lt;=A3&lt;=A4 <br>예를들면 1 3 5 7 이 있다. 4개중에 2개 뽑는다.<br>가능 ) <br>1 3 <br>1 5 <br>1 7 <br>3 3<br>3 5 <br>3 7<br>5 5<br>5 7<br>7 7<br><br>불가능 )<br>3 1<br>3 3<br>5 1<br>5 3<br>7 1 <br>7 3<br>7 5<br><br>이렇듯, 앞의 수보다 크거나 같은 조건을 가진 수열을 의미한다. <br><br>내가 생각한 방법은 BT 내부에서 for 문으로 Arr의 인덱스 0부터 Length 까지 순회한다. <br>0회 차 일때 Prev의 값이 비교할 것이 없기 때문에, 자연수라는 조건으로 0회차 에서는 -1을 Prev 값으로 넘겨준다. <br><br>이후 Prev 값은 BT 함수를 타고 들어가 내가 함수를 타고 들어온 Prev 값보다 순회하는 인덱스의 참조값인 _arr[i] 의 값보다 이전에 가지고온 값을 비교하여 Prev 보다 작다면 Continue 하는 방식으로 조건을 걸어주었더니, 문제에서 요구하는 비 내림차순으로 수열을 구성할 수 있었다.<br><br>이외로 이 문제는 M과N (7)번 문제와 제한 시간이 동일한데, 시간초과가 안떠서 조금 놀랐다.</p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Text;

/////*
//// * Difficulty : Middle
//// * URL : https://www.acmicpc.net/problem/15657
////  * Time : 38h
///
/// BOJ_15657_N과 M (8)
//// */
///
namespace CodingTestProj
{
    internal class Program
    {
        static void Main(string[] args)
        {
            Solution solution = new Solution();
            solution.solve();
        }
    }

    public class Solution
    {
        public const int _max = 8;
        public int _n;
        public int _m;
        public int[] _arr;
        public int[] _per;

        public StringBuilder _sb;

        public void solve()
        {
            _sb = new StringBuilder();
            string[] _in = Console.ReadLine().Split(' ');
            _n = int.Parse(_in[0].ToString());
            _m = int.Parse(_in[1].ToString());

            _in = Console.ReadLine().Split(' ');
            _arr = new int[_n];

            for (int i = 0; i &lt; _in.Length; ++i)
                _arr[i] = Int32.Parse(_in[i]);

            List&lt;int&gt; _tempInt = new List&lt;int&gt;(_arr);
            _tempInt.Sort(Sorted);
            _arr = _tempInt.ToArray();

            _per = new int[_m];
            BT(0, ref _per, 0, 0,-1);

            Console.Write(_sb.ToString());
        }
        public int Sorted(int n, int m)
        {
            return n.CompareTo(m);
        }

        public void BT(int pos, ref int[] c, int cnt, int depth, int prev)
        {
            if (cnt &gt;= _m)
            {
                for(int i = 0; i &lt; cnt; ++i)
                {
                    _sb.Append(c[i]);

                    if(i != cnt - 1)
                        _sb.Append(" ");
                }

                _sb.AppendLine();
            }
            else if (pos == _arr.Length) return;
            else
            {
                for (int i = 0; i &lt; _arr.Length; ++i)
                {
                    if (_arr[i] &lt; prev) continue;
                    c[pos] = _arr[i];
                    BT(pos+1, ref c, cnt + 1, depth + 1, _arr[i]);
                }
            }
        }
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1732548779872.png" data-width="100%" data-align="center" alt="2268"><p></p>

혼자서 다시푸는 코딩테스트 준비 일지 - 65

코딩테스트 준비 - N과 M(8)

<a data-type="bookmark" href="https://jojoldu.tistory.com/800" target="_blank"><div class="content"><div><div class="title">IntelliJ 등에서 메모리 점유율이 계속 높아질 때 (feat. vanilla JBR)</div><div class="description">silicon M1 맥북을 사용하고나서 IntelliJ를 계속 켜놓고 있으면 끝도 없이 메모리가 올라가는 이슈가 발생했다.현재 내 IntelliJ VM Option 에서 메모리 설정은 다음과 같다.(PC는 M1 Pro 16GB)-Xms1024m-Xmx4096m위와 같이 설정하고 IntelliJ를 켜두고 오랜 시간이 지나면 IntelliJ의 자체 Memory 분석 도구에서는 여전히 아래와 같이 정상적인 사용량이 노출되는 반면,실제 IntellIJ의 메모리 사용량은 다음과 같이 설정한 VM Option을 크게 초과해서 사용하는 것을 확인할 수 있다.16GB RAM을 가진 PC에서 14GB에 가까운 메모리를 사용중인데, 이건 더 높은 메모리 사양을 가진 맥북을 사용하면 더 크게 메모리를 점유한다.(테스트 결과..</div></div><div class="href">https://jojoldu.tistory.com/800</div></div><img src="https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcrwFTs%2FbtsI8OPtiNI%2FUKkPbgXXs8M0OozKixida0%2Fimg.png"></a><ul><li><p>설정을 하고나서는 메모리가 약 10기가 정도 먹던게</p><ul><li><p>약 4기가정도로 줄었다.</p></li><li><p>뭔가 jetbrain 커스텀 런타임에 메모리 누수가 있나 싶다..</p></li><li><p>플러그인을 몇개 사용하지 못하는 문제가 있긴한데.. 회사 컴퓨터 메인보드 1 3 슬롯이 안먹어서 램 추가가 안되어서 어쩔 수 없다..</p></li></ul></li></ul>

IntelliJ 등에서 메모리 점유율이 계속 높아질 때 (feat. vanilla JBR)silicon M1 맥북을 사용하고나서 IntelliJ를 계속 켜놓고 있으면 끝도 없이 메모리가 올라가는 이슈가 발생했다.현재 내 IntelliJ VM Option 에서 메모리 설정은 다음과 같다.(PC는 M1 Pro 16GB)-Xms1024m-Xmx4096m위와 같이

인텔리제이 메모리 설정 관련

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1729780816938.gif" data-width="100%" data-align="center" alt="1878"><h2>문제상황</h2><p>언틸에서 아티클을 작성하다 실수로 창을 닫거나 뒤로가서 내용을 전부 날려먹었다는 피드백을 종종 들었다. (나도 몇번 있었음)</p><p>물론 노션처럼 실시간으로 데이터가 저장될 수 있다면 더더욱 좋겠지만... 개인이 작성하는 블로그에서는 실시간성이 매우 중요한 요소가 아니기도 하고, 서버 비용도 고려해봤을때 간단하게 이탈을 방지해줄 수 있는 팝업을 띄우는 것이 좋겠다고 생각했다.</p><h2>BeforeUnload Event</h2><p>우선 윈도우 창이 닫히는 것을 감지하기 위해서는 wep api인 <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/API/Window/beforeunload_event">BeforeUnload Event</a>를 사용하면 된다.</p><p>문서에 나와있는대로, 작성 페이지에서 대화상자를 열기위해 이벤트 트리거 시점에 <code spellcheck="false">preventDefault()</code>를 호출했다.</p><pre spellcheck="false"><code class="language-typescript">const handleBeforeUnload = (e: BeforeUnloadEvent) =&gt; {
  e.preventDefault()
}  

// ..... 아티클 작성 페이지 컴포넌트 내부

  useEffect(() =&gt; {
    window.addEventListener('beforeunload', handleBeforeUnload)

    return () =&gt; {
      window.removeEventListener('beforeunload', handleBeforeUnload)
    }
  }, [router])

// .....</code></pre><p>이렇게 하면 아티클 작성페이지에서 예기치 않게 창을 닫으려고 하는 경우를 막아줄 수 있다.</p><p></p><p>하지만.. 창을 닫는 것 이외에도 client side에서 창을 이동하는 경우에는 해당 이벤트가 트리거 되지 않는다. 이부분을 막기 위해 next router 의 기능을 살펴보면서 route 가 바뀌는것을 방지할 수 있는 방법을 찾아보았다.</p><h2>방법1. ConfirmLink ❌</h2><p>첫번째로 시도한 방법은 next에서 제공하는 Link를 감싼 <code spellcheck="false">ConfirmLink</code> 라는 컴포넌트를 만들어 route가 실제로 push되기 전에 모달을 띄워주는 방법이였다.</p><p>실제로 아래와 같이 구현하였고, 아티클 작성페이지에서 표시되고 있는 헤더에 적용해서 아티클 페이지인 경우 컨펌 모달이 표시되도록 해주었다.</p><pre spellcheck="false"><code class="language-typescript">import Link from 'next/link'
import { useRouter } from 'next/router'
import { ComponentProps, FC, MouseEvent, useState } from 'react'
import { ConfirmDialog } from 'src/components/ConfirmDialog'

type ConfirmLinkProps = Omit&lt;ComponentProps&lt;typeof Link&gt;, 'onClick'&gt; &amp; {
  title?: string
  description?: string
  showConfirm: boolean
}

const ConfirmLink: FC&lt;ConfirmLinkProps&gt; = ({
  title = '정말 나가시겠어요?',
  description = '저장하지 않은 내용은 모두 사라질 수 있어요. 🥲',
  showConfirm,
  ...linkProps
}) =&gt; {
  const router = useRouter()
  const [isOpen, setIsOpen] = useState(false)

  const handleClick = (e: MouseEvent&lt;HTMLAnchorElement&gt;) =&gt; {
    if (!(e.target instanceof HTMLAnchorElement) || !showConfirm) {
      return
    }

    e.preventDefault()
    setIsOpen(true)
  }

  const handleConfirm = () =&gt; {
    setIsOpen(false)
    router.push(linkProps.href)
  }

  return (
    &lt;&gt;
      &lt;Link onClick={handleClick} {...linkProps} /&gt;
      &lt;ConfirmDialog
        title={title}
        open={isOpen}
        onConfirm={handleConfirm}
        onClose={() =&gt; setIsOpen(false)}
        onCancel={() =&gt; setIsOpen(false)}
      &gt;
        {description}
      &lt;/ConfirmDialog&gt;
    &lt;/&gt;
  )
}

export default ConfirmLink
</code></pre><p>여기까지는 분명 잘 동작했지만... 이 컴포넌트로는 뒤로가기를 막아줄 수 있는 방법이 없었다.</p><p>또한 라우트가 생겨날 때마다 해당 컴포넌트를 사용해줘야한다는 컨텍스트를 가지고 있어야하기에 좋은 방법은 아니라고 생각했다.</p><p>때문에 다른 방법을 찾아보기로 했다.</p><h2>방법2. next.js 에서 제공하는 router.events 사용하기 ✅</h2><blockquote><p>pages router 기준으로 작성했습니다.</p></blockquote><p>next.js에서는 라우트가 변경되는것을 감지할 수 있도록 이벤트 메서드를 제공하고 있다. (<a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/api-reference/functions/use-router#routerevents">문서</a>)</p><p>이 중 routeChangeStart 를 통해 route가 시작되는 시점에 이벤트를 감지하고 에러를 발생시킴으로써 라우팅을 막아주기로 했다.</p><p>그렇게 작성된 코드는 아래와 같다.</p><pre spellcheck="false"><code class="language-typescript">const handleBeforeUnload = (e: BeforeUnloadEvent) =&gt; {
  e.preventDefault()
}

const ArticleForm: FC&lt;Props&gt; = ({ defaultValues }) =&gt; {
  const router = useRouter()
  const [blockedUrl, setBlockedUrl] = useState&lt;string | null&gt;(null)

  const syncUrlWithRouter = useCallback(() =&gt; {
    if (router.asPath !== window.location.pathname) {
      window.history.pushState(null, '', router.asPath)
    }
  }, [router.asPath])

  const handleRouteChangeStart = useCallback(
    (url: string) =&gt; {
      if (decodeURIComponent(url).includes(decodeURIComponent(router.asPath))) {
        return
      }

      syncUrlWithRouter()
      setBlockedUrl(url)
      router.events.emit('routeChangeError')
      throw new Error('routeChangeError')
    },
    [router],
  )

  const saveArticle = useSaveArticle((articleUrl) =&gt; {
    router.events.off('routeChangeStart', handleRouteChangeStart)
    router.push(articleUrl)
  })

  useEffect(() =&gt; {
    router.events.on('routeChangeStart', handleRouteChangeStart)
    window.addEventListener('beforeunload', handleBeforeUnload)

    return () =&gt; {
      router.events.off('routeChangeStart', handleRouteChangeStart)
      window.removeEventListener('beforeunload', handleBeforeUnload)
    }
  }, [router])

  return (
    &lt;&gt;
      &lt;FormProvider {...methods}&gt;
        &lt;form css={wrapperStyle} onSubmit={handleSubmit}&gt;
          {/* .... */}
        &lt;/form&gt;
      &lt;/FormProvider&gt;
      &lt;ConfirmDialog
        title="정말 나가시겠어요?"
        open={!!blockedUrl}
        onConfirm={() =&gt; {
          router.events.off('routeChangeStart', handleRouteChangeStart)

          blockedUrl &amp;&amp; router.replace(blockedUrl)
        }}
        onClose={() =&gt; setBlockedUrl(null)}
        onCancel={() =&gt; setBlockedUrl(null)}
      &gt;
        저장하지 않은 내용은 모두 사라질 수 있어요. 🥲
      &lt;/ConfirmDialog&gt;
    &lt;/&gt;
  )
}

export default ArticleForm</code></pre><p>이제 뒤로가기 버튼의 경우에도 대응해줄 수 있게 되었고, 아티클 작성시점에는 모달이 발생되지 않도록 이벤트를 종료해주었다.</p><p>에러를 발생시키는 것이기 때문에 dev server에서는 next.js 에러 팝업이 발생하게된다.</p><p>실제로 이런 방식이 올바른 접근인지에 대해서는 여러 의견이 존재한다. next.js 이슈에서 진행되고 있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/vercel/next.js/discussions/32231">route cancellation에 대한 논의</a>도 한번 구경해보면 좋을 것 같다!</p><p></p><p></p>

문제상황언틸에서 아티클을 작성하다 실수로 창을 닫거나 뒤로가서 내용을 전부 날려먹었다는 피드백을 종종 들었다. (나도 몇번 있었음)물론 노션처럼 실시간으로 데이터가 저장될 수 있다면 더더욱 좋겠지만... 개인이 작성하는 블로그에서는 실시간성이 매우 중요한 요소가 아니기도 하고, 서버 비용도 고려해봤을때 간단하게 이탈을 방지해줄 수 있는 팝업을 띄우는 것이 

next.js 페이지 바깥으로 못나가게 하기 (router.events)

<p>until 에디터 테스트 겸 작성해보는 history 웹 API에 대한 간단한 포스트</p><p>헤헷 썸네일 등록이 안 되네</p><p></p><h1>✅&nbsp;발단</h1><hr><h3>history 웹 API를 이용한 SPA 구현</h3><pre spellcheck="false"><code class="language-javascript">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;!-- 네비게이션 메뉴 --&gt;
    &lt;!-- data-url 속성을 사용하여 각 페이지의 식별자 저장 --&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a href="/" data-url="home"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="/about" data-url="about"&gt;About&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="/contact" data-url="contact"&gt;Contact&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

    &lt;!-- 페이지 컨텐츠가 표시될 영역 --&gt;
    &lt;div id="page"&gt;Home 페이지입니다.&lt;/div&gt;

    &lt;script&gt;
      // BOM(Browser Object Model)의 주요 객체들:
      // - history: 브라우저의 방문 기록을 관리
      // - Screen: 사용자의 화면 정보를 제공
      // - Location: 현재 URL 관련 정보와 메서드를 제공

      // 각 페이지의 컨텐츠를 저장하는 객체
      const pages = {
        home: "Home 페이지입니다.",
        about: "About 페이지입니다.",
        contact: "Contact 페이지입니다. &lt;input text='text' placeholder='연락처 입력 하세요' /&gt;",
      };

      // 모든 네비게이션 링크 요소를 선택
      const aEls = document.querySelectorAll("a");

      // 각 링크에 클릭 이벤트 리스너 추가
      aEls.forEach((aEl) =&gt;
        aEl.addEventListener("click", function (e) {
          // 링크의 기본 동작(페이지 이동) 방지
          e.preventDefault();
          
          // 클릭된 링크의 data-url 속성값 가져오기
          const page = e.currentTarget.dataset.url;
          
          // History API를 사용하여 새로운 상태 추가
          // pushState(상태객체, 제목(미사용), URL)
          history.pushState({ page: page, custom: "test" }, "", `/${page}`);
          
          // 페이지 컨텐츠 업데이트
          document.getElementById("page").innerHTML = pages[page];
        })
      );

      // 브라우저 뒤로가기/앞으로가기 처리
      window.addEventListener("popstate", function (event) {
        // 상태가 없는 경우 기본값으로 'home' 사용
        // ?. 는 옵셔널 체이닝으로, event.state가 null/undefined일 때 에러 방지
        const page = event.state?.page || "home";
        
        // 현재 상태 로깅 (디버깅용)
        console.dir(event.state?.page || "home");
        console.log("뒤로가기 또는 앞으로 가기가 눌렸음");
        
        // 페이지 컨텐츠 업데이트
        document.getElementById("page").innerHTML = pages[page];
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

// 코드 출처 : 수코딩
</code></pre><h1>🧐&nbsp;궁금한 점</h1><h3>1. history API는 스택 구조인가?</h3><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/ko/docs/Web/API/History">https://developer.mozilla.org/ko/docs/Web/API/History</a></p><p>공식 문서를 보면 <strong>push</strong>와 <strong>pop</strong>으로 추가하고 제거하는 형태임을 알 수 있다. 이런 방식은 배열에서 주로 사용되므로, <strong>history</strong> 데이터가 스택 구조로 저장되는지 궁금했다.</p><p>이 부분에 대해 조사해 본 결과, history API는 연결 리스트 구조를 가지고 있지만 뒤로가기/앞으로가기는 스택 구조와 유사하게 동작한다고 정리할 수 있었다.</p><p>그리고 여기서 또 다른 질문이 생겼다.</p><p></p><h3>2. 스택처럼 동작한다면 왜 배열로 구현하지 않았을까?</h3><p>배열이 연결리스트보다 용량 차지가 적고, 배열처럼 동작할건데 왜 연결리스트로 구현했을까?</p><p>단순히 메모리 차지 용량을 비교한다면 연결리스트보다 배열이 유리한 게 맞다. 하지만 배열은 메모리 공간을 연달아 차지한다. 하지만 연결리스트는 포인터가 있기 때문에 메모리에 분산해서 저장할 수 있다.</p><p>마치 테트리스를 하는 상황과 같다.</p><p>포인터가 5칸짜리 막대 블럭이라면 메모리는 1칸짜리 블럭 5개인 셈이니 메모리를 훨씬 유연하게 사용할 수 있다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@miseullang/CS-50-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0-%EC%97%B0%EA%B2%B0-%EB%A6%AC%EC%8A%A4%ED%8A%B8">이 때 공부했던 내용</a>이 머리를 스치고 지나갔다…! 고마워요 <strong>CS 50🥲</strong></p><p>브라우저의 가용 메모리는 충분하므로, 배열 형태를 사용해서 얻는 이점(메모리 공간 절약)보다, 그보다 조금 더 큰 연결 리스트 형태를 사용하는 것이 여러 모로 이득이었을 것이다.</p><p>연결리스트를 사용하면 동적 할당과 해제가 가능하고, 중간 삽입과 삭제가 가능하다. (그리고 가비지 컬렉션 면에서도 더 효율적이라고 한다!)</p><p></p><h3>결론</h3><p>사실 정확한 정보는 아직 찾지 못했다. 여러 문서를 뒤져보고 할루시네이션이 가장 적은 AI라는 퍼블렉시티한테도 물어봤지만 명확한 답변은 얻지 못했다. 짐작해 보자면 History API는 웹 API니까 브라우저 엔진마다 조금씩의 차이가 있기 때문에 문서별로 기재해 둔 정보의 차이가 있는 것 같다.</p><p>명확한 결론을 내지는 못 했지만, 뭔가에 호기심을 가지고 탐구해봤다는 점에 점수를 주기로 했다.</p>

until 에디터 테스트 겸 작성해보는 history 웹 API에 대한 간단한 포스트

history API 구조에 대한 호기심

게시물 테스트

<h1>Sidebar 개발</h1><ol class="tight" data-tight="true"><li><p>구글에서 <code spellcheck="false">shadcn-ui</code> 로 사이드바 개발하는 방법을 검색</p></li><li><p>검색 결과에 있는 유튜브 튜토리얼 영상 시청</p></li><li><p>유튜버가 <code spellcheck="false">command</code> 컴포넌트를 사용하는 것을 발견 </p><ol class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=mju7e6Cf6Nk">https://www.youtube.com/watch?v=mju7e6Cf6Nk</a></p></li></ol></li><li><p><code spellcheck="false">npx shadcn-ui add command</code> 명령어 실행</p></li><li><p><code spellcheck="false">pakcage.json</code> 에 <code spellcheck="false">cmdk</code> 라는 라이브러리가 설치되는 것을 확인</p><pre spellcheck="false"><code>import { Command as CommandPrimitive } from "cmdk"</code></pre></li><li><p><code spellcheck="false">cmdk</code> 라이브러리에 대해서 조사</p></li></ol><ol class="tight" data-tight="true"><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pacocoursey/cmdk">https://github.com/pacocoursey/cmdk</a></p></li><li><p>맥에서 Command + k 키 누르면 모달로 뜨는 검색창 라이브러리</p></li><li><p>사용방법은 위 깃허브 링크에서 확인</p></li><li><p>Command + K 키를 눌렀을때 검색창이 뜨게 하는 기능을 구현하려면 <code spellcheck="false">keydown</code> 이벤트 감지가 필요하다는 것을 알게됨</p></li><li><p>위 링크에는 자바스크립트 코드라서 타입 정의에 대한 안내가 없음</p></li><li><p>처음에는 <code spellcheck="false">e</code> 타입이 <code spellcheck="false">React.KeyboardEvent</code> 인줄 알았음</p></li><li><p>하지만 그렇게 하면 타입 에러가 발생</p></li><li><p>그냥 <code spellcheck="false">KeyboardEvent</code> 타입을 사용해야함</p><pre spellcheck="false"><code class="language-typescript">  React.useEffect(() =&gt; {
    const down = (e: KeyboardEvent) =&gt; {
      if (e.key === "k" &amp;&amp; (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setOpen((open) =&gt; !open);
      }
    };

    document.addEventListener("keydown", down);
    return () =&gt; document.removeEventListener("keydown", down);
  }, []);
</code></pre></li><li><p> <code spellcheck="false">React.KeyboardEvent</code> 와 <code spellcheck="false">KeyboardEvent</code> 는 다른  타입</p><ol class="tight" data-tight="true"><li><p> <code spellcheck="false">React.KeyboardEvent</code> 가 내부적으로 <code spellcheck="false">NativeKeyboardEvent</code>  <code spellcheck="false">KeyboardEvent</code> 타입을 상속하고 있지만 제네릭으로 사용하고 있어서 순수 <code spellcheck="false">KeyboardEvent</code> 타입과 같지는 않음</p></li></ol></li><li><p><code spellcheck="false">CommandDialog</code> 컴포넌트가 모달 역할 수행</p><pre spellcheck="false"><code class="language-typescript">&lt;CommandDialog open={open} onOpenChange={setOpen}&gt;</code></pre><ol class="tight" data-tight="true"><li><p><code spellcheck="false">Dialog</code> 컴포넌트는 현재 사용중이지 않으므로</p></li><li><p><code spellcheck="false">components/ui/dialog.tsx</code> 파일 제거하고 <code spellcheck="false">components/ui/command.tsx</code> 파일에서 <code spellcheck="false">Dialog</code> 관련 코드는 모두 제거</p></li></ol></li><li><p>사이드바 UI 구축</p><img src="https://image.until.blog/artemismars2/article/1718214780466" alt="until-473"></li></ol>

Sidebar 개발구글에서 shadcn-ui 로 사이드바 개발하는 방법을 검색검색 결과에 있는 유튜브 튜토리얼 영상 시청유튜버가 command 컴포넌트를 사용하는 것을 발견 https://www.youtube.com/watch?v=mju7e6Cf6Nknpx shadcn-ui add command 명령어 실행pakcage.json 에 cmdk 라는 라이브러리

Next.js 개발 일지 D1

<blockquote><p>목차</p><ol class="tight" data-tight="true"><li><p>Route Announcements</p></li><li><p>Static rendering</p></li><li><p>Dynamic rendering</p></li></ol></blockquote><h1>1. Route Announcements</h1><p>키워드</p><blockquote><p><code spellcheck="false">next/link</code> <code spellcheck="false">screen reader</code> <code spellcheck="false">assistive technology</code><br><code spellcheck="false">document.title</code> <code spellcheck="false">SSR</code> <code spellcheck="false">CSR</code></p></blockquote><h2>1-1. Screen reader</h2><ul class="tight" data-tight="true"><li><p>웹접근성과 관련된 기술</p></li><li><p>웹페이지 텍스트를 소리내어 읽어줌</p></li><li><p>assisitive technology 라고도 함</p></li><li><p>페이지 전환시 새로운 html 문서를 서버로부터 받은 경우에 변경된 title을 읽어 페이지가 바뀌었음을 알려주는 기능도 포함됨</p></li><li><p><strong>한계: CSR 에서 페이지 전환시에는 위 기능이 작동하지 않음</strong></p></li></ul><h2>1-2. Route announcer</h2><ul class="tight" data-tight="true"><li><p>넥스트에서 기본적으로 지원해주는 기능</p></li><li><p>스크린 리더가 페이지 전환시 title을 읽어 페이지가 변경되었음을 알려주는 기능을 보강</p></li><li><p>페이지 전환이 CSR 방식으로 발생된 경우 페이지 전환을 assistive technology에 알려줌</p></li><li><p>title 을 읽어서 알려줌 (브라우저 탭에 있는 웹페이지 타이틀)</p></li><li><p>title 값이 없으면 해당 페이지의 h1 태그 값을 알려줌</p></li><li><p>h1도 없으면 해당 페이지의 url 경로 값을 알려줌</p></li><li><p>next/link 의 <code spellcheck="false">Link</code> 컴포넌트를 클릭한 경우 CSR 페이지 전환이 발생함</p></li><li><p>이때 <code spellcheck="false">Route announcer</code> 가 assistive technology 에 정보를 알려줌</p></li></ul><h2>1-3. next/link</h2><pre spellcheck="false"><code>import Link from 'next/link';
export default function Home() {
return (
&lt;Link href="/about"&gt;
페이지 이동
&lt;/Link&gt;
)
}</code></pre><ul class="tight" data-tight="true"><li><p>a 태그를 상속한 컴포넌트라고 공식문서에서 소개</p></li><li><p>누르면 해당 경로로 페이지 이동</p></li><li><p>이때 페이지 전환은 Link 컴포넌트 설정에 따라서 SSR 이거나 CSR 일 수 있음</p></li><li><p>prefetch 라는 속성이 존재하고 이 속성이 렌더링 방식을 결정</p></li><li><p>prefetch 값이 true 라면, Link 컴포넌트가 화면에 보일때 미리 해당 페이지 관련 데이터를 내려받아서 Link 컴포넌트를 눌렀을때 서버랑 통신시키는게 아니라 미리 받아놓은 데이터를 이용해 CSR을 함</p></li><li><p>이 CSR 페이지 전환에서 route announcer가 스크린 리더에 페이지 전환에 관련된 정보 전달<br>(<code spellcheck="false">title</code> or <code spellcheck="false">h1</code> or <code spellcheck="false">url</code>)</p></li></ul><h1>2. Static rendering</h1><p>키워드</p><blockquote><p><code spellcheck="false">cache</code> <code spellcheck="false">CDN</code></p></blockquote><ol class="tight" data-tight="true"><li><p>프로젝트 빌드</p></li><li><p>HTML 파일 생성</p></li><li><p>CDN에 분산 저장 (캐싱)</p></li><li><p>유저가 웹페이지 접속</p></li><li><p>CDN에 캐싱되어있는 HTML 완성본을 유저에 전송</p></li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li><p>매 요청마다 서버에서 HTML 파일 생성을 하지 않으므로 서버 운영 효율적</p></li><li><p>HTML 파일 생성 과정이 생략되므로 유저는 빠르게 페이지를 받아볼 수 있음</p></li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li><p>캐싱된 HTML 완성본을 받아보므로 접속할때 최신 데이터를 볼 수 없음</p></li></ul><h2>3. Dynamic rendering</h2><p>키워드</p><blockquote><p><code spellcheck="false">SSR</code></p></blockquote><ol class="tight" data-tight="true"><li><p>유저가 웹페이지 접속</p></li><li><p>서버에서 해당 페이지의 HTML 파일 생성</p></li><li><p>HTML 문서 전송</p></li></ol><h3>장점</h3><ul class="tight" data-tight="true"><li><p>유저가 웹페이지 접속할 때마다 최신 데이터를 볼 수 있음</p></li></ul><h3>단점</h3><ul class="tight" data-tight="true"><li><p>매 요청마다 서버에서 HTML 파일을 생성해야함</p></li></ul>

NEXT 공식문서를 통한 개념 학습

NEXT 공식문서 읽기 D1

<p>최근에 브라우저 렌더링에 관심이 생겨 조사를 진행해보았다.</p><p>조사 결과 흥미로운 점들을 발견할 수 있었다.</p><p>브라우저 렌더링 엔진들이 독자적으로 개발되어 존재하는게 아니라 서로 관련있다는 부분이었다.</p><h1>CHROME</h1><p>크롬은 BLINK 엔진을 사용한다. 이 엔진은 구글에서 WEBKIT 엔진을 포킹하여 일부 개선한다음 내놓은 엔진이라고 한다. WEBKIT 엔진은 애플의 사파리 브라우저에서 사용하는 엔진이다. 이 WEBKIT 엔진은 리눅스 OS 중 하나인 KDE 프로젝트의 브라우저에 사용된 엔진인 KHTML의 포킹 버전이라고 한다.</p><p><code spellcheck="false">KHTML</code> -&gt; <code spellcheck="false">WEBKIT</code> -&gt; <code spellcheck="false">BLINK</code> 순으로 포킹되었다는 것을 알 수 있었다.</p><p>BLINK 렌더링 엔진은 크로미움 프로젝트의 일부로 크로미움을 이용하여 개발된 웹브라우저의 경우 블링크를 사용하고 있다.</p><h1>EDGE</h1><p>엣지 브라우저는 기존에는 전용 렌더링 엔진을 사용했지만 지금은 BLINK 엔진을 사용한다.</p><h1>FIREFOX</h1><p>파이어폭스는 모질라에서 만든 브라우저로 렌더링 엔진의 원형은 넷스케이프에서 만든 네비게이터 브라우저에서 개발한 렌더링 엔진이라고 한다.</p><p>이름은 GECKO 엔진이며 대략 1990년대 후반부터 현재까지 사용되고 있는 렌더링 엔진이다.</p><p></p><h1>크로미움 특징</h1><h3>멀티 프로세스 아키텍처</h3><p>크롬 브라우저는 하나의 메인 프로세스와 렌더러 프로세스 여러개로 구성되어있고 기타 프로세스들도 존재한다고 한다. 메인 프로세스는 브라우저에서 웹페이지 뷰포트 제외한 부분의 기능들이 실행되고 뷰포트는 렌더러 프로세스가 처리한다.</p><p>BLINK는 크롬의 렌더링 엔진으로 렌더러 프로세스 내에서 실행된다고 한다.</p><p>보통 크롬 브라우저의 한 탭마다 하나의 렌더러 프로세스가 할당된다. 그래서 하나의 탭에서 문제가 생긴 경우 다른 탭들이 안전하다고 한다.</p><p>BLINK 엔진 참조: https://www.chromium.org/blink/</p>

브라우저 렌더링 엔진

[도서] 자바 ORM 표준 JPA 프로그래밍

[도서] 그림으로 이해하는 AWS 구조와 기술

<img src="https://image.until.blog/morethanmin/article/1716115237924" alt="until-88"><p>react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.</p><h2>staleTime</h2><blockquote><ul><li><p>The time in milliseconds after data is considered stale. This value only applies to the hook it is defined on.</p></li><li><p>If set to <code spellcheck="false">Infinity</code>, the data will never be considered stale</p></li></ul></blockquote><p><code spellcheck="false">staleTime</code>은 불러온 데이터가 fresh한 시간을 나타낸다. defaultValue는 0으로, 리액트 쿼리에서는 기본적으로 불러온 데이터는 fresh하지 않다고 간주한다.</p><p>기본 값을 사용하게 된다면 해당 hook을 사용하는 컴포넌트가 mount 될 때마다 data fetching을 시도할 것이다.</p><p>데이터의 stale여부에 따라서 적절하게 조절해줌으로써 최적화 해줄 수 있다.</p><p>아래 예시는 until.lbog 에서 사용하는 특정 블로그 정보를 가져오는 훅이다.</p><pre spellcheck="false"><code class="language-typescript">import { useSuspenseQuery } from '@tanstack/react-query'
import { GetBlogResponse, createGetBlog } from 'src/apis/blog/[username]'
import { queryKeys } from 'src/constants/queryKeys'

const useBlogQuery = () =&gt; {
  const username = useUsername();
  const { data } = useSuspenseQuery&lt;GetBlogResponse&gt;({
    queryKey: queryKeys.blog.username.body(username),
    queryFn: createGetBlog(username),
    staleTime: Infinity,
  })
  return data
}

export default useBlogQuery</code></pre><p>staleTime을 <code spellcheck="false">Infinity</code>로 설정한 이유는 무엇일까?</p><p>기본적으로 블로그 정보는 서버사이드에서 불러온 이후 변경되는 경우가 거의 없다. 해당 훅은 블로그에서 전반적으로 사용하고 있기 때문에 staleTime이 0일 경우에는 화면을 전환될 때마다 비효율적인 데이터 패칭이 계속해서 일어날 것이라고 판단하였다.</p><p>프로필 수정, 팔로우, 팔로잉와 같이 데이터가 더이상 fresh하지 않은 경우에는 <code spellcheck="false">queryClient.invalidateQuery</code>를 통해 명시적으로 갱신해줌으로써 해결할 수 있다.</p><p>물론 위 방식의 경우 외부적인 요인에 의해 특정 블로그 정보가 변경되는 경우에는 해당 블로그에 재 접속하지 않는 이상 갱신되지 않을 수 있다는 점은 감안해야한다.</p><p>아래 예시는 게시글 리스트를 가져오는 훅이다.</p><pre spellcheck="false"><code>import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
import { queryKeys } from 'src/constants/queryKeys'
import {
  GetArticlesParams,
  createGetUserArticles,
} from 'src/apis/blog/[username]/articles'
import useBlogData from 'src/blog/hooks/useBlogData'
import useArticleParams from './useArticleParams'

const useArticlesInfiniteQuery = () =&gt; {
  const blogData = useBlogData()
  const { order, query, tag } = useArticleParams()

  const params: GetArticlesParams = {
    order: order || undefined,
    query: query || undefined,
    tagSlug: tag || undefined,
  }

  const { data, ...infiniteQuery } = useSuspenseInfiniteQuery({
    queryKey: queryKeys.blog.username.articles.list(blogData.username, params),
    queryFn: async ({ pageParam }) =&gt; {
      const getUserArticles = createGetUserArticles(blogData.username)

      return await getUserArticles({ page: pageParam, ...params })
    },
    initialPageParam: 0,
    getNextPageParam: (data) =&gt; (data.hasMore ? data.page + 1 : undefined),
  })

  if (!data) throw new Error('Suspense Error')

  return { data, ...infiniteQuery }
}

export default useArticlesInfiniteQuery
</code></pre><p>위 훅에서는 반대로 <code spellcheck="false">staleTime</code>을 설정하지 않고 기본값(0)을 사용했다.</p><p>그 이유는 훅의 영향 범위가 <code spellcheck="false">useBlogQuery</code> 와 같이 전반적인 블로그 페이지에서 사용되는 것이 아닌 하나의 특정된 페이지에서만 사용하기에 때문이다</p><h2>gcTime (cacheTime)</h2><blockquote><ul><li><p>The time in milliseconds that unused/inactive cache data remains in memory. When a query's cache becomes unused or inactive, that cache data will be garbage collected after this duration. When different garbage collection times are specified, the longest one will be used.</p></li></ul></blockquote><p><code spellcheck="false">gcTime</code> 은 데이터가 사용되지 않는 상황에서 memory에 유지될 수 있는 시간을 의미하고, defaultValue는 클라이언트 사이드에서는 5분, <strong>서버사이드에서는 Infinity</strong>로 지정된다.</p><p>일반적으로 클라이언트 사이드에서 해당 값을 변경하는 경우는 크게 없었던 것 같다.</p><p>데이터 패칭에 직접적인 영향을 주지 않기 때문이다.</p><p>다만 서버사이드에서는 Infinity로 설정되기 때문에 얘기가 달라진다. 메모리에 계속해서 데이터가 누적되는 경우에는 해당 값을 적절히 지정해 주는 것이 필요할 것 같다.</p><h2>결론</h2><p>어떻게 잡아주더라도 http 통신을 하는 웹페이지 안에서 데이터는 불일치하는 경우는 발생할 수 밖에 없다.</p><p>데이터의 특성에 따라 적절한 캐싱 시간을 조절함으로써 불일치하는 경우를 최소화 할 수 있도록 하는것이 최선인 것 같다.</p><p></p><p></p><p></p><p></p>

react-query에서 useQuery를 사용하면 staleTime과 gcTime 을 이용해 데이터를 효율적으로 다룰 수 있다. 둘의 차이점을 알아보자.staleTimeThe time in milliseconds after data is considered stale. This value only applies to the hook it is define