⚛️ 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

react에서 현재 os 확인하기 (useOs)

Python

<blockquote><p>macOS 사용 도중 파이썬 패키지를 설치하기 위해 pip를 사용하자 보안 경고가 발생하며 설치가 거부되었다. 이를 해결하는 방법에 대해 다룬다.</p></blockquote><h3>도대체 무슨 에러인가?</h3><p></p><img src="https://image.until.blog/xeros/article/1727225853116.png" alt="until-1518"><p>Python의 최신 PEP 668 표준에 의해, macOS 환경에서 pip를 통한 패키지 설치가 제약되는 문제라고 한다. 아무래도 최근에 애플에서 맥에 여러가지 보안 강화 조치와 제약이 추가되었는데 여기에 영향을 받은 패치가 아닐까 싶다.</p><p>이 문제를 해결하는 방법은 크게 3가지정도로 구분할 수 있다.</p><h3>1. 가상 환경을 사용하는 방법</h3><p>다음과 같이 Python 가상 환경을 만들어서 사용하면 독립된 공간을 만들어서 사용하기에 pip를 정상적으로 사용할 수 있게 되며 패키지의 버전 문제로 인한 충돌을 피하기도 쉽다. 하지만 매 파이썬 프로젝트마다 가상 환경을 생성해주어야하고 터미널을 열 때마다 <code spellcheck="false">source</code>를 지정해 주어야 한다는 번거로움이 따른다.</p><ol><li><p>가상 환경 생성</p></li></ol><pre spellcheck="false"><code class="language-bash">python3 -m venv path/to/venv</code></pre><ol start="2"><li><p>가상 환경 활성화</p></li></ol><pre spellcheck="false"><code class="language-bash">source path/to/venv/bin/activate</code></pre><ol start="3"><li><p>패키지 설치</p></li></ol><pre spellcheck="false"><code>pip install supabase</code></pre><h3>2. pip에서 사용자 플래그 추가</h3><p>시스템 패키지 환경을 보호하기 위해 설치를 사용자 환경으로 제한하여 설치하도록 한다.</p><p>그냥 귀찮음도 덜하고 보안도 챙기고 무난한 방법인듯하다.</p><pre spellcheck="false"><code class="language-bash">pip install --user supabase</code></pre><h3>3. break-system-package 옵션 또는 pip.conf 수정</h3><p>그냥 보안 권고사항을 무시하고 기존에 pip처럼 다이렉트 설치를 가능하게 하는 옵션을 붙여서 사용하면 된다.</p><pre spellcheck="false"><code class="language-bash">pip install &lt;package name&gt; --break-system-packages</code></pre><p>근데 매번 이 옵션을 붙이는것도 귀찮다면 아예 <code spellcheck="false">pip.conf</code> 파일을 수정해서 영구적으로 해당 명령을 활성화 시키는것 역시 가능하다.</p><ol><li><p><code spellcheck="false">pip.conf</code> 파일 생성</p></li></ol><pre spellcheck="false"><code class="language-bash">mkdir -p ~/.config/pip
vi ~/.config/pip/pip.conf</code></pre><ol start="2"><li><p>아래 내용을 추가한다.</p></li></ol><pre spellcheck="false"><code class="language-bash">pip install supabase --break-system-packages</code></pre><h3>왜 이런 보안조치가 시행되었는가?</h3><p>애플이 원래도 보안쪽으로는 깐깐했지만 갑자기 이런 기존 시스템에 영향을 줄 수도 있는 패치를 한 원인이 궁금해서 찾아보니 간략하게 설명하자면 pip를 사용한 시스템 전역 패키지 설치가 운영 체제의 패키지 관리자와 충돌할 수 있어 이를 방지하려는 목적이라고 한다. 패키지를 가상 환경이나 사용자 환경에만 설치하도록 유도해서 종속성 관리 문제를 해결하고 보안 취약점을 줄이기 위한 조치인듯 하다.</p><p>마찬가지로 <code spellcheck="false">Homebrew</code> 역시 현재 공식 홈페이지에 나와있는 Installation 방법을 따라하고 추가적인 수정을 거치지 않으면 명령어 인식이 안된다.</p>

macOS에서 pip externally-managed-environment 에러를 픽스하는 방법

macOS에서 pip install시 error: externally-managed-environment 에러가 발생하는 문제

코딩테스트

<h3>문제 설명</h3><p>당신은 순서대로 <code spellcheck="false">n</code>개의 퍼즐을 제한 시간 내에 풀어야 하는 퍼즐 게임을 하고 있습니다. 각 퍼즐은 난이도와 소요 시간이 정해져 있습니다. 당신의 숙련도에 따라 퍼즐을 풀 때 틀리는 횟수가 바뀌게 됩니다. 현재 퍼즐의 난이도를 <code spellcheck="false">diff</code>, 현재 퍼즐의 소요 시간을 <code spellcheck="false">time_cur</code>, 이전 퍼즐의 소요 시간을 <code spellcheck="false">time_prev</code>, 당신의 숙련도를 <code spellcheck="false">level</code>이라 하면, 게임은 다음과 같이 진행됩니다.</p><ul><li><p><code spellcheck="false">diff</code> ≤ <code spellcheck="false">level</code>이면 퍼즐을 틀리지 않고 <code spellcheck="false">time_cur</code>만큼의 시간을 사용하여 해결합니다.</p></li><li><p><code spellcheck="false">diff</code> &gt; <code spellcheck="false">level</code>이면, 퍼즐을 총 <code spellcheck="false">diff</code> - <code spellcheck="false">level</code>번 틀립니다. 퍼즐을 틀릴 때마다, <code spellcheck="false">time_cur</code>만큼의 시간을 사용하며, 추가로 <code spellcheck="false">time_prev</code>만큼의 시간을 사용해 이전 퍼즐을 다시 풀고 와야 합니다. <strong>이전 퍼즐을 다시 풀 때는 이전 퍼즐의 난이도에 상관없이 틀리지 않습니다.</strong> <code spellcheck="false">diff</code> - <code spellcheck="false">level</code>번 틀린 이후에 다시 퍼즐을 풀면 <code spellcheck="false">time_cur</code>만큼의 시간을 사용하여 퍼즐을 해결합니다.</p></li></ul><p>예를 들어 <code spellcheck="false">diff</code> = 3, <code spellcheck="false">time_cur</code> = 2, <code spellcheck="false">time_prev</code> = 4인 경우, <code spellcheck="false">level</code>에 따라 퍼즐을 푸는데 걸리는 시간은 다음과 같습니다.</p><ul><li><p><code spellcheck="false">level</code> = 1이면, 퍼즐을 3 - 1 = 2번 틀립니다. 한 번 틀릴 때마다 2 + 4 = 6의 시간을 사용하고, 다시 퍼즐을 푸는 데 2의 시간을 사용하므로 총 6 × 2 + 2 = 14의 시간을 사용하게 됩니다.</p></li><li><p><code spellcheck="false">level</code> = 2이면, 퍼즐을 3 - 2 = 1번 틀리므로, 6 + 2 = 8의 시간을 사용하게 됩니다.</p></li><li><p><code spellcheck="false">level</code> ≥ 3이면 퍼즐을 틀리지 않으며, 2의 시간을 사용하게 됩니다.</p></li></ul><p>퍼즐 게임에는 전체 제한 시간 <code spellcheck="false">limit</code>가 정해져 있습니다. 제한 시간 내에 퍼즐을 모두 해결하기 위한 숙련도의 최솟값을 구하려고 합니다. <strong>난이도, 소요 시간은 모두 양의 정수며, 숙련도도 양의 정수여야 합니다.</strong></p><p>퍼즐의 난이도를 순서대로 담은 1차원 정수 배열 <code spellcheck="false">diffs</code>, 퍼즐의 소요 시간을 순서대로 담은 1차원 정수 배열 <code spellcheck="false">times</code>, 전체 제한 시간 <code spellcheck="false">limit</code>이 매개변수로 주어집니다. 제한 시간 내에 퍼즐을 모두 해결하기 위한 숙련도의 최솟값을 정수로 return 하도록 solution 함수를 완성해 주세요.</p><p></p><h3>제한사항</h3><ul><li><p>1 ≤ <code spellcheck="false">diffs</code>의 길이 = <code spellcheck="false">times</code>의 길이 = <code spellcheck="false">n</code> ≤ 300,000</p><ul><li><p><code spellcheck="false">diffs[i]</code>는 <code spellcheck="false">i</code>번째 퍼즐의 난이도, <code spellcheck="false">times[i]</code>는 <code spellcheck="false">i</code>번째 퍼즐의 소요 시간입니다.</p></li><li><p><code spellcheck="false">diffs[0]</code> = 1</p></li><li><p>1 ≤ <code spellcheck="false">diffs[i]</code> ≤ 100,000</p></li><li><p>1 ≤ <code spellcheck="false">times[i]</code> ≤ 10,000</p></li></ul></li><li><p>1 ≤ <code spellcheck="false">limit</code> ≤ 1015</p><ul><li><p>제한 시간 내에 퍼즐을 모두 해결할 수 있는 경우만 입력으로 주어집니다.</p></li></ul></li></ul><p></p><h3>입출력 예시</h3><img src="https://image.until.blog/jisoo/article/1727223139135.png" alt="until-1507"><h3>접근</h3><ol><li><p>puzzle에 대한 조건식을 구성</p></li><li><p>숙련도를 찾아야하는데, 전부 계산하기에는 시간초과 =&gt; 이진 탐색 필요!</p></li></ol><p></p><h3>구현 Code</h3><pre spellcheck="false"><code class="language-python">def puzzle(diff, cur, prev, level):
    if diff &lt;= level:
        return cur
    else:
        return (diff - level) * (cur + prev) + cur


def solution(diffs, times, limit):
    max_level, min_level = max(diffs), 1

    while max_level &gt; min_level:
        mid_level = (min_level + max_level) // 2
        total = puzzle(diffs[0], times[0], 0, mid_level)

        for t in range(1, len(diffs)):
            prev = times[t - 1]
            cur = times[t]
            total += puzzle(diffs[t], cur, prev, mid_level)
        if total &lt;= limit:
            max_level = mid_level
        else:
            min_level = mid_level + 1

    return min_level</code></pre><p></p><h3>함수 설명</h3><p><strong>puzzle</strong></p><ul><li><p>현재 퍼즐 난이도가 숙련도보다 쉽다면 =&gt; 현재값</p></li><li><p>현재 퍼즐 난이도가 숙련도보다 어렵다면</p><ul><li><p>(이전 문제 푸는 시간 + 현재 문제 푸는 시간)을 (난이도 - 숙련도) 즉, 틀릴 때마다 반복해주고 현재 문제 푸는 시간만큼 더해줘야한다.</p></li></ul></li></ul><p></p><p><strong>숙련도 찾는 방법</strong></p><p>전부 탐색하기에는 불가능하기 때문에, 중간부터 찾아준다.</p><p>level에 따라 계산한 값을 total에 더해줄건데, 만약에 limit보다 크다면 level을 낮춰준다.</p><p>반대로 작다면 최소값을 찾아야하기 때문에 숙련도를 높여준다.</p><p></p>

문제 설명당신은 순서대로 n개의 퍼즐을 제한 시간 내에 풀어야 하는 퍼즐 게임을 하고 있습니다. 각 퍼즐은 난이도와 소요 시간이 정해져 있습니다. 당신의 숙련도에 따라 퍼즐을 풀 때 틀리는 횟수가 바뀌게 됩니다. 현재 퍼즐의 난이도를 diff, 현재 퍼즐의 소요 시간을 time_cur, 이전 퍼즐의 소요 시간을 time_prev, 당신의 숙련도를 level

[프로그래머스 - lv2] [PCCP 기출문제] 2번 / 퍼즐 게임 챌린지 (Python)

🖥 백엔드

Cotuber에 도입된 AI 자막 생성 기능이 어떤 과정을 거쳐 만들어졌는지 공유합니다.

우리 팀이 자동으로 자막을 생성하기까지

React 에서 전역 상태관리…React 생태계에서 전역 상태관리는 3rd 파티 라이브러리를 통해 구현하는 게 일반적입니다.React 에서 상태관리 라이브러리로는 Redux, Recoil, Zustand 등이 널리 사용되고 있는데, 이 중 Zustand 의 보급과 사용이 확산되고 있는 추세인 것 같습니다. (npm 다운로드 Zustand 3.4m/w 으로,