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 ...

해결