이번년에도 토스 개발자 컨퍼런스가 진행된다고 하네용<a target="_blank" rel="noopener noreferrer nofollow" href="https://toss.im/slash-24">https://toss.im/slash-24</a>요기서 참가 신청 가능합니다!<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724388525975" alt="until-1264">작년에도 가보고 싶었는데 일정이 안되어서 못갔거던여 ㅇㅅㅇ;이번에는 꼭 가보고 싶네요! 시간표 공유 이벤트도 있어서 아래에 제 시간표 공유도 하겠슴다!<img src="https://image.until.blog/rolldeep-stepmerrily/article/1724388578718" alt="until-1265">넘나 설레는것이애오~

이번년에도 토스 개발자 컨퍼런스가 진행된다고 하네용https://toss.im/slash-24요기서 참가 신청 가능합니다!작년에도 가보고 싶었는데 일정이 안되어서 못갔거던여 ㅇㅅㅇ;이번에는 꼭 가보고 싶네요! 시간표 공유 이벤트도 있어서 아래에 제 시간표 공유도 하겠슴다!넘나 설레는것이애오~

토스 개발자 컨퍼런스 SLASH-24:

C++ Code

CI/CD

<blockquote>Cloudflare를 이용해 Vercel 커스텀 도메인을 설정하는 과정에서 "리디렉션한 횟수가 너무 많습니다" 라는 에러가 발생했고 이 문제를 해결하는 방법에 대해 다룬다.</blockquote><img src="https://image.until.blog/xeros/article/1727225490739.png" alt="until-1516"><h3>문제 원인</h3>Cloudflare와 Vercel간의 SSL 설정 충돌에 의해 발생하는 문제이다.Cloudflare는 SSL/TLS 암호화를 제공하며, Vercel도 자체적으로 SSL을 제공한다. 따라서 두 서비스간의 서로 양립된 SSL 설정으로 인한 설정 불일치가 리디렉션 문제를 야기하는것으로 보인다.<h3>해결 방법</h3><a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/integrations/external-platforms/cloudflare">Cloudflare와 연동하는 방법이 기술되어있는 Vercel 공식 문서</a>이 문제를 해결하기 위해서는 Cloudflare의 SSL/TLS 설정을 수정해야 한다. 기본적으로 Cloudflare는 SSL 설정을 자동으로 관리하지만, Vercel과 연동해서 사용하기 위해서는 수동으로 전체 암호화 모드로 변경해 주어야 한다.<img src="https://image.until.blog/xeros/article/1727225713844.png" alt="until-1517"><ol><li>Cloudflare 대시보드에 로그인</li><li>SSL/TLS 메뉴로 이동</li><li>"암호화 모드" 옵션을 찾는다.</li><li>"전체 (Full)" 모드로 변경</li></ol>

Vercel 커스텀 도메인을 Cloudflare에서 설정하는 도중 발생한 리디렉션 오류를 수정하는 방법에 대해 소개한다.

Cloudflare와 Vercel 연동시 리디렉션 오류를 해결하는 방법

discord-bot-dev

<h3>Prologue</h3>초기 목표는 자주 사용하는 기능을 나만의 서버에서 사용하는 것으로 시작해 티켓의 개수를 입력하면 예상 보상을 출력해주는 디스코드 봇을 제작하였다. 그러다 서버로 이용했던 사이트의 아쉬운 성능과 해당 게임에 대한 관심이 떨어지며 자연스레 방치하게 되었고 디스코드 서버가 사라지며 정리를 하게 되었다. 그러다 다시금 찾게 된 게임을 통해 만난 사람들과 디스코드 서버를 꾸렸고 과거의 기억을 십분 발휘해 다시 봇을 개발하게 되었다.GIthub에 있는 과거의 코드를 통해 기억을 떠올렸으나 그 동안의 기간동안 버전이 많이 바뀌었다. 미리 선언한 전치사를 통해 명령어와 일반 채팅을 구분했던 디스코드에서 <code spellcheck="false">/</code> 전치사 통일로 바뀌었고, 해당 디스코드의 봇의 명령어를 미리 보여주는 기능이 생겼다.첫 봇에 제작하는 데 있어 난관이던 것은 게임사의 api가 제공되지 않아 사이트의 해당 기능을 크롤링을 해야했던 것이었다. 하지만 지금은 이미 제공되고 있는 기능으로 게임 속 다양한 부분, 요소들을 확인할 수 있었다.그렇게 빌고 빌었던 api는 우습게도 사용하기가 막막했다. 맨 땅에 헤딩식으로 했던 나의 공부 깊이는 너무나도 얕았던 것이다. 처음 사이트를 확인하고 벅찬 감정은 사라지고 이걸 어떻게 사용해야하는지를 한참이나 검색했다. 어찌저찌 찾아보고 코드를 짜 첫 원하는 결과물을 얻었을 때, 그 때의 기분은 잊을 수 없다. 막막했던 내게 힘껏 움직일 원동력이 되었다.<hr><h3>Goal</h3>캐릭터의 정보를 알 수 있는 기능을 디스코드 봇 명령어에 담고 싶었다. 단순하게 <code spellcheck="false">명령어와 캐릭터의 닉네임을 입력</code>하면 <code spellcheck="false">해당 캐릭터의 정보가 출력</code>되게끔 제작하는 것이 목표였다.해당 기능을 위해 axios를 사용하였다.<pre spellcheck="false"><code class="language-javascript">// components/axiosApiInstance.js
const axios = require('axios');
const dotenv = require('dotenv');

dotenv.config();

function axiosApiInstance(url){
 const axiosInstance = axios.create({
 baseURL: `${process.env.API_URL}${url}`,
 headers: {
 Accept: 'application/json',
 Authorization: `Bearer ${process.env.API_KEY}`
 }
 });
 return axiosInstance;
}

module.exports = axiosApiInstance;</code></pre>추후 다른 컴포넌트에서 반복적으로 사용될 것이라는 생각으로 따로 <code spellcheck="false">인스턴스</code>를 만들어 제작했다.<pre spellcheck="false"><code class="language-javascript">// components/research.js
const instance = require('./axiosApiInstance');

async function research(userNickName){
 try{
 const url = `...url/${userNickName}`;
 const inst = await instance(url);
 const res = await inst.get();
 return res.status === 200 ? await res.data : null;
 }catch(err){
 console.log(err);
 }
}

module.exports = research;</code></pre>코드의 결과는 JSON 형식의 파일로 요청대로 캐릭터에 대한 정보가 담겨 있었다. 아이템, 레벨, 직업 등등 정보를 담고 있었지만 세부적인 데이터는 문자열 타입으로 html 태그들과 뒤죽박죽 섞여있었다.<hr><h3>Regexp</h3>대학생 당시에 엉뚱하게 꽂히는 것이 있다면 수업, 학점 모두 신경쓰지 않고 몰두했었다. 정규 표현식 역시 한 때 이상하게 집착하고 찾아봤던 적이있었다. 그 때만 하더라도 이걸 어디에 사용할 지도 몰랐었는데 이번에 사용하게 되었다.<img src="https://image.until.blog/bakcy/article/1727161035482.png" alt="until-1462"><pre spellcheck="false"><code class="language-javascript">// components/regexp.js
export default function regexp(string){
 const str = /(&lt;([^&gt;]+)&gt;[\s]*)/gi;
 return string.replace(str, '');
}</code></pre>섞여있던 html 태그들을 지워 세부적인 정보들을 객체의 하위 데이터로 사용할 수 있도록 만들 수 있었다.<hr><h3>Object</h3>해당 객체에 정보들은 캐릭터의 성장치마다 다르게 출력되었다. 해당 성장치가 높으면 높을 수록 더 많은 양의 정보를 담고 있었다. <pre spellcheck="false"><code class="language-json">...
"Tooltip": {
 "Element_000": {
 "Type": "NameTagBox",
 "value": "+00 itemName"
 },
 "Element_001": {
 "type": "itemTitle",
 "value": {
 "bEquip": 0,
 "leftStr0": "itemGrade",
 "leftStr1": "itemQuality",
 ...
 }
 },
 "Element_002": { ... },
 ...
}</code></pre>해당 게임의 특성상 무기와 방어구 5종에 부여되는 특수한 옵션들을 표시해야하는 상황 속에서, 어떤 경우에는 <code spellcheck="false">Element_007</code> 그리고 또 어떤 경우에는 <code spellcheck="false">Element_009</code> 처럼 고정된 하나의 키값을 사용할 수 없었다.

Discord.js #1

<ul><li>os : macOS</li></ul><pre spellcheck="false"><code># 독시젠 설치
brew install doxygen

# 설정파일 생성
doxygen -g Doxyfile 

# 독시젠 문서 생성
doxygen Doxyfile</code></pre><h2>Doxyfile 설정</h2>문서 생성하기 전에 <code spellcheck="false">Doxyfile</code> 에서 다음과 같이 설정.<pre spellcheck="false"><code>PROJECT_NAME = "Example Project"
INPUT = ./example.h
RECURSIVE = NO
OUTPUT_DIRECTORY = ./docs
GENERATE_HTML = YES</code></pre><ul><li><code spellcheck="false">PROJECT_NAME</code><ul><li>생성되는 문서의 프로젝트 이름을 지정.</li></ul></li><li><code spellcheck="false">INPUT</code><ul><li>문서화할 파일이나 폴더의 경로를 지정.</li></ul></li><li><code spellcheck="false">RECURSIVE</code><ul><li>INPUT으로 지정된 폴더 내에 있는 파일을 서브폴더까지 포함하여 재귀적으로 검색할지 여부.</li><li><code spellcheck="false">NO</code> : INPUT 폴더의 최상위 파일만 문서화에 포함.</li><li><code spellcheck="false">YES</code> : 지정된 폴더의 모든 하위 폴더까지 포함하여 파일을 찾음.</li></ul></li><li><code spellcheck="false">OUTPUT_DIRECTORY</code><ul><li>Doxygen이 생성한 문서 파일이 저장될 경로.</li></ul></li><li><code spellcheck="false">GENERATE_HTML</code><ul><li>HTML 형식의 문서 생성을 활성화할지 여부.</li><li><code spellcheck="false">YES</code> : HTML 문서가 생성</li><li><code spellcheck="false">NO</code> : 생성되지 않음.</li></ul></li></ul>

Doxyfile 설정을 통한 C++ 프로젝트 문서화 가이드

C++ Docs with Doxygen 📘

이번에 제대로 다시 잡게 되었습니다!
wooni423님도 파이팅하세요!!😉

커밋 메시지 잘 쓰는 거 중요하죠👍

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

<h3>정리할 키워드</h3><ul class="tight" data-tight="true"><li>CSS 기본 문법</li><li>주석</li><li>CSS 적용 방법 <ul class="tight" data-tight="true"><li>내부 스타일 시트 방법</li><li>외부 스타일 시트 방법</li><li>인라인 스타일 방법 </li></ul></li></ul><h2>CSS 기본 문법</h2>선택자와 선언부로 구성선택자 : CSS 적용할 대상을 지정하는 영역선언부 : { }안에 적용할 스타일 적는 영역<h2>주석</h2><pre spellcheck="false"><code>/* 보안이 필요한 내용은 적지 말자 */</code></pre><h2>CSS 적용 방법 </h2><h3>내부 스타일 시트 방법</h3>: HTML 문서 내부에 style 태그로 CSS를 적용하는 방법장점: 사용자에게 노출되기 전에 빠르게 스타일 적용 가능 단점: 코드를 계속 다시 읽어와야 해서 좋지 않음<h3>외부 스타일 시트 방법</h3>별도의 CSS 파일을 만들어 HTML 문서와 link 태그로 연결해 CSS를 적용하는 방법 CSS 파일의 확장자는 .css 여야 한다.<h3>인라인 스타일 방법 </h3>모든 태그에서 사용할 수 있는 style 속성을 사용해 CSS 적용 <hr>실무에서는 대부분 외부 스타일 시트 방법을 사용함유지 보수가 편하고 성능적으로 가장 좋기 때문 인라인 스타일 방법은 특별한 경우 제외하고 거의 사용 안 하므로 되도록 사용하지 않는 편이 좋다

HTML + CSS + JavaScript 도서에서 CSS 파트를 공부한 후 정리한 글