Experience

플레이까지 해주셨다니 너무 감사드립니다!
통계에 신기하게도 Until.Blog 가 잡혀있어서 놀랬어요 ㅎㅎ
추후 더 발전시켜서 가져오겠습니다~!

감사합니다! 
아직은 데모판이지만 더 발전시켜서 가져오겠습니다! 

오 게임 플레이 해봤는데 진짜 어렵네요 ㅋㅋㅋ 

게임 출시 축하드립니다!
이렇게 프로덕트로 자신의 결과물을 내놓는다는 것이 많이 무섭고 떨리고.. 그렇더라구요 좋은 결과가 있으시길 바랍니다~~!

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

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716653810238" data-width="50%" data-align="center" alt="until-223"><p>나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.</p><p>그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.</p><h1>PowerToys?</h1><p>마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.</p><p>매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라면 꼭 설치하길 추천한다.</p><p>이 아티클에서는 대표적으로 몇가지만 소개해보겠다.</p><h2>PowerToys Run</h2><p><code spellcheck="false">Alt</code> + <code spellcheck="false">Space</code> 를 통해 아래와 같은 검색창을 띄워준다. 맥하고 비슷하게 생겼다.</p><img src="https://image.until.blog/morethanmin/article/1716654162354" data-width="100%" data-align="center" alt="until-225"><h2>Keyboard Manager</h2><p>키보드 키 및 단축키들을 쉽게 매핑해줄 수 있다. 우리는 이것을 사용해서 맥 단축키들을 적용시키면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716654104729" data-width="100%" data-align="center" alt="until-224"><h2>환경 변수</h2><p>환경변수를 GUI에서 쉽게 변경가능하다. 개꿀이다.</p><img src="https://image.until.blog/morethanmin/article/1716654251418" data-width="100%" data-align="center" alt="until-226"><h2>호스트 파일 편집기</h2><p>호스트 파일을 GUI에서 변경이 가능하다.</p><img src="https://image.until.blog/morethanmin/article/1716654321543" data-width="100%" data-align="center" alt="until-227"><h1>설치하기</h1><p>PowerShell에 아래 커맨드를 입력하면 된다.</p><pre spellcheck="false"><code>winget install Microsoft.PowerToys --source winget</code></pre><h1>적용</h1><p>사실 모든 단축키를 매핑할 순 없다보니, 적당한 수준에서 본인이 주로 사용하는 단축키를 설정해주면 된다.</p><p>나는 아래와 같이 적용했다. 귀찮은 사람은 참고하면 좋을뜻</p><img src="https://image.until.blog/morethanmin/article/1716654467615" data-width="100%" data-align="center" alt="until-228"><p></p><p></p>

나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.PowerToys?마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라

윈도우에서 맥 단축키 적용하기(PowerToys)

🖥 백엔드

<h1>들어가기 전에</h1><p>개발을 하다보면 다음과 같이 상수 값은 자주 사용된다.</p><pre spellcheck="false"><code class="language-java">public class FileService {
    private static final String FILE_STORE_PATH = "/static/images";

    public void saveImage(File file) {
        String filePath = FILE_STORE_PATH + "/" + file.getName();

        // ...
    }

}</code></pre><p></p><p>그런데 서버의 동작 환경 (ex. 테스트, 운영)이나 기타 상황에 따라 상수 값을 다르게 줘야 하는 경우가 있다. 이럴 때에는 어떻게 해야할까?</p><p>다음과 같이 매번 변수를 두 개 생성해서 이렇게 분기를 쳐야 하는걸까?</p><pre spellcheck="false"><code class="language-java">public class FileService {
    // 운영 서버와 테스트 서버 간에 이미지 저장 경로를 다르게 해야 한다
    private static final String REAL_FOLDER_PATH = "/static/images";
    private static final String TEST_FOLDER_PATH = "/static/test/images";

    public void saveImage(File file) {
        String folderPath = Config.isReal ? REAL_FOLDER_PATH : TEST_FOLDER_PATH;
        String filePath = FILE_STORE_PATH + "/" + file.getName();

        // ...
    }

}</code></pre><p></p><p>이제부터 더 나은 방법이 있을지 고민해보도록 하자.</p><p></p><h1>다형성</h1><p>우리는 대부분 객체지향을 활용해서 프로그래밍을 진행하고 있다. 그리고 객체지향의 중요한 특성 중 한 가지, 다형성을 활용해보면 이 문제를 좀 더 멋있게 접근할 수 있을 것 같다.</p><p>어떤 함수를 실행할텐데, 상황에 따라 각각 실행되는 로직이 달라야 한다면 어떻게 할 것인가?</p><p>interface를 만든 후 이를 구현하는 클래스를 여럿 만들어서 다형성을 통해 로직을 처리하는 것이야말로 객체지향이 권장하는 바이다.</p><p></p><p>그렇다면 이런 상수 값을 가져다 쓰는 것도 다형성을 활용해볼 수 있지 않을까?</p><p></p><h1>상황에 따라 다른 상수 값 사용하기</h1><h2>~ Spring의 경우 ~</h2><pre spellcheck="false"><code class="language-java">public interface FileStorePathProvider {
    String getFileStorePath();
}</code></pre><p>다음과 같이, 우리에게 필요한 '역할'을 가진 인터페이스를 구성하고..</p><pre spellcheck="false"><code class="language-java">class RealFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/images";
    }
}

class TestFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/test/images";
    }
}</code></pre><p>각각의 환경에 따른 상수 값을 제공하는 클래스를 만들어주자.</p><p></p><pre spellcheck="false"><code class="language-java">public class FileService {
    private final FileStorePathProvider fileStorePathProvider;

    public FileService(FileStorePathProvider fileStorePathProvider) {
        this.fileStorePathProvider = fileStorePathProvider;
    }

    public void saveImage(File file) {
        String folderPath = fileStorePathProvider.getFileStorePath();
        String filePath = FILE_STORE_PATH + "/" + file.getName();

        // ...
    }

}</code></pre><p>그 다음 이렇게, 사용할 곳에서 인터페이스를 주입 받아주자.</p><p>뭐를 주입 받아야할지 어떻게 아느냐고? 그건 Spring Profile을 활용해주자.</p><p></p><pre spellcheck="false"><code class="language-java">@Profile("real")
@Component
class RealFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/images";
    }
}

@Profile("test")
@Component
class TestFileStorePathProvider implements FileStorePathProvider {
    @Override
    public String getFileStorePath() {
        return "/static/test/images";
    }
}</code></pre><p>다음과 같이 <code spellcheck="false">@Profile</code> 어노테이션을 붙여서, 특정 프로필에서 어떤 빈이 주입될 것인지 명시해주면 좋겠다.</p><h2>~ Node.js의 경우 ~</h2><p>Spring 만 사용하면 너무 정 없으니, Node.js 쪽도 어떻게 접근하면 좋을지 알아보자.</p><p>Node.js의 경우는 내가 알기로는 Profile 같은 기능이 없다. 하지만 <code spellcheck="false">.env</code>를 이용하면 비슷하게 서버 환경을 분기할 수 있다.</p><p></p><h3>NestJS (or 의존성 주입 라이브러리) 사용하기</h3><pre spellcheck="false"><code class="language-typescript">interface FileStorePathProvider {
    getFilePath(): String
}

class RealFileStorePathProvider implements FileStorePathProvider {
    public getFilePath(): String {
        return "/static/images";
    }
}

class TestFileStorePathProvider implements FileStorePathProvider {
    public getFilePath(): String {
        return "/static/test/images";
    }
}</code></pre><p>비슷하게 인터페이스와 클래스를 구성해주자.</p><pre spellcheck="false"><code class="language-typescript">@Injectable()
class InjectableFileStorePathProvider implements FileStorePathProvider {
    private static providerMap: Record&lt;string, FileStorePathProvider&gt; = {
        "real": new RealFileStorePathProvider(),
        "test": new TestFileStorePathProvider(),
        "local-real": new RealFileStorePathProvider(),
    }

    public getFilePath(): String {
        return this.getProvider().getFilePath();
    }

    private getProvider(): FileStorePathProvider {
        return InjectableFileStorePathProvider.providerMap[process.env.NODE_ENV];
    }
}</code></pre><p>그 후 이렇게 Map에서 .env를 이용해서 인스턴스를 얻어오는 식으로 하면 좋을 것 같다.</p><p></p><h3>의존성 주입 라이브러리 없이 사용하기</h3><pre spellcheck="false"><code class="language-typescript">export const fileStorePathProvider =
  process.env.NODE_ENV === "test"
    ? new TestFileStorePathProvider()
    : new RealFileStorePathProvider();</code></pre><p>만약 의존성 주입 라이브러리가 없다면 그냥 이렇게 env 파일의 상태에 따라 변수를 구성 후 import 받아오는 식으로 구성하면 될 것 같다.</p><p></p>

객체지향을 활용해 상수 값 분기하기!

서버 환경에 따라 상수 값 분기하기

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/15655">15666.N과 M(12)</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : Easy</p></li><li><p>풀이시간 : 11m</p></li><li><p>유형 : 백트래킹</p></li></ul><h2>문제</h2><p>N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오. N개의 자연수는 모두 다른 수이다.</p><ul><li><p>N개의 자연수 중에서 M개를 고른 수열</p></li><li><p>고른 수열은 오름차순이어야 한다.</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 8
7 9
8 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 1232 1233 1234
</code></pre><h3>문제 풀이 접근</h3><p>풀려있지 않은 문제여서 모든 N과 M 시리즈를 풀이한 다음 다시 풀었다. <br>크게 어려운건 없고, 오름차순, 중복 순열에 대한 필터만 해주면 쉽게 풀린다. </p><p>문제가 원래 이런진 모르겠으나, 다른 시리즈에서 잘 써먹는 비내림차순이라고 했으면 좀 더 이해하기 쉬웠을 것 같다. </p><p>다른 문제와 동일하게 출력 부분 최적화를 위해선 StringBuilder를 이용해서 한번에 출력 메시징 처리를 하였고, HashSet을 이용해 중복탐색에 대한 시간을 최소화 하였다.</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/15655
////  * Time : 11m 
//// */
///
namespace CodingTestProj
{
    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; _hs;

        public StringBuilder _sb;
        public void solve()
        {
            _sb = new StringBuilder();
            _hs = new HashSet&lt;string&gt;();

            string[] _input = Console.ReadLine().Split(' ');
            _n = int.Parse(_input[0]);
            _m = int.Parse(_input[1]);

            _input = Console.ReadLine().Split(' ');

            _arr = new int[_n];
            _per = new int[_m];

            for(int i = 0; i &lt; _input.Length; ++i)
            {
                _arr[i] = int.Parse(_input[i]);
            }

            Array.Sort(_arr);

            BT(0, ref _per, -1);

            Console.Write(_sb.ToString());
        }

        public void BT(int _cnt, ref int[] _c, int _prev)
        {
            if(_cnt == _m)
            {
                string _in = string.Empty;

                for(int i = 0; i &lt; _cnt; ++i)
                {
                    _in += _c[i];

                    if (i != _cnt - 1)
                        _in += ' ';
                }

                if (_hs.Contains(_in) == false)
                {
                    _hs.Add(_in);
                    _sb.Append(_in);
                    _sb.AppendLine();
                }
            }
            else
            {
                for(int i = _cnt; i &lt; _n; ++i)
                {
                    if (_prev &gt;= _arr[i]) continue;

                    _c[_cnt] = _arr[i];
                    BT(_cnt + 1, ref _c, _arr[i]);
                }
            }
        }
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1733756687155.png" data-width="100%" data-align="center" alt="2516">

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

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

기타

<p>useRef로 컴포넌트 위치로 이동시키기</p><p></p><pre spellcheck="false"><code class="language-javascript">const dodyRef = useRef();
dodyRef.current.scrollIntroView({behavior: "smooth"})
</code></pre>

useRef로 컴포넌트 위치로 이동시키기const dodyRef = useRef();
dodyRef.current.scrollIntroView({behavior: "smooth"})


[기타] react에서 컴포넌트 위치로 스크롤 시키기