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에서 컴포넌트 위치로 스크롤 시키기

🍎 Mac

<p>프론트엔드 개발을 하다보면 다양한 크로스 브라우징 이슈가 발생한다.</p><p>대부분의 이슈는 맥북의 사파리로도 해결이 디버깅이 가능하지만 간혹 실제 기기에서 테스트 해보거나 디버깅이 필요한 경우들이 존재한다. (키보드 관련이슈... 등)</p><p>이럴 때 XCode의 Simulator 를 사용하면 디버깅도 할 수 있고, 아이폰에서 어떻게 표시되는지도 기기별로 그리고 버전별로 확인이 가능하다.</p><h2>XCode 설치</h2><p>우선 앱스토어에 접속해서 XCode를 설치해주자.</p><p>또는 공식 홈페이지에서 다운로드 받을 수 있다. 시간이 꽤 걸린다.</p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.apple.com/xcode/">https://developer.apple.com/xcode/</a></p></li></ul><img src="https://image.until.blog/morethanmin/article/1729175662365.png" data-width="100%" data-align="center"><h2>Simulator 사용</h2><p>설치가 끝났다면 <code spellcheck="false">Xcode -&gt; Open Developer Tool -&gt; Simulator</code> 를 통해 시뮬레이터를 실행할 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1729175802671.png" data-width="100%" data-align="center"><p>그럼 아래와 같이 iOS기기에서 safari를 돌려볼 수 있게 된다.</p><p>만약 모바일 기기 또는 iOS 버전을 바꾸고 시다면 <code spellcheck="false">File -&gt; New Simulator</code> 에서 바꿀 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1729175905830.png" data-width="50%" data-align="center"><h2>개발자 도구 사용하기</h2><p>실제 디버깅까지 해보기 위해서는 개발자도구를 사용할 수 있어야한다.</p><p>시뮬레이터에서 개발자도구를 사용하려면 safari technology preview를 설치하면 된다. 직접 검색하거나 아래 링크에서 다운로드 받자</p><ul><li><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://developer.apple.com/safari/technology-preview/">https://developer.apple.com/safari/technology-preview/</a></p></li></ul><p>이제 <code spellcheck="false">Develop -&gt; 시뮬레이터 -&gt; 디버깅할 사이트</code> 를 선택하여 개발자 도구를 켤 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1729176074625.png" data-width="100%" data-align="center"><p>결과적으로 아래와 같이 세팅할 수 있게 된다. 개발서버를 켜두고 한쪽에 이렇게 켜두고 작업하면 편하게 작업할 수있다.</p><img src="https://image.until.blog/morethanmin/article/1729176151467.png" data-width="100%" data-align="center"><p></p>

프론트엔드 개발을 하다보면 다양한 크로스 브라우징 이슈가 발생한다.대부분의 이슈는 맥북의 사파리로도 해결이 디버깅이 가능하지만 간혹 실제 기기에서 테스트 해보거나 디버깅이 필요한 경우들이 존재한다. (키보드 관련이슈... 등)이럴 때 XCode의 Simulator 를 사용하면 디버깅도 할 수 있고, 아이폰에서 어떻게 표시되는지도 기기별로 그리고 버전별로 확

맥북에서 모바일 사파리 디버깅하기 (XCode Simulator)

🎨 프론트엔드

<blockquote><p>클래스 컴포넌트에 대한 글이 아님을 먼저 남깁니다</p></blockquote><p>자바스크립트는 ES6 환경에서 클래스 문법을 지원하기 시작했다. 물론 그 전에도 클래스처럼 객체를 사용하는 것이 가능했지만..</p><p>아무튼 그럼에도 NestJS 같은 백엔드 환경에선 클래스를 적극적으로 쓰는 것과 별개로, 프론트 환경에서는 클래스를 딱히 쓰지 않고 있는 것 같다.</p><p>왜일까? React에서는 불변성을 중요하게 생각하고 있고, 그렇기 때문에 <code spellcheck="false">useState</code> 같은 상태값에 클래스를 이용하기 어려운 실정이다.</p><p></p><h1>useState에 클래스 객체?</h1><pre spellcheck="false"><code class="language-javascript">function Component() {
  const [cart, setCart] = useState(new ShoppingCart())

  const onClick = (e) =&gt; {
    cart.addItem(e.target.name)
  }

  return (
    &lt;button onClick={onClick}&gt;
      카트에 담기
    &lt;/button&gt;
  )
}

class ShoppingCart {
  constructor(items) {
    this.items = items
  }

  addItem(item) {
    this.items.push(item)
  }
}</code></pre><p>리액트 사용자라면 이 코드가 제대로 동작하지 않을 것임을 알 것이다. <code spellcheck="false">useState</code>로 선언한 상태값은 반드시 <code spellcheck="false">setState</code>로 상태값을 바꿔야하니까.</p><p></p><pre spellcheck="false"><code class="language-javascript">function Component() {
  const [cart, setCart] = useState(new ShoppingCart())

  const onClick = (e) =&gt; {
    cart.addItem(e.target.name)
    setCart(cart)
  }

  return (
    &lt;button onClick={onClick}&gt;
      카트에 담기
    &lt;/button&gt;
  )
}

class ShoppingCart {
  constructor(items) {
    this.items = items
  }

  addItem(item) {
    this.items.push(item)
  }
}</code></pre><p>이러면 어떨까? 물론 제대로 작동하지 않을 것이다. cart의 <code spellcheck="false">addItem</code> 메소드로 cart의 값을 바꿨지만, 이전의 cart와 동등한 값 ( <code spellcheck="false">Object.is</code> 로 비교했을 때)이기 때문이다.</p><p>따라서 정말 이렇게 써먹고 싶다면 <code spellcheck="false">ShoppingCart</code> 클래스는 새로운 객체를 반환하도록 변경되어야 할 것이다.</p><pre spellcheck="false"><code class="language-javascript">class ShoppingCart {
  items
  
  constructor(items) {
    this.items = items
  }

  addItem(item) {
    return new ShoppingCart([...this.items, item])
  }
}</code></pre><p>하지만 매번 코드를 이렇게 쓰는건 좀 어렵다.</p><p></p><h2>반려생활에서는...</h2><p>반려생활에서는 이런 문제를 해결하기 위해 <code spellcheck="false">valtio</code>라는 라이브러리를 사용한다고 한다.</p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/pmndrs/valtio">https://github.com/pmndrs/valtio</a></p><p>프록시를 이용해서 객체에 값이 바뀔 때에 setState로 전파를 해주는 기능으로 보이는데.</p><p>역시나 외부 라이브러리를 사용하는 방법인지라 접근성이 그렇게 좋지는 않고, 원래 쓰던 방식이 있는데 클래스를 사용하기 위해 굳이 이렇게까지 해야할까 라는 생각이 들기도 한다.</p><p></p><p>그렇다면 클래스는 리액트에서 쓸 일이 없는 도구인걸까?</p><p></p><h1>문제 제기</h1><p>예시를 위해 언틸의 프론트엔드 코드를 조금 가져와보자.</p><p>다음은 언틸의 댓글을 쓸 때 내용을 적는 input form 컴포넌트의 코드다.</p><pre spellcheck="false"><code class="language-typescript">type Props = {
  commentId?: number;
  replyToCommentId?: number;
  initialContent: string;
  onCancel?: () =&gt; void;
}

const WriteForm = ({
  commentId,
  replyToCommentId,
  initialContent = "",
  onCancel = () =&gt; {},
}: Props) =&gt; {
  const { isLoggedIn } = useAuthInfo()
  const [content, setContent] = useState(initialContent)

  const handleSubmit: FormEventHandler = async (e) =&gt; {
    e.preventDefault()

    if (!isLoggedIn || !content) return

    if (!commentId) {
      await postComment({ content, replyToCommentId })
      setContent("")
    }

    if (commentId) {
      await putComment({ content })
    }

    onCancel()
  }

  const submitBtnText = (() =&gt; {
    if (commentId) {
      return "수정하기"
    }

    if (replyToCommentId) {
      return "답글 등록"
    }

    return "댓글 등록"
  })()

  return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;textarea
        autoFocus={!!(commentId || replyToCommentId)}
        disabled={!isLoggedIn}
        value={content}
        onChange={(e) =&gt; setContent(e.target.value)}
      /&gt;
      &lt;div&gt;
        {(commentId || replyToCommentId) &amp;&amp; (
          &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
        )}
        &lt;button type="submit"&gt;{submitBtnText}&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  )
}
</code></pre><p>이 컴포넌트에서는 다양한 데이터들이 사용되고 있고,<span> 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다. </span><code spellcheck="false">isLoggedIn</code><span>과 </span><code spellcheck="false">content</code><span>가 비어있다면 댓글을 작성할 수 없고, </span><code spellcheck="false">commentId</code><span>가 있다면 버튼의 텍스트는 '수정하기'이고..</span></p><p>그런데, 왜 <code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없는걸까? 왜 <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'일까?</p><p>코드를 읽다보면 동작 방식은 알 수 있어도 자세한 이유와 의미를 생각해보는 데에는 시간이 좀 들게 된다. 결국 이런 코드들이 많아질 수록 코드는 점점 읽기 힘들어지고 의미를 이해하기 힘들어진다.</p><p></p><h2>메소드 분리?</h2><p>클린코드에서는 어떤 함수가 한 가지 일만 하는 것이 아니게 되었다면 함수를 분리해보라고 권장한다.</p><p>하지만 리액트의 컴포넌트에서는 자바의 클래스와 다르게, private 메소드 같은 것이 없다.</p><p><code spellcheck="false">WriteForm</code> 컴포넌트의 <code spellcheck="false">handleSubmit</code>의 로직이 복잡하다고 해서 함수를 분리해봐야 결국 그 함수도 <code spellcheck="false">WriteForm</code>에 생겨날 뿐이다. 결국 컴포넌트만 뚱뚱해지는 셈이다.</p><p></p><h1>클래스는 상태와, 상태와 연관된 동작을 정의한다</h1><blockquote><p><code spellcheck="false">commentId</code>, <code spellcheck="false">replyToCommentId</code>, <code spellcheck="false">isLoggedIn</code> 등등.. 이것들을 이용해서 컴포넌트의 다양한 행동들과 속성을 정의하고 있다.</p><p><code spellcheck="false">isLoggedIn</code>과 <code spellcheck="false">content</code>가 비어있다면 댓글을 작성할 수 없고, <code spellcheck="false">commentId</code>가 있다면 버튼의 텍스트는 '수정하기'이고..</p></blockquote><p>우리는 이럴 때에 클래스를 사용해볼 수 있다. 클래스는 상태들과, 그 상태들과 연관된 동작을 정의할 때 쓰는 틀이다.</p><p>위에 적은 내용을 클래스를 이용해서 맥락이 드러나도록 코드를 만들어볼 수 있지 않을까?</p><pre spellcheck="false"><code class="language-typescript">class CommentWriteStatus {
  constructor(
    private readonly isLoggedIn: boolean,
    private readonly commentId: number | undefined,
    private readonly replyToCommentId: number | undefined,
    private readonly content: string
  ) {}

  isNewComment() {
    return !this.commentId
  }

  isReply() {
    return this.replyToCommentId !== undefined
  }

  canPublish() {
    return this.isLoggedIn &amp;&amp; this.content
  }

  getSubmitBtnText() {
    if (!this.isNewComment()) {
      return "수정하기"
    }

    if (this.isReply()) {
      return "답글 등록"
    }

    return "댓글 등록"
  }
}</code></pre><p>각 상태값들을 받아서, 댓글 입력창에서 취할 수 있는 행동들을 정의했다.</p><p></p><h2>리액트에 클래스 적용하기</h2><pre spellcheck="false"><code class="language-typescript">const WriteForm = ({
  commentId,
  replyToCommentId,
  initialContent = "",
  onCancel = () =&gt; {},
}: Props) =&gt; {
  const { isLoggedIn } = useAuthInfo()
  const [content, setContent] = useState(initialContent)

  const status = new CommentWriteStatus(
    isLoggedIn,
    commentId,
    replyToCommentId,
    content
  )

  // ...
}</code></pre><p>아까 언급한 대로, state에 클래스를 쓰거나 하는 용도는 어렵다. </p><p>하지만 state는 원래의 방식대로 <code spellcheck="false">useState</code>를 이용해서 정의하고, 비즈니스 로직을 위한 함수 발사대의 용도로 불변 클래스를 활용해주자.</p><p>원래도 객체지향에서 중요한 것은 변수값이 아닌, 메소드들이었으니까.</p><p></p><pre spellcheck="false"><code class="language-typescript">const handleSubmit: FormEventHandler = async (e) =&gt; {
  e.preventDefault()

  if (!status.canPublish()) return

  if (status.isNewComment()) {
    await postComment({ content, replyToCommentId })
    setContent("")
  }

  if (!status.isNewComment()) {
    await putComment({ content })
  }

  onCancel()
};</code></pre><p>클래스의 메소드를 이용해서 코드를 교체해줬다.</p><p>우리는 어떤 변수가 true고, 어떤 변수가 빈 문자열이 아닐 때 return을 한다~ 따위의 것이 궁금했던게 아니다. </p><p>그 대신에 비즈니스의 의미가 잘 드러날 수 있도록 코드를 변경해주니 누구라도 이해할 수 있게 되었다.</p><p></p><pre spellcheck="false"><code class="language-typescript"> return (
  &lt;form onSubmit={handleSubmit}&gt;
    &lt;textarea
      autoFocus={!status.isNewComment() || status.isReply()}
      disabled={!isLoggedIn}
      value={content}
      onChange={(e) =&gt; setContent(e.target.value)}
    /&gt;
    &lt;div&gt;
      {(!status.isNewComment() || status.isReply()) &amp;&amp; (
        &lt;button onClick={onCancel}&gt;취소&lt;/button&gt;
      )}
      &lt;button type="submit"&gt;{status.getSubmitBtnText()}&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
);</code></pre><p>return 문 쪽도 더 의미가 잘 드러나게 변경된 것 같다.</p><p></p><h2>예시 2</h2><p>언틸에서는 블로그에 유저 블로그와 그룹 블로그라는 두 가지 종류가 있다. 그와 함께 방문하는 유저도 타입이 여러 개 존재하게 되는데.</p><pre spellcheck="false"><code class="language-typescript">  userType:
    | 'guest' // 비로그인
    | 'owner' // 본인
    | 'user' // 다른 유저
    | 'member' // 그룹 멤버
    | 'admin' // 그룹 관리자</code></pre><p>이렇게 blogType과 userType이 여러 개 존재함에 따라 각 타입 별로 권한도 다양하게 존재한다.</p><p></p><pre spellcheck="false"><code class="language-typescript">const FollowButton = () =&gt; {
  const { username, isFollowing, blogType, userType } = useBlogQuery()

  if (blogType === "user" &amp;&amp; userType === "owner") {
    return (
      &lt;Link href={`/@${username}/setting`}&gt;
        &lt;button&gt;프로필 수정&lt;/button&gt;
      &lt;/Link&gt;
    )
  }

  return (
    &lt;LoginDialogWrapper
      onClick={() =&gt; {
        isFollowing ? postUnfollow() : postFollow()
      }}
    &gt;
      &lt;button&gt;{isFollowing ? "팔로잉" : "팔로우"}&lt;/button&gt;
    &lt;/LoginDialogWrapper&gt;
  )
}</code></pre><p>유저 블로그면서 자신이 그 블로그의 주인일 경우, 팔로우를 할 이유가 없기 때문에 팔로우 버튼 대신에 '프로필 수정' 버튼을 보여주게 된다.</p><p>애플리케이션 전체에서 이와 비슷하게 유저/블로그 타입을 통한 로직이 많은데, 이 경우 권한에 대한 내용이 한 곳에 뭉쳐있지 않고 이곳 저곳에 혼재되어 있게 된다.</p><p>따라서 실수로 변경 누락을 하거나 잘못 설정하는 일이 발생할 수도 있다.</p><p></p><pre spellcheck="false"><code class="language-typescript">class BlogUserType {
  constructor(
    private readonly userType:
      | "guest" // 비로그인
      | "owner" // 본인
      | "user" // 다른 유저
      | "member" // 그룹 멤버
      | "admin", // 그룹 관리자
    private readonly blogType: "user" | "group"
  ) {}

  canFollow() {
    return !this.isMyUserBlog()
  }

  canEditAbout() {
    return this.isMyUserBlog() || this.isAdmin()
  }

  private isMyUserBlog() {
    return this.isUserBlog() &amp;&amp; this.userType === "owner"
  }

  private isUserBlog() {
    return this.blogType === "user"
  }

  private isAdmin() {
    return this.userType === "admin" || this.userType === "owner"
  }
}</code></pre><p>이런 느낌으로 권한을 좀 정리해볼 수 있지 않을까.</p><p></p><h1>커스텀 훅</h1><p>물론 예제로 들었던 이것들, 커스텀 훅으로 만들 수 있다. 상태값을 받아서 함수 or 값을 뱉는 것이라면 클래스나 훅이나 똑같다.</p><pre spellcheck="false"><code class="language-typescript">function useCommentWriteStatus(
  isLoggedIn: boolean,
  commentId: number | undefined,
  replyToCommentId: number | undefined,
  content: string
) {
  const isNewComment = !commentId
  const isReply = replyToCommentId !== undefined
  const canPublish = isLoggedIn &amp;&amp; content

  function getSubmitBtnText() {
    if (!isNewComment) {
      return "수정하기"
    }

    if (isReply) {
      return "답글 등록"
    }

    return "댓글 등록"
  }

  return {
    isNewComment,
    isReply,
    canPublish,
    getSubmitBtnText,
  }
}

// 사용 예시
const { canPublish } = useCommentWriteStatus(true, 1, 2, "content")</code></pre><p>사실 리액트를 처음 공부하면서 훅에 대해서 배울 때, "아, 이게 리액트에서 제공하는 클래스구나"라는 생각이 들었다.</p><p>변수값들을 생성자처럼 받아서 훅 내부에서 함수들을 생성한 후 public으로 공개하고 싶은 녀석들만 return하면 그게 클래스지.</p><p></p><p>하... 하지만 클래스 쓰는게 멋있잖아?? 리액트에서 클래스 쓰는 힙한 사람처럼 보일 수 있다는 점에서 장점이 있는 것 같다.</p><p>농담이고, 이런 커스텀 훅을 만들어서 비즈니스 로직을 묶는 것도 좋은 방법이지만 클래스 쪽이 private 메소드 등을 이용해서 좀 더 가독성 있는 코드를 쓸 수 있는 것 같다는 개인적인 생각이 들어서 적절한 때에 잘 이용하고 있다. 살짝 테스트하기도 더 쉬운 것 같기도 하고..</p>

클래스로 뚱뚱한 컴포넌트를 정리해보기

React에서 Class 사용해보기

nextjs

<p>nextjs 의 useSearchParams 를 사용하고, yarn build를 하게 되면</p><blockquote><p>useSearchParams() should be wrapped in a suspense boundary at page "/account/find-password". Read more: <a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout">https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout</a></p></blockquote><p>이런 오류를 만날수 있다. </p><p></p><h1>해결</h1><p>next.config.js에서 experimental &gt; missingSuspenseWithCSRBailout 의 값을 false 로 두면 된다. </p><pre spellcheck="false"><code class="language-javascript">const nextConfig = {
 ...
  experimental: {
    missingSuspenseWithCSRBailout: false,
  },
};
export default nextConfig;
</code></pre><p></p><p>experimental 은 nextjs의 실험적인 기능이 정의되어있고 missingSuspenseWithCSRBailout 옵션은 Suspense 을 강요 여부를 설정한다. Suspense가 누락되면 자동으로 에러를 발생시키는 기능이다.  </p><p></p><p>그럼, 이게 왜 useSearchParams 와 충돌을 일으키느냐 nextjs의 server, client component 와의 관계에서 시작된다.</p><p>useSearchParams는 url 의 쿼리 파라미터에 접근하는데 사용되는데 이건 클라이언트 컴포넌트에서만 사용할 수 있다.  next13 이상에서는 서버컴포넌트가 디폴트이기 때문에 생기는 충돌이다.</p><p>nextjs는 useSearchParams가 서버컴포넌트 트리에 존재할 경우, 클라이언트 사이드 렌더링으로 전환을 하는데, 그 전환과정에서 missingSuspenseWithCSRBailout 경고가 발생하는 것이다.  </p><p>이걸 해결하기 위해 use client를 알맞게 선언해줌으로써 해결할수 있다.</p><p></p><p></p><p></p><p></p><p></p><p></p>

nextjs useSearchParams 오류는 왜 은근히 자주 등장할까?

[nextjs error] useSearchParams() should be wrapped in a suspense boundary at page ...

<h2>JSX란?</h2><pre spellcheck="false"><code class="language-jsx">const element = &lt;h1&gt;Hello, world!&lt;/h1&gt;;
</code></pre><blockquote><p>JSX(JavaScript XML), JavaScript에 XML을 추가하여 확장한 문법</p></blockquote><h3>브라우저는 JSX를 알고있을까?</h3><p>JSX가 포함된 코드를 아무런 처리 없이 그대로 실행하면 에러가 발생한다.</p><p>JSXS는 자바스크립트 표준 코드가 아닌 페이즈북이 임의로 만든 새로운 문법이기 때문에 반드시 트랜스파일러를 거쳐야 비로소 자바스크립트 런타임이 이해할 수 있는 의미있는 코드로 변환된다.</p><p><strong>JSX는 어떻게 자바스크립트로 변환될까?</strong></p><p>우선 JS가 JSX로 변환되는 방식을 알려면 리액트에서 JSX를 변환하는 <code spellcheck="false">@babel/plugin-transform-react-jsx</code>플러그인을 알아야 한다.</p><p>이 플러그인은 JSX 구문을 자바스크립트가 이해할 수 있는 형태로 변환한다.</p><pre spellcheck="false"><code class="language-jsx">// JSX
const element = (
  &lt;h1 className="greeting"&gt;
    Hello, world!
  &lt;/h1&gt;
);

// JS로 변환된 JSX
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
</code></pre><h3>JSX의 설계 목적</h3><p>다양한 트랜스파일러에서 다양한 속성을 가진 트리 구조를 토큰화해 ECMAScript로 변환하는데 초점을 두고 있다.</p><ul class="tight" data-tight="true"><li><p>트리 구조로 표현하고 싶은 다양한 것들을 작성</p></li><li><p>HTML, XML이외에도 다른 구문으로도 확장될 수 있도록, 개발자들에게 친숙함을 느낄 수 있기 위해</p></li></ul><h2>JSX 정의</h2><h3>1. JSXElement</h3><blockquote><p>JSX를 구성하는 가장 기본적인 요소로, HTML element와 비슷한 역할을 한다.</p></blockquote><ul class="tight" data-tight="true"><li><p>JSXOpeningElement: &lt;div&gt;</p></li><li><p>JSXClosingElement: &lt;/div&gt;</p></li><li><p>JSXSelfClosingElement: &lt;div /&gt;</p></li><li><p>JSXFragment: &lt;&gt;&lt;/&gt;</p></li></ul><p>❓ 컴포넌트 명이 대문자로 시작해야 하는 이유는 무엇인가요?</p><p>리액트에서 HTML 구문 이외 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 사용가능하다. 이는 HTML 태그명과 사용자가 만든 컴포넌트 태그명을 구분 짓기 위해서다.</p><pre spellcheck="false"><code class="language-jsx">// HTML 태그명
&lt;span&gt;&lt;/span&gt;
// 컴포넌트명
&lt;Span&gt;&lt;/Span&gt;
</code></pre><p></p><p><strong>JSXElementName</strong></p><blockquote><p>JSXElement의 요소 이름으로 쓸 수 있는 것을 의미한다.</p></blockquote><ul class="tight" data-tight="true"><li><p>JSXIdentifier: <code spellcheck="false">$</code>와<code spellcheck="false">_</code> 외에 다른 특수문자나 숫자로 시작할 수 없다.</p></li><li><p>JSXNamespacedName: JSXIdentifier:JSXIdentifier의 조합, 두 개 이상은 불가</p></li><li><p>JSXMemberExperssion: JSXIdentifier.JSXIdentifier의 조합, 두 개 이상 가능</p></li></ul><h3>2. JSXAttributes</h3><blockquote><p>JSXElement에 부여할 수 있는 속성을 의미한다. 필수값이 아니고, 존재하지 않아도 에러가 발생하지 않는다.</p></blockquote><ul><li><p>JSXSpreadAttributes</p><ul class="tight" data-tight="true"><li><p>{…AssignmentExpression}</p></li><li><p>단순히 객체뿐만 아니라 자바스크립트에서 AssignmentExpression로 취급되는 모든 표현식 존재 가능</p><ul class="tight" data-tight="true"><li><p>조건문 표현식</p></li><li><p>화살표 함수</p></li><li><p>할당식</p></li></ul></li></ul></li><li><p>JSXAttribute</p><ul><li><p>JSXAttributeName - JSXAttributeValue로 짝을 이루어 표현</p></li><li><p>JSXAttributeName: 속성의 키 값</p></li><li><p>JSXAttributeValue</p><ul><li><p>큰 따옴표로 구성된 문자열</p></li><li><p>작은 따옴표로 구성된 문자열</p></li><li><p>{ AssignmentExpression }</p></li><li><p>JSXElement: 값으로 다른 JSX요소가 들어갈 수 있다.</p><p>&lt;aside&gt; 💡 값을 전달할 때 { }로 감싸는게 리액트의 문법으로 오해하는 개발자들이 있다.</p><p>이는 리액트의 문법이 아닌 prettier의 규칙이다. prettier 규칙은 태그가 포함된 JSX 구문을 좀 더 읽기 쉽게 만들기 위해 제공된다.</p><pre spellcheck="false"><code class="language-jsx">&lt;div attribute=&lt;div&gt;hello&lt;/div&gt; /&gt;
&lt;div attribute={&lt;div&gt;hello&lt;/div&gt;} /&gt;
</code></pre><p>&lt;/aside&gt;</p></li><li><p>JSXFragment</p></li></ul></li></ul></li></ul><h3>3. JSXChildren</h3><blockquote><p>JSXElement의 자식 값을 나타낸다.</p></blockquote><ul><li><p>JSXChild: JSXChildren을 이루는 기본 단위다. JSXChildren은 JSChild가 없어도 상관없다.</p><ul><li><p>JSXText: 문자열</p></li><li><p>JSXElement: 다른 JSX요소</p></li><li><p>JSXFragment: 빈 요소</p></li><li><p>{JSXChildExpression (optional)}</p><pre spellcheck="false"><code class="language-jsx">// 해당 컴포넌트를 렌더링하면 "foo"라는 문자열이 출력된다.
return &lt;&gt;{(()=&gt; 'foo')()}&lt;/&gt;
</code></pre></li></ul></li></ul><h3>4. JSXStrings</h3><blockquote><p>HTML에서 사용 가능한 문자열은 모두 JSXStrings에서도 가능하다.</p></blockquote><ul class="tight" data-tight="true"><li><p>큰따옴표로 구성된 문자열</p></li><li><p>작은 따옴표로 구성된 문자열</p></li><li><p>JSXText</p></li></ul><p>💡 자바스크립트와는 한 가지 중요한 차이점이 발생하는데 바로 <code spellcheck="false">\\</code> 로 시작하는 이스케이프 문자 형태소다.</p><p><code spellcheck="false">\\</code> 는 자바스크립트에서 특수문자를 처리할 때 사용되므로 몇 가지 제약사항이 있지만, HTML에서 아무런 제약없이 사용할 수 있다.</p><p>따라서 JSX에서는 HTML처럼 <code spellcheck="false">\\</code>을 이스케이프 문자열로 처리하고 있지 않다.</p><h2>마무리</h2><p>이처럼 JSX는 자바스크립트 코드 내부에 HTML과 같은 트리 구조를 가진 컴포넌트를 표현할 수 있다는 점에 각광받고 있다.</p><p>물론 JSX가 HTML문법과 자바스크립트 문법이 뒤섞여서 코드의 가독성을 해친다는 의견도 있다. JSX 내부에 자바스크립트 문법이 많아질수록 복잡성이 증대하면서 코드의 가독성도 해칠 것이므로 주의해서 사용해야 한다.</p>

2장 리액트 핵심 요소 깊게 살펴보기

2-1. JSX란?

<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/15663">15663.N과 M(10)</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : Middle</p></li><li><p>풀이시간 : 44m</p></li><li><p>유형 : 백트래킹 , DFS</p></li></ul><h2>문제</h2><p>N개의 자연수와 자연수 M이 주어졌을 때, 아래 조건을 만족하는 길이가 M인 수열을 모두 구하는 프로그램을 작성하시오.</p><ul><li><p>N개의 자연수 중에서 M개를 고른 수열</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 4 2
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>2
4
</code></pre><h2>예제 입력 2 복사</h2><pre spellcheck="false"><code>4 2
9 7 9 1
</code></pre><h2>예제 출력 2 복사</h2><pre spellcheck="false"><code>1 7
1 9
7 9
9 9
</code></pre><h2>예제 입력 3 복사</h2><pre spellcheck="false"><code>4 4
1 1 2 2
</code></pre><h2>예제 출력 3 복사</h2><pre spellcheck="false"><code>1 1 2 2
</code></pre><h3>문제 풀이 접근</h3><p>이 문제에서는 같은 배열의 다른 위치(인덱스)에 같은 값의 숫자가 들어와서, 조금 까다로웠다. <br>이전 입력 값을 비교해서 비 내림차순으로 필터링 할수 없는 경우여서 값을 넣는건 불가능 했다. <br><br>이 문제의 경우는, 배열을 나보다 큰 값을 출력하기 때문에, 값을 하나씩 밀어나가면서 출력하는 방법을 사용해서 출력했다.<br><br>중복 출력은 사용하던대로, HashSet을 사용하여 최적화했다.</p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code class="language-csharp">using System;
using System.Collections;
using System.Collections.Generic;
using System.Xml.Linq;
using static CodingTestProj.Program;
using System.Text;

///*
// * Difficulty : Middle
// * URL : https://www.acmicpc.net/problem/15664
//  * Time : 44m
// */

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

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

        public StringBuilder _sb;

        public HashSet&lt;string&gt; _hs;
        public void solve()
        {
            _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(' ');
            _visit = new bool[_max];
            _sb = new StringBuilder();
            _arr = new int[_n];
            int[] _per = new int[_m];

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

            Array.Sort(_arr);

            BT(0, ref _per,0);
            Console.Write(_sb.ToString());
        }

        public void BT(int pos, ref int[] _c, int depth)
        {
            if (pos == _m)
            {
                string _s = string.Empty;
                for (int i = 0; i &lt; pos; ++i)
                {
                    _s += _c[i];

                    if (i != pos - 1)
                        _s += ' ';
                }

                if (_hs.Contains(_s) == false)
                {
                    _hs.Add(_s);
                    _sb.AppendLine(_s);
                }
            }
            else if (depth == _arr.Length) return;
            else
            {
                _c[pos] = _arr[depth];

                BT(pos + 1, ref _c, depth + 1);
                BT(pos, ref _c, depth + 1);
            }
        }
    }
}</code></pre><h3>코드 결과</h3><img src="https://image.until.blog/sin0105/article/1732809127786.png" data-width="100%" data-align="center" alt="2368"><p></p>

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

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

vscode

<pre spellcheck="false"><code>"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
  },</code></pre><p></p><p><code spellcheck="false">command + p</code> 로 파일 검색창 열고 <code spellcheck="false">&gt;</code> 를 입력한다.</p><p>그러면 파일검색창에서 <strong>명령어팔렛트</strong>로 바뀌게 됩니다.</p><p>settings.json 를 검색하면 아래 처럼 뜨는데</p><img src="https://image.until.blog/dody/article/1722219141216" alt="until-1153"><p><code spellcheck="false">Preferences: Open User Settings (JSON)</code> 을 누르면 json 파일을 열어, 맨 위에 적어놓은 코드를 추가하면 된다.</p>

vscode 잘 써서 효율높이는 법 - import 자동 제거

[vscode] 사용하지 않는 import 자동 삭제 해줘

<blockquote><p>해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@morethanmin/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-winget%EC%9C%BC%EB%A1%9C-fnm-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0--fast-node-manager-">이 아티클</a>을 참고해주세요.</p></blockquote><p>node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 <code spellcheck="false">.nvmrc</code> 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.</p><p>이럴 때 사용할 수 있는 것이 바로 nvm(node version manager)입니다. nvm은 여러 버전의 node를 설치하고 실행할 수 있도록 도와주고, 또 <code spellcheck="false">.nvmrc</code> 파일을 읽어들여 프로젝트에 맞는 node 버전을 자동으로 설정해줄 수도 있습니다.</p><h1>NVM 설치하기</h1><p>아래 커맨드를 터미널에 입력하여 nvm을 설치해봅시다. curl또는 wget또는 brew 통해 설치하시면 됩니다.</p><h2>curl</h2><pre spellcheck="false"><code class="language-bash">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>wget</h2><pre spellcheck="false"><code class="language-bash">wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>brew</h2><pre spellcheck="false"><code class="language-bash">brew install nvm</code></pre><h1>환경변수 설정</h1><p>nvm을 설치하셨다면 환경 변수를 설정해야합니다. 본인의 터미널 환경에 맞게 <code spellcheck="false">~/.bash_profile</code>, <code spellcheck="false">~/.zshrc</code>, <code spellcheck="false">~/.profile</code>, <code spellcheck="false">~/.bashrc</code> 중 한곳으로 이동하여 아래 추가하시면 됩니다.</p><pre spellcheck="false"><code class="language-bash">export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;&amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] &amp;&amp; \. "$NVM_DIR/nvm.sh" # This loads nvm</code></pre><p>이후 터미널을 재부팅하거나 아래 커맨드를 입력하면 환경변수가 적용됩니다.</p><pre spellcheck="false"><code>source ~/.bash_profile</code></pre><h1>nvm 사용법</h1><p>가장 많이 사용하는 명령어 위주로 알아보겠습니다.</p><ul><li><p><code spellcheck="false">nvm ls</code>: 현재 설치된 node 버전을 확인할 수 있습니다.</p></li><li><p><code spellcheck="false">nvm use &lt;version&gt;</code>:  특정 버전의 node를 사용합니다. 커맨드를 실행하는 디렉터리에 <code spellcheck="false">.nvmrc</code> 를 통해 버전이 명시되어있다면 version을 생략할 수 있어요.</p></li><li><p><code spellcheck="false">nvm install &lt;version&gt;</code> : 특정 버전의 node를 설치합니다.</p></li><li><p><code spellcheck="false">nvm uninstall &lt;version&gt;</code> : 특정 버전의 node를 제거합니다.</p></li></ul><h1><code spellcheck="false">.nvmrc</code> </h1><p>프로젝트 root에 <code spellcheck="false">.nvmrc</code>파일을 생성하고 현재 노드버전을 입력해두면 해당 프로젝트에서 사용하는 node 버전을 명시해 둘 수 있고, <code spellcheck="false">nvm use</code>를 통해 바로 해당 버전의 node를 사용할 수 있습니다.</p><h1>프로젝트별 node 버전 자동으로 적용하기</h1><p>현재 디렉터리에 <code spellcheck="false">.nvmrc</code> 가 존재하는지 확인하고 있다면 nvm use를 자동으로 실행하는 스크립트를 적용시켜봅시다.</p><h2>script 사용하는 방법</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nvm-sh/nvm?tab=readme-ov-file#deeper-shell-integration">공식문서</a>에 나와있는 스크립트를 사용하여 적용할 수 있습니다. bash와 zsh 터미널에 대한 스크립트를 제공하고 있습니다. 둘 중 본인이 사용하는 터미널에 맞는 스크립트를 적용하시면 됩니다.</p><h2>bash</h2><p>아래 코드를  <code spellcheck="false">$HOME/.bashrc</code>에 입력후 저장해주면 됩니다. </p><pre spellcheck="false"><code>cdnvm() {
    command cd "$@" || return $?
    nvm_path="$(nvm_find_up .nvmrc | command tr -d '\n')"

    # If there are no .nvmrc file, use the default nvm version
    if [[ ! $nvm_path = *[^[:space:]]* ]]; then

        declare default_version
        default_version="$(nvm version default)"

        # If there is no default version, set it to `node`
        # This will use the latest version on your machine
        if [ $default_version = 'N/A' ]; then
            nvm alias default node
            default_version=$(nvm version default)
        fi

        # If the current version is not the default version, set it to use the default version
        if [ "$(nvm current)" != "${default_version}" ]; then
            nvm use default
        fi
    elif [[ -s "${nvm_path}/.nvmrc" &amp;&amp; -r "${nvm_path}/.nvmrc" ]]; then
        declare nvm_version
        nvm_version=$(&lt;"${nvm_path}"/.nvmrc)

        declare locally_resolved_nvm_version
        # `nvm ls` will check all locally-available versions
        # If there are multiple matching versions, take the latest one
        # Remove the `-&gt;` and `*` characters and spaces
        # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
        locally_resolved_nvm_version=$(nvm ls --no-colors "${nvm_version}" | command tail -1 | command tr -d '\-&gt;*' | command tr -d '[:space:]')

        # If it is not already installed, install it
        # `nvm install` will implicitly use the newly-installed version
        if [ "${locally_resolved_nvm_version}" = 'N/A' ]; then
            nvm install "${nvm_version}";
        elif [ "$(nvm current)" != "${locally_resolved_nvm_version}" ]; then
            nvm use "${nvm_version}";
        fi
    fi
}

alias cd='cdnvm'
cdnvm "$PWD" || exit</code></pre><h2>zsh</h2><pre spellcheck="false"><code># place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version
    nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] &amp;&amp; [ "$(nvm version)" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc</code></pre><h2>vsCode extension 사용하기</h2><p>만약 본인이 vsCode를 사용한다면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm">vsc-nvm</a> 익스텐션을 사용할 수도 있습니다.</p><p>해당 extension을 설치하고 vscode를 재부팅하면 바로 적용됩니다. </p><p></p>

해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi

nvm 으로 node 버전 관리하기 (+ 자동화)

<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/18429">18429.근손실</a></p></li><li><p>사용언어 : C#</p></li><li><p>난이도 : 중</p></li><li><p>풀이시간 : 미측정</p></li><li><p>유형 : 브루트포스, 백트래킹</p></li></ul><h2>문제</h2><p>웨이트 트레이닝을 좋아하는 어떤 대학원생은, 현재 3대 운동 중량 500의 괴력을 소유하고 있다. 다만, 하루가 지날 때마다 중량이 <em>K</em>만큼 감소한다. 예를 들어 <em>K</em>=4일 때, 3일이 지나면 중량이 488로 감소하게 된다. 따라서 운동을 하지 않고, 가만히 있다면 매일매일 중량이 감소할 뿐이다.</p><p>다행히도 이 대학원생은 <em>N</em>개의 서로 다른 운동 키트를 가지고 있다. 이 대학원생은 하루에 1개씩의 키트를 사용하며, 매일 어떤 키트를 사용할 지는 마음대로 결정할 수 있다. 운동 키트들은 각각의 중량 증가량을 가지고 있으며, 사용할 때마다 즉시 중량이 증가하게 된다. 이 때 몇몇 운동 키트들의 중량 증가량이 같을 수 있으나, 서로 다른 운동 키트로 간주한다. 각각의 운동 키트는 N일 동안 한 번씩만 사용할 수 있다.</p><p>대학원생은 운동 기간동안 항상 중량이 500&nbsp;이상으로 유지가 되도록 <em>N</em>일간의 운동 플랜을 세우고자 한다. 1일차부터 <em>N</em>일차까지의 모든 기간동안, 어떤 시점에서라도 중량이 500보다 작아지지 않도록 해야 한다.</p><p>예를 들어 <em>N</em>=3, <em>K</em>=4일 때, 각 운동 키트의 중량 증가량이 다음과 같다고 가정하자.</p><p></p><p>이 때 1번, 3번, 2번 순서대로 운동 키트를 적용한다고 해보자. 이 경우 운동 1일차에 대학원생은 중량이 3만큼 증가하지만 그와 동시에 하루에 중량이 4만큼 감소하기 때문에, 1일이 지난 이후에 중량은 499가 된다. 따라서 조건을 만족하지 못한다.</p><p>반면에 3번, 1번, 2번 순서대로 운동 키트를 적용한다고 해보자. 그러면 1일차부터 운동을 모두 마친 날까지의 모든 시점에 대하여 항상 중량이 500이상이 된다.</p><p><em>N</em>개의 운동 키트에 대한 정보가 주어졌을 때, <em>N</em>일간 하루에 1개씩의 운동 키트를 사용하는 모든 경우 중에서, 운동 기간동안 항상 중량이 500 이상이 되도록 하는 경우의 수를 출력하는 프로그램을 작성하시오.</p><p>위 예시에서는 모든 경우 중에서 총 4가지 경우가 조건을 만족한다.</p><h2>입력</h2><p>첫째 줄에 자연수 <em>N</em>과 <em>K</em>가&nbsp;공백을 기준으로 구분되어 주어진다. (1 ≤&nbsp;<em>N&nbsp;</em>≤ 8, 1 ≤&nbsp;<em>K&nbsp;</em>≤ 50) 둘째 줄에 각 운동 키트의 중량 증가량 <em>A</em>가 공백을 기준으로 구분되어 주어진다. (1 ≤&nbsp;<em>A&nbsp;</em>≤ 50)</p><h2>출력</h2><p><em>N</em>일 동안 <em>N</em>개의 운동 키트를 사용하는 모든 경우 중에서, 운동 기간동안 항상 중량이 500&nbsp;이상이 되도록 하는 경우의 수를 출력한다.</p><h2>예제 입력 1 복사</h2><pre spellcheck="false"><code>3 4
3 7 5
</code></pre><h2>예제 출력 1 복사</h2><pre spellcheck="false"><code>4
</code></pre><h3>문제 풀이 접근</h3><p>이 문제는, 2가지 유형이 섞인 문제라고 생각한다. <br>1. 백트래킹을 먼저하여 순서를 구해야하고, <br>2. 그 순서를 가지고 완전탐색을 하여야 풀 수 있다.</p><p>먼저 백트래킹이란 내가 할 수 있는 여러가지 경우의 수를 하나씩 수행하는 것을 말한다. <br>만약 A B C 가 있을때 내가 A 를 방문하고 나머지는 B C 를 선택할 수 있다. 그다음에 B 를 선택하면 순서는 A - B 여서 그다음에 선택할 수 있는 문자는 C 다 그러면 가장 먼저 A - B - C 를 순회하게 되고, 이게 내가 찾는 답이 아니라면, 다시 A 선택한 시점으로 돌아온다. <br>아까는 B C 중에 B를 골랐지만, 이번에는 C 를 고르면 A - C - B 순서로 방문함을 알 수 있다. </p><p>이렇게 내가 할 수 있는 선택지를 가지치기를 통하여 유망한 답중 정답을 골라내는 방법이다.</p><p>원리를 보면 DFS, BFS와 상당히 유사하다고 생각하나, 백트래킹이 쉽게 풀 수 있는 문제들이 따로 있기 때문에 백트래킹은 연습이 좀 필요할 것으로 보인다. </p><p>다시 문제로 돌아와서, 1(5), 2(7), 3(3) 으로 키트와 중량 증가량이 쌍으로 있다. <br>이것또한 순열로 풀면 <br>1 - 2 - 3<br>1 - 3 - 2<br>2 - 1 - 3 <br>2 - 3 - 1<br>3 - 1 - 2<br>3 - 2- 1 <br>이렇게 되는데 사용 순서에 따라 내가 500을 계속 유지할 수 도 있고, 500을 유지 못할 수도 있다. <br>여기서 하루에 K 만큼 감소하니까 나는 _nowWeight 라는 변수로 현재 내가 어디까지 들 수 있는지 공식을 세웠다 . <br>nowWeight = nowWeight - ( K ) + Kitval 을 매일 계산하다보면 내가 500을 넘는지 알 수 있다. </p><p>그렇게 모든 케이스가 500을 넘으면 _ret 을 하나 증감하고 모두 순회했다면 ret 을 출력하면 끝나는 문제다. </p><h3>작성 코드 (C#)</h3><pre spellcheck="false"><code>using System;
using System.Collections;
using System.Collections.Generic;
using static CodingTestProj.Program;

/*
 * Difficulty : Middle
 * URL : https://www.acmicpc.net/problem/18429
  * Time : 
 */


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

    public class Solution
    {
        public int _n;
        public int _k;
        public int _declineProtain;

        public bool[] _isSelected;
        public int[] _numbers;

        public int _ret;

        public int _permuteCnt;
        public int _nowWeight;

        public int _dic_index;
        public Dictionary&lt;int, int&gt; _dicKitVal = new Dictionary&lt;int, int&gt;();
        public List&lt;KeyValuePair&lt;int, List&lt;int&gt;&gt;&gt; _listPermute = new List&lt;KeyValuePair&lt;int, List&lt;int&gt;&gt;&gt;();

        public void solve()
        {
            Init();

            string[] input = Console.ReadLine().Split(' ');
            _n = Int32.Parse(input[0]);
            _k = Int32.Parse(input[1]);

            _isSelected = new bool[_n];
            _numbers = new int[_n];

            for (int i = 0; i &lt; _n; ++i)
                _numbers[i] = i + 1;

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

            for (int i = 1; i &lt;= _n; ++i)
                _dicKitVal.Add(i, Int32.Parse(input[i - 1]));

            int[] arr = new int[_n];
            Permutation(0, 0, ref arr);
            MainSolution();

            Print();
        }

        public void Init()
        {
            _n = 0;
            _k = 0;
            _declineProtain = 0;
            _dic_index = 0;
            _nowWeight = 500;
        }

        public void Permutation(int _depth, int _pos, ref int[] arr)
        {
            if (_depth == (_n))
            {
                List&lt;int&gt; _mList = new List&lt;int&gt;();
                _mList.AddRange(arr);

                _listPermute.Add(new KeyValuePair&lt;int, List&lt;int&gt;&gt;(_dic_index, _mList));

                //for (int i = 0; i &lt; _mList.Count; ++i)
                //    Console.Write(_mList[i] + " ");

                //Console.WriteLine();

                ++_dic_index;
            }
            else
            {
                for (int i = 0; i &lt; _numbers.Length; ++i)
                {
                    if (_isSelected[i] == false)
                    {
                        _isSelected[i] = true;
                        arr[_depth] = _numbers[i];
                        Permutation(_depth + 1, _pos, ref arr);
                        _isSelected[i] = false;
                    }
                }
            }
        }

        public void MainSolution()
        {
            for (int i = 0; i &lt; _listPermute.Count; ++i)
            {
                var val = _listPermute.Find(rhs =&gt; rhs.Key == i).Value;
                if (val == null) continue;

                _nowWeight = 500;
                bool isFail = false;

                for (int j = 0; j &lt; val.Count; ++j)
                {
                    var kitNumb = val[j];
                    var kitVal = _dicKitVal[kitNumb];

                    _nowWeight = _nowWeight - (_k) + kitVal;

                    if (_nowWeight &lt; 500)
                    {
                        isFail = true;
                        break;
                    }
                }

                if (isFail) continue;

                ++_ret;
            }
        }

        public void Print()
        {
            Console.WriteLine(_ret);
        }
    }
}
</code></pre><h3>코드 결과</h3><ul><li><p>어째서 인지 이미지가 안붙여진다. </p></li><li><p>고쳐지면 첨부예정</p></li></ul><p></p><p></p><p></p><p></p>

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

코딩테스트 준비 - 근손실

<p></p><p>본인 환경에 따라 단축키가 다를 수 있다.</p><p> <code spellcheck="false">command + p</code> 를 치고 <code spellcheck="false">&gt; open keyboard shortcuts</code> 으로 keyboard shortcut에 설정되어 있는 내용을 참고하자.</p><p></p><hr><p>코드 접기 (fold)</p><p><code spellcheck="false">option + command + [</code></p><p>코드 펼치기 (unfold)</p><p><code spellcheck="false">option + command + ]</code></p><p></p><p></p><p></p>

[vscode] VSCode 능률 높여주는 단축키 (모으는 중...)

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

tRPC with Next.js 14

<img src="https://image.until.blog/ninefloor/article/1730025872568.png" data-width="75%" data-align="center" alt="1909"><blockquote><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@ninefloor/trpc-with-next-js-14--server-side-setting">이전 게시글</a>에서 이어집니다.</p></blockquote><p>본격적인 서버단 로직 작성에 앞서 테스트 등을 위해 Client쪽 세팅도 진행해보자.</p><h2>client side</h2><p>비교적 client side에는 설정할 것이 많지 않지만, 서버쪽과 유기적으로 연결이 되다 보니 Provider와 Client에서 사용하는 객체같은게 혼동되기 쉬운 부분들이 있다.</p><h3>tRPC Client</h3><p>말 그대로 클라이언트에서 사용할 tRPC clent를 <code spellcheck="false">createTRPC...</code>를 이용해 생성해주어야 한다. tRPC에는 axios의 interceptor와 비슷한 개념인 link가 있는데, 클라이언트를 생성할 때 tRPC에서 제공하는 link를 사용해 클라이언트에서 요청을 할 때 동작할 로직을 구성한다.</p><p>실질적으로 요청이 발생하는 link는 <code spellcheck="false">httpLink</code>, <code spellcheck="false">httpBatchLink</code>로 서버에서 지정해준 url과 함께 fetch를 넣어주면 된다. 요청을 보낼 때 기본으로 포함되어야 하는 헤더와 같은 설정들도 이 곳에서 가능하다. 이 플젝에서는 헤더에 토큰을 넣어서 검증하는 방식으로 사용할거라 해당 헤더에 대한 내용을 포함하였다.</p><p>이 때 주의할 점은 React Query를 사용할 거라면 <code spellcheck="false">createTRPCReact</code>를 <code spellcheck="false">@trpc/react-query</code>에서 가져와야 한다는 점이다. 이렇게 생성된 클라이언트는 ReactQuery로만 사용이 가능하기 때문에 당연하게도 서버 컴포넌트에서는 사용할 수 없다. 만약 React Query를 사용하지 않거나 사용할 수 없는 로직에서 요청을 하려면 <code spellcheck="false">createTRPCClient</code>로 별도의 클라이언트를 생성하면 된다.</p><p><code spellcheck="false">trpcClient.ts</code></p><pre spellcheck="false"><code class="language-typescript">import type { AppRouter } from "@/server/routes/appRouter"; // 서버에서 작성한 AppRouter 타입도 불러온다.
import {
  createTRPCClient,
  getFetch,
  httpBatchLink,
  loggerLink,
} from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import superjson from "superjson";

// react-query와 함께 사용할 클라이언트
export const trpcReact = createTRPCReact&lt;AppRouter&gt;();
const trpcClient = trpcReact.createClient({
  links: [
    loggerLink({
      enabled: () =&gt; true,
    }),
    httpBatchLink({
      url: "/api",
      transformer: superjson,
      headers() {
        return {
          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
        };
      },
      fetch: async (input, init?) =&gt; {
        const fetch = getFetch();
        return await fetch(input, {
          ...init,
          credentials: "include",
        });
      },
    }),
  ],
});

// Provider에 주입하기 위해 함수 형태로 감싼다.
export const trpcClientForProvider = () =&gt; trpcClient;

// "use client"를 사용하지 않는 tsx 파일 등에 사용할 별도 클라이언트
export const trpc = createTRPCClient&lt;AppRouter&gt;({
  links: [
    httpBatchLink({
      url: "/api",
      transformer: superjson,
      headers() {
        return {
          Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
        };
      },
      fetch: async (input, init?) =&gt; {
        const fetch = getFetch();
        return await fetch(input, {
          ...init,
          credentials: "include",
        });
      },
    }),
  ],
});
</code></pre><h3>Query Client</h3><p>React Query를 사용하기 위한 클라이언트는 일반적으로 사용하는 것과 크게 다르지 않다. 기본으로 설정해주어야 하는 부분들이 있다면 여기에 작성해주면 된다.</p><p><code spellcheck="false">trpcClient.ts</code></p><pre spellcheck="false"><code class="language-typescript">import { QueryClient } from "@tanstack/react-query";

export const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 5 * 1000 } },
});</code></pre><h3>Provider</h3><p>다음은 tRPC를 클라이언트 사이드에서 사용하기 위해 Provider 컴포넌트를 작성한다. 사실 이렇게 별도 컴포넌트를 만들 필요가 없을 수도 있겠지만, 보통 이런 라이브러리를 위해 적용해야 하는 Provider의 경우 일반적으로 <code spellcheck="false">layout.tsx</code>에 적용되어야 한다. 하지만 layout 파일에서 metadata 등을 설정하려면 반드시 server component여야 하므로 이렇게 별도 컴포넌트로 작성하였다.</p><p><code spellcheck="false">TRPCProvider.tsx</code></p><pre spellcheck="false"><code class="language-typescript">"use client";

import { queryClient } from "@/utils/queryClient";
import { trpcClientForProvider, trpcReact } from "@/utils/trpcClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { ReactNode, useState } from "react";

export const TRPCProvider = ({ children }: { children: ReactNode }) =&gt; {
  const [trpcClient] = useState(trpcClientForProvider);
  return (
    // 아까 생성한 trpcClient와 queryClient를 Provider에 넣어주고 QueryClientProvider도 함께 감싸준다.
    &lt;trpcReact.Provider client={trpcClient} queryClient={queryClient}&gt;
      &lt;QueryClientProvider client={queryClient}&gt;
        {children}
        &lt;ReactQueryDevtools /&gt;
      &lt;/QueryClientProvider&gt;
    &lt;/trpcReact.Provider&gt;
  );
};</code></pre><p><code spellcheck="false">layout.tsx</code></p><pre spellcheck="false"><code class="language-typescript">import { TRPCProvider } from "@/components/providers/TRPCProvider";
import { Metadata, Viewport } from "next";

export const metadata: Metadata = {...};

export default function Layout({ children }: { children: React.ReactNode }) {
  return &lt;TRPCProvider&gt;{children}&lt;/TRPCProvider&gt;;
}</code></pre><h2>실제 사용 예시</h2><p>위의 설정을 모두 마쳤다면 실제 컴포넌트나 페이지에서는 아래처럼 사용 가능하다. data에 들어오는 type도 알아서 지정해주고, 서버에서 작성한 route도 모두 객체 내의 메서드 형태로 작성할 수 있어 개발경험이 아주아주아주많이 개선되었다. 일일히 문자열 형태로 endpoint를 작성하거나 별도 API 함수를 사용하지 않아도 되고, intellisense도 아주 잘 작동하고 있어 개인적으로 아주개큰감동 하는 중.</p><p><code spellcheck="false">page.tsx</code></p><pre spellcheck="false"><code class="language-typescript">"use client";

import { trpcReact } from "@/utils/trpcClient";

const Page = () =&gt; {
  const { data: user } = trpcReact.user.getUser.useQuery();
  return (
    &lt;&gt;
      &lt;div key={user?.id}&gt;
        &lt;div&gt;{user?.id}&lt;/div&gt;
        &lt;div&gt;{user?.username}&lt;/div&gt;
        &lt;div&gt;{user?.email}&lt;/div&gt;
        &lt;div&gt;{user?.role}&lt;/div&gt;
        &lt;div&gt;{user?.createdAt.toDateString()}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/&gt;
  );
};

export default Page;</code></pre><p>다음 포스팅에서는 서버에서 어떤 식으로 실질적인 코드를 작성하는지, middleware 작성을 위해 겪었던 고초를 다뤄볼까 한다.</p>