🍎 Mac

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

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

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

React 에서 전역 상태관리…React 생태계에서 전역 상태관리는 3rd 파티 라이브러리를 통해 구현하는 게 일반적입니다.React 에서 상태관리 라이브러리로는 Redux, Recoil, Zustand 등이 널리 사용되고 있는데, 이 중 Zustand 의 보급과 사용이 확산되고 있는 추세인 것 같습니다. (npm 다운로드 Zustand 3.4m/w 으로,

React Project : zustand-and-useContext

<img src="https://image.until.blog/morethanmin/article/1732336770711.png" data-width="100%" data-align="center" alt="2246">안녕하세요! 몰댄민입니다.지난 한달간 어떤 기능들이 추가되었는지 공유해드릴게요!<h2>블로그 통계 기능</h2>우선 블로그 통계 기능이 추가되었어요.기존 <code spellcheck="false">설정</code> 페이지가 <code spellcheck="false">블로그 관리</code> 페이지로 개편되었고, 블로그 관리 페이지 하위에 <code spellcheck="false">블로그 통계</code> 메뉴가 추가되었어요.<img src="https://image.until.blog/morethanmin/article/1732337501426.png" data-width="100%" data-align="center" alt="2250">블로그 통계 페이지에서는 한달간의 조회수 추이와 함께 조회수가 많은 아티클이 무엇인지 확인할 수 있어요. (제 블로그는 일 평균 150~200 조회수가 발생하고 있네요..👀)그리고 본인 아티클 상세페이지에서 메뉴를 클릭해 통계를 누르면, 해당 아티클의 조회수 추이를 살펴볼 수 있어요.<img src="https://image.until.blog/morethanmin/article/1732337480265.png" data-width="100%" data-align="center" alt="2249">통계기능은 추후 유입 키워드, 브라우저 등등 더 많은 기능들을 추가하며 고도화 해나갈 예정이에요.<h2>에디터 동영상 업로드 기능</h2>아티클에 동영상을 업로드하는 기능이 추가되었어요.<img src="https://image.until.blog/morethanmin/article/1732337757785.png" data-width="100%" data-align="center" alt="2251">슬래시(<code spellcheck="false">/</code>)를 입력해서 동영상 메뉴를 클릭하거나,<img src="https://image.until.blog/morethanmin/article/1732337805778.png" data-width="50%" data-align="center" alt="2253">동영상 링크를 붙여넣기해서 동영상을 선택할 수 있어요.<img src="https://image.until.blog/morethanmin/article/1732337863433.png" data-width="50%" data-align="center" alt="2255">참고로 아직 유튜브 영상만 임베드 할 수 있어요. 추후 다른 영상도 업로드할 수 있도록 고도화해볼게요!<h2>그 외 수정사항</h2><ul><li>피드 인기 아티클 평가 기준에 조회수가 추가되었어요.</li><li>에디터 하단을 클릭했을 때 새 줄이 추가되도록 개선했어요.</li><li>에디터 임베드 컨텐츠 (이미지, 동영상, 북마크) 의 업로드 UI를 개선했어요.</li></ul><img src="https://image.until.blog/morethanmin/article/1732338203844.png" data-width="75%" data-align="center" alt="2256"><ul><li>에디터에서 여러 줄 줄바꿈을 해도 적용되지 않던 이슈를 해결했어요.</li></ul><h2>기능 제안 &amp; 오류 제보 해주세요!</h2>언틸은 유저분들의 피드백을 바탕으로 개발되고 있어요. 필요한 기능이나 오류가 있다면 댓글, 이메일 또는 커뮤니티로 제보해주세요. 그 외에 궁금한 부분들도 편하게 여쭤봐주세요. 감사합니다!

통계 기능이 추가되었어요. 📈

🖥 백엔드

Cotuber에 도입된 AI 자막 생성 기능이 어떤 과정을 거쳐 만들어졌는지 공유합니다.

우리 팀이 자동으로 자막을 생성하기까지

요즘 같이 신입들이 설 자리가 굉장히 없는 각박한 시기에, 얼마 전 운이 좋게 신입으로 게임 회사에 면접을 보게 되었습니다 🤣🤣🤣그런데 면접 중 다음과 같은 질문을 받을 수 있었는데, ‘포트폴리오를 확인해 보면 스프링 부트를 주로 사용해 왔는데, 스프링 부트는 보통 내장되어 있는 웹 서버로 Tomcat을 사용하는데도 불구하고 Nginx를 사용한 이유가 있을까요?’이러한 질문을 주셨는데 당시 많이 긴장되어 있는 상황이기도 하였고, 당장 생각나는 것은"저희가 프로젝트 환경상, EC2 한 대에서 프론트엔드와 백엔드를 함께 배포해야 하는 상황이었습니다. 따라서 하나의 도메인으로 모든 요청과 응답이 이루어지는데, 요청이 들어올 때 리버스 프록시 기능을 사용하기 위해 Nginx가 필요하기도 하였고, 보안적인 측면에서도 HTTPS를 사용해야 하기 때문에 Nginx를 사용했습니다."지금은 글로 작성하니까 나름 그럴싸하게 작성했지만, 실제로 대답할 때는 조금 어색하게 표현한 것 같아 후회가 듭니다.😅면접을 볼 때에는 당장 생각나는 것이 이것밖에 없었지만, 뒤늦게 면접관님의 의도를 떠올릴 수 있었습니다. 아마도 Nginx를 사용한 이유, 즉 웹 서버(WS)와 웹 애플리케이션 서버(WAS)의 차이점을 분명하게 이해하고 사용한 것인지를 물어보려고 하셨던 게 아닐까 하는 생각이 들었습니다.그래서 이제는 비슷한 질문을 받더라도 더 이상 실수하지 않게 다시 한 번 학습하고 리마인드를 해보려고 합니다.<hr>웹 서버(Web Server)는 웹 클라이언트(예: 웹 브라우저)로부터 HTTP 요청을 받아 정적 콘텐츠(HTML, CSS, JavaScript, 이미지 등)를 제공하는 소프트웨어입니다.<h2>웹 서버의 주요 역할</h2><h3>주요 기능</h3><ol><li>정적 콘텐츠 제공:<ul><li>HTML, CSS, JavaScript 파일 및 이미지 등과 같은 정적 파일을 클라이언트에 제공합니다. Q. 프론트엔드, 백엔드가 구분되어 사용되는 것이 보통입니다. HTML, CSS, JS 파일은 웹 서버에서 언제 어떤 상황에서 클라이언트에게 제공되는가 ? <ul><li>상황: 사용자가 웹 브라우저를 통해 특정 웹 페이지를 요청하는 경우<ul><li>사용자가 브라우저에서 <code spellcheck="false">http://example.com</code>을 입력하면, 브라우저는 해당 URL에 대한 HTTP 요청을 웹 서버로 보냅니다.</li><li>웹 서버(ex. Nginx)는 요청된 URL을 기반으로 적절한 파일을 찾아 클라이언트에 반환합니다. 여기서 정적 파일 제공이 이루어집니다.</li><li>예를 들어, Nginx와 같은 웹 서버가 <code spellcheck="false">/usr/share/nginx/html</code> 디렉토리에 웹페이지 파일을 저장하고 있다면, 다음과 같은 과정이 진행됩니다:<ul><li>사용자가 <code spellcheck="false">http://example.com/index.html</code>을 요청합니다.</li><li>웹 서버는 요청된 파일 경로를 확인하고, <code spellcheck="false">/var/www/html/index.html</code> 파일을 찾아 응답으로 반환합니다.</li></ul></li><li>HTML 파일 반환: 웹 서버는 <code spellcheck="false">index.html</code> 파일을 클라이언트(브라우저)에 반환합니다. 브라우저는 HTML 파일을 파싱하여 페이지의 기본 구조를 렌더링합니다.</li><li>CSS와 JavaScript 파일 요청: HTML 파일이 로드되면서, 페이지 내에 포함된 CSS 및 JavaScript 파일에 대한 추가 요청이 발생합니다. 예를 들어, HTML 파일에 다음과 같은 링크가 포함되어 있을 수 있습니다:<pre spellcheck="false"><code class="language-html">&lt;link rel="stylesheet" href="styles.css"&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;</code></pre><ul><li>브라우저는 <code spellcheck="false">styles.css</code>와 <code spellcheck="false">app.js</code> 파일을 추가로 요청합니다.</li><li>웹 서버는 동일한 방식으로 이 파일들을 찾아 클라이언트에 반환합니다. </li></ul></li></ul></li><li>구체적인 예시사용자가 <code spellcheck="false">http://example.com</code>에 접속하면 다음과 같은 요청과 응답 흐름이 발생합니다:<ol><li>브라우저 요청: <code spellcheck="false">GET /index.html</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/index.html</code> 파일 반환</li><li>브라우저 요청: <code spellcheck="false">GET /styles.css</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/styles.css</code> 파일 반환</li><li>브라우저 요청: <code spellcheck="false">GET /app.js</code></li><li>웹 서버 응답: <code spellcheck="false">/var/www/html/app.js</code> 파일 반환 </li></ol></li></ul>이 과정을 통해 사용자는 웹 페이지를 볼 수 있게 되며, CSS로 스타일링된 페이지와 JavaScript로 동작하는 기능을 사용할 수 있게 됩니다. </li></ul></li><li>HTTP 요청 처리 및 응답:<ul><li>클라이언트의 HTTP 요청을 처리하고, 적절한 응답을 생성하여 반환합니다. </li></ul></li><li>URL 매핑 및 라우팅:<ul><li>요청 URL을 기반으로 적절한 파일이나 서비스로 요청을 라우팅합니다. 이는 리버스 프록시의 역할로, 클라이언트의 요청을 받아 적합한 백엔드 서버로 전달하고 결과를 다시 클라이언트에게 반환합니다. </li></ul></li><li>로드 밸런싱:<ul><li>여러 서버 간에 트래픽을 분산시켜 고가용성을 유지하고 성능을 향상시킵니다. </li></ul></li><li>보안 기능:<ul><li>SSL/TLS를 통한 데이터 암호화, IP 필터링, 사용자 인증 등 다양한 보안 기능을 제공합니다.</li></ul></li></ol><h3>웹 서버의 예시</h3><ul><li>Apache HTTP Server:<ul><li>오픈 소스 웹 서버로, 다양한 플랫폼에서 사용되며, 매우 널리 사용됩니다.</li></ul></li><li>Nginx:<ul><li>고성능 웹 서버로, 특히 높은 동시 연결 수를 처리할 수 있어 정적 파일 제공 및 리버스 프록시로 자주 사용됩니다.</li></ul></li></ul><hr>웹 애플리케이션 서버(Web Application Server, WAS)는 웹 서버와는 달리, 동적 콘텐츠를 생성하고 웹 애플리케이션의 비즈니스 로직을 처리하는 소프트웨어입니다. WAS는 클라이언트의 요청을 받아들여 데이터베이스와 상호 작용하고, 그 결과를 동적 웹 페이지 형태로 클라이언트에 반환합니다.<h2>웹 애플리케이션 서버의 주요 역할</h2><ol><li>비즈니스 로직 처리:<ul><li>클라이언트 요청을 처리하는 비즈니스 로직을 실행합니다. 예를 들어, 사용자의 로그인, 상품 검색, 주문 처리 등의 작업을 수행합니다. → 서블릿 기반 </li></ul></li><li>동적 콘텐츠 생성:<ul><li>JSP, 서블릿, EJB 등과 같은 기술을 사용하여 동적인 웹 페이지를 생성합니다. 클라이언트의 요청에 따라 실시간으로 콘텐츠를 생성하여 응답합니다. </li></ul></li><li>데이터베이스 연동:<ul><li>데이터베이스와 상호 작용하여 데이터를 조회, 삽입, 업데이트, 삭제하는 작업을 수행합니다. 이를 통해 클라이언트가 요청한 데이터를 처리하고 반환합니다. </li></ul></li><li>세션 관리:<ul><li>사용자 세션을 관리하여 사용자 상태를 유지하고, 인증 및 권한 부여를 처리합니다. 이를 통해 사용자의 로그인 상태를 유지하거나, 사용자별로 다른 콘텐츠를 제공할 수 있습니다. </li></ul></li><li>트랜잭션 관리:<ul><li>데이터베이스 트랜잭션을 관리하여 데이터의 일관성과 무결성을 보장합니다. 여러 작업이 하나의 트랜잭션으로 묶여 일관성 있게 처리되도록 합니다. </li></ul></li></ol><h3>웹 애플리케이션 서버의 예시</h3><ul><li>Apache Tomcat:<ul><li>오픈 소스 서블릿 컨테이너로, 서블릿과 JSP 기반의 웹 애플리케이션을 실행합니다.</li></ul></li></ul><hr><h2>정리</h2><img src="https://image.until.blog/thingk0/article/1716860951310" alt="until-318"><h3>이유 1: 정적 콘텐츠 제공</h3><ul><li>Nginx는 정적 콘텐츠(예: 이미지, CSS, JavaScript 파일 등)를 매우 효율적으로 제공할 수 있습니다. 이를 통해 스프링 부트 애플리케이션이 정적 리소스를 제공하는 부담을 줄이고, 동적 콘텐츠 제공에 집중할 수 있게 합니다.<blockquote>하지만, 보통 프론트엔드와 API 서버 조합으로 많이 사용하기 때문에, 사실상 정적 콘텐츠 제공에는 큰 메리트를 느끼기 어려웠습니다. 그러나 프론트엔드가 SPA일 경우에는 매우 유용하다고 생각합니다.</blockquote></li></ul><h3>이유 2: 리버스 프록시</h3><ul><li>리버스 프록시로서 Nginx는 클라이언트 요청을 스프링 부트 애플리케이션으로 전달합니다. 이를 통해 애플리케이션 서버를 보호하고, 로드 밸런싱 및 SSL 종료(SSL termination) 등의 기능을 제공합니다.<blockquote>실제로 제가 Nginx를 사용하는 가장 주된 이유는, 보통 프로젝트를 진행할 때 서버 인스턴스를 하나만 사용할 수 있는 상황이 많아서, 어쩔 수 없이 서버 안에서 프론트엔드, 인프라, 백엔드를 모두 배포해야 했기 때문입니다.이러한 이유로 Nginx의 리버스 프록시 기능은 매우 유용하고 필요했습니다. 그래서 다행히도 면접에서 가장 먼저 떠올린 리버스 프록시를 답변할 수 있었습니다 !!</blockquote></li></ul><h3>이유 3: 로드 밸런싱</h3><ul><li>로드 밸런싱을 통해 여러 대의 스프링부트 인스턴스에 트래픽을 분산시킬 수 있습니다. 이를 통해 고가용성과 성능을 향상시킬 수 있습니다.<blockquote>면접 중 로드 밸런싱 관련 질문을 받았고, 당연히 Nginx를 통해 로드 밸런싱이 가능하다는 것은 알고 있었습니다.하지만 더 좋은 답변을 위해서는 추후에 블루-그린 배포를 적용하거나 스케일 아웃을 염두에 두었을 때, 로드 밸런싱 기능이 필요하기 때문에 Nginx가 필요하다는 답변을 떠올리지 못했다는 것이 뒤늦은 후회로 남네요..🥲</blockquote></li></ul><h3>이유 4: SSL/TLS 처리</h3><ul><li>SSL/TLS 처리를 Nginx가 담당함으로써 스프링부트 애플리케이션은 암호화된 트래픽을 직접 처리하지 않아도 되므로, 성능과 보안 측면에서 유리합니다.</li></ul><h3>이유 5: 보안</h3><ul><li>보안 설정 및 접근 제어를 Nginx 레벨에서 관리함으로써 애플리케이션의 보안성을 향상시킬 수 있습니다. IP 제한, DDoS 방어, WAF(Web Application Firewall) 등을 설정할 수 있습니다.</li></ul><h3>이유 6: 고성능</h3><ul><li>고성능의 Nginx는 적은 리소스로 많은 요청을 처리할 수 있어, 특히 많은 동시 접속이 발생하는 상황에서 유리합니다.<blockquote>“ Nginx는 비동기 이벤트 기반으로 설계되어, 적은 리소스로도 많은 수의 동시 연결을 효율적으로 처리할 수 있고 다중 워커 프로세스를 통해 병렬로 작업을 수행하여 성능을 극대화하며 메모리를 효율적으로 사용하여 더 많은 요청을 처리할 수 있습니다. "라고도 대답할 수 있다면 아마 만점짜리 답변이겠죠..?</blockquote></li></ul><hr>즉, 저는 리버스 프록시와 보안 부분에서는 어느 정도 정답에 가까운 대답을 했다고 생각해요 ! 하지만 기억을 되돌려보면, 로드 밸런싱 부분에 대해서도 잠깐 질문을 받았는데, 급히 다른 질문으로 넘어갔던 것이 아쉽고... Nginx를 통해 로드 밸런싱, 성능, 그리고 정적 콘텐츠 제공에 대해서도 답변을 할 수 있었다면 더 좋았을 것 같아요.다음에 비슷한 질문을 받는다면, 기존 답변에 보완해서 더욱 멋진 답변을 해보도록 하겠습니다. 😃

최근 게임 회사 면접에서 스프링 부트와 Nginx 사용 이유에 대한 질문을 받았습니다. 이번 포스팅에서는 웹 서버와 웹 애플리케이션 서버의 차이를 명확히 이해하고, Nginx 사용 이유를 깊이 있게 다뤄봅니다.

WAS가 있음에도 불구하고, 웹서버인 Nginx 를 사용하는 이유 - 개발자 면접 리마인드

Experience

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

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

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

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

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

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

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

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

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

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

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

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

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

간편 로그인(OAuth 2.0) 3분만에 정복하기

React Native 는, 처음 발표된 지 벌써 6년이 넘었지만, 2024.11 현재까지 버전이 아직 0.76 에 그치고 있죠.버전이 아직도 1.0 에 이르지 못하고 있다는 것은, RN 이 아직 안정화 되지 못한 단계에 머무르고 있다는 의미이기도 하겠습니다.이 때문에, RN 의 개발방식은 아직까지도 뚜렷하게 정형화 되지 않고 있는 것 같습니다.공식 버전이

#1. React Native 준비작업

<img src="https://image.until.blog/steady/article/1727346269489.png" alt="until-1565"><h2>어디에 쓰이나?</h2><hr>한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우의 데이터 처리가 모호해져 우선 무작위 닉네임을 지정하고 추후 변경하는 프로세스를 생각하게 되었다.그때 필요했던 기능이 이 무작위 닉네임 생성 기능이었다.<h2>개발 과정</h2><hr>가장 먼저 떠올랐던 예시는 썸네일에 사용한 블리자드의 무작위 작명이었다. 무작위로 주어진 단어들을 조합하여 특정한 닉네임을 만들어내는 단순한 기능이였다.우선 내가 개발하는 서비스는 반려동물과 관련된 서비스였기 때문에 동물과 관련된 닉네임을 생성하기로 했고 앞쪽에는 형용사를 뒤쪽에는 동물 이름을 사용해 닉네임을 만들어 보았다.<pre spellcheck="false"><code class="language-java">public class NicknameGenerator {

 // 형용사 배열
 private static final String[] adjectives = {
 "귀여운", "발랄한", "사랑스러운", "똑똑한", "활발한", "졸린", "장난꾸러기", "용감한", "상냥한", "행복한",
 "느긋한", "온화한", "믿음직한", "애교 많은", "웃음 가득한", "엉뚱한", "당당한", "재빠른", "고요한", "부드러운"
 };

 // 동물 이름 배열
 private static final String[] animals = {
 "강아지", "고양이", "햄스터", "토끼", "앵무새", "거북이", "고슴도치", "말티즈", "푸들", "치와와",
 "골든리트리버", "페르시안", "스피츠", "요크셔테리어", "러시안블루", "코뉴어", "페럿", "다람쥐", "이구아나", "비글"
 };

 // 랜덤 닉네임 생성 함수
 public String generateNickname() {
 Random random = new Random();

 // 배열의 길이에 맞춰 랜덤으로 배열 값을 조회
 String adjective = adjectives[random.nextInt(adjectives.length)];
 String animal = animals[random.nextInt(animals.length)];
 // 추가적으로 닉네임 중복을 방지하기 위해 1~999까지의 무작위 숫자 조회
 int number = random.nextInt(1000);

 return adjective + animal + number;
 }
}</code></pre>위 처럼 간단한 무작위 닉네임 생성기를 만들어 보았다.하지만 이걸로는 유저의 닉네임 중복을 완벽히 막을 수는 없어서 DB를 통해 해당 닉네임이 존재하는 지 확인 후 재생성하는 과정도 포함시켜야 한다.<h2></h2><h2>돌아보며</h2><hr><blockquote>개발 후 코드를 보면 간단하지만 차근차근 생각해 나가는 과정이 중요한 것 같다.코드 자동화 기술이 워낙 많이 발전해서 이 정도는 간단하게 작성해주겠지만 백지 상태에서 스스로 생각하면서 만들어봐야 더 기억에 오래 남아 추후에 시간을 절약하게 되는 것 같다.모든 코드를 백지에서 부터 천천히 만들 순 없겠지만, 미래를 위해 자동으로 작성된 코드라면 천천히 작동 방식을 생각해보며 머릿속에 남기며 공부해 나가보자</blockquote>

어디에 쓰이나?한 서비스를 개발할 때 여러 플랫폼의 소셜 로그인 기능을 구현하다가 로그인 플랫폼에 상관없이 각 유저별로 서로를 특정할 수 있는 공통의 값이 필요하게 되었고 나는 닉네임을 필수로 입력받아 이 부분을 처리하려고 했다.하지만 회원을 등록할 때 닉네임을 직접 입력받게 되니 회원가입의 과정이 부자연스러웠고, 닉네임을 입력하지 않고 중간에 이탈할 경우

[Java] 무작위 닉네임 생성기

팬텀 타입(Phantom Type)은 Haskell, Rust와 같은 언어에서 사용하는 기술이다. 팬텀 타입은 타입 매개변수(Generics)의 역할을 하는데, 실제 런타임에는 사용되지 않는 타입을 의미한다. 코드에서 타입 안전성을 강화하기 위해 사용된다......위와 같은 내용의 글들을 많이 읽었다. Typescript 사용자로써, 팬텀 타입에 대해 공부하려고 할 때마다 이게 무슨 뜻인지 이해가 잘 안 갔었는데, 공부하고 정리해본 내용을 이해하기 쉽게 예시와 함께 소개해보려고 한다.<h1>TypeScript는 구조적 타이핑을 하는 언어다</h1>구조적 타이핑이 무엇인지 알지 못하는 타 언어 사용자를 위해 짧은 설명을 하고 넘어가자. 구조적 타이핑은 클래스의 이름 따위가 아니라, '객체의 형태와 구조'를 타입의 중요한 요소로 여기는 방식을 의미한다.<pre spellcheck="false"><code class="language-typescript">class Human {
 name: string;
 age: number;
}

class Animal {
 name: string;
 age: number;
}

const member = {
 name: "Octoping",
 age: 25,
};

// 이 세 가지 객체 or 클래스의 타입은 사실상 전부 같다

function sayName(x: Human) {
 console.log(x.name);
}

// 전부 타입 문제 없이 작동한다
sayName(new Human("Octoping", 25));
sayName(new Animal("Pig", 3));
sayName(member);</code></pre>다음은 자바 같은 언어라면 생각도 못할 일이다. Human 클래스도, Animal 클래스도, member라는 변수도 <code spellcheck="false">string</code> 타입의 name과 <code spellcheck="false">number</code> 타입의 age를 가지므로 전부 같은 타입으로 인지하는 것이다.물론 객체를 클래스를 사용하지 않고도 바로 만들 수 있다는 자바스크립트의 특징 때문에 어쩌면 당연할 수 밖에 없다. 그리고 이 특성으로 인해 Typescript는 큰 생산성을 얻게 되면서 동시에 한 가지 단점을 얻게 되는데.<h2>문제 제기</h2>구조적 타이핑으로 인해 조금 불편을 겪을 수 있는 에피소드를 소개해보고자 한다.<pre spellcheck="false"><code class="language-typescript">type Dollar = number;
type Won = number;

// 십만원을 가진 나
const octopingMoney: Won = 100000;
const friendMoney: Won = 50000;

// 달러를 더하는 함수
function addDollar(a: Dollar, b: Dollar): Dollar {
 return a + b;
}

// 🥵
const result = addDollar(octopingMoney, friendMoney);</code></pre><code spellcheck="false">Dollar</code> 와 <code spellcheck="false">Won</code>은 둘 다 숫자지만, 단위가 다르므로 서로 더하면 안된다. 하지만 구조적 타이핑 덕분에 이런 놀라운 일이 가능해진다.이런 불편함을 어떻게 하면 좋을까?도메인 주도 개발에서 이야기하는 값 객체라는 걸 이용해보면 좋을 것 같다.<h2>값 객체를 다루기 어렵다</h2><pre spellcheck="false"><code class="language-java">class Member {
 private Email email;
 private Password password;
 // ...
}

class Email {
 private String value;

 public Email(String value) {
 if (!value.contains("@")) {
 throw new IllegalArgumentException("이메일 주소가 올바르지 않아요");
 }
 
 this.value = value;
 }
}

class Password {
 private String value;

 public Password(String value) {
 if (value.length() &lt; 8) {
 throw new IllegalArgumentException("비밀번호가 너무 짧아요");
 }

 this.value = value;
 }
}</code></pre>다음은 Java를 이용해서 값 객체 (VO)를 사용한 예제다. <code spellcheck="false">Member</code>에 이메일과 비밀번호를 그냥 String으로 저장하는 대신, 각각을 클래스로 묶어서 자기 자신이 값을 지님과 동시에 유효성 검사를 할 수 있도록 했다. 자신이 자기 자신을 그 자체로 소개할 수 있도록 하는 것. 그것이 도메인 주도 개발에서 이야기하는 값 객체이다.<pre spellcheck="false"><code class="language-typescript">class Member {
 constructor(
 private readonly email: Email,
 private readonly password: Password
 ) {}
}

class Email {
 value: string;

 constructor(value: string) {
 if (!value.includes("@")) {
 throw new Error("이메일 주소가 올바르지 않아요");
 }

 this.value = value;
 }
}

class Password {
 value: string;

 constructor(value: string) {
 if (value.length &lt; 8) {
 throw new Error("비밀번호가 너무 짧아요");
 }

 this.value = value;
 }
}

// 순서가 틀렸지만 당연히 에러가 나지 않는다!
const member = new Member(new Password("email"), new Email("password"));</code></pre>그런데 아뿔싸! 다음과 같은 코드를 Typescript에서 작성한다면 조금의 문제가 생겨버린다. 바로 <code spellcheck="false">Email</code>과 <code spellcheck="false">Password</code>의 시그니처가 똑같다는 것. 멤버 변수 타입 똑같고.. 메소드가 없는 것도 똑같은 것 같다. 당연히 에러가 나지 않겠지?<blockquote>이 문제에 대해서 진지하게 이야기해보면. 일단 첫 번째: 두 객체의 멤버 변수 값을 다르게 하면 된다. 그것이 구조적 타이핑이니까.. 하지만 서로 다른 두 클래스가 각자의 멤버 변수 이름에 강결합되는 프로그래밍을 유도하게 되는 것 같다. 두 번째: value를 private으로 만들면 된다.</blockquote><h2>문제 갈무리</h2>정리해보자. <code spellcheck="false">Dollar</code>와 <code spellcheck="false">Won</code>을 그냥 number로써 동일하게 표현하면 타입스크립트는 이 둘을 완전히 같은 타입으로 인지하여 똑같이 다뤄버리게 된다.이를 위해 값 객체를 사용해보려 하니 이 또한 멤버 변수의 이름을 신경써야 하니 나름의 어려움이 있다.마지막으로, 그냥 타입을 number로 쓸 때에 비해 객체를 생성해야 하니 메모리도 더 잡아먹게 된다. 객체지향이 원래 그런 것이다만은..<img src="https://image.until.blog/octoping/article/1723552083845" alt="until-1228">이런 상황을 어떻게 하면 좋을까?<h1>Phantom Type</h1>서론이 길었다. 팬텀 타입을 이용해보면 이런 문제를 해결해볼만한 실마리를 잡을 수 있을지도 모른다. 팬텀 타입을 내 나름대로 간단히 설명해보면 이렇다.<blockquote>형태는 같지만 실제로는 서로 다른 타입을 구분하기 위해, 실제로는 존재하지 않는 타입을 이용하는 것</blockquote><h2>코드로 살펴보기</h2><pre spellcheck="false"><code class="language-typescript">type Dollar = number &amp; { __unit: "Dollar" };
type Won = number &amp; { __unit: "Won" };

const myDollar = 2 as Dollar;
const myWon = 1000 as Won;</code></pre>달러와 원을 그냥 number가 아니라, <code spellcheck="false">number</code>이면서 <code spellcheck="false">{ __unit: string }</code> 인 녀석으로 정의하는 것이다.물론 이 뒷 부분은 실제 런타임에는 전혀 존재하지 않는 녀석이다. (타입스크립트에서 타입은 컴파일 단계에서 사라지므로 런타임에는 더더욱 존재하지 않게 된다)하지만 타입스크립트에게 억지로 이것이 존재한다고 함으로써 이 둘을 마냥 서로 같은 <code spellcheck="false">number</code>가 아니도록 만드는 것이다.<pre spellcheck="false"><code class="language-typescript">type Dollar = number &amp; { __unit: "Dollar" };
type Won = number &amp; { __unit: "Won" };


function addDollar(a: Dollar, b: Dollar): Dollar {
 return (a + b) as Dollar;
}

function dollarToWon(dollar: Dollar): Won {
 return (dollar * 1300) as Won;
}


const myDollar = 2 as Dollar;
const myWon = 1000 as Won;


const addedDollar = addDollar(myDollar, myDollar);
const convertedWon = dollarToWon(myDollar);

// 에러!
addedDollar(myWon, myWon);

// 에러!
convertedWon(myDollar);</code></pre>그렇다면 이렇게, 사실은 서로 같은 number를 서로 다른 타입처럼 사용할 수 있다.<h2>실생활 예제</h2>그럼 이걸 실생활에 어디다 어떻게 쓰라고? 팬텀 타입에 대해 다부지게 설명해주신 이 글에서 소개해준 예제를 조금 가공해서 빌려와볼까 싶다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://dev.to/busypeoples/notes-on-typescript-phantom-types-kg9">https://dev.to/busypeoples/notes-on-typescript-phantom-types-kg9</a><pre spellcheck="false"><code class="language-typescript">type MemberJoinPayload = {
 name: string;
 age: number;
};

export const onSubmit = (e: FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 const payload: MemberJoinPayload = {
 name: e.currentTarget.name,
 age: e.currentTarget.age,
 };
 
 // validate를 해야 하지만 깜빡했다~~!!!!

 callApi(payload);
};

function validateData(data: MemberJoinPayload) {
 if (data.age &lt; 0) {
 throw new Error("나이가 음수에요");
 }
}

async function callApi(data: MemberJoinPayload) {
 // 대충 api 호출하는 코드
}
</code></pre>회원가입 폼에서 입력 받은 내용을 validate를 거친 후, 성공했다면 회원가입 api 호출 함수를 쏘는 로직을 떠올려보자.여기서 validate를 까먹어서 검증을 안 거치고 api를 호출하도록 코드를 작성하더라도 타입 상으로는 아무~ 문제가 없이 작동하기 때문에 내가 뭘 잘못했는지 생각 못하고 넘어갈 수 있다.여기서 팬텀 타입을 적용해보자.<pre spellcheck="false"><code class="language-typescript">type MemberJoinPayload = {
 name: string;
 age: number;
};

type UnvalidatedData = MemberJoinPayload &amp; { _type: "Unvalidated" };
type ValidatedData = MemberJoinPayload &amp; { _type: "Validated" };


export const onSubmit = (e: FormEvent&lt;HTMLFormElement&gt;) =&gt; {
 const payload = {
 name: e.currentTarget.name,
 age: e.currentTarget.age,
 } as UnvalidatedData;

 const validatedData: ValidatedData = validateData(payload);
 
 callApi(validatedData);
};

function validateData(data: UnvalidatedData): ValidatedData {
 if (data.age &lt; 0) {
 throw new Error("나이가 음수에요");
 }

 return { name: data.name, age: data.age } as ValidatedData;
 // return data as unknown as ValidatedData; 사실 이게 더 깔끔할지도
}

async function callApi(data: ValidatedData) {
 // 대충 api 호출하는 코드
}</code></pre>폼을 입력 받아 실행되는 <code spellcheck="false">onSubmit</code>에서 <code spellcheck="false">UnvalidatedData</code> 타입의 payload를 생성한다. 물론 이 변수로는 <code spellcheck="false">callApi</code> 함수를 실행할 수 없다.따라서 그 후 validate를 실행하면 <code spellcheck="false">ValidatedData</code> 타입의 결과를 받게 되니 이제서야 api를 호출할 수 있게 되는 것이다.실제 객체의 값은 전혀 변하지 않았고, <code spellcheck="false">__type</code>이니 뭐니 하는 것은 그 어디에도 존재하지 않았지만, 있는 타입이라고 타입스크립트에게 공갈을 하여 똑같은 타입의 서브 타입을 두 개를 만들어낸 것이다.<h2>팬텀 타입 추상화하기</h2>이 쯤 봤으면 팬텀 타입을 공용적으로 쓸 수 있게 추상화해볼 수 있겠다는 생각이 들 것이다. <code spellcheck="false">type Data = OriginalType &amp; { __value: string }</code> 대충 이런 형태이니..<pre spellcheck="false"><code class="language-typescript">type PhantomType&lt;Data, Type = never&gt; = Data &amp; { _type: Type };</code></pre>짜잔!그럼 이걸 이용해서 다양한 팬텀 타입을 원하는 대로 만들어보자.<pre spellcheck="false"><code class="language-typescript">type MemberJoinPayload = {
 name: string;
 age: number;
};

type UnvalidatedData = PhantomType&lt;MemberJoinPayload, "Unvalidated"&gt;;
type ValidatedData = PhantomType&lt;MemberJoinPayload, "Validated"&gt;;</code></pre><pre spellcheck="false"><code class="language-typescript">type Dollar = PhantomType&lt;number, "Dollar"&gt;;
type Euro = PhantomType&lt;number, "Euro"&gt;;
type Won = PhantomType&lt;number, "Won"&gt;;</code></pre><h2>ChatGPT가 추천하는 팬텀 타입 유망 직종</h2>다음은 ChatGPT에게 직접 팬텀 타입을 어디에 써보면 좋겠을지 물어보아 나온 결과인데 공유해본다.<ul><li>데이터베이스 ID 타입 구분<ul><li>서로 다른 테이블에서 사용되는 ID 값을 혼동하지 않도록 팬텀 타입을 사용할 수 있습니다</li></ul></li></ul><pre spellcheck="false"><code class="language-typescript">type UserId = PhantomType&lt;number, "User"&gt;;
type OrderId = PhantomType&lt;number, "Order"&gt;;

function getUserById(userId: UserId) {
 // 사용자 조회 로직
}

function getOrderById(orderId: OrderId) {
 // 주문 조회 로직
}

const userId: UserId = 1 as UserId;
const orderId: OrderId = 1 as OrderId;

// 올바른 사용
getUserById(userId);
getOrderById(orderId);

// 잘못된 사용 방지
// getUserById(orderId);</code></pre><ul><li>도메인 모델의 상태 구분<ul><li>상태 변화에 따른 도메인 모델의 상태를 팬텀 타입으로 구분하여, 잘못된 상태에서 발생할 수 있는 동작을 방지할 수 있습니다.</li></ul></li></ul><pre spellcheck="false"><code class="language-typescript">type Draft = { __status: 'Draft' };
type Published = { __status: 'Published' };

type Document&lt;Status&gt; = {
 content: string;
 status: Status;
};

function publish(doc: Document&lt;Draft&gt;): Document&lt;Published&gt; {
 return { ...doc, status: { __status: 'Published' } };
}

const draftDoc: Document&lt;Draft&gt; = {
 content: 'Draft content',
 status: { __status: 'Draft' }
};

// 올바른 상태 전환
const publishedDoc = publish(draftDoc);

// 잘못된 상태 전환 방지
// publish(publishedDoc); // 이미 게시된 문서는 다시 게시할 수 없음</code></pre>개인적으로 이건 비즈니스 로직에 관련된 건데 그냥 진짜 타입으로 관리해야 좋을 것 같다는 생각이다.<ul><li>서로 다른 API 엔드포인트에 안전하게 호출<ul><li>API 요청 시, 서로 다른 API 엔드포인트에 같은 데이터 타입을 사용하더라도, 요청 경로를 팬텀 타입으로 구분하여 잘못된 경로로 요청을 보내는 실수를 방지할 수 있습니다.</li></ul></li></ul><pre spellcheck="false"><code class="language-typescript">type PhantomType&lt;Data, Type = never&gt; = Data &amp; { _type: Type };

type ApiUri = string;
type OrderServerUri = PhantomType&lt;ApiUri, "주문"&gt;;
type UserServerUri = PhantomType&lt;ApiUri, "유저"&gt;;

async function fetchOrderList(uri: OrderServerUri, payload: any) {
 return fetch(uri, payload);
}

fetchOrderList("/api/order" as OrderServerUri, { userId: 1 });
fetchOrderList("/api/order" as UserServerUri, { userId: 1 }); // Error</code></pre>

Phantom Type 기초부터 알아보자

<h1>들어가기 전에</h1>Nest.js는 Node.js 진영에서 널리 쓰이고 있는 서버 프레임워크이다.그리고 이런 서버를 클라우드 환경에 배포하기 위해서는 AWS EC2, Oracle Cloud 등의 컴퓨팅 인스턴스 위에 올리는 방법이 정석이겠다.&nbsp;하지만 Nest.js는 서버리스를 지원하고, Vercel은 서버리스를 지원한다. 이를 이용해서 무료로 간단히 Vercel에 서버를 배포할 수 있다.<h1>방법</h1>방법 자체는 간단하다. 프로젝트 최상단에&nbsp;<code spellcheck="false">vercel.json</code>을 만들고 다음과 같이 작성한다.<pre spellcheck="false"><code class="language-json">{
 "version": 2,
 "builds": [
 {
 "src": "src/main.ts",
 "use": "@vercel/node"
 }
 ],
 "routes": [
 {
 "src": "/(.*)",
 "dest": "src/main.ts",
 "methods": [
 "GET",
 "POST",
 "PUT",
 "DELETE"
 ]
 }
 ]
}</code></pre>그 후 <code spellcheck="false">npm install -g vercel</code> 을 실행한 후, 프로젝트 최상단 경로에서 <code spellcheck="false">vercel .</code>를 실행하면 완성된다.<h1>트러블 슈팅</h1><h2>Cannot find module</h2><img src="https://image.until.blog/octoping/article/1730787106060.png" data-width="75%" data-align="center" alt="1972">배포를 했지만 다음과 같은 오류가 떠서 처음에 큰 고생을 했다.Vercel에서 로그를 확인해보니 아래와 같은 에러 로그가 있었다.<pre spellcheck="false"><code class="language-log">2023-08-18T17:52:14.322Z	undefined	ERROR	Cannot find module 'src/infra/prisma/PrismaService'
Require stack:
- /var/task/src/feed/feed.module.js
- /var/task/src/app.module.js
- /var/task/src/main.js
2023-08-18T17:52:14.323Z	undefined	ERROR	Did you forget to add it to "dependencies" in `package.json`?
RequestId: 059dec36-4319-4851-9c23-3ecf01978f18 Error: Runtime exited with error: exit status 1
Runtime.ExitError</code></pre><img src="https://image.until.blog/octoping/article/1730787132600.png" data-width="100%" data-align="center" alt="1974">분명 잘 존재하는 모듈을 발견하지 못하고 있다고 에러가 떴다.왜;;인지 도저히 알기가 어려워 많이 헤맸는데, 문제는 내 import 문에 있었다.<pre spellcheck="false"><code class="language-typescript">import { PrismaService } from '@/infra/prisma/PrismaService';</code></pre>다음과 같이 path alias를 사용해서 절대 경로로 import 하는 경우 Vercel이 경로를 인식을 못하는 이슈였다.<code spellcheck="false">src/infra/prisma/PrismaService</code>&nbsp;처럼 @를 안 쓰고 절대경로로 쓰더라도 마찬가지였다. 상대경로로 작성해야 한다!<h2>Swagger 페이지 404 에러 (검증 못 해봄)</h2>다른 페이지는 잘 나오지만 Swagger 페이지만 아무것도 안 나오는 이슈 (404 에러)가 발생한다.<pre spellcheck="false"><code>Uncaught ReferenceError: SwaggerUIBundle is not defined
 at window.onload</code></pre>개발자 도구를 켜보면 이런 로그가 나온다.C# 쪽 스웨거에서도 한번 제보된 문제이긴 하다. swagger ui 파일이 서버리스에 올라가기에는 너무 크다는 이슈다.<a data-type="bookmark" href="https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb" target="_blank"><div class="content"><div><div class="title">swagger-ui-bundle.js too large for AWS Lambda and ALB</div><div class="description">Updated to .NET Core 3.1 and the latest version of Swashbuckle but found the swagger UI wasn't working correctly. The swagger-ui-bundle.js was failing to load with a 502. Tracked this down to a A...</div></div><div class="href">https://stackoverflow.com/questions/63363123/swagger-ui-bundle-js-too-large-for-aws-lambda-and-alb</div></div><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=73d79a89bded"></a>따로 CDN에 swagger js나 css를 올려놓고, 서버리스에 올리는 대신 받아오는 방식으로 사용해볼 수 있겠다는 생각인데.<pre spellcheck="false"><code class="language-typescript">const CSS_URL = "cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.0/swagger-ui.min.css";
swaggerUI.setup(specs, { customCssUrl: CSS_URL })</code></pre>이런 방식으로 사용해볼 수 있다는 듯 하다.<a data-type="bookmark" href="https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943" target="_blank"><div class="content"><div><div class="title">When deploying swagger on vercel on nodejs it does not show UI · Issue #8461 · swagger-api/swagger-ui</div><div class="description">This is How it does look like this and I do not know how to fix this issue. Q&amp;A (please complete the following information) OS: M1 Pro Browser" Chrome, Safari Version: 22 Method of installation: np...</div></div><div class="href">https://github.com/swagger-api/swagger-ui/issues/8461#issuecomment-1497927943</div></div><img src="https://opengraph.githubassets.com/3d796af99bd52776acde541aa8b0f43379af9c671dc58fe420ea1314dd1a51a4/swagger-api/swagger-ui/issues/8461"></a><h1>TMI</h1>실제로 until을 처음 개발할 당시에 서버비를 줄이기 위해 다음 방법으로 한동안 개발했었다..지금은 AWS + Kotlin Spring으로 넘어갔지만, 그래도 당시에 고려했던 점들을 몇 가지 적어본다.<ol><li>NestJS의 경우 서버 실행 초기에 bootstrap하는 과정을 거치는데, 이걸 api가 들어올 때마다 해야한다면 꽤 무거운 작업일 수밖에?</li><li>서버리스로 구성할 경우 api가 들어올 때마다 함수가 실행되는 꼴이므로, 트래픽이 몰리는 경우 DB의 커넥션 풀을 굉장히 잡아먹을 가능성이 높다. 이는 서버리스의 고질적 문제이긴 하다.<ul><li>프로젝트의 persistence 라이브러리로 채택한 Prisma의 경우 이런 문제를 해결해준다고 공식 사이트에 적혀는 있다. 하지만 좀 걱정된다<img src="https://image.until.blog/octoping/article/1730788287259.png" data-width="100%" data-align="center" alt="1976"></li></ul></li></ol>

NestJS를 서버리스로 배포해서 무료로 사용해봅시다

NestJS 서버를 서버리스로 Vercel에 배포하기

⚛️ React

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/FiloSottile/mkcert">mkcert</a>를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://opentutorials.org/course/228/4894">해당 아티클</a>을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이다.<h1>mkcert?</h1>레포에서는 아래와 같이 설명하고 있다.<blockquote>A simple zero-config tool to make locally trusted development certificates with any names you'd like.</blockquote>해당 내용처럼 mkcert는 로컬 개발환경에서 사용할 수 있는 인증서를 별다른 설정없이 손쉽게 만들 수 있다.<h1>mkcert 설치</h1><h2>window</h2><code spellcheck="false">readme.md</code> 상으로는 choco나 scoop를 사용해서 설치하는 것을 권하지만, 내장되어있는 winget을 사용하면 별다른 프로그램 없이 바로 설치가 가능하다.아래 명령어를 입력해주자.<pre spellcheck="false"><code>winget install mkcert</code></pre><h2>mac</h2>homebrew로 설치해주면 된다.<pre spellcheck="false"><code>brew install mkcert</code></pre><hr>설치가 끝났다면 아래 커맨드를 통해 local ca를 설치해준다.<pre spellcheck="false"><code>mkcert -install</code></pre><h1>인증서 생성 및 적용</h1><h2>로컬 도메인 적용</h2>특정 도메인에 대해서 https를 적용해주어야하기 때문에 hosts 파일을 수정해주어야한다.본인의 로컬아이피로 접속했을 때 사용할 도메인을 hosts파일에 저장해주자. 윈도우는 기본적으로 <code spellcheck="false">c:\Windows\System32\drivers\etc</code>, mac은<code spellcheck="false">/private/etc/hosts</code> 에 위치하고 있으니 해당 파일을 수정해주면 될 것이다.나는 dev.until.blog를 적용했다.<pre spellcheck="false"><code># Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host
localhost name resolution is handled within DNS itself.127.0.0.1 localhost::1 localhost127.0.0.1 dev.until.blog</code></pre><h2>next local server 연동</h2>이제 next.js 프로젝트에서 인증서를 적용해보자. 본인 next 프로젝트에서 아래 커멘드를 입력해 인증서와 pem 파일을 생성해주자. dev.until.blog에는 본인이 특정한 도메인을 입력하면 된다.<pre spellcheck="false"><code>mkcert dev.until.blog</code></pre><a target="_blank" rel="noopener noreferrer nofollow" href="https://nextjs.org/docs/pages/building-your-application/configuring/custom-server">next custom server</a>를 통해 생성된 파일을 연결해주면된다.<pre spellcheck="false"><code class="language-javascript">// server.jsconst { parse } = require('url')
const next = require('next')const dev = process.env['NODE_ENV'] !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()const PORT = process.env['PORT'] || 3050app.prepare().then(() =&gt; {
const https = require('https')
const fs = require('fs')
const options = {
key: fs.readFileSync('./dev.until.blog-key.pem'),
cert: fs.readFileSync('./dev.until.blog.pem'),
}
https
.createServer(options, function (req, res) {
// Be sure to pass true as the second argument to url.parse.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
})
.listen(PORT, (err) =&gt; {
if (err) throw err
console.log(&amp;gt; Ready on https://dev.until.blog:${PORT})
})
})</code></pre>이제 package.json에 해당 <code spellcheck="false">dev:https</code>스크립트를 추가해주고 실행하면 끝.<pre spellcheck="false"><code> ....."scripts": {
"dev": "next dev -p 3050",
"dev:https": "node --inspect server.js ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},.....</code></pre>

개발을 하다보면 로컬에서 https환경이 필요한 경우들이 생기게된다. 주로 쿠키를 다룰 때 생기는데 이러한 개발환경을 mkcert를 통해 쉽게 만들 수 있다.https가 무엇인지, 인증서가 어떤 역할을 하는지에 대해서 궁금한 사람은 해당 아티클을 읽어보자.해당 아티클에서는 next.js에서 mkcert를 통해서 https 개발환경 세팅하는 과정을 다룰 것이

next.js 로컬 환경에서 https 개발 환경 만들기 (mkcert)

<h1>문제 탐색하기</h1><h2>입력 자료 정리</h2>1. n은 배열의 행열 크기를 의미한다2. 이후 들어오는 값들은 배열의 각 인덱스에 해당하는 원소이다<h2>해결방법 추론</h2>1. n의 최대값이 20으로 작기 때문에, 팀을 뽑는 경우를 조합하거나모든 경우에 대해 뽑는 부분집합 방식을 사용하면 문제를 해결할 수 있을 것이다2. 처음은 부분집합으로 풀었고, 학습을 목적으로 이후 살짝 변형하여 조합방식으로도 풀었다<h3>부분집합</h3>1. 다시 문제로 돌아와서 base condition에 도달하면 정답을 찾기 위한 과정을 거쳐야한다2. 선택 여부는 방문 체크로 판단해서 각 팀의 인원 수를 세워준 뒤,모두 1명 이상 선택 된 경우에 한해서 풀이를 이어나가면 될 것이다3. 이중포문을 돌면서 방문체크된 팀원끼리와 안된 팀원끼리에 대해 합산을 진행해주고,그 차이를 구해준다4. 최소값을 찾기 위해 모든 경우에 대해 정답 변수와 비교해나간다면 정답을 구할 수 있을 것이다.<h3>조합</h3>1. 부분집합 풀이 방식에서 살짝 변형해주면 된다.2. 1부터 n까지 뽑는 경우를 순회를 돌면서 모두 구해주면 된다.3. pick에 대한 파라미터를 통해 depth가 pick에 도달했을 때,base condition 로직을 똑같이 진행해주면 된다.<h2>시간복잡도 계산</h2>1. 시간복잡도는 부분집합의 경우 2^n의 연산이 발생할 것이고,base condition에서 n^2의 연산이 발생한다2. 전체 시간복잡도는 O(2^n + n^2)이 될 것이고 시간제한안에 문제를 해결할 수 있다<h1>코드 설계하기</h1><h2>입력값 상태 관리</h2>1. 크기를 나타내는 n은 변수로 관리하며, int형 2차원 배열에 각 인덱스 값들을 관리한다<h2>구현 코드 설계</h2>1. 해결과정 추론에서 생각한 방식으로 코드를 구현하면된다.2. 조합과 부분집합의 방식의 차이만 고려하여 다르게 설계하면 된다<h3>부분집합</h3>1. 부분집합은 뽑는 과정을 반복문 없이 재귀식을 두번 사용하여,true일때와 false일때 재귀문을 실행하도록 한다.각각, 현재 수를 어느 한 팀에 뽑는 경우와 안 뽑는 경우다.2. depth가 n일때만을 base condition으로 한다.<h3>조합</h3>1. 부분집합과 다르게 조합은 몇 명을 뽑을 지에 대해 1부터 n까지 순회를 돌면서 인수로 넘겨준다2. 조합은 n까지 순회하는 반복문을 순회한다.단 중복을 제거하기 위해 반복문의 시작값을 이전 함수의 i+1값으로 초기화하도록 구현해주면 된다<h2>출력값 설계</h2>1. 초기값이 Integer.MAX_VALUE로 되어있는 ans를조합 혹은 부분집합의 결과에 따라 출력하면 정답이 된다.<h1>정답코드</h1>(부분 집합 풀이)<a target="_blank" rel="noopener noreferrer nofollow" href="http://boj.kr/6ba99af3295b43a2b5e242f5a006989e">http://boj.kr/6ba99af3295b43a2b5e242f5a006989e</a>(조합 풀이)<a target="_blank" rel="noopener noreferrer nofollow" href="http://boj.kr/ed306d4d34e44c239a55c322f7771b4d">http://boj.kr/ed306d4d34e44c239a55c322f7771b4d</a><h1>문제 링크</h1><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.acmicpc.net/problem/15661">15661번 - 링크와 스타트</a>

백준 15661번 개인 풀이방법입니다.

백준 15661번 - 링크와 스타트 풀이 정리

오늘 이야기할 단일 책임 원칙(SRP)은 이 SOLID 의 다섯 가지 원칙 중 첫 번째에 해당하며, 이를 잘 이해하고 적용하는 것이 나머지 원칙들을 제대로 구현할 수 있는 토대가 된다고 생각합니다 

단일 책임 원칙 (Single Responsibility Principle, SRP) - SOLID

Python

<blockquote>macOS 사용 도중 파이썬 패키지를 설치하기 위해 pip를 사용하자 보안 경고가 발생하며 설치가 거부되었다. 이를 해결하는 방법에 대해 다룬다.</blockquote><h3>도대체 무슨 에러인가?</h3><img src="https://image.until.blog/xeros/article/1727225853116.png" alt="until-1518">Python의 최신 PEP 668 표준에 의해, macOS 환경에서 pip를 통한 패키지 설치가 제약되는 문제라고 한다. 아무래도 최근에 애플에서 맥에 여러가지 보안 강화 조치와 제약이 추가되었는데 여기에 영향을 받은 패치가 아닐까 싶다.이 문제를 해결하는 방법은 크게 3가지정도로 구분할 수 있다.<h3>1. 가상 환경을 사용하는 방법</h3>다음과 같이 Python 가상 환경을 만들어서 사용하면 독립된 공간을 만들어서 사용하기에 pip를 정상적으로 사용할 수 있게 되며 패키지의 버전 문제로 인한 충돌을 피하기도 쉽다. 하지만 매 파이썬 프로젝트마다 가상 환경을 생성해주어야하고 터미널을 열 때마다 <code spellcheck="false">source</code>를 지정해 주어야 한다는 번거로움이 따른다.<ol><li>가상 환경 생성</li></ol><pre spellcheck="false"><code class="language-bash">python3 -m venv path/to/venv</code></pre><ol start="2"><li>가상 환경 활성화</li></ol><pre spellcheck="false"><code class="language-bash">source path/to/venv/bin/activate</code></pre><ol start="3"><li>패키지 설치</li></ol><pre spellcheck="false"><code>pip install supabase</code></pre><h3>2. pip에서 사용자 플래그 추가</h3>시스템 패키지 환경을 보호하기 위해 설치를 사용자 환경으로 제한하여 설치하도록 한다.그냥 귀찮음도 덜하고 보안도 챙기고 무난한 방법인듯하다.<pre spellcheck="false"><code class="language-bash">pip install --user supabase</code></pre><h3>3. break-system-package 옵션 또는 pip.conf 수정</h3>그냥 보안 권고사항을 무시하고 기존에 pip처럼 다이렉트 설치를 가능하게 하는 옵션을 붙여서 사용하면 된다.<pre spellcheck="false"><code class="language-bash">pip install &lt;package name&gt; --break-system-packages</code></pre>근데 매번 이 옵션을 붙이는것도 귀찮다면 아예 <code spellcheck="false">pip.conf</code> 파일을 수정해서 영구적으로 해당 명령을 활성화 시키는것 역시 가능하다.<ol><li><code spellcheck="false">pip.conf</code> 파일 생성</li></ol><pre spellcheck="false"><code class="language-bash">mkdir -p ~/.config/pip
vi ~/.config/pip/pip.conf</code></pre><ol start="2"><li>아래 내용을 추가한다.</li></ol><pre spellcheck="false"><code class="language-bash">pip install supabase --break-system-packages</code></pre><h3>왜 이런 보안조치가 시행되었는가?</h3>애플이 원래도 보안쪽으로는 깐깐했지만 갑자기 이런 기존 시스템에 영향을 줄 수도 있는 패치를 한 원인이 궁금해서 찾아보니 간략하게 설명하자면 pip를 사용한 시스템 전역 패키지 설치가 운영 체제의 패키지 관리자와 충돌할 수 있어 이를 방지하려는 목적이라고 한다. 패키지를 가상 환경이나 사용자 환경에만 설치하도록 유도해서 종속성 관리 문제를 해결하고 보안 취약점을 줄이기 위한 조치인듯 하다.마찬가지로 <code spellcheck="false">Homebrew</code> 역시 현재 공식 홈페이지에 나와있는 Installation 방법을 따라하고 추가적인 수정을 거치지 않으면 명령어 인식이 안된다.

macOS에서 pip externally-managed-environment 에러를 픽스하는 방법

macOS에서 pip install시 error: externally-managed-environment 에러가 발생하는 문제

<img src="https://image.until.blog/steady/article/1727694635128.jpeg" alt="until-1663"><h2>암호화란?</h2><hr>암호화는 데이터를 허가 받지 않은 사용자가 알아보기 어렵게 만들고, 허가 받은 사용자는 알아볼 수 있게 하는 것을 뜻한다.특히 타인이 취득하여 악용할 소지가 있는 데이터들을 주로 암호화 처리해서 보관한다. (ex. 휴대폰 번호, 주민등록번호 등)<blockquote>학습 전에 헷갈렸던 부분: 해시 함수를 이용한 데이터 변환은 복호화가 불가능 하기 때문에 암호화에 속하지 않는다.해쉬 함수를 이용한 보안 기법이라고 부르는 것이 맞다.</blockquote><h2>어떤 방식이 있나?</h2><hr><h3>대칭키 암호화( ex. AES, DES 등 )</h3>: 데이터를 암호화 할때 쓰는 키값과 데이터를 복호화 할때 쓰는 키값이 동일한 암호화 방식<ul><li>하나의 키를 이용해 암복호화가 쉽지만, 키 값을 공유하여 사용할 때 각별한 주의를 기울여야 한다.</li></ul><pre spellcheck="false"><code>"안녕" -(비밀키)-&gt; "62758dda68a287fd310ee918d070fcac" -(비밀키)-&gt; "안녕" </code></pre><h3>비대칭키 암호화( ex. RSA, ECC 등 )</h3>: 데이터를 암호화 할때 쓰는 키와 데이터를 복호화 할때 쓰는 키가 다른 암호화 방식<ul><li>키를 사전에 공유하지 않아도 이용이 가능해 안전하지만, 대칭키 방식에 비해 속도가 느리고 충분한 보안성을 위해서는 긴 길이의 키가 필요해 암복호화 연산이 복잡해 자원을 많이 소모한다.</li></ul><h4>공개키? 개인키?</h4>: 암호화 키를 생성할 때 공개키와 개인키 두 개의 쌍으로 생성을 한다.공개키는 데이터를 암호화 할때, 개인키는 데이터를 복호화 할때 사용한다.<ul><li>모두에게 공개된 공개키 값을 이용해 암호화 된 값을 서버로 보내면 서버에서 개인키로 복호화 하여 데이터를 확인하는 순서다.</li><li>개인키는 공개되지 않고 서버에서만 사용해 공유 중에 유출 될 가능성이 없다.</li></ul><pre spellcheck="false"><code>"안녕" -(공개키)-&gt; "CO//3lsN30ryl8EXFV0Oubq2erPoP4DfedM0zRnLjOiet81uo4gtzKp3H3DpBJkq/lY3547jVK7jArbwO1EA6w==" -(개인키)-&gt; "안녕"</code></pre><h2>그래서 뭘 쓰면 좋을까?</h2><hr>일반적인 상황이라면 보안성이 더 뛰어난 비대칭키 암호화 방식서버의 성능이 좋지 않거나 대량의 데이터를 전송할때는 대칭키 암호화 방식<h2>돌아보며</h2><hr><blockquote>부끄럽지만 나는 "개발할때 무슨 암호화 방식을 사용하셨나요?" 라는 질문에 "Base64 요" 라는 이상한 답변을 한 적이 있다. 답을 들은 면접관은 "그건 암호화 방식이 아닌데요" 라고 답하였고, 나는 그 당시에는 내가 뭘 잘못 말한지 몰랐었다. (물론 시원하게 탈락했다.)암호화 파트를 개발했었지만, 기능이 동작할 정도만 찾아보고 자세한 내용은 모르고 개발을 해왔던 것이다. 누군가 이 글을 읽고 나와 같은 멍청한 실수를 방지했으면 한다.</blockquote>

암호화란?암호화는 데이터를 허가 받지 않은 사용자가 알아보기 어렵게 만들고, 허가 받은 사용자는 알아볼 수 있게 하는 것을 뜻한다.특히 타인이 취득하여 악용할 소지가 있는 데이터들을 주로 암호화 처리해서 보관한다. (ex. 휴대폰 번호, 주민등록번호 등)학습 전에 헷갈렸던 부분: 해시 함수를 이용한 데이터 변환은 복호화가 불가능 하기 때문에 암호화에 속하지