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 자동 삭제 해줘