Frontend

tRPC with Next.js 14

🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1716457407086" alt="until-193"><blockquote><p>react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension</p></blockquote><p>최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...</p><p>본인들의 말에 의하면 <strong>리액트 개발 생산성을 8% 증가</strong> 시킬 수 있다고 한다...</p><p>그것은 바로 locator js... 브라우저에서 특정 영역의 컴포넌트 코드 위치를 찾고자 할때 유용하게 사용할 수 있다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">홈페이지</a>에 가면 설치하지 않고 실제로 사용해볼 수 있으니 궁금하면 가서 사용해보자.</p><h1>사용법</h1><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://chromewebstore.google.com/detail/locatorjs/npbfdllefekhdplbkdigpncggmojpefi">크롬 웹스토어</a>에서 locator js를 설치해주면 설치해주고 홈페이지에 나와있는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.locatorjs.com/">가이드</a>를 참고하면 된다.</p><p>본인의 개발환경을 띄우고, 브라우저에서 윈도우에서는 <code spellcheck="false">alt</code> , 맥에서는 <code spellcheck="false">option</code> 을 누르고 특정 영역을 클릭하면 바로 찾아준다.</p><hr><h1>후기</h1><p>근데 devDependency로 설치해줄 만큼 유용한지는 잘 모르겠음</p><p></p>

react, next.js, solidjs, preact,svelte, vue 등에서 컴포넌트 코드 위치를 손쉽게 찾을 수 있도록 도와주는 extension최근에 사용해본 크롬 익스텐션 중 신기한 익스텐션이 있어서 공유해보려고 한다...본인들의 말에 의하면 리액트 개발 생산성을 8% 증가 시킬 수 있다고 한다...그것은 바로 locator js... 브라우

브라우저에서 컴포넌트 코드 위치를 찾아주는 extension, Locator JS

📚 BOOK

🎨 PUBLISHING

CI/CD

⚛️ React

<p>until 에서는 현재 os에 따라 <code spellcheck="false">cmd + k</code> 또는 <code spellcheck="false">ctrl + k</code> 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.</p><img src="https://image.until.blog/morethanmin/article/1728463552341.gif" data-width="100%" data-align="center"><p>이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.</p><h2>userAgent</h2><p>navigator.userAgent 의 정보를 활용하면 os정보를 가져올 수 있어요. <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgent">MDN</a>에서는 아래와 같이 설명하고 있어요.</p><blockquote><p>The <code spellcheck="false">Navigator.userAgent</code> read-only property returns the user agent string for the current browser.</p></blockquote><p>그럼 간단하게 이 정보를 통해 os 정보를 가져오는 useOs hook을 만들어볼까요?</p><h2>useOs (in Next.js)</h2><p>server side에서 동작할 수 있기 때문에 state로 감싸고 useEffect에서 값을 가져올 수 있도록 처리해주었어요.</p><p>만약 client side에서 동작하는 경우에는 state로 관리될 필요가 없으니 참고해주세요. 언제든 window 객체에 접근할 수 있기 때문이에요.</p><pre spellcheck="false"><code class="language-typescript">import { useEffect, useState } from 'react'

const macosPattern =
  /(Macintosh)|(MacIntel)|(MacPPC)|(Mac68K)|(iPhone)|(iPad)|(iPod)/i

const windowsPattern = /(Win32)|(Win64)|(Windows)|(WinCE)/i

const getOS = () =&gt; {
  if (typeof window === 'undefined') {
    return null
  }

  const { userAgent } = window.navigator

  if (macosPattern.test(userAgent)) {
    return 'macos'
  }
  if (windowsPattern.test(userAgent)) {
    return 'windows'
  }

  return null
}

const useOs = () =&gt; {
  const [os, setOs] = useState&lt;'macos' | 'windows' | null&gt;(null)

  useEffect(() =&gt; {
    setOs(getOS)
  }, [])

  return os
}

export default useOs</code></pre><h2>주의할 점</h2><p>MDN에서는 이 userAgent를 사용하는 것에 대해서 아래와 같이 주의사항을 안내하고 있어요.</p><blockquote><p>Browser identification based on detecting the user agent string is <strong>unreliable</strong> and <strong>is not recommended</strong>, as the user agent string is user configurable. For example: ...</p></blockquote><p>즉, 이 값은 유저에 의해 쉽게 변경될 수 있는 값이고 수정이 가능하다는 내용이에요.</p><p>따라서 서비스의 동작에 영향을 미칠 수 있는 곳에서는 사용하지 않는 것이 좋겠습니다.</p>

until 에서는 현재 os에 따라 cmd + k 또는 ctrl + k 단축키를 통해 검색 창을 띄우는 기능을 제공하고 있어요.이 기능을 구현하기 위해서는 os 여부에 따라 단축키도 다르게 표시해주어야하고 실제 keydown eventlistener도 os에 따라 다르게 인식해야해요.userAgentnavigator.userAgent 의 정보를 활용하면 o