🧑‍💻 Develop

<img src="https://image.until.blog/morethanmin/article/1718723304750" alt="until-541"><p>개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.</p><p>멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.</p><p>기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.</p><h1>마우스를 활용한 멀티 커서 단축키</h1><h2>클릭하여 하나씩 추가</h2><p>우선 가장 기초적인 방법부터 알려드릴게요.</p><p>맥에서는 <code spellcheck="false">Option</code> 키, 윈도우에서는 <code spellcheck="false">Alt</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터로 클릭하여 여러 커서를 추가할 수 있습니다.</p><p>이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일하게 타이핑이 됩니다.</p><p>제거하기 위해서는 커서에 <code spellcheck="false">Option</code> 또는 <code spellcheck="false">Alt</code> 키를 누르신 체로 다시 클릭해주시면 됩니다.</p><p><code spellcheck="false">esc</code> 를 눌러서도 멀티커서를 제거할 수 있어요.</p><h2>그래그하여 추가</h2><p>클릭이 아닌 드래그해서 추가하는 방법도 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift</code> 키, 윈도우에서는 <code spellcheck="false">Alt+Shift</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터를 드래그하여 여러 커서를 추가할 수 있습니다.</p><h1>키보드를 활용한 멀티 커서 단축키</h1><h2>일치하는 텍스트 모두 선택</h2><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+Shift+L</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+Shift+L</code> 키를 누르면 동일한 텍스트들에 모두 커서가 추가됩니다.</p><h2>순차적으로 일치하는 텍스트 선택</h2><p>위 기능의 경우 모든 텍스트가 선택된다면 해당 단축키를 사용하면 순차적으로 원하는 텍스트에 하나씩 커서가 추가됩니다.</p><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+D</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+D</code> 키를 누르면 드래그한 텍스트와 일치하는 다음 텍스트에 커서가 생기고 또 누르면 그 다음 텍스트에 커서가 추가되어요.</p><p>만약에 다시 되돌리기 위해서는 맥에서는 <code spellcheck="false">Command+U</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+U</code> 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있어요.</p><h2>현재 커서 위 또는 아래 줄에 추가</h2><p>현재 커서 위치에서 위 또는 아래 방향으로도 멀터 커서를 연속으로 추가할 수 있어요. 맥에서는 <code spellcheck="false">Command+Option+Up/Down</code>, 윈도우즈에서는 <code spellcheck="false">Ctrl+Alt+Up/Down</code>키를 누르시면 됩니다.</p><h2>그래그한 여러 줄의 맨 마지막에 멀터 커서 추가하기</h2><p>여러줄을 드래그한 상태에서 각 줄의 마지막 라인에 커서를 추가할 수 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift+I</code>, 윈도우에서는 <code spellcheck="false">Alt+Shift+I</code>를 키를 눌러 적용할 수 있어요.</p><p></p>

개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서

VSCode 멀티 커서로 생산성 높이기

<p>분명 배운 지 며칠 안됐는데 벌써 가물가물해서 기본 개념부터 다시 짚으면서 써 봐야겠다.</p><h2>(복습) Redux란?</h2><p>전역 상태관리 라이브러리로서 React App 내의 수많은 컴포넌트들에 분산되어 있는 수많은 상태들을 한데 모아 관리할 수 있도록 해주는 역할.</p><img src="https://image.until.blog/mushroombud/article/1728570750539.png" data-width="75%" data-align="center"><p><em>작동 원리같은 거 고려 안하고 Redux의 개념을 직관적으로 가장 잘 보여주는 그림 되시겠다</em></p><p>그래서 Redux를 쓸 때 핵심적으로 봐야 하는 요소가 무엇무엇이 있었냐면: "Single Source of Truth" 전역 상태를 저장하는 Store이 존재하고, 그 Store의 Variable을 바꾸는 방법은 Reducer로 미리 정의되어 있어야 하며 데이터의 흐름을 단일 방향이어야 한다.</p><p>여기까지만 보면 참 좋은데...</p><h2>Redux의 문제점</h2><p>하나의 Action을 만들고 싶다면?</p><p><em>Action 타입 정의 및 함수 생성 -&gt; Reducer 정의</em> 가 필요하다.</p><p>간단한 Counter을 하나 만들어보도록 하자. (출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@djaxornwkd12/Redux-Toolkit-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0">devSoo님의 블로그</a>)</p><h3>CreateAction</h3><pre spellcheck="false"><code>const INCREMENT = 'counter/increment' 

function increment(amount) {
  return {
    type: INCREMENT,
    payload: amount
  }
}

const action = increment(3)
// { type: 'counter/increment', payload: 3 }</code></pre><h3>CreateReducer</h3><pre spellcheck="false"><code>function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'increment':
      return state + action.payload
    case 'decrement':
      return state - action.payload
    default:
      return state
  }
}</code></pre><h3>ConfigureStore</h3><pre spellcheck="false"><code>import { createStore } from "redux";
import rootReducer from "./Redux/Reducer";

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(rootReducer, devTools);</code></pre><p>increment action 하나를 위해서 지금 여러 줄의 코드가 작성되었다.</p><p><s>더 복잡해 보이라고 createSlice 안썼다</s></p><h2>Redux-toolkit 등장⭐️</h2><h3>CreateAction 진화버전</h3><pre spellcheck="false"><code class="language-jsx">const increment = createAction('counter/increment')

let action = increment() ✅ 사용
// { type: 'counter/increment' }

action = increment(3) ✅ 사용
// returns { type: 'counter/increment', payload: 3 }</code></pre><h3>CreateReducer 진화버전</h3><pre spellcheck="false"><code>const counterReducer = createReducer(0, {
  increment: (state, action) =&gt; state + action.payload,
  decrement: (state, action) =&gt; state - action.payload
})</code></pre><h3>ConfigureStore 진화버전</h3><pre spellcheck="false"><code>import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
  reducer: {
    counter: counterReducer,
    todos: todosReducer,
  },
});</code></pre><p>딱 봐도 양이 짧아졌고, Default가 기본으로 지정되어 있으며 configureStore을 보면 reducer 필드 안에 그냥 만든 녀석들을 박아넣기만 하면 알아서 작동한다.</p><h2>Ducks Pattern?</h2><p>Redux-toolkit을 사용하면서 준수하는 디자인 패턴이다. 디자인 패턴과 개발 컨벤션의 차이에 대해서는 많이 들었을 테니까 넘어가고, 그렇다면 어떻게 디자인해야 바람직한가? 이에 대한 해답은 규칙 하나와 그림 하나로 대신하는 게 좋다.</p><blockquote><ol><li><p>MUST export default a function called reducer()</p></li><li><p>MUST export its action creators as functions</p></li><li><p>MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE</p></li><li><p>MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library</p></li></ol></blockquote><p>뻔해 보이는 규칙이지만 지켰을 때 코드의 가독성과 단순성, 구조를 향상시킬 수 있는 규칙이다.</p><img src="https://image.until.blog/mushroombud/article/1728571646480.png" data-width="100%" data-align="center"><p>(<a target="_blank" rel="noopener noreferrer nofollow" href="https://study-ihl.tistory.com/115">출처: ihl님의 블로그</a>)</p><p>"하나의 상태에 필요한 액션 타입, 생성사 함수, 리듀서를 한 파일에 저장한다" -&gt; 이를 통해 한 액션을 추가할 때마다 딱 하나의 파일이 늘어나는 구조를 완성시킨다.</p><p></p><p></p><p></p><p></p>

Redux-toolkit을 사용해보자

📱 Webview

<blockquote><p>웹뷰에서 마주하는 여러 팁을 공유합니다.</p></blockquote><p>웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.</p><p>아래 사진은 토스에서 가져왔습니다.</p><img src="https://image.until.blog/morethanmin/article/1719587839236" alt="until-680"><p>이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 <code spellcheck="false">position:fixed</code>로 구현하면 됩니다.</p><p>간단한 것 같지만 한가지 고려 해야할 점이 있습니다. 컨텐츠 영역에서 특정한 높이를 차지하고 있지 않기에 뒤에 컨텐츠를 가리게 된다는 점입니다.</p><img src="https://image.until.blog/morethanmin/article/1719588105264" alt="until-681"><p>그럼 어떻게 하면 뒤 컨텐츠 영역을 가리지 않고 CTA 버튼을 만들 수 있을까요?</p><p>가장 단순한 방법으로는 최하단에 높이를 차지하는 요소를 두면 됩니다.</p><pre spellcheck="false"><code class="language-typescript">const Example = () =&gt; {
  return (
    &lt;div&gt;
      content
      &lt;Footer /&gt;
      &lt;div style={{ height: 60 }} /&gt;
      {/* 내부적으로 60px의 높이를 가진 fixed element를 렌더하고 있음*/}
      &lt;CTAButton /&gt;
    &lt;/div&gt;
  )
}

export default Example</code></pre><p>위와 같은 방식은 잘 동작하겠지만, 아래와 같은 문제점들을 마주할 수 있습니다.</p><p>바로 버튼의 높이가 동적으로 바뀌는 것에 대응할 수 없다는 것입니다.</p><p>이를 해결하기 위해서는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver"><strong>ResizeObserver </strong></a>라는 API를 사용하면 됩니다.</p><p>해당API를 사용하면 요소의 사이즈 변화를 감지하여 해당 높이를 가져올 수 있고, 이를 spacer에 주입해줄 수 있습니다.</p><pre spellcheck="false"><code class="language-typescript">const Example = () =&gt; {
  const targetRef = useRef&lt;HTMLDivElement&gt;(null)
  const spacerRef = useRef&lt;HTMLDivElement&gt;(null)

  const observer = new ResizeObserver(([entry]) =&gt; {
    if (spacerRef.current) {
      spacerRef.current.style.height = `${
        entry.target.getBoundingClientRect().height
      }px`
    }
  })

  useEffect(() =&gt; {
    if(!targetRef.current) return

    const el = targetRef.current

    observer.observe(el)

    return () =&gt; {
      observer.unobserve(el)
    }
  }, [])
  
  return (
    &lt;div&gt;
      content
      &lt;Footer /&gt;
      &lt;div style={{ height: 60 }} /&gt;
      {/* 내부적으로 60px의 높이를 가진 fixed element를 렌더하고 있음*/}
      &lt;CTAButton /&gt;
    &lt;/div&gt;
  )
}

export default Example
</code></pre><p>이러한 CTA 버튼이나 Appber처럼 fixed요소만큼 너비를 차지해야하는 경우들이 자주 발생하기에 <code spellcheck="false">useSpacer</code>라는 hook으로 분리해 보겠습니다.</p><pre spellcheck="false"><code class="language-typescript">import { useRef, useEffect } from "react";

export const useSpacer = () =&gt; {
  const targetRef = useRef&lt;HTMLDivElement&gt;();
  const spacerRef = useRef&lt;HTMLDivElement&gt;(null);

  const observer = new ResizeObserver(([entry]) =&gt; {
    if (spacerRef.current) {
      spacerRef.current.style.height = `${entry.target.getBoundingClientRect().height}px`;
    }
  });

  useEffect(() =&gt; {
    if(!targetRef.current) return

    const el = targetRef.current

    observer.observe(el)

    return () =&gt; {
      observer.unobserve(el)
    }
  }, [])

  return { spacerRef, targetRef };
};</code></pre><p>이제 CTA 버튼을 손쉽게 구현할 수 있습니다! 👏</p><p></p><p></p><p></p>

웹뷰에서 마주하는 여러 팁을 공유합니다.웹뷰를 구현하다보면 아래와 같은 화면을 자주 마주하게 됩니다.아래 사진은 토스에서 가져왔습니다.이때 하단에 항상 위치하고 있는 버튼을 보통 CTA(Click-To-Action) 버튼이라고 부르는데요. 이러한 버튼은 일반적으로 컨텐츠 위에 위치하고 있어야하기에 position:fixed로 구현하면 됩니다.간단한 것 같지

fixed 요소만큼 높이 차지하는 CTA 버튼 구현하기

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1720515012772" alt="until-802"><p>react-router v6 이후부터는 <code spellcheck="false">useRouterMatch</code> 가 사라지고 useMatch로 대체되었습니다.</p><p>사용법은 이전과 동일하지만, 공식문서에 example이 아직 없는 것 같아 짧게 정리해 봅니다.</p><h2>사용법</h2><p>예시는 until 에서 사용되는 route를 기준으로 작성했습니다.</p><p>일치하는 path가 있는 경우에는 path 객체를 return하고, 일치하지 않는 경우에는 null을 return합니다.</p><pre spellcheck="false"><code class="language-typescript">// current path : '/@morethanmin'
 const match = useMatch('/:username'); 
   useEffect(() =&gt; {
   console.log(match); //{pathname: '/@morethanmin', search: '', hash: '', state: null, key: 'default'}
  }, []);
  
  
// current path : '/@morethanmin?tab=overview'
const match = useMatch('/share/:id'); 
   useEffect(() =&gt; {
   console.log(match); //{pathname: '/@morethanmin', search: '?tab=overview', hash: '', state: null, key: 'default'}
  }, []);

  
// current path : '/explore'
 const match = useMatch('/share/:id'); 
   useEffect(() =&gt; {
   console.log(match); //null
  }, []);</code></pre>

react-router v6 이후부터는 useRouterMatch 가 사라지고 useMatch로 대체되었습니다.사용법은 이전과 동일하지만, 공식문서에 example이 아직 없는 것 같아 짧게 정리해 봅니다.사용법예시는 until 에서 사용되는 route를 기준으로 작성했습니다.일치하는 path가 있는 경우에는 path 객체를 return하고, 일치하지 않는

react-router에서 useMatch로 현재 route path 확인하기

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 에러가 발생하는 문제

PowerShell

<blockquote><p><code spellcheck="false">yarn</code>이나 <code spellcheck="false">pnpm</code>등의 패키지 관리자를 이용해 파이썬 스크립트를 실행하려고 할 때</p><p><code spellcheck="false">이 시스템에서 스크립트를 실행할 수 없으므로...</code>라는 에러를 수정하는 방법에 대해 다룬다.</p></blockquote><img src="https://image.until.blog/xeros/article/1727225098206.png" alt="until-1511"><h3>문제의 원인</h3><p>winOS에서 PowerShell의 기본 보안 정책때문에 이런 문제가 발생한다.</p><h3>해결 방법</h3><p>보안 정책에 의한 문제이기 때문에 스크립트 실행 보안 정책을 수정하면 해결된다.</p><ol><li><p>관리자 권한으로 PowerShell을 실행한다.</p></li><li><p>PowerShell에서 다음 명령어를 입력하고 실행한다.</p></li></ol><pre spellcheck="false"><code class="language-bash">Set-ExecutionPolicy -ExecutionPolicy RemoteSigned</code></pre><ol start="3"><li><p>이후 정책을 정말로 수정할것인지 묻는 프롬프트가 나오면 Y를 입력하여 정책 수정을 실행한다.</p></li></ol><img src="https://image.until.blog/xeros/article/1727225242794.png" alt="until-1513">

Windows PS에서 스크립트 실행 관련 에러를 해결하는 방법

Powershell에서 이 시스템에서 스크립트를 실행할 수 없음 에러

Frontend

<img src="https://image.until.blog/ninefloor/article/1729926668847.jpeg" data-width="100%" data-align="center" alt="1895"><h1><code spellcheck="false">path alias</code>?</h1><img src="https://image.until.blog/ninefloor/article/1729926632812.png" data-width="75%" data-align="center" alt="1894"><p>상대 경로를 이용하면 프로젝트가 커질수록 <code spellcheck="false">../../src</code> 처럼 복잡하여 구조파악이 어렵고 불편하다. 이를 해결하고 개발 경험을 증진시키는 해결 방법으로 대표되는 것이 path alias이다.</p><p>path alias는 경로에 별칭을 붙인다는 뜻으로, 상대경로로 인해 복잡해지는 import를 간략하게 만드는 방법이다. 보통 모듈 번들러에서 해당 기능을 지원하며, 번들러마다 적용하는 방법이 약간씩 다르지만 맥락은 대부분 비슷하다. TS를 사용하는 경우 추가로 <code spellcheck="false">tsconfig.json</code>에도 작성해주어야 한다.</p><p>path alias를 적용하면 해당 컴포넌트가 어디에 속해있는지 쉽게 파악할 수 있고 import 역시 편해진다.</p><blockquote><p> CRA의 경우 webpack을 사용하는데, webpack config를 따로 정의할 수 없기 때문에 eject하거나 craco와 같은 오버라이딩 라이브러리를 이용해 설정해야 한다.</p></blockquote><h1>Path Alias with Vite</h1><p>번들러 중 하나인 Vite에서도 마찬가지로 지원하는데, <code spellcheck="false">vite.config.js</code> 파일에 아래와 같이 작성하면 된다.</p><pre spellcheck="false"><code class="language-typescript">import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// &lt;https://vitejs.dev/config/&gt;
export default defineConfig({
  plugins: [react()],
  resolve: {
	// find: 해당 경로의 이름. 실제로 import문에 적용된다.
	// replacement: 경로 지정. 이때, path.resolve를 이용한다.
    alias: [
      { find: '@', replacement: path.resolve(__dirname, 'src') },
      {
        find: '@components',
        replacement: path.resolve(__dirname, 'src/components'),
      },
      {
        find: '@assets',
        replacement: path.resolve(__dirname, 'src/assets'),
      },
      {
        find: '@page',
        replacement: path.resolve(__dirname, 'src/page'),
      },
      {
        find: '@util',
        replacement: path.resolve(__dirname, 'src/util'),
      },
      {
        find: '@recoil',
        replacement: path.resolve(__dirname, 'src/recoil'),
      },
    ],
  },
});
</code></pre><h3>VScode 자동완성 설정 (w/ JavaScript)</h3><p>단, 해당 설정을 하고 나면 VSCode는 이를 인지하지 못해 자동완성이 안된다. 이 때는 <code spellcheck="false">jsconfig.json</code>에 아래와 같이 path alias를 정의해주면 정상적으로 자동완성이 동작한다. (TS의 경우 <code spellcheck="false">tsconfig.json</code>)</p><pre spellcheck="false"><code class="language-jsx">{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
</code></pre>

쩜쩜슬래시 지옥을 벗어나보자

Path Alias with Vite (+ 자동완성 설정)

Daily

📚 BOOK

<blockquote><p>책 내용을 정리하는 것이 아니라, 해당 범위에서 <strong>특별히 정리하고 싶은 내용</strong>이나 책을 읽으면서 들었던 <strong>궁금한 부분</strong>을 작성한다.</p><blockquote><p>읽다가 갑자기 정리하고 싶은 내용을적기도 한다. 꼬꼬무,,,(꼬리에 꼬리를 무는 공부)</p></blockquote><p>궁금한 부분에 대한 답변은 의문이 해소된 후에 작성한다 (영원히 작성되지 않을수도..)</p></blockquote><h2><strong>정리</strong></h2><h3><strong>팩토리 패턴이란?</strong></h3><ul><li><p>객체를 사용하는 코드에서 객체 생성 부분을 따로 떼어내 추상화한 패턴</p></li><li><p>상속관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴</p></li></ul><pre spellcheck="false"><code class="language-javascript">class CoffeeFactory {
    static createCoffee(type) {
        const factory = factoryList[type]
        return factory.createCoffee()
    }
}   
class Latte {
    constructor() {
        this.name = "latte"
    }
}
class Espresso {
    constructor() {
        this.name = "Espresso"
    }
} 
 
class LatteFactory extends CoffeeFactory{
    static createCoffee() {
        return new Latte()
    }
}
class EspressoFactory extends CoffeeFactory{
    static createCoffee() {
        return new Espresso()
    }
}
const factoryList = { LatteFactory, EspressoFactory } 
 
 
const main = () =&gt; {
    // 라떼 커피를 주문한다.  
    const coffee = CoffeeFactory.createCoffee("LatteFactory")  
    // 커피 이름을 부른다.  
    console.log(coffee.name) // latte
}
main()</code></pre><h3><strong>팩토리 패턴의 장점</strong></h3><ul><li><p>느슨한 결합을 가진다</p><ul><li><p>상위 클래스와 하위 클래스가 <code spellcheck="false">분리</code>되기 때문</p></li></ul></li><li><p>유연성이 좋다</p><ul><li><p>인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문</p></li></ul></li><li><p>유지보수성이 증가한다</p><ul><li><p><code spellcheck="false">객체 생성 로직이 따로 떼어져 있어</code> 코드를 리팩터링하더라도 한 곳만 고칠 수 있기 때문</p></li></ul></li></ul><h2><strong>고민하고 기억하기</strong></h2><blockquote><p><em>p. 24</em></p></blockquote><h3><strong>Q. 팩토리 패턴이 등장하게 된 이유가 뭘까?</strong></h3><ul><li><p>객체 생성 로직의 복잡성과 유연성을 관리하고, 코드의 유지보수성을 높이기 위해</p></li></ul><p>(팩토리 패턴이 등장하게 된 이유는, 어떤 상황에서 사용하는 것이 좋을까 와 같다고 생각함)</p><blockquote><p><em>자바스크립트 + 리액트 디자인 패턴</em></p></blockquote><h3><strong>Q. 팩토리 패턴은 어떤 상황에서 사용하는 것이 좋을까?</strong></h3><ul><li><p>객체나 컴포넌트의 생성 과정이 높은 복잡성을 가지고 있을 때</p></li><li><p>상황에 맞춰 다양한 객체 인스턴스를 편리하게 생성할 수 있는 방법이 필요할 때</p></li><li><p>같은 속성을 공유하는 여러 개의 작은 객체 또는 컴포넌트를 다뤄야 할 때</p></li><li><p>덕 타이핑 같은 API 규칙만 충족하면 되는 다른 객체의 인스턴스와 함께 객체를 구성할 때</p></li><li><p>디커플링 상황</p></li></ul><p><strong>Q. 덕타이핑과 구조적 타이핑, 동적 타이핑</strong></p><ul><li><p>동적 타이핑은, 값이 담길 때 타입이 정해지기 때문에, <code spellcheck="false">동적으로 변한다</code></p></li><li><p>덕 타이핑은, 객체의 변수, 메소드의 집합이 객체의 타입을 결정한다</p></li></ul><img src="https://image.until.blog/fc0o0ce/article/1733820853066.png" data-width="100%" data-align="center" alt="2527"><ul><li><p>구조적 타이핑은, 구조 안에 같은 속성의 타입이 있는지를 체크하는 것이다.</p><ul><li><p>때문에, 의도하지 않았지만 동일한 타입을 가지는 경우 <code spellcheck="false">동일한 유형으로 간주될 수 있다</code></p></li></ul></li></ul><img src="https://image.until.blog/fc0o0ce/article/1733820892623.png" data-width="100%" data-align="center" alt="2528"><p>둘 다 객체의 변수, 메소드 같은 필드를 기반으로 타입을 체크(혹은 안할수도)하지만,</p><p><strong>덕 타이핑</strong>은 '런타임'에 체크하기 때문에 <strong>동적 타이핑</strong>에서, <strong>구조적 타이핑</strong>은 '타입 체커'에서 체크하기 때문에 <strong>정적 타이핑</strong>에서 쓰인다.</p><p><strong>Q. JS는 왜 동적 타입 언어로 설계된 것일까?</strong></p><p>주로 <strong>유연성</strong>과 <strong>간편성</strong>을 제공하기 위해서이다</p><ul><li><p><code spellcheck="false">동적 타입 언어</code>란, 변수에 타입을 지정하지 않고 코드가 실행되는 런타임에 변수 값이 할당될 때 해당 값의 타입에 따라 변수 타입이 결정되는 언어이다</p></li><li><p>자바스크립트는 원래 웹 브라우저 내에서 동적으로 실행되는 스크립트 언어로 설계되었는데, 웹 페이지는 빠른 속도로 변화하는 동적 콘텐츠를 처리해야 했다</p></li><li><p>동적 타이핑으로 설계된 자바스크립트는 <code spellcheck="false">유연성</code> 덕분에 복잡한 설정 없이 다양한 데이터 타입을 처리할 수 있으며, 다양한 웹 브라우저 환경에서 원활하게 작동할 수 있다</p></li></ul><p><strong>Q. TS는 왜 등장한걸까?</strong></p><ul><li><p>JS는 <strong>동적 타입 언어</strong>로, <code spellcheck="false">런타임에 실제 코드의 값이 평가될 시점에서야</code> 변수에 들어올 값과 타입을 알 수 있다</p></li><li><p>때문에, 개발자의 의도와 다르게 동작할 수 있다. (ex: 숫자 a,b의 합을 구하는 함수에서 문자열의 합을 구할 수 있음)</p></li><li><p>TS는 <strong>정적 타입 언어</strong>로, <code spellcheck="false">컴파일 타임에 변수의 타입을 결정</code>한다</p></li><li><p>이로써 TS는 타입 에러를 사전에 방지해 안정성을 보장한다</p></li></ul><p><strong>Q. JS는 왜 싱글스레드를 사용할까?</strong></p><ul><li><p>JS는 원래 <strong>웹 브라우저에서 동적 동작을 위해</strong> 설계되었기 때문이다</p></li><li><p>주로 DOM을 조작하는 데 주로 사용되는데, 여러 스레드가 동시에 DOM을 수정한다면 충돌이 발생할 수 있다</p></li><li><p>싱글 스레드에서는 한 번에 하나의 작업만 수행하므로, DOM 업데이트가 안전하게 순차적으로 이루어진다 (비동기)</p></li><li><p>그러나 <strong>이벤트 루프</strong>를 통한 비동기 처리로 <strong>동시성을 지원</strong>한다.</p></li><li><p>이벤트 루프는 <code spellcheck="false">콜 스택</code>과 <code spellcheck="false">태스크 큐</code>를 사용해, 비동기 작업이 완료되면 해당 콜백 함수를 콜 스택으로 보내 실행한다</p></li></ul><p><strong>Q. 이벤트 루프의 동작 과정은 어떻게 진행되나?</strong></p><ol><li><p>콜 스택에 현재 실행 중인 컨텍스트가 있는지, 테스크 큐에 대기 중인 함수가 있는지 반복하며 확인</p></li><li><p>만약 콜 스택이 비어있고, 테스크 큐에 대기중인 함수가 있다면 순차적으로 콜스택으로 이동 후 실행</p></li><li><p>태스크 큐와 마이크로 태스크 큐에 대기 중인 함수가 있다면, 마이크로 테스크 큐를 우선적으로 처리 후 테스크 큐 처리</p></li></ol><h3><strong>Q. 팩토리 패턴을 사용하면 안되는 상황은 뭘까?</strong></h3><p>객체 생성 인터페이스 제공이 작업 중인 라이브러리나 프레임워크의 설계 목표가 아닐 때</p><ul><li><p>잘못된 상황에 팩토리 패턴을 적용하면 <code spellcheck="false">애플리케이션의 복잡도</code>가 크게 증가할 수 있다</p></li><li><p>객체 생성 과정이 복잡할 경우 <code spellcheck="false">단위 테스트의 복잡성</code> 또한 증가시킬 수 있다</p><ul><li><p>팩토리 패턴은 객체 생성 과정을 인터페이스 뒤에 추상화하기 때문</p></li></ul></li></ul>

면접을 위한 CS 전공지식 노트 / 1장. 디자인 패턴과 프로그래밍 패러다임

면접을 위한 CS 전공지식 노트: 디자인 패턴: 팩토리 패턴

Experience

<p>오늘은, 그동안 미뤄왔던 게임잼에서 만든 게임인 "MeMiMiC" 데모판을 인디게임들이 많은 해외 사이트인 <a target="_blank" rel="noopener noreferrer nofollow" href="http://Itch.io">Itch.io</a> 에 올려보려고 합니다.<br><br>간략하게 <a target="_blank" rel="noopener noreferrer nofollow" href="http://Itch.io">Itch.io</a> 가 무엇이냐면 인디 게임 유통 사이트라고하고, 누구나 올릴 수 있고 ,누구나 게임을 해볼 수도 있어서, 참신한 것들도 많고, 개인 습작이나 토이 프로젝트 용으로 만들어진 게임을 많이 업로드 하고 있습니다.<br><br>그리고, 상당한 규모의 온라인 게임잼이 이 사이트를 통해서도 몇몇개는 이루어 지고 있는 것으로 알고 있습니다.<br>게임쪽으로 예전에 많이 보고 배운 유투버 <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/@Brackeys"><strong>Brackeys</strong></a><strong> </strong>가 올해 게임잼을 주최했던것으로도 알고 있습니다.</p><p>지금부터 인디 게임쪽으로는 유명한 사이트에 만들었던 미미믹을 올려보도록 하겠습니다.<br><br>들어가서 우상단에서 먼저 회원가입을 하고 로그인을 하면 초기 화면은 아래와 같습니다.</p><img src="https://image.until.blog/sin0105/article/1732122775895.png" data-width="100%" data-align="center" alt="2223"><p>가장먼저 사이트에 들어가면 DashBoard가 있습니다. <br>클릭하면 자신의 프로젝트 대시보드를 볼 수 있습니다.</p><img src="https://image.until.blog/sin0105/article/1732122809729.png" data-width="100%" data-align="center" alt="2224"><p>Create New Project를 누르면 여러 설정들이 나옵니다.<br>차근차근 설명해드리도록 하겠습니다.</p><img src="https://image.until.blog/sin0105/article/1732122880676.png" data-width="100%" data-align="center" alt="2225"><p>1. 타이틀 설정, 제목을 설정해줍니다.<br>2. Project URL 설정, 자동으로 정해줍니다. 보통은 본인아이디.itch.io/{프로젝트명} 으로 설정됩니다.<br>3. 커버 이미지 (대표이미지)를 설정할 수 있습니다. 여기서 대표 이미지를 설정하도록 해줍시다.<br>4. 게임 내 스크린 샷 이미지 및 홍보 이미지를 추가하는 버튼입니다. 되도록 추가해줍니다.</p><img src="https://image.until.blog/sin0105/article/1732122998255.png" data-width="100%" data-align="center" alt="2226"><ol start="5"><li><p>Pricing은 그대로 가격입니다. 무료로 배포할 것이라면, 0 or Donate를 선택합니다.</p></li><li><p>Upload 할 파일을 선택하는 것, 보통 zip으로 압축해서 올립니다.</p></li><li><p>게임에 대한 설명을 작성하는 공간, 키 세팅, 설명, 간단한 시놉시스 등을 작성할 수 있습니다.</p><img src="https://image.until.blog/sin0105/article/1732123090989.png" data-width="100%" data-align="center" alt="2228"></li><li><p>게임의 장르를 설정할 수 있습니다. ex) Action, Platformer 등등</p></li><li><p>게임의 태그를 설정할 수 있습니다. ex) Pixel-art, Indie 등등</p></li><li><p>코멘트를 달거나 하는 기능에 대한 설정인 것 같습니다. 따로 건들지 않았습니다.</p></li><li><p>Visibility &amp; Access 는 접근하거나 볼 수 있는 권한에 대한 설정인 것으로 보입니다. <br>Draft(초안) - 프로젝트를 편집할 수 있는 사람만 페이지를 볼 수 있습니다.<br>Restricted(제한) - 소유자 및 승인된 사용자만 페이지를 볼 수 있습니다.<br>Public(공개) - 누구나 페이지를 볼 수 있습니다.<br><br>우리의 목적은 웹포팅을 해서 더 많은 사람에게 접근성을 높이는 것이 목표기 때문에 Public으로 설정해주도록 합니다.</p></li></ol><p></p><p>** 간혹 이미지처럼 Public이 비활성화 된 경우가 있는데, Draft로 초안 발행한 뒤에 다시 Edit을 클릭하여 다시 프로젝트 세팅을 하면 활성화됩니다. <br>Public으로 세팅해주도록 합니다.</p><img src="https://image.until.blog/sin0105/article/1732123760672.png" data-width="100%" data-align="center" alt="2230"><p></p><p>이렇게, 만든 게임을 인디게임 사이트에 올려서 보다 많은 유저들에게 접근성을 높일 수 있는 가이드를 알려드렸습니다. <br><br>부디 도움되는 내용이 되었길 바랍니다. <br>감사합니다!<br><br>제가 추가해놓은 주소도 남기고 가도록 하겠습니다!<br>웹 버전은 PC에서 설치없이 즐기실 수 있습니다!</p><p><strong>- 빌드 다운로드 버전</strong></p><a data-type="bookmark" href="https://jongho105.itch.io/memimic" target="_blank"><div class="content"><div><div class="title">MeMiMiC by jongho105</div><div class="description"></div></div><div class="href">https://jongho105.itch.io/memimic</div></div><img src="https://img.itch.zone/aW1nLzE4NjYwMzg0LnBuZw==/original/hKB15Q.png"></a><p><strong>- 웹 버전 (무설치 버전)</strong></p><a data-type="bookmark" href="https://jongho105.itch.io/memimic-html" target="_blank"><div class="content"><div><div class="title">MeMiMiC_HTML by jongho105</div><div class="description"></div></div><div class="href">https://jongho105.itch.io/memimic-html</div></div><img src="https://img.itch.zone/aW1nLzE4NjYwNTc4LnBuZw==/original/FFEDjT.png"></a><p></p>

내가 만든 게임의 접근성을 올리는 방법

내가 만든 게임을 Itch.io에 업로드 하기

<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

react-query의 staleTime과 gcTime

<img src="https://image.until.blog/steady/article/1729509585305.jpeg" data-width="100%" data-align="center" alt="until-1839"><h2>어디에 쓰이나?</h2><hr><p>예상한대로 역시 비디오 파일도 다루게 되었고, 이건 <u>비디오 파일의 용량을 줄여 트래픽을 줄이기 위해</u> 시도한 방법들을 적어보려고 한다.</p><p></p><h2>비디오 용량에 영향을 끼치는 요인</h2><hr><h4>1. 해상도</h4><p>: <strong>비디오</strong>는 <u>초당 많은 수의 이미지를 출력</u>해 보여주는 방식으로 <u>이미지의 해상도(픽셀 수)에 따라 용량에 영향</u>을 끼치며, 이미지 파일을 다룰때와 마찬가지다.</p><h4>2. 프레임 수</h4><p>: <u>1초당 출력되는 이미지의 수</u>를 뜻하고 1초에 몇장이 출력되느냐에 따라 24프레임(초당 24장) 등으로 표기되며 <u>프레임 수가 늘어날수록 영상이 매끄럽지만 용량이 늘어나</u>게 된다.</p><h4>3. 비트레이트</h4><p>: 비디오 데이터를 <u>1초당 전송되는 비트의 양</u>을 뜻하며 1초에 1000kb를 전송한다면 1000kbps 와 같은 방식으로 표기되면 <u>초당 사용된 비트레이트를 프레임별로 나눠서 사용</u>하게 된다.</p><p></p><h2>그럼 어떻게 할까?</h2><hr><p>Java에서 비디오 파일을 처리할때 주로 사용하는 라이브러리는 <strong>FFmpeg </strong>이라는 라이브러리로 해상도와 프레임 수를 지정하면 <u>FFmpeg이 적절한 비트레이트로 설정</u>해 준다고 한다.</p><p>따라서 <strong>해상도</strong>와 <strong>프레임 수</strong>를 통해 <u>동영상 파일의 용량을 줄여</u>보도록 하겠다.</p><p></p><h2>개발</h2><hr><ul><li><p><strong>Grabber</strong>는 파일을 읽어들여 프레임 단위로 이미지를 다루고</p></li><li><p><strong>Recorder</strong>는 Grabber로 읽어들인 프레임들로 비디오 파일을 생성한다.</p></li></ul><pre spellcheck="false"><code class="language-java">public class VideoUtil {

    //Post 요청으로 전달받은 Multipart 파일을 리사이징 처리해 반환
    public MultipartFile resizeVideo(MultipartFile file) throws IOException {

        // 원본 파일과 동일한 확장자로 임시파일 생성
        String extension = Objects.requireNonNull(file.getOriginalFilename()).split("\\.")[1];
        File tempFile = File.createTempFile(UUID.randomUUID()+LocalDate.now().toString(), "."+extension);

        // 파일 읽어들이기
        FFmpegFrameGrabber grabber = new FFmpegFrameGrabber(file.getInputStream());
        grabber.start();

        FFmpegFrameRecorder recorder = getRecorder(grabber, tempFile, extension);

        // 프레임 단위로 영상 리사이즈 후 기록
        Frame frame;
        while ((frame = grabber.grabFrame()) != null) {
            recorder.record(frame);
        }

        // 리소스 정리
        recorder.stop();
        recorder.release();
        grabber.stop();
        grabber.release();

        FileInputStream input = new FileInputStream(tempFile);

        // 리사이징된 영상을 MultipartFile로 변환
        MultipartFile resizedFile = new MockMultipartFile(
                file.getName(),  // 원본 파일 이름 유지
                file.getOriginalFilename(),
                file.getContentType(),  // 원본 파일 타입 유지 (예: "video/mp4")
                input);

        input.close();
        tempFile.delete();

        return resizedFile;
    }

    private FFmpegFrameRecorder getRecorder(FFmpegFrameGrabber grabber, File tempFile, String extension) throws FFmpegFrameRecorder.Exception {
        // 영상의 종횡비를 확인
        BigInteger width = BigInteger.valueOf(grabber.getImageWidth());
        BigInteger height = BigInteger.valueOf(grabber.getImageHeight());
        int gcd = width.gcd(height).intValue();

        int widthRatio = grabber.getImageWidth() / gcd;
        int heightRatio = grabber.getImageHeight() / gcd;
        int pixels = 360; //(360 ~ 1440)

        // 영상의 종횡비에 따라 해상도를 제한
        if(widthRatio &gt; 400) pixels = 1; // (400 ~)
        else if (widthRatio &gt; 100) pixels = 5; //(404 ~ 1600)
        else if (widthRatio &gt; 50) pixels = 12; //(612 ~ 1200)
        else if (widthRatio &gt; 20) pixels = 30; //(630 ~ 1500)
        else if (widthRatio &gt; 5) pixels = 80; //(480 ~ 1600)

        int targetWidth = widthRatio * pixels;
        int targetHeight = heightRatio * pixels;

        // FFmpegFrameRecorder로 영상을 리사이즈하여 저장
        FFmpegFrameRecorder recorder = new FFmpegFrameRecorder(tempFile, targetWidth, targetHeight);
        recorder.setFormat(extension);  // 출력 포맷
        recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264);  // H.264 코덱 사용
        recorder.setFrameRate(24); // 24 프레임으로 고정

        // 오디오 채널 설정 (필요 없으면 0으로 설정)
        if (grabber.getAudioChannels() &gt; 0) {
            recorder.setAudioChannels(grabber.getAudioChannels());
        } else {
            recorder.setAudioChannels(0);  // 오디오 없는 경우
        }

        recorder.start();
        return recorder;
    }
}</code></pre><p></p><h2>돌아보며</h2><hr><blockquote><p>깊게 생각해보지 않았던 비디오 파일에 대해 조금이나마 알아가게 된 시간이였다.</p><p>개발 이후 알게 된 사실로는</p><ul><li><p>FFmpeg이 비트레이트를 자동으로 설정해주지만, 직접 지정하는 것이 더 효율적이라는 사실</p></li><li><p>새로운 코덱과 확장자를 이용해 더 효율적으로 용량을 줄이는 방법이 있다는 사실</p></li></ul><p>들을 알게 되었다. 다음에 해당 내용들을 포함해 코드를 개선해보도록 하겠다.</p></blockquote>

어디에 쓰이나?예상한대로 역시 비디오 파일도 다루게 되었고, 이건 비디오 파일의 용량을 줄여 트래픽을 줄이기 위해 시도한 방법들을 적어보려고 한다.비디오 용량에 영향을 끼치는 요인1. 해상도: 비디오는 초당 많은 수의 이미지를 출력해 보여주는 방식으로 이미지의 해상도(픽셀 수)에 따라 용량에 영향을 끼치며, 이미지 파일을 다룰때와 마찬가지다.2. 프레임 수

[Java] 동영상 용량을 줄여보자

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/15654">15654.N과 M(5)</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : Middle</p></li><li><p>풀이시간 : 1h over</p></li><li><p>유형 : 백트래킹 , DFS</p></li></ul><h2>문제</h2><p>N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다.</p><ul><li><p>N개의 자연수 중에서 M개를 고른 수열</p></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 7
1 8
1 9
7 1
7 8
7 9
8 1
8 7
8 9
9 1
9 7
9 8
</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 1232 1233 1234
1231 1232 1234 1233
1231 1233 1232 1234
1231 1233 1234 1232
1231 1234 1232 1233
1231 1234 1233 1232
1232 1231 1233 1234
1232 1231 1234 1233
1232 1233 1231 1234
1232 1233 1234 1231
1232 1234 1231 1233
1232 1234 1233 1231
1233 1231 1232 1234
1233 1231 1234 1232
1233 1232 1231 1234
1233 1232 1234 1231
1233 1234 1231 1232
1233 1234 1232 1231
1234 1231 1232 1233
1234 1231 1233 1232
1234 1232 1231 1233
1234 1232 1233 1231
1234 1233 1231 1232
1234 1233 1232 1231</code></pre><h3>문제 풀이 접근</h3><p>이 문제는, N과 M시리즈에서 조건이 추가된 문제인데, 길게 설명할 것도 없기도 하고, 플로우는 아래와 같다. <br>1. 처음에 주어진 배열을 정렬한다. <br>2. 나 자신을 제외하여 0부터 순회하면서 순열을 찾는다. <br>3. 출력한다.<br><br>여기서 추가된 조건은 <strong>" 수열은 사전 순으로 증가하는 순서로 출력해야 한다. " </strong>이다.<br>이 조건에 대해서 나는 살짝 의문이다.<br>" 수열은 사전 순으로 증가하는 순서로 출력해야 한다. " 라는 것을 나는 문자열의 사전 순으로 생각해서, string으로 받아서 문자열의 사전 순서로 오름차순하여 배열을 구성했고, 그렇게 순열을 만들었는데, 실패했었다. <br><br>반례 케이스도 문제에선 없었고, 일부 사용자들이 반례를 올려놓은 것을 보고 문자열의 사전순이 아닌 정수의 사전순으로 바꿨더니 해결할 수 있었다.</p><p>여기서 정수와 문자열의 사전순 정렬의 차이는 이렇다. <br>[1 , 2 , 11 , 3 , 4 , 5 , 10] 이 있다고 할때 결과는 아래와 같다. <br>- 숫자의 사전순 정렬 : [1,2,3,4,5,10,11]<br>- 문자열의 사전순 정렬 : [1,10,11,2,3,4,5]</p><p>이 이유는 숫자는 그 문자의 사전순 크기를 비교하여 정렬하지만, 문자열은 다음 문자의 크기를 기준으로 사전순 정렬한다. 즉 10일 때, 1을 사전순 정렬하고, 그 다음 문자인 0을 가져와서 정렬한다.</p><p>이렇기 때문에 둘의 결과는 다르고, 내가 풀이했던 방식은 오답이 나왔다. <br>고로 이 문제의 표기에 대해서 풀면서도, 지금 포스팅을 진행하면서도 바뀌어야 하지 않나 라는 의견이긴 하다.</p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;
using System.Text;

/////*
//// * Difficulty : Easy
//// * URL : https://www.acmicpc.net/problem/15654
////  * Time : 1h over
//// */
///
namespace Test
{
    internal class Program
    {
        static void Main(string[] args)
        {
            Solution solution = new Solution();
            solution.solve();
        }
    }

    public class Solution
    {
        public const int _max = 9;
        public const int _valmax = 10001;
        public int _n;
        public int _m;
        public int[] _arr;
        public int[] _per;

        public bool[] _isVisit;

        public HashSet&lt;string&gt; _ret;

        public void solve()
        {
            _ret = new HashSet&lt;string&gt;();
            string[] _in = Console.ReadLine().Split(' ');
            _n = int.Parse(_in[0].ToString());
            _m = int.Parse(_in[1].ToString());
            _isVisit = new bool[_valmax];

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

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

            _per = new int[_m];

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

            BT(ref _arr, ref _per, 0, 0);

            int index = 0;
            foreach (string s in _ret)
            {
                Console.Write(s);

                if (index != _ret.Count - 1)
                    Console.WriteLine();
            }
        }

        public int Sorted(string _item1, string _item2)
        {
            bool _isEmptyitem1 = _item1 == null || _item1.Length == 0 ? true : false;
            bool _isEmptyitem2 = _item2 == null || _item2.Length == 0 ? true : false;

            if (_item1 == null)
                _item1 = " ";

            if (_item2 == null)
                _item2 = " ";

            if (_isEmptyitem1 != _isEmptyitem2)
                return _isEmptyitem1.CompareTo(_isEmptyitem2);

            return _item1.CompareTo(_item2);
        }

        public int Sorted(int _item1, int _item2)
        {
            bool _isEmptyitem1 = _item1 == 0 ? true : false;
            bool _isEmptyitem2 = _item2 == 0 ? true : false;

            if (_isEmptyitem1 != _isEmptyitem2)
                return _isEmptyitem1.CompareTo(_isEmptyitem2);

            return _item1.CompareTo(_item2);
        }

        public void BT(ref int[] _arr, ref int[] _per, int _cnt, int _pos)
        {
            if (_cnt &gt;= _m)
            {
                string _st = string.Empty;

                for (int i = 0; i &lt; _cnt; ++i)
                {
                    _st += _per[i];

                    if (i != _cnt - 1)
                        _st += " ";
                }

                if (_ret.Contains(_st) == false)
                    _ret.Add(_st);
            }
            else
            {
                for (int i = 0; i &lt; _n; ++i)
                {
                    if (_isVisit[Int32.Parse(_arr[i].ToString())] == false)
                    {
                        _isVisit[Int32.Parse(_arr[i].ToString())] = true;
                        _per[_pos] = _arr[i];
                        BT(ref _arr, ref _per, _cnt + 1, _pos + 1);

                        _isVisit[Int32.Parse(_arr[i].ToString())] = false;
                    }
                }
            }
        }
    }
}

</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1732195668673.png" data-width="100%" data-align="center" alt="2238">

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

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

<h3>다시푸는 코딩 테스트 준비 일지</h3><ul><li><p>응시 사이트 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/challenges?order=recent">Programmers</a></p></li><li><p>문제 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://school.programmers.co.kr/learn/courses/30/lessons/42842?language=csharp">카펫</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 중</p></li><li><p>풀이시간 : 34m 44s</p></li><li><p>유형 : 약수, 수식설정, 완전탐색</p></li></ul><h6><strong>문제 설명</strong></h6><p>Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다.</p><img src="https://image.until.blog/sin0105/article/1724747771326" alt="until-1279"><p>Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다.</p><p>Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요.</p><h5>제한사항</h5><ul><li><p>갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다.</p></li><li><p>노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다.</p></li><li><p>카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 깁니다.</p></li></ul><h5>입출력 예</h5><p>brown yellow return <br>10 2 [4, 3]<br>8 1 [3, 3]<br>24 24[8, 6]</p><h3>문제 풀이 접근</h3><p>이 문제는, 노란색 박스를 기준으로 갈색 박스를 두르는 문제다. <br>고로, 노란색 박스의 가로 세로 쌍을 어떻게 찾아야될지가 메인인 문제다.<br>노란색 박스의 가로 세로 쌍을 구한 이후에, 갈색 박스의 숫자와 맞는지 체크해야한다.</p><p><strong>총 갈색 박스 공식 : (노란색 박스 Y + 2) * 2 + (노란색 박스 Y * 2 )</strong><br><strong>1) 갈색 위, 아래 박스 면 공식 : ( 노란색 박스 Y + 2 ) * 2 <br>2 )갈색 좌,우 면 공식 : (노란색 박스 Y * 2 )</strong><br><br>이 문제의 플로우는,<br>1. 노란색 박스의 약수 쌍을 구한다. =&gt; 코드의 make 함수<br>2.약수 쌍을 반복하며, 해당 하는 루프의 값을 갈색 박스 공식에 넣어 brown 과 동일한지 찾는다.<br>3.동일한지 찾은 후, 노란박스의 가로 세로쌍의 합과 노란박스로 주어진 값이 동일한지 찾는다.<br>4.모두 맞다면 각 brown을 포함한 카펫의 면을 출력해야하기 때문에 각 면을 하나씩 더한 결과를 돌려줘야한다. 그렇기 때문에 각 가로 세로쌍에 +2 씩 더한 후 반환한다.</p><h3>정답 작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections.Generic;

  public class Solution
    {
        public int[] solution(int brown, int yellow)
        {
            int[] answer = new int[] { };

            List&lt;int&gt; list = make(yellow);

            if (yellow == 1)
            {
                int horizon = list[0];
                int vertical = list[0];

                answer = new int[2] {horizon+2,vertical+2};
                return answer;
            }

            for (int i = 0; i &lt; list.Count; ++i)
            {
                for (int j = 0; j &lt; list.Count; ++j)
                {
                    int horizon = list[i] &gt;= list[j] ? list[i] : list[j];
                    int vertical = list[i] &gt;= list[j] ? list[j] : list[i];

                    if (brown == (((horizon + 2) * 2) + (vertical * 2)))
                    {
                        if (horizon * vertical != yellow)
                            continue;

                        answer = new int[2] { horizon+2, vertical +2};
                        return answer;
                    }
                }
            }

            return answer;
        }

        public List&lt;int&gt; make(int a)
        {
            // 약수 쌍을 구하는 함수
            List&lt;int&gt; list = new List&lt;int&gt;();

            for (int i = 1; i &lt;= a; ++i)
            {
                int div = a % i;

                if (div == 0)
                    list.Add(i);
            }

            return list;
        }
    }</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1724748981614" alt="until-1280"><p>이전 카펫문제를 풀때는 시간을 재고 풀지는 않았지만, 난이도 대비 30분 가량은 합리적으로 풀이된 것 같다. <br><br>다시 푼 문제이므로, 이전 포스팅이 있다.<br><a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@sin0105/-%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%9D%BC%EC%A7%80---99%ED%81%B4%EB%9F%BD--3%EC%9D%BC%EC%B0%A8---%EC%B9%B4%ED%8E%AB-96g7yo8l">링크<br></a></p>

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

코딩테스트 준비 - 카펫

<h3>✨<strong>실무에 꼭 필요한 QA 기초 정석</strong></h3><p></p><p>🗓<strong>모집 기간</strong></p><p>24년 11월 25일(월) ~ <strong>24년 12월 18일(수) 오후 6시까지</strong></p><p></p><p>👫<strong> 모집 대상</strong></p><p>30명(내일배움카드 발급이 가능한 분)</p><p></p><p>📚<strong> 교육 기간</strong></p><p>24년 12월 23일(월) ~ 25년 4월 21일(수)</p><p></p><p>📜<strong> 교육 커리큘럼</strong></p><p>Part1. QA 기초 및 수동 테스트&nbsp;</p><p>Part2. 테스트 자동화 기초 (Pythom Selenium, Git, Jenkins 등 활용)</p><p>Part3. 자동화 테스트 스크립트 개발 및 CI/CD 통합</p><p>Part4. 고급 테스트 자동화 (API 테스트, 성능 테스트, 자동화 스크립트 작성 등)</p><p>Part5. 종합 실무 프로젝트 진행</p><p></p><p>🎁<strong>교육 수강 혜택</strong></p><p>실무 <strong>팀 프로젝트 2회</strong> 진행&nbsp;</p><p><strong>100% 실시간 온라인</strong> 수업 제공&nbsp;</p><p>분야별 전문 <strong>현직자 소수정예</strong> 코칭&nbsp;</p><p><strong>매월 30만 원</strong> 학습 장려금 지급&nbsp;</p><p>자격증 취득 <strong>강의 &amp; 수험료 지원</strong></p><p></p><p>✏️<strong> 접수 방법</strong></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://elice.training/track/qa?utm_medium=social&amp;utm_source=until&amp;utm_campaign=kdt_QA_poster&amp;utm_content=QA1">사이트를 통해 접수</a></p><p></p><p>🚨<strong> 문의 사항</strong></p><p>메일: <a target="_blank" rel="noopener noreferrer nofollow" href="mailto:kdt@elice.io">kdt@elice.io</a></p><p>고객센터: <a target="_blank" rel="noopener noreferrer nofollow" href="https://elicetrack.channel.io/support-bots/69276">https://elicetrack.channel.io/support-bots/69276</a></p>

실무에 꼭 필요한 소프트웨어QA의 길, 지금 엘리스트랙과 함께 걸어가보세요!

[전액 국비지원] 엘리스트랙 소프트웨어 QA 트랙 교육생 모집

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71"><p>항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.</p><h2>fnm이란?</h2><p>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.</p><h2>winget으로 fnm 설치하기</h2><p>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.</p><pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3><p>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3><p>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.</p><p><code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.</p><pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3><p>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.</p><p>관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.</p><pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3><p>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.</p><pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr><p>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.</p><p></p><p></p><p></p><p></p>

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

<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/2992">2992.크면서 작은 수</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : Easy - Middle</p></li><li><p>풀이시간 : 29m</p></li><li><p>유형 : 백트래킹</p></li></ul><h2>문제</h2><p>정수 X가 주어졌을 때, X와 구성이 같으면서 X보다 큰 수 중 가장 작은 수를 출력한다.</p><p>수의 구성이 같다는 말은, 수를 이루고 있는 각 자리수가 같다는 뜻이다. 예를 들어, 123과 321은 수의 구성이 같다. 하지만, 123과 432는 구성이 같지 않다.</p><h2>입력</h2><p>첫째 줄에 X가 주어진다. (1 ≤ X ≤ 999999) X는 0으로 시작하지 않는다.</p><h2>출력</h2><p>첫째 줄에 결과를 출력한다. 만약 그러한 숫자가 없는 경우에는 0을 출력한다.</p><h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>156
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>165
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>330
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>0
</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>27711
</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>71127</code></pre><h3>문제 풀이 접근</h3><p>이 문제를 보고나서, 가장 먼저 떠오른 접근 방법은 정수 X를 분해한 뒤에, 리스트에 넣고, 모두 구성이 같고, 초기 X 보다 클 경우, 현재 저장된 _ret 값 보다 작을 경우를 출력하는쪽으로 생각했다.</p><p>모든 내용이 문제에서 요구하는 요구 조건이라 당연한 얘기 일 수도 있으나, List를 사용함과 동시에 중복 제거를 하기위해 HashSet도 사용하는 약간의 최적화도 고려하였다. </p><p>바로 구상해서 빠르게 푸는 연습을 하다보니, 정리되어 있지도 않았고, 생각할 때, 중복수를 뽑는 처리라던가 더 최적화할 요소가 더 있었긴 했다. </p><p>그래서 당연히 효율성에서 걸려서 시간초과 뜰줄 알았는데, 통과했다.</p><p>이 문제의 플로우는 <br>1. X의 수를 분해한다. %10, /10 을 사용하면서 분해한 뒤, List에 담는다.<br>2.거꾸로 담겨져 있기 때문에 Reverse를 한번 수행해준다. <br>3. 그 뒤 내 분해된 수를 조합 배열로 생각한 뒤 하나씩 뽑는 조합을 만들어 준다. <br>4. 중복을 배제한다. (HashSet에 담는다. )<br>5. 모든 순열에서 자릿수를 곱하면서 X보다 크며 순열중 가장 작은 값을 수로 만들어서 출력해준다. <br>6. 조건이 맞는게 골라지지 않았다면 0 을 출력한다.</p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections;
using System.Collections.Generic;
using System.Xml.Linq;
using static CodingTestProj.Program;
using System.Text;

///*
// * Difficulty : Easy ~ Middle
// * URL : https://www.acmicpc.net/problem/2992
//  * Time : 29m
// */

namespace CodingTestProj
{
    internal class Program
    {
        static void Main(string[] args)
        {
            Solution solu = new Solution();
            solu.solve();
        }
    }

    public class Solution
    {
        public int _n;
        public int _m;
        public int[] _arr;
        public bool[] _visit;
        public int _Count; // 자릿수

        public int[] _c;

        public List&lt;int&gt; _Lt_= new List&lt;int&gt;();
        public HashSet&lt;int&gt; _hs_ret = new HashSet&lt;int&gt;();

        public void solve()
        {
            _Count = 0;
            _n = int.Parse(Console.ReadLine());
            int _copyN = _n;

            while(true)
            {
                if (_copyN == 0)
                    break;

                int _val = _copyN % 10;
                _copyN /= 10;
                _Lt_.Add(_val);
                ++_Count;
            }

            _Lt_.Reverse();
            _c = new int[_Lt_.Count];
            _m = _Lt_.Count;

            BT(0, ref _c);

            List&lt;int&gt; _a = new List&lt;int&gt;();
            int _ret = 1000000;

            foreach(var pair in _hs_ret)
            {
                if(pair &gt; _n)
                {
                    _a.Clear();

                    int _v = pair;
                    while (true)
                    {
                        if (_v == 0)
                            break;

                        int _val = _v % 10;
                        _v /= 10;
                        _a.Add(_val);
                    }

                    for(int i = 0; i &lt; _Lt_.Count; ++i)
                    {
                        if (_a.Contains(_Lt_[i]) == true)
                        {
                            _a.Remove(_Lt_[i]);
                        }
                    }

                    if (_a.Count != 0)
                        continue;

                    if(_n &lt; _ret &amp;&amp; _ret &gt; pair)
                    {
                        _ret = pair;
                    }
                }
            }

            _ret = _ret == 1000000 ? 0 : _ret;
            Console.WriteLine(_ret);
        }

        public void BT(int cnt, ref int[] _c)
        {
            if(cnt == _m)
            {
                int val = (int)Math.Pow(10, _Count-1);
                int _retVal = 0;

                for(int i = 0; i &lt; cnt; ++i)
                {
                    _retVal += _c[i] * val;
                    val /= 10;
                }

                if(!_hs_ret.Contains(_retVal))
                    _hs_ret.Add(_retVal);
            }
            else
            {
                for(int i = 0; i &lt; _Lt_.Count; ++i)
                {
                    _c[cnt] = _Lt_[i];
                    BT(cnt + 1, ref _c);
                }
            }
        }
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1733929229786.png" data-width="100%" data-align="center" alt="2533"><p></p>

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

코딩테스트 준비 - 크면서 작은 수

<blockquote><p>아이디 &amp; 비밀번호 없이 소셜로그인을 구현해보자</p></blockquote><h3>간편 로그인이란?</h3><p>: 비밀번호를 제공하지 않고 다른 웹사이트 서비스에 접근할 수 있는 <strong>접근성 위임 기능</strong></p><img src="https://image.until.blog/mushroombud/article/1727372158903.png" alt="until-1572"><p><em>이런 거 있잖아요</em></p><p>저걸 만드는 명세의 표준이 바로 OAuth 2.0이다.</p><h2>왜 2.0인가?</h2><img src="https://image.until.blog/mushroombud/article/1727372474785.png" alt="until-1573"><p>출처: Stackacademic</p><p>이것만큼 OAuth 1.0과 2.0의 차이에 대해서 잘 설명한 그림이 없어서 들고와봤다. 사실 Token 교환을 보여주는 것이라면 더 잘 설명한 그림이 있겠으나, 이 그림을 좋아하는 이유는 "User Flow" 단위로 보여주기 때문이다. 브라우저가 되어서 플로우를 따라가면서 무슨 일이 일어나는지 체험할 수 있다.</p><p>난 공식 Docs를 보는 <s>간지나는</s> 행동을 추구하는 사람이기 때문에 명세 표준을 보면서 한번 어떻게 동작하는 물건인지 이해해보자.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://datatracker.ietf.org/doc/html/rfc6750">RFC 6750-OAuth 2.0 Authorization Framework</a></p><img src="https://image.until.blog/mushroombud/article/1727372863726.png" alt="until-1574"><p>개발자들답게 무슨 Flow도 아스키 아트로 그려놨다. 먼저 네 가지의 요소가 존재해야 하며, Client/Resource Owner/Authorization Server/Resource Server이 바로 그것이다. 이 그림은 <strong>유저와 서버 간의 관계가 아니라, 특정 서비스를 제공하는 서버와 인증 서버 간의 관계</strong>를 표현한 것이라는 데에 주의를 기울여야 한다.</p><p>카카오톡 소셜로그인을 개발한다고 하자. 카카오톡 서버가 Resource Owner 겸 Authorization Server의 역할을 하고 (아마 리버스 프록시같은 걸 써서 도메인별로 분리를 할 것이다.) Client는 내가 이용하고자 하는 특정 서비스의 서버이다. 유저가 로그인 요청을 하면 카카오톡 로그인 페이지로 Redirection을 해 주고 Authorization을 요청해서 승인을 받은 다음, 이 승인을 다시 액세스 토큰으로 바꿔먹는다. 그 다음부터는 Access Token을 활용해 내 서비스의 서버가 카카오톡 리소스 서버에서 유저 정보에 관한 내용을 마음껏 빼먹을 수 있다.</p><p>직접 개발한 서비스 중에 Graduart의 코드를 참고해보겠다. Google OAuth 2.0을 이용한 소셜로그인 기능이 구현되었다.</p><p>먼저 프론트엔드 퍼블리싱 요소를 보자.</p><pre spellcheck="false"><code>  return (
    &lt;div onClick={handleSignIn} align={"center"}&gt;
      &lt;img
        alt={"Google Login Button"}
        src={`/assets/googleLoginImg.png`}
        width={"50%"}
      &gt;&lt;/img&gt;
    &lt;/div&gt;
  );</code></pre><img src="https://image.until.blog/mushroombud/article/1727375283931.png" alt="until-1575"><p>이렇게 구글 로그인 이미지를 가져오는 컴포넌트를 반환한다. 클릭시에 호출되는 handleSignIn함수가 중요한데, 로직을 살펴보면</p><p></p><pre spellcheck="false"><code class="language-javascript">  const handleSignIn = async (response) =&gt; {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: "google",
      options: {
        redirectTo: import.meta.env.VITE_FRONT_URL,
      },
    });

    if (error) {
      console.error("Error signing in with Google:", error.message);
    } else {
      const { user } = data;
      if (user) {
        localStorage.setItem("supabase.auth.token", JSON.stringify(user));
        navigate("/");
      }
    }
  };</code></pre><p>supabase 백엔드를 활용했기 때문에, 관련 내용이 보인다. 우리 백엔드에 redirection URL을 포함해 "너 구글이랑 잘 연락해서 우리 유저 받아봐" 라는 요청을 날리라고 시키는 내용이다. 이 뒤에서 요청을 받은 후 일어나는 백엔드 로직을 살펴보자.</p><p>(여기부터는 Supabase 코드 아님, 임의로 짠 코드) NestJS를 통해서 받아보자.</p><pre spellcheck="false"><code class="language-typescript">import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-oauth2';
import axios from 'axios';

@Injectable()
export class KakaoOAuthStrategy extends PassportStrategy(Strategy, 'kakao') {
  constructor() {
    super({
      authorizationURL: 'https://kauth.kakao.com/oauth/authorize',
      tokenURL: 'https://kauth.kakao.com/oauth/token',
      clientID: process.env.KAKAO_CLIENT_ID,
      clientSecret: process.env.KAKAO_CLIENT_SECRET,
      callbackURL: 'http://localhost:3000/auth/kakao/callback',
    });
  }

  async validate(accessToken: string, refreshToken: string, profile: any, done: Function) {
    try {
      const response = await axios.get('https://kapi.kakao.com/v2/user/me', {
        headers: {
          Authorization: `Bearer ${accessToken}`,
        },
      });

      const { id, kakao_account } = response.data;
      const user = {
        id,
        email: kakao_account.email,
        nickname: kakao_account.profile.nickname,
      };

      done(null, user);
    } catch (err) {
      done(err, false);
    }
  }
}</code></pre><p>먼저 src/auth/strategies/kakao.strategy.ts 파일을 생성한다. 이 파일을 적용시킬 모듈은</p><pre spellcheck="false"><code class="language-typescript">import { Module } from '@nestjs/common';
import { PassportModule } from '@nestjs/passport';
import { KakaoOAuthStrategy } from './strategies/kakao-oauth.strategy';
import { AuthController } from './auth.controller';

@Module({
  imports: [PassportModule.register({ defaultStrategy: 'kakao' })],
  controllers: [AuthController],
  providers: [KakaoOAuthStrategy],
})
export class AuthModule {}</code></pre><p>이렇게 만들어주면 된다. (Passport 패키지 설치 필요) 마지막으로 </p><pre spellcheck="false"><code class="language-typescript">import { Controller, Get, Req, UseGuards } from '@nestjs/common';
import { AuthGuard } from '@nestjs/passport';
import { Request } from 'express';

@Controller('auth')
export class AuthController {
  @Get('kakao')
  @UseGuards(AuthGuard('kakao'))
  async kakaoLogin() {
    // 카카오 로그인 페이지로 리디렉션합니다.
  }

  @Get('kakao/callback')
  @UseGuards(AuthGuard('kakao'))
  async kakaoLoginCallback(@Req() req: Request) {
    // 카카오 로그인 성공 후 리디렉션된 후 처리 로직
    const user = req.user;
    return {
      message: 'Kakao login successful',
      user,
    };
  }
}</code></pre><p>이렇게 짜주면 우리 백엔드에서 user을 반환하게 된다. JSON을 파싱하면 이렇게 생겼다. (동의항목을 통해 가져오는 추가 유저 정보에 대한 고려는 일단 하지 말자.)</p><pre spellcheck="false"><code>{
  id: 1234567890,
  email: 'user@example.com',
  nickname: '새싹버섯'
}</code></pre><p>ID의 경우 카카오 서버에서 내부적으로 유저들에게 부여하는 고유 ID이다. 뭔가 남의 서비스 DB에 있는 은밀한 정보를 빼내오는 느낌이라 내 ID가 궁금해지는 부분이다.</p><p>NestJS를 잘 알지 못하지만 지금 개발중인 서비스가 NestJS를 써야 해서 공부하면서 코드를 가져와봤는데, @UseGuards 데코레이터를 처음 봐서 좀더 알아보았다. &nbsp;Guard는 <strong>HTTP 요청이 처리되기 전에 실행</strong>되어, 특정 요청에 대한 접근을 허용하거나 거부하는 역할을 한다. 클라이언트가 요청을 보내면 해당 Guard가 먼저 실행되어 인증 또는 권한을 검증한 후에, 요청을 처리할 수 있는지 여부를 결정하는 방식이라고 한다.</p><p></p><p>카카오톡을 예시로 OAuth 2.0을 이용한 간편로그인의 개념과 진행과정, 그리고 백엔드단에서 필요한 코드에 대해 간략히 알아봤다. 앞으로 잘 써먹어야겠다.</p>

카카오톡을 예시로 알아보는 OAuth 2.0의 개념, 소셜로그인 처리를 위한 백엔드 구현 Abstract

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

배포하기

프로젝트 생성

firebaes cli 설치

firebase init

빌드 스크립트 추가하기

*.web.app 도메인 주소 변경하기