search.xml

<?xml version="1.0" encoding="utf-8"?>
<search> 
  
  
    
    <entry>
      <title>[Vue.js] Vue3 SEO 최적화하기 (sitemap.map, robots.txt)</title>
      <link href="/2025/01/01/Frontend/Vuejs/SEO/"/>
      <url>/2025/01/01/Frontend/Vuejs/SEO/</url>
      
        <content type="html"><![CDATA[<p>개발 포트폴리오 사이트를 만들었는데, 배포는 성공했다만 생각해보니 검색 유입을 위한 SEO(Search Engine Optimization) 최적화를 하지 않았음을 깨달았다 (…)<br>따라서 Vue3로 하는 방법을 간략히 정리해보고자 한다.</p><p>참고로 여기서는 각 포털별 세팅은 다루지 않고 <code>sitemap.xml</code>, <code>robots.txt</code> 생성법만 작성했다.<br>포털별 세팅은 인터넷에 검색하면 많이 나오기 때문에 우리 개발 알잘딱 분들은 잘 하실거라 믿는다 ㅎㅎ</p><h2 id="sitemap-xml만들기"><a href="#sitemap-xml만들기" class="headerlink" title="sitemap.xml만들기"></a>sitemap.xml만들기</h2><p>일단 자신의 프로젝트에서 어떤 vue 프레임워크를 사용하는지 잘 알아야 한다.<br>VuePress같은 경우에는 <code>vuepress-plugin-sitemap</code> 패키지를 설치해서 module.exports를 하면 바로되지만,<br>필자는 vue3를 쌩으로 갖다 박았기 때문에 직접 생성을 해야한다. ㅎㅋ… <del>뒤늦게 몰려드는 후회</del><br>왜냐면 플러그인 패키지를 돌리면 아래와 같은 에러가 발생하기 때문이다.</p><pre class="line-numbers language-bash"><code class="language-bash">node:internal/modules/esm/get_format:183  throw new ERR_UNKNOWN_FILE_EXTENSION<span class="token punctuation">(</span>ext, filepath<span class="token punctuation">)</span><span class="token punctuation">;</span>  ^TypeError <span class="token punctuation">[</span>ERR_UNKNOWN_FILE_EXTENSION<span class="token punctuation">]</span>: Unknown <span class="token function">file</span> extension <span class="token string">".vue"</span> <span class="token keyword">for</span> /Users/rubykim/portfolio/frontend/src/views/Home.vue    at Object.getFileProtocolModuleFormat <span class="token punctuation">[</span>as file:<span class="token punctuation">]</span> <span class="token punctuation">(</span>node:internal/modules/esm/get_format:183:9<span class="token punctuation">)</span>    at defaultGetFormat <span class="token punctuation">(</span>node:internal/modules/esm/get_format:209:36<span class="token punctuation">)</span>    at defaultLoadSync <span class="token punctuation">(</span>node:internal/modules/esm/load:173:14<span class="token punctuation">)</span>    at <span class="token comment" spellcheck="true">#loadAndMaybeBlockOnLoaderThread (node:internal/modules/esm/loader:723:12)</span>    at <span class="token comment" spellcheck="true">#loadSync (node:internal/modules/esm/loader:745:49)</span>    at ModuleLoader.getModuleJobForRequire <span class="token punctuation">(</span>node:internal/modules/esm/loader:384:38<span class="token punctuation">)</span>    at new ModuleJobSync <span class="token punctuation">(</span>node:internal/modules/esm/module_job:342:34<span class="token punctuation">)</span>    at ModuleLoader.importSyncForRequire <span class="token punctuation">(</span>node:internal/modules/esm/loader:332:11<span class="token punctuation">)</span>    at loadESMFromCJS <span class="token punctuation">(</span>node:internal/modules/cjs/loader:1570:24<span class="token punctuation">)</span>    at Module._compile <span class="token punctuation">(</span>node:internal/modules/cjs/loader:1722:5<span class="token punctuation">)</span> <span class="token punctuation">{</span>  code: <span class="token string">'ERR_UNKNOWN_FILE_EXTENSION'</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><p>한줄 요약하자면 <strong>vue파일 인식이 안되네요</strong>라는 말이므로, 결국 노가다를 해야한다는 뜻이다.<br>다행히도 노가다 코드는 매우 간단한 편이다.</p><p>먼저 패키지를 설치해준 후,</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> sitemap<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><br><p>코드를 다음과 같이 세팅해주면 된다.</p><pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// generate-sitemap.js</span><span class="token keyword">const</span> <span class="token punctuation">{</span> SitemapStream<span class="token punctuation">,</span> streamToPromise <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"sitemap"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">const</span> <span class="token punctuation">{</span> createWriteStream <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"fs"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">const</span> <span class="token punctuation">{</span> resolve <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"path"</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token keyword">const</span> routes <span class="token operator">=</span> <span class="token punctuation">[</span>  <span class="token comment" spellcheck="true">// 여기에서 모든 page의 url입력</span>  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">"/"</span><span class="token punctuation">,</span> priority<span class="token punctuation">:</span> <span class="token number">1.0</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">"/about"</span><span class="token punctuation">,</span> priority<span class="token punctuation">:</span> <span class="token number">0.9</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>  <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">"/contact"</span><span class="token punctuation">,</span> priority<span class="token punctuation">:</span> <span class="token number">0.9</span> <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">;</span><span class="token keyword">const</span> sitemap <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">SitemapStream</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  hostname<span class="token punctuation">:</span> <span class="token operator">&lt;</span>실제_배포_사이트_url<span class="token operator">></span><span class="token punctuation">,</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token function">streamToPromise</span><span class="token punctuation">(</span>  routes    <span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>stream<span class="token punctuation">,</span> route<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>      stream<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token punctuation">{</span>        url<span class="token punctuation">:</span> route<span class="token punctuation">.</span>path<span class="token punctuation">,</span>        changefreq<span class="token punctuation">:</span> <span class="token string">"monthly"</span><span class="token punctuation">,</span>        priority<span class="token punctuation">:</span> route<span class="token punctuation">.</span>priority<span class="token punctuation">,</span>      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>      <span class="token keyword">return</span> stream<span class="token punctuation">;</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span> sitemap<span class="token punctuation">)</span>    <span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> outputPath <span class="token operator">=</span> <span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">"dist/sitemap.xml"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token keyword">const</span> writeStream <span class="token operator">=</span> <span class="token function">createWriteStream</span><span class="token punctuation">(</span>outputPath<span class="token punctuation">)</span><span class="token punctuation">;</span>  writeStream<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  writeStream<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><p>이 파일을 설정해줬다면 <code>package.json</code>의 build script에 sitemap 생성 명령어를 같이 입력해주자.</p><pre class="line-numbers language-json"><code class="language-json">...<span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span>    <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"vue-cli-service build &amp;&amp; node generate-sitemap.js"</span><span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">,</span>...<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><br><br><br></p><h2 id="robots-txt-만들기"><a href="#robots-txt-만들기" class="headerlink" title="robots.txt 만들기"></a>robots.txt 만들기</h2><p>robots.txt는 만들기 매우 쉽다. 그냥 txt 파일을 갖다 넣으면 되기 때문이다.<br>다만 여기서 중요한 것이 있는데, <strong>웹사이트 루트 디렉토리</strong>에 위치해야 한다는 것이다.</p><p>특별한 프로젝트 구조가 아닌 이상, 대부분 <code>public</code>폴더에 robots.txt를 만들어놓으면 build시 자동으로 루트 디렉토리에 해당 파일이 위치하게 될 것이다.<br>아래는 robots.txt 예시이다.</p><pre class="line-numbers language-txt"><code class="language-txt">User-agent: *Disallow:Sitemap: <실제_배포_사이트_url>/sitemap.xml<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p>필자는 포트폴리오 사이트에 대해서 SEO를 설정하고 있기 때문에, Disallow를 따로 세팅하지는 않았다.<br>만약 개발 중인 페이지나 검색 결과에 나타나기 원하지 않는 콘텐츠가 있다면, Disallow에 넣어주도록 하자.</p><p><br><br><br></p><h2 id="결과물"><a href="#결과물" class="headerlink" title="결과물"></a>결과물</h2><img src="./1.png" width="800"><img src="./2.png" width="800">]]></content>
      
      
      <categories>
          
          <category> ✨ Frontend </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Javascript </tag>
            
            <tag> Frontend </tag>
            
            <tag> Vue </tag>
            
            <tag> SEO </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Next.js] 배포하기: AWS Amplify vs Github pages vs fly.io vs Vercel vs Netlify</title>
      <link href="/2024/12/29/Frontend/Nextjs/Deployment/"/>
      <url>/2024/12/29/Frontend/Nextjs/Deployment/</url>
      
        <content type="html"><![CDATA[<p>프로젝트를 하다보면 언젠가 배포를 해야 하는 순간이 온다.</p><p>필자 또한 최근 nextJS로 간단한 홈페이지를 만들었는데, 막상 배포를 하려니 nextJS라 고려해야할 점이 많아서 한 번 정리해보고자 한다.</p><p>결론만 볼 사람들은 5번으로 바로 넘어가면 된다.</p><h2 id="NextJS를-선택한-이유는"><a href="#NextJS를-선택한-이유는" class="headerlink" title="(NextJS를 선택한 이유는?)"></a>(NextJS를 선택한 이유는?)</h2><p>일단 플랫폼을 비교하기 앞서서 굳이 nextJS를 선택한 이유를 간단히 적어보자 한다.<br>그래야 비교하는 의미가 있기 때문이다.</p><p>NextJS는 <code>SSR(서버 사이드 랜더링)</code>을 목적으로 주로 선택되는 웹 프레임워크이다.<br>즉 각 페이지를 서버 측에서 먼저 렌더링을 할 수 있기 때문에, 초기 페이지 로딩 속도가 빠르고 <code>SEO(검색 엔진 최적화)</code>에 매우 유리하다.<br>필자 또한 만든 프로그램이 인터넷 검색이 잘 되도록 하고 싶어서, 고민없이 바로 nextJS를 선택했다.</p><h2 id="1-❌-AWS-Amplify"><a href="#1-❌-AWS-Amplify" class="headerlink" title="1. ❌ AWS Amplify"></a>1. ❌ AWS Amplify</h2><img src="./1.png" width="800"><p>필자는 회사 업무로 인해 AWS를 주로 사용하는데, 생각해보니 AWS CloudFront를 직접 설정해서 프론트엔드를 배포했지, Amplify는 써본 적이 없어서 연습 겸 여기로 호스팅을 시도를 했다.</p><p>물론 어찌저찌 하니 배포는 잘 됐는데, 문제가 발생했다.<br>크게 2가지 문제가 있었는데, 바로 <code>배포/반영 시간이 너무 걸린다</code>는 것이다.</p><p>Amplify는 CDN을 위해 CloudFront를 사용하는데, CloudFront는 CDN과 Compute@Edge 배포에서 invalidations(무효화)와 propagations(전파)를 지원하지 않아 일종의 <strong>병목현상</strong>이 나타난 것이었다.</p><p>필자가 구현한 프로젝트가 간단한 편에 속하는데, 실제로 배포 후 반영까지 약 20분이라는 시간이 걸렸다. 실로 놀라울 따름…</p><br><p>또 하나의 문제는 <code>이미지 로드가 느리다는 것</code>이었다.<br>현재 기준으로 region을 <strong>us-east-1</strong>(버지니아 북부)로만 설정할 수 있는데, 파일 내부 static 이미지들이 캐싱되기 전까지는 이미지 로드가 매우 느리다는 것이었다.</p><p>맨 처음에 이미지 로딩 시간이 너무 길어보여서 착각한건가 싶어 몇 번 재테스트를 했는데,<br>그럼에도 불구하고 확실하게 정적 이미지들이 캐싱되기 전까지는 느리게 불러와지는 모습에 한탄을 금치 못했다.</p><p>눈물 머금고 나의 작고 귀여운 돈을 바치겠다는데 이렇게까지 느릴 일이 있나? 싶어서 결국 던지게 되었다 ㅎㅎ</p><p><br><br></p><h2 id="2-❌-Github-Pages"><a href="#2-❌-Github-Pages" class="headerlink" title="2. ❌ Github Pages"></a>2. ❌ Github Pages</h2><img src="./2.jpg" width="800"><p>사실 이거는 시도조차 안했다. 왜냐면 이 블로그 자체가 Github Pages로 운영되고 있기 때문에 굳이 동일한 기술 스택을 사용해야 하나 싶었기 때문이다.</p><p>무엇보다 Github Pages를 포기한 이유가 바로 <code>API 라우트</code> 였다. 안타깝게도 <strong>Github Pages는 서버 이용이 불가능</strong>한데, 나는 API 라우트를 구현했기 때문이다. 서버 없이 어떻게 작동시키겠어…ㅠㅜ</p><p>따라서 API 라우트 없는 build 결과물로는 github pages 배포는 가능하지만, API 라우트를 사용한다면 100% github pages에서 서비스가 안돌아가기 때문이 다른 대안점을 찾아야 했다.</p><p><br><br></p><h2 id="3-✅-fly-io"><a href="#3-✅-fly-io" class="headerlink" title="3. ✅ fly.io"></a>3. ✅ fly.io</h2><img src="./3.png" width="800"><p><a href="https://fly.io/">fly.io</a>는 컨테이너 기반 애플리케이션으로, 전 세계 여러 데이터 센터에서 애플리케이션을 자동으로 배포하여 지연 시간을 최소화 및 성능 최적화가 가능한 플랫폼이다.</p><p>클라우드에서 Container Registry에 이미지를 업로드하여 Kubernetes로 돌리는건 흔한 경우라, 이것도 체험을 해보고 싶어서 가볍게 업로드를 해봤다.</p><p>명령어를 써야한대서 어렵나 싶었는데, 생각보다 나쁘지 않았다. 아래 명령어가 전부이기 때문이다.<br>하지만 이 프로그램은 아쉽게도 최종 후보에서 탈락하고 말았다. 왜냐면 무료기간 이후로 매달 25달러를 내야하기 때문이다 <del>돈아끼기</del></p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># 1. flyctl 설치</span><span class="token comment" spellcheck="true">## brew 설치</span>brew <span class="token function">install</span> flyctl<span class="token comment" spellcheck="true">## brew사용이 어려울 시</span>curl -L https://fly.io/install.sh <span class="token operator">|</span> sh<span class="token comment" spellcheck="true"># 2. flyctl 로그인</span>flyctl auth login<span class="token comment" spellcheck="true"># 3. 초기 설정 및 배포하기</span><span class="token comment" spellcheck="true">## 이때 fly.toml 및 Dockerfile이 생성되며, 자동으로 배포가 진행됨</span>fly launch<span class="token comment" spellcheck="true"># 4. 이후 코드 수정 후 배포 업데이트</span>fly deploy<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><br><br></p><h2 id="4-✅-Vercel-vs-Netlify"><a href="#4-✅-Vercel-vs-Netlify" class="headerlink" title="4. ✅ Vercel vs Netlify"></a>4. ✅ Vercel vs Netlify</h2><img src="./4.avif" width="800"><p>이 두 친구들은 프론트엔드 배포를 하는데 많이 사용되는 플랫폼이다.<br>왜냐면 배포도 매우 쉽고 무엇보다 <strong>무료</strong> 범위 내에서 충분히 커버할 수 있기 때문이다.</p><p>따라서 이 둘을 두고 어디로 배포를 하냐 의견이 분분히 발생하는데, 간단하게 정리를 해보고자 한다.<br>(참고: <a href="https://ikius.com/blog/vercel-vs-netlify">https://ikius.com/blog/vercel-vs-netlify</a>)</p><h4 id="Vercel"><a href="#Vercel" class="headerlink" title="Vercel"></a>Vercel</h4><ul><li>nextJS에 한정해서 최적의 배포가 가능: vercel에서 nextjs를 만들었기 때문</li><li>빠른 로딩 속도</li></ul><h4 id="Netlify"><a href="#Netlify" class="headerlink" title="Netlify"></a>Netlify</h4><ul><li>다양한 정적 사이트 생성기 &amp; 복잡한 배포 요구사항이 있을 경우에 사용이 좋음: vercel보다 플러그인이 많이 제공되기 때문</li><li>무료 플랜에서 상업 용도로 사용 가능 (vercel은 상업용으로 페이지 만들 시 플랜 구매 필요)</li></ul><p><br><br></p><h2 id="5-결론"><a href="#5-결론" class="headerlink" title="5. 결론"></a>5. 결론</h2><p>합리적인 가격(무료 또는 소액)으로 배포를 한다는 가정하에,<br><code>Vercel</code>, <code>Netlify</code>, <code>fly.io</code>를 추천한다!</p><p>Github Pages는 NextJS에서 API 라우트를 구현하지 않았을 때만 추천한다.</p>]]></content>
      
      
      <categories>
          
          <category> ✨ Frontend </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Javascript </tag>
            
            <tag> NextJS </tag>
            
            <tag> Frontend </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[GCP] GCP에서 사용자 인증정보(OAuth)를 사용해 Access Token 받아오기</title>
      <link href="/2024/12/20/Cloud/GCP/Console/Oauth2/"/>
      <url>/2024/12/20/Cloud/GCP/Console/Oauth2/</url>
      
        <content type="html"><![CDATA[<p>Google Calendar에 커피챗 일정을 잡아주는 프로그램을 만드는 중인데, 이 과정에서 Google Calendar API를 사용하기 위해서는 GCP로부터 Access Token 발급을 받아야 하므로 그 방법을 한 번 정리해보자고 한다.<br><code>scope</code>부분만 원하는 서비스로 선택하면 해당 서비스의 Access Token을 받을 수 있으며 여기서는 내가 작업 중인 Google Calendar를 예시로 글을 작성해본다.</p><h2 id="1-GCP-gt-API-및-서비스-gt-사용자-인증-정보에서-OAuth-client-생성"><a href="#1-GCP-gt-API-및-서비스-gt-사용자-인증-정보에서-OAuth-client-생성" class="headerlink" title="1. GCP > API 및 서비스 > 사용자 인증 정보에서 OAuth client 생성"></a>1. GCP &gt; API 및 서비스 &gt; 사용자 인증 정보에서 OAuth client 생성</h2><img src="./1.png" width="800"><p>이번 포스트에서는 클라이언트 생성 방법보다는 Access Token발급을 중점으로 다루고 있기 때문에 client 세팅 방법은 따로 안내하지 않겠다.</p><p>여기에서 우리가 확인해야 할 정보는 다음과 같다.</p><pre class="line-numbers language-bash"><code class="language-bash">GOOGLE_CLIENT_ID<span class="token operator">=</span><span class="token operator">&lt;</span>클라이언트 ID<span class="token operator">></span>GOOGLE_CLIENT_SECRET<span class="token operator">=</span><span class="token operator">&lt;</span>클라이언트 보안 비밀번호<span class="token operator">></span>GOOGLE_REDIRECT_URI<span class="token operator">=</span><span class="token operator">&lt;</span>승인된 리디렉션 URI주소<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre><p><br><br></p><h2 id="2-Google-Calender의-Access-Token요청을-위한-URL-입력"><a href="#2-Google-Calender의-Access-Token요청을-위한-URL-입력" class="headerlink" title="2. Google Calender의 Access Token요청을 위한 URL 입력"></a>2. Google Calender의 Access Token요청을 위한 URL 입력</h2><p>아무 인터넷 창에다가 다음의 url을 입력한다.</p><pre class="line-numbers language-bash"><code class="language-bash">https://accounts.google.com/o/oauth2/v2/auth?scope<span class="token operator">=</span>https://www.googleapis.com/auth/calendar<span class="token operator">&amp;</span>access_type<span class="token operator">=</span>offline<span class="token operator">&amp;</span>include_granted_scopes<span class="token operator">=</span>true<span class="token operator">&amp;</span>response_type<span class="token operator">=</span>code<span class="token operator">&amp;</span>redirect_uri<span class="token operator">=</span><span class="token operator">&lt;</span>GOOGLE_REDIRECT_URI<span class="token operator">></span><span class="token operator">&amp;</span>client_id<span class="token operator">=</span><span class="token operator">&lt;</span>GOOGLE_CLIENT_ID<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><img src="./2.png" width="800"><img src="./3.png" width="800"><p>값이 잘 입력됐다면 google 계정으로 로그인이 나오며, 액세스 허용 여부를 물어보는 페이지를 볼 수 있다.</p><p><br><br></p><h2 id="3-Redirect-uri로-받아온-값-확인"><a href="#3-Redirect-uri로-받아온-값-확인" class="headerlink" title="3. Redirect uri로 받아온 값 확인"></a>3. Redirect uri로 받아온 값 확인</h2><p>위 이미지에서 “허용” 버튼을 누르면 redirect uri로 바로 이동한다.<br>이 때 주소창을 확인하면 response를 확인할 수 있으며, <code>CODE</code>부분을 잘 백업해두자.<br>코드의 유효시간은 10분인 것 또한 참고할 것</p><pre class="line-numbers language-bash"><code class="language-bash">GOOGLE_REDIRECT_URI/?code<span class="token operator">=</span><span class="token operator">&lt;</span>CODE<span class="token operator">></span><span class="token operator">&amp;</span>scope<span class="token operator">=</span>https://www.googleapis.com/auth/calendar<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h2 id="4-Access-Token-발급받기"><a href="#4-Access-Token-발급받기" class="headerlink" title="4. Access Token 발급받기"></a>4. Access Token 발급받기</h2><p>이제 Access Token을 발급받을 준비가 되었다.<br>다음의 명령어를 입력해보자. curl이니 터미널에 입력하면 된다.</p><pre class="line-numbers language-bash"><code class="language-bash">curl --request POST \  --url https://oauth2.googleapis.com/token \  --header <span class="token string">'Content-Type: application/x-www-form-urlencoded'</span> \  --data <span class="token string">"code=&lt;CODE>"</span> \  --data <span class="token string">"client_id=&lt;GOOGLE_CLIENT_ID>"</span> \  --data <span class="token string">"client_secret=&lt;GOOGLE_CLIENT_SECRET>"</span> \  --data <span class="token string">"redirect_uri=&lt;GOOGLE_REDIRECT_URI>"</span> \  --data <span class="token string">"grant_type=authorization_code"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><p>제대로 값이 전달되면 다음과 같은 response를 얻을 수 있다.</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token punctuation">{</span>  <span class="token string">"access_token"</span><span class="token keyword">:</span> <span class="token operator">&lt;</span>ACCESS_TOKEN<span class="token operator">></span>,  <span class="token string">"expires_in"</span><span class="token keyword">:</span> 3599,  <span class="token string">"refresh_token"</span><span class="token keyword">:</span> <span class="token operator">&lt;</span>REFRESH_TOKEN<span class="token operator">></span>,  <span class="token string">"scope"</span><span class="token keyword">:</span> <span class="token string">"https://www.googleapis.com/auth/calendar"</span>,  <span class="token string">"token_type"</span><span class="token keyword">:</span> <span class="token string">"Bearer"</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><h3 id="4-1-Refresh-Token을-사용해서-Access-Token을-재발급-받기"><a href="#4-1-Refresh-Token을-사용해서-Access-Token을-재발급-받기" class="headerlink" title="4-1. Refresh Token을 사용해서 Access Token을 재발급 받기"></a>4-1. Refresh Token을 사용해서 Access Token을 재발급 받기</h3><p>결과를 보면 <code>expires_in</code>이 있는데, 3599초 즉 <code>1시간</code>만 Access Token을 사용할 수 있으며 이후로는 토큰 사용이 불가능하다.</p><p>나처럼 캘린더 일정을 계속 자동화해서 잡아야 하는 경우에는 <code>refresh_token</code>을 이용해서 <code>access_token</code>을 갱신해야 한다.<br>다행이도 Google OAuth2에서 제공하는 <strong>refresh_token</strong>은 만료되지 않는다.</p><br><p>만약 <strong>refresh_token</strong> 을 사용해서 <strong>access_token</strong>을 재발급 받고 싶으면 다음의 curl을 보내주자.</p><pre class="line-numbers language-bash"><code class="language-bash">curl --request POST \  --url https://oauth2.googleapis.com/token \  --header <span class="token string">'Content-Type: application/x-www-form-urlencoded'</span> \  --data <span class="token string">"client_id=&lt;GOOGLE_CLIENT_ID>"</span> \  --data <span class="token string">"client_secret=&lt;GOOGLE_CLIENT_SECRET>"</span> \  --data <span class="token string">"refresh_token=&lt;REFRESH_TOKEN>"</span> \  --data <span class="token string">"grant_type=refresh_token"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><p>갱신 요청이 성공하면 새로운 <code>access_token</code>이 반환된다.</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token punctuation">{</span>  <span class="token string">"access_token"</span><span class="token keyword">:</span> <span class="token operator">&lt;</span>ACCESS_TOKEN<span class="token operator">></span>,  <span class="token string">"expires_in"</span><span class="token keyword">:</span> 3599,  <span class="token string">"scope"</span><span class="token keyword">:</span> <span class="token string">"https://www.googleapis.com/auth/calendar"</span>,  <span class="token string">"token_type"</span><span class="token keyword">:</span> <span class="token string">"Bearer"</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="5-JS코드로-Access-Token-Refresh-Token으로-재발급까지-을-받아보자"><a href="#5-JS코드로-Access-Token-Refresh-Token으로-재발급까지-을-받아보자" class="headerlink" title="5. JS코드로 Access Token (+Refresh Token으로 재발급까지)을 받아보자"></a>5. JS코드로 Access Token (+Refresh Token으로 재발급까지)을 받아보자</h2><p>이러한 작업들을 일일이 하기에는 여러모로 피곤하니, 코드로 한 번 구현을 해봤다.</p><p>만약 이 코드를 돌렸는데 403 Forbidden이 나온다면 GCP에서 현재 사용하는 서비스의 API 사용을 허가했는지 확인해보자.<br>서비스 리스트는 <a href="https://console.cloud.google.com/apis/api">https://console.cloud.google.com/apis/api</a> 에서 확인할 수 있다.</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># .env.local</span>GOOGLE_CLIENT_ID<span class="token operator">=</span><span class="token operator">&lt;</span>클라이언트 ID<span class="token operator">></span>GOOGLE_CLIENT_SECRET<span class="token operator">=</span><span class="token operator">&lt;</span>클라이언트 보안 비밀번호<span class="token operator">></span>GOOGLE_REDIRECT_URI<span class="token operator">=</span><span class="token operator">&lt;</span>승인된 리디렉션 URI주소<span class="token operator">></span>GOOGLE_REFRESH_TOKEN<span class="token operator">==</span><span class="token operator">&lt;</span>refresh token값<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-js"><code class="language-js"><span class="token comment" spellcheck="true">// oauth.js</span><span class="token keyword">import</span> <span class="token punctuation">{</span> google <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'googleapis'</span><span class="token punctuation">;</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token function">getOAuth2Client</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token keyword">const</span> oAuth2Client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">google<span class="token punctuation">.</span>auth<span class="token punctuation">.</span>OAuth2</span><span class="token punctuation">(</span>    process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>GOOGLE_CLIENT_ID<span class="token punctuation">,</span>    process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>GOOGLE_CLIENT_SECRET<span class="token punctuation">,</span>    process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>GOOGLE_REDIRECT_URI  <span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// Refresh token 설정</span>  oAuth2Client<span class="token punctuation">.</span><span class="token function">setCredentials</span><span class="token punctuation">(</span><span class="token punctuation">{</span>    refresh_token<span class="token punctuation">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>GOOGLE_REFRESH_TOKEN<span class="token punctuation">,</span>  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token keyword">try</span> <span class="token punctuation">{</span>    <span class="token comment" spellcheck="true">// Access token 갱신</span>    <span class="token keyword">const</span> <span class="token punctuation">{</span> token <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> oAuth2Client<span class="token punctuation">.</span><span class="token function">getAccessToken</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    oAuth2Client<span class="token punctuation">.</span><span class="token function">setCredentials</span><span class="token punctuation">(</span><span class="token punctuation">{</span> access_token<span class="token punctuation">:</span> token <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token keyword">return</span> oAuth2Client<span class="token punctuation">;</span>  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'Failed to refresh access token:'</span><span class="token punctuation">,</span> e<span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">'Failed to get access token.'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>]]></content>
      
      
      <categories>
          
          <category> ☁️ Cloud </category>
          
      </categories>
      
      
        <tags>
            
            <tag> OAuth2 </tag>
            
            <tag> Cloud </tag>
            
            <tag> GCP </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[NCP] 콘솔에서 NKS(Ncloud Kubernetes Service) 및 NCR(Ncloud Container Registry) 세팅으로 배포하기</title>
      <link href="/2024/11/25/Cloud/NCP/Console/NKS&amp;NCR/"/>
      <url>/2024/11/25/Cloud/NCP/Console/NKS&amp;NCR/</url>
      
        <content type="html"><![CDATA[<p>최근 멘토링에서 ncloud를 사용하여 서버배포를 하고싶다는 요청을 받았는데, 나 또한 네이버 클라우드는 경험이 없는지라 ㅎㅎ;; 공부삼아 한 번 세팅을 해봤다.</p><p>일단 클라우드에서 Kubernetes로 container를 배포를 하기 위해서는 로직이 대략적으로 이렇게 된다.<br><img src="./2.png" width="800"></p><ul><li>설명이 어렵다 할 분들을 위해서, 전체적인 로직은 Services 쪽을 보면 이해하기 쉬울 것이다.<br><code>Container Registry</code>에 컨테이너 이미지 업로드 -&gt; <code>Ncloud Kubernetes Service</code>의 Kubernetes에 컨테이너 이미지 배치 -&gt; Kubernetes가 서버를 배포하도록 설정<br>이렇게만 하면 클라우드에 우리가 원하는 이미지를 띄울 수 있다.</li><li>하지만 클라우드는 <code>보안</code>이 생명인 서비스인 만큼, 모든 것들이 기본적으로 private으로 설정되며 우리는 이런 리소스에 접근하기 위해서는 여러 인증을 n번 거쳐야한다. 때문에 VPC를 설정을 예쁘게 해야한다.<br>subnet 이름은 사람마다 취향껏 맞춰 지으면 되며, 여기서는 편의상 내 마음대로 이름을 붙여봤다.<ul><li><code>k8s-server-k2</code><ul><li>클러스터로 들어오는 내부 트래픽과 외부 트래픽을 관리</li><li>컨테이너 이미지를 레지스트리에서 가져와 클러스터에 배포</li><li>클러스터가 인터넷(외부 서비스)과 연결될 수 있도록 하는 Nat 관리</li></ul></li><li><code>k8s-lb-private</code>: 클러스터 내부에서만 접근할 수 있는 서비스들을 트래픽에 전달<ul><li>특히 내부 Pod간 통신 처리</li></ul></li><li><code>k8s-lb-public</code>: 인터넷을 통해 외부 사용자들이 접근할 수 있는 서비스들에 트래픽 전달<ul><li>특히 외부에서 트래픽을 받으면 pod로 라우팅함</li></ul></li><li><code>Nat</code>: NAT Gateway의 약자로, 외부에서 Kubernetes 클러스터 내부로의 직접적인 접근을 차단하기 위해 생성</li><li><code>k8s-k2</code>: Kubernetes 클러스터를 관리함. 쉽게 Kubernetes 클러스터의 worker nodes 관리하는 곳으로 생각하면 됨</li></ul></li></ul><p>이렇게 간략하게 설명을 해봤으며, 이해가 됐다면 바로 세팅으로 들어가보자.</p><h2 id="0-NCP-콘솔-로그인"><a href="#0-NCP-콘솔-로그인" class="headerlink" title="0. NCP 콘솔 로그인"></a>0. NCP 콘솔 로그인</h2><img src="./0.png" width="800"><p>화면 맨 위 오른쪽에 <a href="https://console.ncloud.com/dashboard">콘솔</a> 버튼을 누르면 접속할 수 있다.</p><h2 id="1-VPC-생성하기"><a href="#1-VPC-생성하기" class="headerlink" title="1. VPC 생성하기"></a>1. VPC 생성하기</h2><ul><li>VPC &gt; <a href="https://console.ncloud.com/vpc-network/vpc">VPC Management</a>에서 생성<img src="./1.png" width="800"></li></ul><h2 id="2-Subnet-생성하기"><a href="#2-Subnet-생성하기" class="headerlink" title="2. Subnet 생성하기"></a>2. Subnet 생성하기</h2><ul><li>VPC &gt; <a href="https://console.ncloud.com/vpc-network/subnet">Subnet Management</a>에서 생성</li><li>1번에서 생성한 VPC 이름으로 설정<img src="./3.png" width="800"></li></ul><h2 id="3-NAT-Gateway-생성하기"><a href="#3-NAT-Gateway-생성하기" class="headerlink" title="3. NAT Gateway 생성하기"></a>3. NAT Gateway 생성하기</h2><ul><li>VPC &gt; <a href="https://console.ncloud.com/vpc-network/nat-gateway">NAT Gateway</a>에서 생성</li><li>1, 2번에서 생성한 VPC 및 nat subnet 설정<img src="./4.png" width="800"></li></ul><h2 id="4-Routes-설정하기"><a href="#4-Routes-설정하기" class="headerlink" title="4. Routes 설정하기"></a>4. Routes 설정하기</h2><ul><li>VPC &gt; Route Table &gt; <a href="https://console.ncloud.com/vpc-network/routeTable">Route Table</a>에서 <code>private-table</code> 선택</li><li><code>Route 설정</code>에서 public access를 위해 <code>0.0.0.0/0</code>, <code>NATGW</code>, <code>nat설정의 subnet 이름</code> 추가<img src="./5.png" width="800"></li></ul><h2 id="5-Object-Storage-생성하기"><a href="#5-Object-Storage-생성하기" class="headerlink" title="5. Object Storage 생성하기"></a>5. Object Storage 생성하기</h2><ul><li>Object Storage &gt; <a href="https://console.ncloud.com/objectStorage/objectStorageList">Bucket Management</a>에서 버킷 생성<img src="./6.png" width="300"></li></ul><h2 id="6-Container-Registry-생성하기"><a href="#6-Container-Registry-생성하기" class="headerlink" title="6. Container Registry 생성하기"></a>6. Container Registry 생성하기</h2><ul><li><a href="https://console.ncloud.com/ncr/registries">Container Registry</a>에서 생성</li><li>5번에서 생성한 버킷으로 설정<img src="./7.png" width="800"></li></ul><h2 id="7-Ncloud-Kubernetes-Service-생성하기"><a href="#7-Ncloud-Kubernetes-Service-생성하기" class="headerlink" title="7. Ncloud Kubernetes Service 생성하기"></a>7. Ncloud Kubernetes Service 생성하기</h2><h3 id="1-VPC-Ncloud-Kubernetes-Service-Clusters에서-생성"><a href="#1-VPC-Ncloud-Kubernetes-Service-Clusters에서-생성" class="headerlink" title="1) VPC Ncloud Kubernetes Service Clusters에서 생성"></a>1) <a href="https://console.ncloud.com/vnks/clusters">VPC Ncloud Kubernetes Service Clusters</a>에서 생성</h3><ul><li><p>1번에서 생성한 VPC를 선택하면 자동으로 LB Private subnet, LB Public subnet이 세팅됨</p></li><li><p>이번 실습에서는 클러스터 인증 모드를 API로 설정함<br><img src="./9.png" width="800"></p></li><li><p>설정 완료 후 다음으로 넘어가면 Nat 설정에 관한 안내창이 나오는데, 무시해도 됨(이 세팅은 3번, 5번에서 했기 때문)</p><img src="./8.png" width="400"></li></ul><h3 id="2-노드풀-설정하기"><a href="#2-노드풀-설정하기" class="headerlink" title="2) 노드풀 설정하기"></a>2) 노드풀 설정하기</h3>   <img src="./10.png" width="800"><h3 id="3-인증키-설정"><a href="#3-인증키-설정" class="headerlink" title="3) 인증키 설정"></a>3) 인증키 설정</h3>   <img src="./11.png" width="800"><p><br><br></p><p>모든 설정이 완료되면 아래 이미지처럼 생성됨.약 10-30분 기다려야함<br><img src="./12.png" width="800"></p><h2 id="8-사용자-인증-API-인증키-생성하기"><a href="#8-사용자-인증-API-인증키-생성하기" class="headerlink" title="8. 사용자 인증: API 인증키 생성하기"></a>8. 사용자 인증: API 인증키 생성하기</h2><ul><li>계정 관리 &gt; <a href="https://www.ncloud.com/mypage/manage/authkey">인증키 관리</a>에서 <code>신규 API 인증키 생성</code>을 클릭하여 API 인증키 생성하기</li><li><code>Access Key ID</code> 및 <code>Secret Key</code> 값을 준비해두자. 앞으로 서비스 이용을 할 때 쓸 예정<br><img src="./13.png"><img src="./14.png" width="800"></li></ul><h2 id="9-Container-Registry에-Docker-image-업로드하기"><a href="#9-Container-Registry에-Docker-image-업로드하기" class="headerlink" title="9. Container Registry에 Docker image 업로드하기"></a>9. Container Registry에 Docker image 업로드하기</h2><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># ncloud docker login 하기</span><span class="token comment" spellcheck="true"># registry-url = container registry의 public endpoint</span>$ docker login <span class="token operator">&lt;</span>registry-url<span class="token operator">></span><span class="token comment" spellcheck="true"># docker build &amp; tag &amp; push 하기</span><span class="token comment" spellcheck="true"># docker build: ncloud의 Kubernetes 세팅이 amd64으로 되어있어 platform 옵션 추가</span>$ docker build --platform linux/amd64 -t <span class="token operator">&lt;</span>registry-url<span class="token operator">></span>/<span class="token operator">&lt;</span>repository-name<span class="token operator">></span>:<span class="token operator">&lt;</span>tag<span class="token operator">></span> <span class="token keyword">.</span>$ docker tag $ docker push <span class="token operator">&lt;</span>registry-url<span class="token operator">></span>/<span class="token operator">&lt;</span>repository-name<span class="token operator">></span>:<span class="token operator">&lt;</span>tag<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><img src="./15.png" width="800">Push가 잘됐다면 이미지처럼 Tags탭에 들어갔을 때 push한 이미지를 확인할 수 있다.<h2 id="10-Kubernetes-설정해서-Docker-image-배포하기"><a href="#10-Kubernetes-설정해서-Docker-image-배포하기" class="headerlink" title="10. Kubernetes 설정해서 Docker image 배포하기"></a>10. Kubernetes 설정해서 Docker image 배포하기</h2><h3 id="NKS-인증키-설정"><a href="#NKS-인증키-설정" class="headerlink" title="NKS 인증키 설정"></a>NKS 인증키 설정</h3><p><a href="https://guide.ncloud-docs.com/docs/k8s-iam-auth-ncp-iam-authenticator">여기</a>를 참고하여 ncp-iam-authenticator를 설치한 후 진행</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># ncloud setup</span>$ <span class="token function">export</span> NCLOUD_ACCESS_KEY<span class="token operator">=</span><span class="token operator">&lt;</span>8번에서-생성한-Access-Key-ID<span class="token operator">></span>$ <span class="token function">export</span> NCLOUD_SECRET_KEY<span class="token operator">=</span><span class="token operator">&lt;</span>8번에서-생성한-Secret-Key<span class="token operator">></span>$ <span class="token function">export</span> NCLOUD_API_GW<span class="token operator">=</span>https://ncloud.apigw.ntruss.com<span class="token comment" spellcheck="true"># nks 인증키 생성</span><span class="token comment" spellcheck="true"># region이 한국이면 region-code는 KR</span><span class="token comment" spellcheck="true"># 파일이 생성되지 않거나, 빈 파일이 생성됐다면 문제가 있는 것</span>$ ncp-iam-authenticator create-kubeconfig --region <span class="token operator">&lt;</span>region-code<span class="token operator">></span> --clusterUuid <span class="token operator">&lt;</span>NKS에서 생성한 cluster의 uuid<span class="token operator">></span> --output kubeconfig.yaml$ <span class="token function">export</span> KUBECONFIG<span class="token operator">=</span><span class="token string">"&lt;kubeconfig.yaml의 파일 절대경로>"</span><span class="token comment" spellcheck="true"># Kubernetes가 제대로 설정됐는지 확인</span>$ kubectl get ns <span class="token comment" spellcheck="true"># namespace 조회. 아래같이 나오면 성공</span>NAME              STATUS   AGEdefault           Active   40hkube-node-lease   Active   40hkube-public       Active   40hkube-system       Active   40h<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="Kubernetes를-위한-yaml파일-생성"><a href="#Kubernetes를-위한-yaml파일-생성" class="headerlink" title="Kubernetes를 위한 yaml파일 생성"></a>Kubernetes를 위한 yaml파일 생성</h3><pre class="line-numbers language-yaml"><code class="language-yaml"><span class="token comment" spellcheck="true"># deployment.yaml</span><span class="token key atrule">apiVersion</span><span class="token punctuation">:</span> apps/v1<span class="token key atrule">kind</span><span class="token punctuation">:</span> Deployment<span class="token key atrule">metadata</span><span class="token punctuation">:</span>  <span class="token key atrule">name</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app<span class="token punctuation">-</span>deployment  <span class="token key atrule">namespace</span><span class="token punctuation">:</span> default<span class="token key atrule">spec</span><span class="token punctuation">:</span>  <span class="token key atrule">replicas</span><span class="token punctuation">:</span> <span class="token number">1</span>  <span class="token key atrule">selector</span><span class="token punctuation">:</span>    <span class="token key atrule">matchLabels</span><span class="token punctuation">:</span>      <span class="token key atrule">app</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app  <span class="token key atrule">template</span><span class="token punctuation">:</span>    <span class="token key atrule">metadata</span><span class="token punctuation">:</span>      <span class="token key atrule">labels</span><span class="token punctuation">:</span>        <span class="token key atrule">app</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app    <span class="token key atrule">spec</span><span class="token punctuation">:</span>      <span class="token key atrule">containers</span><span class="token punctuation">:</span>      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app        <span class="token key atrule">image</span><span class="token punctuation">:</span> &lt;registry<span class="token punctuation">-</span>url<span class="token punctuation">></span>/&lt;repository<span class="token punctuation">-</span>name<span class="token punctuation">></span><span class="token punctuation">:</span>&lt;tag<span class="token punctuation">></span>        <span class="token key atrule">imagePullPolicy</span><span class="token punctuation">:</span> Always        <span class="token key atrule">ports</span><span class="token punctuation">:</span>        <span class="token punctuation">-</span> <span class="token key atrule">containerPort</span><span class="token punctuation">:</span> <span class="token number">8000</span>      <span class="token key atrule">imagePullSecrets</span><span class="token punctuation">:</span>      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> regcred<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><pre class="line-numbers language-yaml"><code class="language-yaml"><span class="token comment" spellcheck="true"># service.yaml</span><span class="token key atrule">apiVersion</span><span class="token punctuation">:</span> v1<span class="token key atrule">kind</span><span class="token punctuation">:</span> Service<span class="token key atrule">metadata</span><span class="token punctuation">:</span>  <span class="token key atrule">name</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app<span class="token punctuation">-</span>service  <span class="token key atrule">annotations</span><span class="token punctuation">:</span>    <span class="token key atrule">service.beta.Kubernetes.io/ncloud-load-balancer-layer-type</span><span class="token punctuation">:</span> <span class="token string">"nplb"</span>    <span class="token key atrule">service.beta.Kubernetes.io/ncloud-load-balancer-size</span><span class="token punctuation">:</span> <span class="token string">"SMALL"</span><span class="token key atrule">spec</span><span class="token punctuation">:</span>  <span class="token key atrule">selector</span><span class="token punctuation">:</span>    <span class="token key atrule">app</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app  <span class="token key atrule">type</span><span class="token punctuation">:</span> LoadBalancer  <span class="token key atrule">ports</span><span class="token punctuation">:</span>  <span class="token punctuation">-</span> <span class="token key atrule">port</span><span class="token punctuation">:</span> <span class="token number">80</span>    <span class="token key atrule">targetPort</span><span class="token punctuation">:</span> <span class="token number">8000</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="Kubernetes에-템플릿-배포-및-서비스-확인"><a href="#Kubernetes에-템플릿-배포-및-서비스-확인" class="headerlink" title="Kubernetes에 템플릿 배포 및 서비스 확인"></a>Kubernetes에 템플릿 배포 및 서비스 확인</h3><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># kubenetes secret object 생성</span>$ kubectl create secret docker-registry regcred \    --docker-server<span class="token operator">=</span><span class="token operator">&lt;</span>registry-url<span class="token operator">></span> \    --docker-username<span class="token operator">=</span><span class="token operator">&lt;</span>8번에서-생성한-Access-Key-ID<span class="token operator">></span> \    --docker-password<span class="token operator">=</span><span class="token operator">&lt;</span>8번에서-생성한-Secret-Key<span class="token operator">></span> \    --docker-email<span class="token operator">=</span><span class="token operator">&lt;</span>ncloud-email-주소<span class="token operator">></span>$ kubectl get secrets <span class="token comment" spellcheck="true"># 생성이 잘 됐는지 확인하는 명령어</span><span class="token comment" spellcheck="true"># yaml 템플릿 업로드</span>$ kubectl apply -f deployment.yaml$ kubectl apply -f service.yaml$ kubectl get pods <span class="token comment" spellcheck="true"># status running인지 확인하는 명령어</span><span class="token comment" spellcheck="true"># 클라우드에 배포된 IP주소 확인하기</span><span class="token comment" spellcheck="true"># LoadBalancer의 External IP 주소 = 곧 클라우드에 배포된 서비스 IP 주소</span>$ kubectl get servicesNAME             TYPE           CLUSTER-IP       EXTERNAL-IP                                                              PORT<span class="token punctuation">(</span>S<span class="token punctuation">)</span>        AGEKubernetes       ClusterIP      198.19.128.1     <span class="token operator">&lt;</span>none<span class="token operator">></span>                                                                   443/TCP        40hmy-app-service   LoadBalancer   198.19.255.184   default-my-app-service-cfe50-100590090-dcc6483894d3.kr.lb.naverncp.com   80:30167/TCP   39h<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h2 id="11-배포-페이지-접근해보기"><a href="#11-배포-페이지-접근해보기" class="headerlink" title="11. 배포 페이지 접근해보기"></a>11. 배포 페이지 접근해보기</h2><p>글 업로드 시점 기준으로 서비스 중단해서 접속 안됩니다. 참고하세용<br><img src="./16.png" width="800"></p><h2 id="12-만약-Docker-이미지를-업데이트를-해서-서버에-반영하고-싶다면"><a href="#12-만약-Docker-이미지를-업데이트를-해서-서버에-반영하고-싶다면" class="headerlink" title="12. 만약 Docker 이미지를 업데이트를 해서 서버에 반영하고 싶다면?"></a>12. 만약 Docker 이미지를 업데이트를 해서 서버에 반영하고 싶다면?</h2><p>Kubernetes의 deployment.yaml에 이미 <code>imagePullPolicy</code> 세팅이 <code>Always</code>로 되어있어서 같은 태그를 push했을 때는 자동으로 Kubernetes가 이미지를 추적하여 업데이트를 할 것이다.<br>다만 사람마다 태그 규칙이 다르며, 이 때문에 tag 버전이 업데이트 된 이미지를 업로드를 한다면 Kubernetes가 알아차리지 못하니 우리가 알려줘야 한다.</p><p>다음은 kubernets에게 새로운 container image가 생겼다는 것을 알려주는 작업이다.</p><ol><li><p><code>deployment.yaml</code> 수정</p><pre class="line-numbers language-yaml"><code class="language-yaml"><span class="token comment" spellcheck="true"># deployment.yaml</span><span class="token key atrule">apiVersion</span><span class="token punctuation">:</span> apps/v1<span class="token key atrule">kind</span><span class="token punctuation">:</span> Deployment<span class="token key atrule">metadata</span><span class="token punctuation">:</span>  <span class="token key atrule">name</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app<span class="token punctuation">-</span>deployment  <span class="token key atrule">namespace</span><span class="token punctuation">:</span> default<span class="token key atrule">spec</span><span class="token punctuation">:</span> <span class="token punctuation">...</span> <span class="token key atrule">spec</span><span class="token punctuation">:</span>   <span class="token key atrule">containers</span><span class="token punctuation">:</span>   <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> my<span class="token punctuation">-</span>app     <span class="token key atrule">image</span><span class="token punctuation">:</span> &lt;registry<span class="token punctuation">-</span>url<span class="token punctuation">></span>/&lt;repository<span class="token punctuation">-</span>name<span class="token punctuation">></span><span class="token punctuation">:</span>&lt;tag<span class="token punctuation">></span> <span class="token comment" spellcheck="true"># tag에 맞춰 수정</span><span class="token punctuation">...</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>deployment 서비스 재시작</p><pre class="line-numbers language-bash"><code class="language-bash">kubectl rollout restart deployment <span class="token operator">&lt;</span>deployment.yaml의 metadata.name<span class="token operator">></span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li></ol>]]></content>
      
      
      <categories>
          
          <category> ☁️ Cloud </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Container </tag>
            
            <tag> Network </tag>
            
            <tag> Docker </tag>
            
            <tag> Cloud </tag>
            
            <tag> NCP </tag>
            
            <tag> VPC </tag>
            
            <tag> Kubernetes </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 11월 오픈소스 소식지 (2): FindMy Flipper, shadPS4, Isaiah, Javascript 날짜 라이브러리 수정, Ruby 공식 문서 업데이트, ChartDB</title>
      <link href="/2024/11/25/OpenSource/2411(2)/"/>
      <url>/2024/11/25/OpenSource/2411(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="FindMy-Flipper-AirTag-및-SmartTag-에뮬레이터"><a href="#FindMy-Flipper-AirTag-및-SmartTag-에뮬레이터" class="headerlink" title="FindMy Flipper: AirTag 및 SmartTag 에뮬레이터"></a>FindMy Flipper: AirTag 및 SmartTag 에뮬레이터</h2><ul><li>Repository: <a href="https://github.com/MatthewKuKanich/FindMyFlipper">https://github.com/MatthewKuKanich/FindMyFlipper</a></li><li>FlipperZero의 블루투스 기능을 향상시켜 Apple AirTage, Samsung SmartTag, Tile Tracker를 애뮬레이트할 수 있는 오픈 소스</li><li>계정 차단을 초래할 수 있는 보안이 취약한 iCloud 인증 라이브러리와 관련해서 우려가 제기됨</li><li>보안 및 프라이버시 중시자들 사이에서 관심을 받고 있음</li></ul><br><h2 id="shadPS4-Windows-Linux-MacOS용-PlayStation-4-에뮬레이터"><a href="#shadPS4-Windows-Linux-MacOS용-PlayStation-4-에뮬레이터" class="headerlink" title="shadPS4: Windows, Linux, MacOS용 PlayStation 4 에뮬레이터"></a>shadPS4: Windows, Linux, MacOS용 PlayStation 4 에뮬레이터</h2><img src="./1.png" width="300"><ul><li>Homepage: <a href="https://shadps4.net/">https://shadps4.net/</a></li><li>Repository: <a href="https://github.com/shadps4-emu/shadPS4">https://github.com/shadps4-emu/shadPS4</a></li><li>C++로 작성된 Windows, Linux, macOS용 초기 단계의 PlayStation 4 에뮬레이터</li><li>현재 언더테일, 디스맨틀 같은 게임을 지원하고 있으며, PS4 게임을 Steam Deck 같은 기기에서 플레이할 가능성에 주목을 받고 있음</li><li>셰이더 재컴파일 및 Direct3D와 같은 기술적 도전이 필요한 상황임</li></ul><br><h2 id="Isaiah-Docker-리소스-관리를-위한-자체-호스팅-앱-오픈소스"><a href="#Isaiah-Docker-리소스-관리를-위한-자체-호스팅-앱-오픈소스" class="headerlink" title="Isaiah: Docker 리소스 관리를 위한 자체 호스팅 앱 오픈소스"></a>Isaiah: Docker 리소스 관리를 위한 자체 호스팅 앱 오픈소스</h2><img src="./2.png" width="300"><ul><li>Repository: <a href="https://github.com/will-moss/isaiah">https://github.com/will-moss/isaiah</a></li><li>대량 업데이트, 실시간 로그, 셸 엑세스 및 Docker Hub 통합 기능 제공</li><li>배포 옵션에는 Docker, Docker Compose, 독립 실행형 애플리케이션으로 사용할 수 있음</li></ul><br><h2 id="Javascript-드디어-날짜가-수정됩니다"><a href="#Javascript-드디어-날짜가-수정됩니다" class="headerlink" title="Javascript: 드디어 날짜가 수정됩니다!!"></a>Javascript: 드디어 날짜가 수정됩니다!!</h2><img src="./3.png" width="300"><ul><li>DST 변화를 고려하여 정확한 날짜 표현을 보장하며, 다양한 달력 시스템을 지원할 계획</li><li>이 때 사용되는 새로운 API는 <code>Temporal.ZonedDateTime</code></li><li>기존 시스템과의 호환성을 해결하는 것을 제일 우선시 하고 있음</li></ul><br><h2 id="Ruby-공식-문서가-새로-업데이트-되었지만"><a href="#Ruby-공식-문서가-새로-업데이트-되었지만" class="headerlink" title="Ruby: 공식 문서가 새로 업데이트 되었지만.."></a>Ruby: 공식 문서가 새로 업데이트 되었지만..</h2><img src="./4.svg" width="300"><ul><li>새로운 디자인으로 업데이트 되었으나 반응이 엇갈리고 있음</li><li>전반적으로 모바일 가독성이 떨어지며 여백이 너무 많고, 글꼭 가독성이 떨어진다는 피드백이 압도적임</li><li>또한 빨간색 외에 녹색 색상을 배치함으로써 비판을 받고 있음</li></ul><br><h2 id="ChartDB-무료-오픈소스-데이터베이스-설계-편집기"><a href="#ChartDB-무료-오픈소스-데이터베이스-설계-편집기" class="headerlink" title="ChartDB: 무료 오픈소스 데이터베이스 설계 편집기"></a>ChartDB: 무료 오픈소스 데이터베이스 설계 편집기</h2><img src="./5.png" width="500"><ul><li>Homepage: <a href="https://chartdb.io/">https://chartdb.io/</a></li><li>Repository: <a href="https://github.com/chartdb/chartdb">https://github.com/chartdb/chartdb</a></li><li>데이터베이스 다이어그램을 만드는데 유용한 무료 오픈소스 데이터베이스 설계 편집기</li><li>PostgreSQL, MySQL, SQL Server, SQLite, MariaDB 등의 DBMS를 지원</li><li>또한 즉각적인 스키마 가져오기 및 AI 생성 DDL(데이터 정의 언어) 기능 제공</li><li>자동 다이어그램 생성 및 협업 기능을 추가하는 것을 목표하고 있음</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[TIPS] Mermaid 명령어로 Diagram 그리기</title>
      <link href="/2024/11/23/Tips/Tool/"/>
      <url>/2024/11/23/Tips/Tool/</url>
      
        <content type="html"><![CDATA[<p>프로젝트를 하다보면 flow chart나 diagram을 그려야 하는데, 이게 여간 귀찮은 일이 아닐 수 없다.<br>빠르고 간단하게 그리고 싶은 분들은 Mermaid 명령어로 그려보는걸 추천한다.</p><h2 id="Mermaid"><a href="#Mermaid" class="headerlink" title="Mermaid"></a><a href="https://mermaid.js.org/">Mermaid</a></h2><img src="./3.png" width="150"><p>Markdown(마크다운) 명령어로 diagram을 그릴 수 있는 툴이다.<br>압도적인 점유율을 자랑하는 우리의 Github에서는 이 문법을 지원하기 때문에, README.md파일 같은 곳에서 작성해두면 내용을 시각하하여 볼 수 있는 장점이 있다.</p><h2 id="Mermaid-ChatGPT로-간단하게-만들기"><a href="#Mermaid-ChatGPT로-간단하게-만들기" class="headerlink" title="Mermaid + ChatGPT로 간단하게 만들기"></a>Mermaid + ChatGPT로 간단하게 만들기</h2><p>사용법을 공부해서 적용하면 되지만 아무래도 어떤 관계인지 정리를 해야하니 머리가 여간 복잡할 수 밖에 없다…<br>따라서 21세기 최고의 도구인 AI를 이용해보도록 하자.</p><ol><li><p><a href="https://chatgpt.com/">ChatGPT</a>에 어떤 그림을 그릴지 설명한다. 이 때 mermaid 문법으로 써달라고 요청하면 예쁘게 뽑아준다. ctrl+c를 해준다.</p><img src="./1.png" width="600"></li><li><p><a href="https://mermaid.live/edit">Mermaid Live Editor</a>에 접속해서 ctrl+v를 해준다.</p><img src="./2.png" width="600"></li></ol>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Diagram </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Docker 정리</title>
      <link href="/2024/11/11/DevOps/Docker/"/>
      <url>/2024/11/11/DevOps/Docker/</url>
      
        <content type="html"><![CDATA[<p>이 글을 읽는 사람은 먼저 <a href="https://ruby-kim.github.io/2024/07/12/DevOps/Container/">Container 개념</a>부터 정리하고 읽는 것을 추천한다.</p><p>Docker는 컨테이너 기반의 애플리케이션 개발, 배포, 실행을 자동화하는 오픈소스로 대부분의 기업들에서 컨테이너 관련 기술로 채택하는 기술이다.</p><h2 id="1-Docker-개념"><a href="#1-Docker-개념" class="headerlink" title="1. Docker 개념"></a>1. Docker 개념</h2><h3 id="Docker-Image"><a href="#Docker-Image" class="headerlink" title="Docker Image"></a>Docker Image</h3><ul><li>컨테이너를 실행하기 위한 읽기 전용 템플릿</li><li>애플리케이션과 실행 환경 (라이브러리, 의존성) 포함</li><li>이미지 빌드를 위해서는 <code>Dockerfile</code> 스크립트 파일이 필요: 단계별로 애플리케이션 설치 및 환경 설정 정의</li></ul><h3 id="Docker-Container"><a href="#Docker-Container" class="headerlink" title="Docker Container"></a>Docker Container</h3><ul><li>이미지에서 생성된 실행 가능한 인스턴스</li><li>애플리케이션과 환경이 실행되는 독립적인 단위</li></ul><h3 id="Docker-Registry"><a href="#Docker-Registry" class="headerlink" title="Docker Registry"></a>Docker Registry</h3><ul><li>이미지 저장소 (ex. Docker Hub, AWS ECR, GCP Container Registry 등 포함)</li></ul><h2 id="2-Docker-명령어-정리"><a href="#2-Docker-명령어-정리" class="headerlink" title="2. Docker 명령어 정리"></a>2. Docker 명령어 정리</h2><h3 id="1-Docker-설치-확인"><a href="#1-Docker-설치-확인" class="headerlink" title="1) Docker 설치 확인"></a>1) Docker 설치 확인</h3><ul><li><p>version 확인: <code>docker --version</code></p><pre class="line-numbers language-bash"><code class="language-bash">$ docker --versionDocker version 20.10.23, build 7155243<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><br></li><li><p>info 확인: <code>docker info</code></p><pre class="line-numbers language-bash"><code class="language-bash">$ docker infoClient:  Context:    default  Debug Mode: <span class="token boolean">false</span>  Plugins:  buildx: Docker Buildx <span class="token punctuation">(</span>Docker Inc., v0.10.3<span class="token punctuation">)</span>  compose: Docker Compose <span class="token punctuation">(</span>Docker Inc., v2.15.1<span class="token punctuation">)</span>  dev: Docker Dev Environments <span class="token punctuation">(</span>Docker Inc., v0.1.0<span class="token punctuation">)</span>  extension: Manages Docker extensions <span class="token punctuation">(</span>Docker Inc., v0.2.18<span class="token punctuation">)</span>  sbom: View the packaged-based Software Bill Of Materials <span class="token punctuation">(</span>SBOM<span class="token punctuation">)</span> <span class="token keyword">for</span> an image <span class="token punctuation">(</span>Anchore Inc., 0.6.0<span class="token punctuation">)</span>  scan: Docker Scan <span class="token punctuation">(</span>Docker Inc., v0.25.0<span class="token punctuation">)</span>  scout: Command line tool <span class="token keyword">for</span> Docker Scout <span class="token punctuation">(</span>Docker Inc., v0.6.0<span class="token punctuation">)</span>Server:  Containers: 4    Running: 0    Paused: 0    Stopped: 4  Images: 14  Server Version: 20.10.23  Storage Driver: overlay2    Backing Filesystem: extfs    Supports d_type: <span class="token boolean">true</span>    Native Overlay Diff: <span class="token boolean">true</span>    userxattr: <span class="token boolean">false</span>  Logging Driver: json-file  Cgroup Driver: cgroupfs  Cgroup Version: 2  Plugins:    Volume: local    Network: bridge host ipvlan macvlan null overlay    Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog  Swarm: inactive  Runtimes: io.containerd.runc.v2 io.containerd.runtime.v1.linux runc  Default Runtime: runc  Init Binary: docker-init  containerd version: 2456e983eb9e37e47538f59ea18f2043c9a73640  runc version: v1.1.4-0-g5fd4c4d  init version: de40ad0  Security Options:    seccomp      Profile: default    cgroupns  Kernel Version: 5.15.49-linuxkit  Operating System: Docker Desktop  OSType: linux  Architecture: aarch64  CPUs: 4  Total Memory: 7.668GiB  Name: docker-desktop  ID: 276G:OJLG:WHVN:JV37:CX4G:VAC2:K2AY:TJPC:M2RA:D5NR:DWTP:HU2G  Docker Root Dir: /var/lib/docker  Debug Mode: <span class="token boolean">false</span>  HTTP Proxy: http.docker.internal:3128  HTTPS Proxy: http.docker.internal:3128  No Proxy: hubproxy.docker.internal  Registry: https://index.docker.io/v1/  Labels:  Experimental: <span class="token boolean">false</span>  Insecure Registries:    hubproxy.docker.internal:5000    127.0.0.0/8  Live Restore Enabled: <span class="token boolean">false</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul><h3 id="2-Docker-이미지-관리"><a href="#2-Docker-이미지-관리" class="headerlink" title="2) Docker 이미지 관리"></a>2) Docker 이미지 관리</h3><ul><li><p>Docker Hub에서 이미지 검색: <code>docker search &lt;이미지명&gt;</code></p><pre class="line-numbers language-bash"><code class="language-bash">$ docker search <span class="token function">test</span>NAME                           DESCRIPTION                                     STARS     OFFICIAL   AUTOMATEDimmcantation/test              Immcantation unit <span class="token function">test</span> image                    1                    pachyderm/test                                                                 0                    islandora/test                 This image is exclusively used <span class="token keyword">for</span> manually …   0                    okteto/test                                                                    0                    amir20/test                                                                    0                    kubeovn/test                                                                   0                    voxpupuli/test                 Container repo to <span class="token function">test</span> container build and V…   0                    corpusops/test                                                                 0                    ratelimitpreview/test                                                          0                    test/testimage20130921141042                                                   0                    test/testimage20130919235830                                                   0                    test/testimage20130921221004                                                   0                    test/testimage20130919223925                                                   0                    test/testimage20130921190956                                                   0                    test/testimage20130922032014                                                   0                    doct15/test                                                                    0                    flypenguin/test                A <span class="token function">test</span> container <span class="token keyword">for</span> <span class="token punctuation">..</span>. k8s :<span class="token punctuation">)</span>                 0                    <span class="token punctuation">[</span>OK<span class="token punctuation">]</span>brimworks/test                                                                 0                    flvranckx/test                 <span class="token function">test</span>                                            0                    chiphwang/test                                                                 0                    divyag2411/test                                                                0                    realmaccess/test                                                               0                    devopsatburst/test                                                             0                    hopar/test                     <span class="token function">test</span> descr                                      0                    femycatherine/test             <span class="token function">test</span>                                            0<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br></li><li><p>특정 이미지를 로컬로 다운로드: <code>docker pull &lt;이미지명&gt;:&lt;태그&gt;</code></p></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker pull nginx:latest  latest: Pulling from library/nginxDigest: sha256:bc5eac5eafc581aeda3008b4b1f07ebba230de2f27d47767129a6a905c84f470Status: Image is up to <span class="token function">date</span> <span class="token keyword">for</span> nginx:latestdocker.io/library/nginx:latest<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>로컬에 저장된 이미지 나열: <code>docker images</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker imagesREPOSITORY                                    TAG         IMAGE ID       CREATED       SIZEdjango-app                                    latest      cbb6dff7c55a   2 days ago    2.12GBpostgres                                      15-alpine   c558f49f952d   3 days ago    256MBpython                                        3.12-slim   e359a8be29f6   5 weeks ago   150MBredis                                         alpine      4a6fa001a1b0   7 weeks ago   48.3MBnginx                                         latest      7a3f95c07812   7 weeks ago   197MB<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>로컬에 저장된 이미지 삭제: `docker rmi &lt;이미지ID&gt;</li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker imagesREPOSITORY                                    TAG         IMAGE ID       CREATED       SIZEpython                                        latest      62639b6c3f3e   5 weeks ago   1.02GB$ docker rmi 626 <span class="token comment" spellcheck="true"># 전부 다 안써도 특정 이미지인지 인지할 수 있으면 됨</span>Untagged: python:latestUntagged: python@sha256:bc78d3c007f86dbb87d711b8b082d9d564b8025487e780d24ccb8581d83ef8b0Deleted: sha256:62639b6c3f3e77ebbbf3f18802d08351636f8dd6e0a94d1b225e9f5dc1c88044Deleted: sha256:476e07a0f38bafed4e474712d0e3d37dbcb7ff90d06e17bb8d1fc4b2f14e7d35Deleted: sha256:2c190c9407be9104a7d2b741a4d91364bf2be04b81784dddaf13c9f188562e4dDeleted: sha256:e00fefe3633c24a34f09149c5f3dbc2330630a365ffedff052f988c3585a1ee2Deleted: sha256:c6d7f5d3800ca99cabcb02e8b21872f3a09cebe3973f5c98ebb3840435e0fd0fDeleted: sha256:d4a8223e1c6c5461929b8b25b9bdb78d194803d9ca62f94f43df43d8e4b17e47Deleted: sha256:a354dc33fe33b2600cf4fb75dd3ad14d4e0eecb77da53b75d7aefa7487e3bd17Deleted: sha256:ec8ae7dad7aba50e0f8bff1dc969d34d3584fb7ada6ce9948dad83e95939b5cc<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="3-Docker-컨테이너-관리"><a href="#3-Docker-컨테이너-관리" class="headerlink" title="3) Docker 컨테이너 관리"></a>3) Docker 컨테이너 관리</h3><ul><li>컨테이너 실행: <code>docker run &lt;컨테이너명&gt; -p &lt;호스트포트&gt;:&lt;컨테이너포트&gt; &lt;이미지명&gt; &lt;option: 컨테이너 내부 명령어&gt;</code><ul><li><code>-d</code>: 백그라운드 실행</li><li><code>--name &lt;컨테이너명&gt;</code>: 컨테이너 이름 설정</li><li><code>-p &lt;호스트포트&gt;:&lt;컨테이너포트&gt;</code>: 포트 매핑</li><li><code>-e &lt;변수=값&gt;</code>: 환경변수</li></ul></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker imagesREPOSITORY                                    TAG         IMAGE ID       CREATED       SIZEpython                                        latest      62639b6c3f3e   5 weeks ago   1.02GBpython                                        3.12-slim   e359a8be29f6   5 weeks ago   150MB<span class="token comment" spellcheck="true"># my-python이라는 컨테이너명으로</span><span class="token comment" spellcheck="true"># 컨테이너 포트가 56인걸 호스트포트 1234로 연결</span><span class="token comment" spellcheck="true"># 이미지명은 python이며, 백그라운드에서 실행</span>$ docker run -d --name my-python -p 1234:56 pythonb7711eb537add805b8628277d4c677dd3d91e009d3b64bbac81e60fa84f53928<span class="token comment" spellcheck="true"># 환경변수가 Foo를 설정하고 값을 bar로 설정</span><span class="token comment" spellcheck="true"># 컨테이너 실행 이미지는 python:3.12-slim</span><span class="token comment" spellcheck="true"># 컨테이너 내부 실행 명령어는 env (컨테이너 내부의 모든 환경변수 출력하는 unix 명령어)</span>$ docker run -e FOO<span class="token operator">=</span>bar python:3.12-slim <span class="token function">env</span>  PATH<span class="token operator">=</span>/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/binHOSTNAME<span class="token operator">=</span>b20562c470beFOO<span class="token operator">=</span>barLANG<span class="token operator">=</span>C.UTF-8GPG_KEY<span class="token operator">=</span>7169605F62C751356D054A26A821E680E5FA6305PYTHON_VERSION<span class="token operator">=</span>3.12.7PYTHON_SHA256<span class="token operator">=</span>24887b92e2afd4a2ac602419ad4b596372f67ac9b077190f459aba390faf5550HOME<span class="token operator">=</span>/root<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>실행 중인 컨테이너 확인: <code>docker ps</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker imagesREPOSITORY                                    TAG         IMAGE ID       CREATED       SIZEdjango-app                                    latest      cbb6dff7c55a   2 days ago    2.12GB$ docker run -d django-app:latest275bdef89cc40711dad78833d7b5aeb27f75b4e423bea1279564a99dece45178$ docker <span class="token function">ps</span>CONTAINER ID   IMAGE               COMMAND                  CREATED         STATUS         PORTS      NAMES275bdef89cc4   django-app:latest   <span class="token string">"/bin/bash -c 'sourc…"</span>   3 seconds ago   Up 2 seconds   8000/tcp   relaxed_euclid<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>모든 컨테이너 확인 (중단된 컨테이너 포함): <code>docker ps -a</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker <span class="token function">ps</span> -aCONTAINER ID   IMAGE                  COMMAND                  CREATED              STATUS                      PORTS      NAMES275bdef89cc4   django-app:latest      <span class="token string">"/bin/bash -c 'sourc…"</span>   About a minute ago   Up About a minute           8000/tcp   relaxed_euclidf6d665ae418b   python:3.12-slim       <span class="token string">"python3"</span>                2 minutes ago        Exited <span class="token punctuation">(</span>0<span class="token punctuation">)</span> 2 minutes ago               intelligent_easley7c72d2379677   python:3.12-slim       <span class="token string">"-d"</span>                     2 minutes ago       <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>컨테이너 내부 접속: `docker exec -it &lt;컨테이너ID&gt; /bin/bash</li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker <span class="token function">ps</span>CONTAINER ID   IMAGE               COMMAND                  CREATED         STATUS         PORTS      NAMES275bdef89cc4   django-app:latest   <span class="token string">"/bin/bash -c 'sourc…"</span>   7 minutes ago   Up 7 minutes   8000/tcp   relaxed_euclid$ docker <span class="token function">exec</span> -it 275bdef89cc4 /bin/bash$ root@275bdef89cc4:/app<span class="token comment" spellcheck="true"># </span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>실행 중인 컨테이너 중지: <code>docker stop &lt;컨테이너ID&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker <span class="token function">ps</span>CONTAINER ID   IMAGE               COMMAND                  CREATED         STATUS         PORTS      NAMES275bdef89cc4   django-app:latest   <span class="token string">"/bin/bash -c 'sourc…"</span>   8 minutes ago   Up 8 minutes   8000/tcp   relaxed_euclid$ docker stop 275bdef89cc4 275bdef89cc4$ docker <span class="token function">ps</span>CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES$ <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>중단된 컨테이너 시작: <code>docker start &lt;컨테이너ID&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker <span class="token function">ps</span> <span class="token comment" spellcheck="true"># 실행 중인 컨테이너 없음</span>CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES$ docker <span class="token function">ps</span> -a <span class="token comment" spellcheck="true"># 중단된 컨테이너를 확인해봄</span>CONTAINER ID   IMAGE                  COMMAND                  CREATED          STATUS                      PORTS     NAMES275bdef89cc4   django-app:latest      <span class="token string">"/bin/bash -c 'sourc…"</span>   10 minutes ago   Exited <span class="token punctuation">(</span>0<span class="token punctuation">)</span> 2 minutes ago              relaxed_euclid$ docker start 275bdef89cc4 <span class="token comment" spellcheck="true"># 최근에 중단된거 재시작</span>275bdef89cc4$ <span class="token variable">$docker</span> <span class="token function">ps</span> CONTAINER ID   IMAGE               COMMAND                  CREATED          STATUS         PORTS      NAMES275bdef89cc4   django-app:latest   <span class="token string">"/bin/bash -c 'sourc…"</span>   11 minutes ago   Up 3 seconds   8000/tcp   relaxed_euclid<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>중단된 컨테이너 삭제: <code>docker rm &lt;컨테이너ID&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker <span class="token function">ps</span> -aCONTAINER ID   IMAGE                  COMMAND                  CREATED          STATUS                      PORTS     NAMES275bdef89cc4   django-app:latest      <span class="token string">"/bin/bash -c 'sourc…"</span>   15 minutes ago   Exited <span class="token punctuation">(</span>0<span class="token punctuation">)</span> 4 minutes ago              relaxed_euclidf6d665ae418b   python:3.12-slim       <span class="token string">"python3"</span>                17 minutes ago   Exited <span class="token punctuation">(</span>0<span class="token punctuation">)</span> 17 minutes ago             intelligent_easley7c72d2379677   python:3.12-slim       <span class="token string">"-d"</span>                     17 minutes ago   Created                               adoring_jang$ docker <span class="token function">rm</span> 27 <span class="token comment" spellcheck="true"># ID를 전부 다 쓰지 않아도, 해당 이미지를 찾을 수 있을 만큼만 작성해도 알아서 찾아서 종료함. 여러개 연속으로 쓰면 모두 타겟 잡아서 종료</span>27$ docker <span class="token function">ps</span> -aCONTAINER ID   IMAGE                  COMMAND                  CREATED          STATUS                      PORTS     NAMESf6d665ae418b   python:3.12-slim       <span class="token string">"python3"</span>                17 minutes ago   Exited <span class="token punctuation">(</span>0<span class="token punctuation">)</span> 17 minutes ago             intelligent_easley7c72d2379677   python:3.12-slim       <span class="token string">"-d"</span>                     17 minutes ago   Created                               adoring_jang<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="4-Docker-컨테이너-로그-확인"><a href="#4-Docker-컨테이너-로그-확인" class="headerlink" title="4) Docker 컨테이너 로그 확인"></a>4) Docker 컨테이너 로그 확인</h3><ul><li>컨테이너 실행 로그 출력: <code>docker logs &lt;컨테이너ID&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker imagesREPOSITORY                                    TAG         IMAGE ID       CREATED       SIZEdjango-app                                    latest      cbb6dff7c55a   2 days ago    2.12GB$ docker run -d django-appbdb4eb9c03161d8427278f3cfa5e96505d52d0aa76064ad0145ee88506cdbd5b$ docker <span class="token function">ps</span>CONTAINER ID   IMAGE        COMMAND                  CREATED         STATUS         PORTS      NAMESbdb4eb9c0316   django-app   <span class="token string">"/bin/bash -c 'sourc…"</span>   5 seconds ago   Up 4 seconds   8000/tcp   awesome_mccarthy$ docker logs bdb4Applying database migrations<span class="token punctuation">..</span>.Collecting static files<span class="token punctuation">..</span>.168 static files copied to <span class="token string">'/app/src/static'</span><span class="token keyword">.</span>Starting Gunicorn<span class="token punctuation">..</span>.<span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>1<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Starting gunicorn 23.0.0<span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>1<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Listening at: http://0.0.0.0:8000 <span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>1<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Using worker: <span class="token function">sync</span><span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>609<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Booting worker with pid: 609<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="5-Docker-네트워크-관리"><a href="#5-Docker-네트워크-관리" class="headerlink" title="5) Docker 네트워크 관리"></a>5) Docker 네트워크 관리</h3><ul><li>네트워크 생성: <code>docker network create &lt;네트워크명&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker network create mynw beb1bf647de5e6a2ea2debcd45a095b2c94b217a0c645e05ff33fd122ffdfe8a<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><br><ul><li>컨테이너를 특정 네트워크에 연결: <code>docker run --name &lt;컨테이너명&gt; --network &lt;네트워크명&gt; &lt;이미지명&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker run -d django-appb4aa6fefecb97198ea2f7824f43e7eeb62ec3f065722b84a2d34ff9e1f834708$ docker run --name b4aa --network mynwApplying database migrations<span class="token punctuation">..</span>.Collecting static files<span class="token punctuation">..</span>.168 static files copied to <span class="token string">'/app/src/static'</span><span class="token keyword">.</span>Starting Gunicorn<span class="token punctuation">..</span>.<span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>1<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Starting gunicorn 23.0.0<span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>1<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Listening at: http://0.0.0.0:8000 <span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>1<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Using worker: <span class="token function">sync</span><span class="token punctuation">[</span>2024-11-11 17:32:11 +0000<span class="token punctuation">]</span> <span class="token punctuation">[</span>609<span class="token punctuation">]</span> <span class="token punctuation">[</span>INFO<span class="token punctuation">]</span> Booting worker with pid: 609<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>Docker 네트워크 리스트 확인: <code>docker network ls</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker network <span class="token function">ls</span>NETWORK ID     NAME           DRIVER    SCOPE63d6218decce   bridge         bridge    local8207a8266c78   host           host      localbeb1bf647de5   mynw           bridge    local5db98f6636e1   none           null      local<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>사용자 정의 네트워크 삭제: <code>docker network rm &lt;네트워크명&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker network <span class="token function">ls</span>NETWORK ID     NAME           DRIVER    SCOPE63d6218decce   bridge         bridge    local8207a8266c78   host           host      localbeb1bf647de5   mynw           bridge    local5db98f6636e1   none           null      local$ docker network <span class="token function">rm</span> mynwmynw$ docker network <span class="token function">ls</span>NETWORK ID     NAME           DRIVER    SCOPE63d6218decce   bridge         bridge    local8207a8266c78   host           host      local5db98f6636e1   none           null      local$ docker network <span class="token function">rm</span> bridge <span class="token comment" spellcheck="true"># 사전 정의된 것에 대해서는 오류 발생</span>Error response from daemon: bridge is a pre-defined network and cannot be removed<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="6-Docker-Volume-관리"><a href="#6-Docker-Volume-관리" class="headerlink" title="6) Docker Volume 관리"></a>6) Docker Volume 관리</h3><ul><li>데이터를 저장할 볼륨 생성: <code>docker volume create &lt;볼륨명&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker volume create myvomyvo<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre><br><ul><li>볼륨을 컨테이너에 마운트: <code>docker run -d --name &lt;컨테이너명&gt; -v &lt;볼륨명&gt;:&lt;컨테이너경로&gt; &lt;이미지명&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker imagesREPOSITORY   TAG       IMAGE ID       CREATED       SIZEnginx        latest    7a3f95c07812   7 weeks ago   197MB$ docker run -d --name my-nginx -v myvo:/app/data nginx007310e795a8096434dac9a75b83e238c0a698e36f660fe0e4552cf4b2d34df5<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>생성된 볼륨 리스트 확인: <code>docker volume ls</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker volume <span class="token function">ls</span>docker volume <span class="token function">ls</span>DRIVER    VOLUME NAMElocal     back_media_volumelocal     back_postgres_datalocal     back_static_volumelocal     myvo<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><br><ul><li>특정 볼륨 삭제: <code>docker volume rm &lt;볼륨명&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker volume <span class="token function">ls</span>DRIVER    VOLUME NAMElocal     back_media_volumelocal     back_postgres_datalocal     back_static_volumelocal     myvo$ docker volume <span class="token function">rm</span> back_postgres_databack_postgres_data<span class="token comment" spellcheck="true"># 이미 볼륨이 컨테이너에 마운트 되어있으면 삭제 불가능</span>$ docker <span class="token function">ps</span> -aCONTAINER ID   IMAGE     COMMAND                  CREATED         STATUS         PORTS     NAMES007310e795a8   nginx     <span class="token string">"/docker-entrypoint.…"</span>   4 minutes ago   Up 4 minutes   80/tcp    my-nginx  <span class="token comment" spellcheck="true"># 여기에 myvo가 마운트 되어있음</span>$ docker volume <span class="token function">rm</span> myvoError response from daemon: remove myvo: volume is <span class="token keyword">in</span> use - <span class="token punctuation">[</span>007310e795a8096434dac9a75b83e238c0a698e36f660fe0e4552cf4b2d34df5<span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="7-Dockerfile로-이미지-빌드"><a href="#7-Dockerfile로-이미지-빌드" class="headerlink" title="7) Dockerfile로 이미지 빌드"></a>7) Dockerfile로 이미지 빌드</h3><ul><li><code>docker build -t &lt;이미지명&gt;:&lt;태그&gt; &lt;Dockerfile 경로&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">$ docker build -t my-app:1.0 <span class="token keyword">.</span><span class="token punctuation">[</span>+<span class="token punctuation">]</span> Building 0.0s <span class="token punctuation">(</span>2/2<span class="token punctuation">)</span> FINISHED <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">[</span>internal<span class="token punctuation">]</span> load build definition from Dockerfile                                              0.0s  <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">=</span><span class="token operator">></span> transferring dockerfile:  2B                                                               0.0s  <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">[</span>internal<span class="token punctuation">]</span> load <span class="token keyword">.</span> dockerignore                                                                0.0s  <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">=</span><span class="token operator">></span> transferring context: 2B                                                                   0.0s  <span class="token operator">=</span><span class="token operator">></span> exporting to image                                                                            0.0s  <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">=</span><span class="token operator">></span> exporting layers                                                                           0.0s  <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">=</span><span class="token operator">></span> writing image sha56:84b400a8fb9307f2ddc1dc29eef33c2bb664e2bdac75449d1f14e4cabaeb429        0.0s  <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">=</span><span class="token operator">></span> naming to docker.io/library/my-app                                                         0.0s  <span class="token comment" spellcheck="true"># 플랫폼이 다를 경우에는 --platform 명령어를 사용할 것</span> $ docker build --platform linux/amd64,linux/arm64 -t my-app:1.0 <span class="token keyword">.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><h3 id="8-Docker-레지스트리"><a href="#8-Docker-레지스트리" class="headerlink" title="8) Docker 레지스트리"></a>8) Docker 레지스트리</h3><ul><li>이미지 태그 지정: <code>docker tag &lt;이미지명&gt;:&lt;태그&gt; &lt;레지스트리URL&gt;/&lt;이미지명&gt;:&lt;태그&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">docker tag my-app:1.0 my-registry-url/my-app:1.0<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><br><ul><li>이미지 푸시: <code>docker push &lt;레지스트리URL&gt;/&lt;이미지명&gt;:&lt;태그&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">docker push my-registry-url/my-app:1.0<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><br><ul><li>이미지 풀: <code>docker pull &lt;레지스트리URL&gt;/&lt;이미지명&gt;:&lt;태그&gt;</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">docker pull my-registry-ur/my-app:1.0<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="9-Docker-Compose"><a href="#9-Docker-Compose" class="headerlink" title="9) Docker Compose"></a>9) Docker Compose</h3><ul><li><strong>docker-compose.yaml</strong> 파일 기반으로 컨테이너 실행: <code>docker-compose up</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">docker-compose up<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><br><ul><li>실행 중인 docker-compose 서비스를 종료하고 네트웤, 볼륨 제거: <code>docker-compose down</code></li></ul><pre class="line-numbers language-bash"><code class="language-bash">docker-compose down<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><h3 id="10-기타-유용한-명령어"><a href="#10-기타-유용한-명령어" class="headerlink" title="10) 기타 유용한 명령어"></a>10) 기타 유용한 명령어</h3><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># 컨테이너 상세정보 출력</span>docker inspect <span class="token operator">&lt;</span>컨테이너ID<span class="token operator">></span><span class="token comment" spellcheck="true"># 로컬 이미지 크기 확인</span>docker image <span class="token function">ls</span> --format <span class="token string">"{{.Repository}}: {{.Size}}"</span><span class="token comment" spellcheck="true"># docker가 사용하는 디스크 용량 확인</span>docker system <span class="token function">df</span><span class="token comment" spellcheck="true"># 캐시 정리</span>docker system prune<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>]]></content>
      
      
      <categories>
          
          <category> ♼ DevOps </category>
          
      </categories>
      
      
        <tags>
            
            <tag> DevOps </tag>
            
            <tag> Container </tag>
            
            <tag> Docker </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 11월 오픈소스 소식지 (1): Npm, OTranscribe, Verso, Blitz, PGlite, AudioFlux</title>
      <link href="/2024/11/09/OpenSource/2411(1)/"/>
      <url>/2024/11/09/OpenSource/2411(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Npm-2024년-2-8월에-새로-게시된-npm-패키지의-약-70-가-스팸임"><a href="#Npm-2024년-2-8월에-새로-게시된-npm-패키지의-약-70-가-스팸임" class="headerlink" title="Npm: 2024년 2-8월에 새로 게시된 npm 패키지의 약 70%가 스팸임"></a>Npm: 2024년 2-8월에 새로 게시된 npm 패키지의 약 70%가 스팸임</h2><ul><li>2024년 4월, Phylum 연구팀이 오픈 소스 기여에 대해 암호화폐로 보상하는 Tea 프로토콜과 관련된 Npm에서 스팸 패키지의 급증을 확인함</li><li>Npm 검사를 강화하고 사용자 인터페이스를 개선하며, 스팸 패키지 제거 및 계정 차단이 필요함</li></ul><br><h2 id="OTranscribe-오디오-인터뷰-필사-무료-오픈-소스-툴"><a href="#OTranscribe-오디오-인터뷰-필사-무료-오픈-소스-툴" class="headerlink" title="OTranscribe: 오디오 인터뷰 필사 무료 오픈 소스 툴"></a>OTranscribe: 오디오 인터뷰 필사 무료 오픈 소스 툴</h2><img src="./1.png" width="300"><ul><li>Homepage: <a href="https://otranscribe.com/">https://otranscribe.com/</a></li><li>Repository: <a href="https://github.com/otranscribe">https://github.com/otranscribe</a></li><li>AI를 사용하지 않고 오디오 인터뷰를 수동으로 전사하기 위해 설계된 무료 오픈 소스 도구</li><li>자동 저장, 대화형 타임스탬프, 파일을 컴퓨터에 저장하며 전사본을 Markdown, 일반 텍스트, Google Docs로 내보낼 수 있는 기능이 있음</li><li>자동 전사 및 화자 식별, 더 빠른 STT 처리를 위한 로컬 솔루션을 찾는 중</li></ul><br><h2 id="Verso-Servo-웹-엔진을-기반으로-구축된-웹-브라우저"><a href="#Verso-Servo-웹-엔진을-기반으로-구축된-웹-브라우저" class="headerlink" title="Verso: Servo 웹 엔진을 기반으로 구축된 웹 브라우저"></a>Verso: Servo 웹 엔진을 기반으로 구축된 웹 브라우저</h2><img src="./2.gif" width="500"><ul><li>Repository: <a href="https://github.com/versotile-org/verso">https://github.com/versotile-org/verso</a></li><li>Windows, macOS, Linux (Flatpak), 및 Nix에서 설치가 가능함</li><li>다중 창 지원, 다중 프로세스 모드, 모든 플랫폼에서의 샌드박싱, 그리고 Gstreamer 기능 활성화 개발을 계획 중</li></ul><br><h2 id="Blitz-가벼운-모듈식-확장-가능한-웹-렌더러"><a href="#Blitz-가벼운-모듈식-확장-가능한-웹-렌더러" class="headerlink" title="Blitz: 가벼운 모듈식 확장 가능한 웹 렌더러"></a>Blitz: 가벼운 모듈식 확장 가능한 웹 렌더러</h2><img src="./3.png" width="500"><ul><li>Repository: <a href="https://github.com/DioxusLabs/blitz">https://github.com/DioxusLabs/blitz</a></li><li>초기 단계에 있어 프로덕션 환경에서는 권장되지 않음</li><li>Webkit 및 Servo같은 대형 브라우저 엔진에 대한 간단한 대안을 제공하는 것을 목표함</li><li>HTML/CSS를 레이아웃에 사용하는 네이티브 애플리케이션과 같이 전체 브라우저 엔진이 필요하지 않은 사용 사례를 위해 설계됨: 향후 PDF 렌더링 및 더 나은 CSS 지원이 필요함</li></ul><br><h2 id="PGlite-추가-종속성-없이-브라우저-Node-js-Bun에서-Postgres-빌드할-수-있는-라이브러리"><a href="#PGlite-추가-종속성-없이-브라우저-Node-js-Bun에서-Postgres-빌드할-수-있는-라이브러리" class="headerlink" title="PGlite: 추가 종속성 없이 브라우저, Node.js, Bun에서 Postgres 빌드할 수 있는 라이브러리"></a>PGlite: 추가 종속성 없이 브라우저, Node.js, Bun에서 Postgres 빌드할 수 있는 라이브러리</h2><img src="./4.svg" width="300"><ul><li>Homepage: <a href="https://pglite.dev/">https://pglite.dev/</a></li><li>Repository: <a href="https://github.com/electric-sql/pglite">https://github.com/electric-sql/pglite</a></li><li>3MB로 Gzipped되며, pgvector를 포함한 다양한 Postgres 확장을 지원하고, 매우 빠른 쿼리 실행 시간을 자랑하는 반응형 라이브 쿼리 API가 특징임</li><li>PGlite v0.2의 출시가 큰 주목을 받고 있음</li><li>브라우저 측 지속성을 위해 IndexedDB와 OPFS를 지원하며, 향후 다른 언어와 네이티브 C 라이브러리를 지원할 계획</li></ul><br><h2 id="AudioFlux-오디오-및-음악-분석을-위한-C-x2F-C-라이브러리"><a href="#AudioFlux-오디오-및-음악-분석을-위한-C-x2F-C-라이브러리" class="headerlink" title="AudioFlux: 오디오 및 음악 분석을 위한 C/C++ 라이브러리"></a>AudioFlux: 오디오 및 음악 분석을 위한 C/C++ 라이브러리</h2><img src="./5.png" width="300"><ul><li>Repository: <a href="https://github.com/libAudioFlux/audioFlux">https://github.com/libAudioFlux/audioFlux</a></li><li>오디오 및 음악 분석을 위한 딥러닝 도구 라이브러리</li><li>음악 정보 검색(MIR), 자동 음성 인식(ASR), 음악 분류 등을 지원함</li><li>성능이 견고한 것으로 유명하지만 유연성과 GPU 지원 부족으로 딥러닝 애플리케이션에는 덜 이상적</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 10월 오픈소스 소식지 (2): GitOpper, Cardie, Age, rqlite 9.0, Yark, Viking</title>
      <link href="/2024/10/27/OpenSource/2410(2)/"/>
      <url>/2024/10/27/OpenSource/2410(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="GitOpper-Kubernates-환경이-아닌-곳에서-GitOps-도구"><a href="#GitOpper-Kubernates-환경이-아닌-곳에서-GitOps-도구" class="headerlink" title="GitOpper: Kubernates 환경이 아닌 곳에서 GitOps 도구"></a>GitOpper: Kubernates 환경이 아닌 곳에서 GitOps 도구</h2><ul><li>Repository: <a href="https://github.com/miekg/gitopper">https://github.com/miekg/gitopper</a></li><li>배포 워크플로에서 Kubernetes를 사용하지 않는 사용자에게 GitOps 워크플로우를 지원</li><li>롤아웃 추적을 위한 메트릭, 차이 감지, 밴드, 롤백, 카나리 기능 포함</li></ul><br><h2 id="Cardie-오픈-소스-명함-디자인-및-공유-플랫폼"><a href="#Cardie-오픈-소스-명함-디자인-및-공유-플랫폼" class="headerlink" title="Cardie: 오픈 소스 명함 디자인 및 공유 플랫폼"></a>Cardie: 오픈 소스 명함 디자인 및 공유 플랫폼</h2><img src="./1.png" width="300"><ul><li>Homepage: <a href="https://cardie-uwtwy.ondigitalocean.app/">https://cardie-uwtwy.ondigitalocean.app/</a></li><li>Repository: <a href="https://github.com/nfoert/cardie">https://github.com/nfoert/cardie</a></li><li>디지털 명함을 디자인하고 공유할 수 있는 오픈 소스 플랫폼</li><li>향후 인쇄 옵션도 계획 중이며, 계정 생성 없이 테스트할 수 있는 기능과 향상된 보안 조치, 맞춤화 옵션 등을 계획 중</li><li>현재 오픈 알파 단계인 상태</li></ul><br><h2 id="Age-키-설정-옵션이-없는-파일-암호화-Go-라이브러리"><a href="#Age-키-설정-옵션이-없는-파일-암호화-Go-라이브러리" class="headerlink" title="Age: 키, 설정 옵션이 없는 파일 암호화 Go 라이브러리"></a>Age: 키, 설정 옵션이 없는 파일 암호화 Go 라이브러리</h2><img src="./2.svg" width="300"><ul><li>Repository: <a href="https://github.com/FiloSottile/age">https://github.com/FiloSottile/age</a></li><li>하드웨어 PIV 토큰, 암호문으로 보호된 파일, SSH 키, GitHub 사용자에게 암호화하는 기능 등을 지원</li><li>Homebrew, MacPorts, 그리고 Linux 배포판과 Windows용 패키지 관리자 등 다양한 설치 방법을 지원</li><li>GPG/PGP 및 jq와 같은 기존 도구들과 비교하며, Unix 표준으로서의 잠재력을 논의하고 있음</li><li>Signiture같은 기능이 부족하다고 평가되고 있으며, 추가적인 보안 기능을 위해 Kryptor 등의 대안을 언급 중</li></ul><br><h2 id="rqlite-9-0-출시"><a href="#rqlite-9-0-출시" class="headerlink" title="rqlite 9.0 출시"></a>rqlite 9.0 출시</h2><img src="./3.png" width="300"><ul><li>Homepage: <a href="https://philipotoole.com/building-rqlite-9-0-cutting-disk-usage-by-half/">https://philipotoole.com/building-rqlite-9-0-cutting-disk-usage-by-half/</a></li><li>Repository: <a href="https://github.com/rqlite/rqlite">https://github.com/rqlite/rqlite</a></li><li>SQLite와 Raft 합의 알고리즘을 기반으로 구축된 오픈소스 분산 관계형 데이터베이스 관리 시스템(RDBMS)</li><li>다른 분산 데이터베이스인 CockroachDB와 TiDB에 비해 쓰기 처리량이 낮음에도 불구하고, rqlite의 새로운 버전은 Queued Writes와 같은 성능 향상을 도입했음</li><li>이번 버전은 디스크 사용량을 50% 줄임으로써 효율성을 극대화함</li></ul><br><h2 id="Yark-오프라인-UI-Youtube-아카이버"><a href="#Yark-오프라인-UI-Youtube-아카이버" class="headerlink" title="Yark: 오프라인 UI Youtube 아카이버"></a>Yark: 오프라인 UI Youtube 아카이버</h2><ul><li>Repository: <a href="https://github.com/Owez/yark">https://github.com/Owez/yark</a></li><li>사용자가 Youtube 콘텐츠를 로컬에 저장할 수 있도록 도와줌</li><li>대용량 MP4 파일 스트리밍 및 특수 문자가 포함된 파일에 대한 HTTP 서버 요청 처리의 문제가 있음</li><li>실용적인 사용에 있어서는 VLC 또는 Nginx를 사용할 것을 권장</li></ul><br><h2 id="Viking-Server-및-SSH-관리를-위한-오픈-소스-도구"><a href="#Viking-Server-및-SSH-관리를-위한-오픈-소스-도구" class="headerlink" title="Viking: Server 및 SSH 관리를 위한 오픈 소스 도구"></a>Viking: Server 및 SSH 관리를 위한 오픈 소스 도구</h2><ul><li>Repository: <a href="https://github.com/d3witt/viking">https://github.com/d3witt/viking</a></li><li>서버 IP를 기억할 필요 없이 간단한 명령어로 서버 관리를 단순화시킴</li><li><code>~/.ssh/config</code>같은 전통적인 방법보다 더 효율적이고 사용자 친화적인 솔류션</li><li>일부 부정적인 피드백이 있으나, 오픈소스로서 시간이 지날수록 더욱 가치가 있을 것으로 여겨짐</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Kubernetes 정리</title>
      <link href="/2024/10/12/DevOps/Kubernetes/"/>
      <url>/2024/10/12/DevOps/Kubernetes/</url>
      
        <content type="html"><![CDATA[<p>어느정도 개발공부를 한 사람이라면 Kubernetes(쿠버네티스)를 최소 한 번 이상은 접해봤을 것이다.<br>유명하다면 모두가 써봤다는 얘기고, 그말은 즉슨 무조건 공부를 해야하는 것이기 때문에(…) 오늘 날을 잡아서 개념 및 명령어를 한 번 정리해봤다.</p><h2 id="1-Kubernetes란"><a href="#1-Kubernetes란" class="headerlink" title="1. Kubernetes란?"></a>1. Kubernetes란?</h2><p>쿠버네티스는 <u>컨테이너화된 애플리케이션의 <strong>배포, 스케일링, 운영</strong>을 자동화하기 위한 오픈소스</u>이다. 즉 무료로 이용할 수 있는 프로그램이다.</p><p>이름이 긴탓에 줄여서 k8s라고 하며, Google에서 개발했으나 현재 CNCF(Cloud Native Computing Foundation)에서 <a href="https://github.com/kubernetes/kubernetes">repo</a>를 관리하고 있다.</p><p>복잡한 컨테이너 환경에서 애플리케이션이 안정적으로 동작하도록 돕는 <strong>컨테이너 오케스트레이션 도구</strong>이다.</p><h2 id="2-Kubernetes의-주요-역할"><a href="#2-Kubernetes의-주요-역할" class="headerlink" title="2. Kubernetes의 주요 역할"></a>2. Kubernetes의 주요 역할</h2><ul><li>여러 컨테이너를 효과적으로 배포 및 관리</li><li>Auto Scaling: 애플리케이션의 사용량에 따라 컨테이너 수를 자동으로 늘리거나 줄임</li><li>Self-Healing: 문제가 발생한 컨테이너를 자동으로 재시작 및 복구</li><li>Load Balancing 및 트래픽 분배 -&gt; 시스템 과부화 방지</li><li>배포 자동화: rolling update같은 방식으로 중단 없이 배포 진행</li></ul><h2 id="3-Kubernetes의-주요-구성-요소"><a href="#3-Kubernetes의-주요-구성-요소" class="headerlink" title="3. Kubernetes의 주요 구성 요소"></a>3. Kubernetes의 주요 구성 요소</h2><img src="./1.png" width="800"><h3 id="Master-Node"><a href="#Master-Node" class="headerlink" title="Master Node"></a>Master Node</h3><p>클러스터 제어 및 관리를 담당하는 중앙 서버</p><ul><li>API Server: 클러스터 진입점으로 <code>kubectl</code> 명령어를 처리</li><li>Scheduler: 컨테이너를 어떤 노드에서 실행할지 결정</li><li>Controller Manager: 리소스 상태를 관리하고 이상 상태를 복구</li><li>etcd: 클러스터 상태 정보를 저장하는 분산 키-값 저장소</li></ul><h3 id="Worker-Node"><a href="#Worker-Node" class="headerlink" title="Worker Node"></a>Worker Node</h3><p>실제로 컨테이너가 실행되는 노드</p><ul><li>Kubelet: Master Node의 명령을 받아 컨테이너를 실행하고 상태 보고</li><li>Kube Proxy: 네트워킹을 관리하고 서비스 간의 통신 지원</li><li>Container Runtime: 컨테이너 실행 환경 (Docker, containerd 등)</li></ul><h2 id="4-Kubernetes의-resource-object"><a href="#4-Kubernetes의-resource-object" class="headerlink" title="4. Kubernetes의 resource object"></a>4. Kubernetes의 resource object</h2><h3 id="1-Pod"><a href="#1-Pod" class="headerlink" title="1) Pod"></a>1) Pod</h3><ul><li>컨테이너의 최소 단위로, 하나 이상의 컨테이너를 포함</li><li>같은 Pod 내부의 컨테이너는 네트워크와 스토리지 공유</li></ul><h3 id="2-Deployment"><a href="#2-Deployment" class="headerlink" title="2) Deployment"></a>2) Deployment</h3><ul><li>Pod를 정의하고 애플리케이션의 배포 및 업데이트 관리</li><li>롤링 업데이트, 롤백 기능 지원</li></ul><h3 id="3-Service"><a href="#3-Service" class="headerlink" title="3) Service"></a>3) Service</h3><ul><li>Pod의 네트워크 접근을 제어하며, 외부 트래픽을 내부 Pod로 전달</li><li>ClusterIP, NodePort, LoadBalancer 등</li></ul><h3 id="4-ConfigMap-amp-Secret"><a href="#4-ConfigMap-amp-Secret" class="headerlink" title="4) ConfigMap &amp; Secret"></a>4) ConfigMap &amp; Secret</h3><ul><li>ConfigMap: 환경 설정 데이터 관리</li><li>Secret: 비밀번호, 인증 토큰 같은 민감한 정보를 안전하게 저장</li></ul><h3 id="5-Volume"><a href="#5-Volume" class="headerlink" title="5) Volume"></a>5) Volume</h3><p>Pod에 영구적인 데이터를 제공하기 위한 스토리지</p><h3 id="6-Namespace"><a href="#6-Namespace" class="headerlink" title="6) Namespace"></a>6) Namespace</h3><ul><li>리소스를 그룹화하여 논리적인 구획을 제공</li><li>default, kube-system 등</li></ul><h2 id="5-Kubernetes의-추가-기능"><a href="#5-Kubernetes의-추가-기능" class="headerlink" title="5. Kubernetes의 추가 기능"></a>5. Kubernetes의 추가 기능</h2><h3 id="1-Horizontal-Pod-Autoscaler-HPA"><a href="#1-Horizontal-Pod-Autoscaler-HPA" class="headerlink" title="1) Horizontal Pod Autoscaler (HPA)"></a>1) Horizontal Pod Autoscaler (HPA)</h3><p>애플리케이션의 부하에 따라 Pod의 수를 자동으로 늘리거나 줄이는 기능</p><h3 id="2-Helm"><a href="#2-Helm" class="headerlink" title="2) Helm"></a>2) Helm</h3><p>쿠버네티스 애플리케이션의 패키지 관리자. 반복적인 배포 관리</p><h3 id="3-Network-Policy"><a href="#3-Network-Policy" class="headerlink" title="3) Network Policy"></a>3) Network Policy</h3><p>네트워크 트래픽을 제어하여 Pod 간의 통신을 관리</p><h2 id="6-Kubernetes의-동작-원리"><a href="#6-Kubernetes의-동작-원리" class="headerlink" title="6. Kubernetes의 동작 원리"></a>6. Kubernetes의 동작 원리</h2><p>사용자가 kubectl을 통해 매니페스트(YAML 파일)로 리소스를 정의하고 API Server에 전달<br>-&gt; API Server가 스케줄러를 통해 적절한 Worker Node를 선택<br>-&gt; 선택된 Node에서 Kubelet이 컨테이너 런타임(Docker 등)을 사용해 Pod를 생성<br>-&gt; 네트워킹, 로드 밸런싱, 스케일링 등은 서비스 및 설정에 따라 자동으로 처리</p>]]></content>
      
      
      <categories>
          
          <category> ♼ DevOps </category>
          
      </categories>
      
      
        <tags>
            
            <tag> DevOps </tag>
            
            <tag> Kubernates </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 10월 오픈소스 소식지 (1): Cloudflare NoIP Alternative, StreamPot, MeTube, FastHTML, Docker-OSX, FakeTraveler</title>
      <link href="/2024/10/12/OpenSource/2410(1)/"/>
      <url>/2024/10/12/OpenSource/2410(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Cloudflare-NoIP-Alternative-Cloudflare와-Cronjob을-이용한-무료-DDNS"><a href="#Cloudflare-NoIP-Alternative-Cloudflare와-Cronjob을-이용한-무료-DDNS" class="headerlink" title="Cloudflare NoIP Alternative: Cloudflare와 Cronjob을 이용한 무료 DDNS"></a>Cloudflare NoIP Alternative: Cloudflare와 Cronjob을 이용한 무료 DDNS</h2><ul><li>Repository: <a href="https://github.com/devrim/cloudflare-noip">https://github.com/devrim/cloudflare-noip</a></li><li>repository를 clone 후 <code>key.json</code>, <code>records.json</code>, cronjob 또는 스케줄러를 설정해야 사용 가능</li><li>TLS 업로드 제한이라는 한계애 대해서 커뮤니티에서 의논 중</li><li>유사 프로젝트로는 Cloudflare Turnel, Tailscale이 있으며, 동적 IP 주소 관리에 대한 다양한 솔루션에 사람들이 큰 관심을 갖고 있음</li></ul><br><h2 id="StreamPot-미디어-변환-작업-도구"><a href="#StreamPot-미디어-변환-작업-도구" class="headerlink" title="StreamPot: 미디어 변환 작업 도구"></a>StreamPot: 미디어 변환 작업 도구</h2><img src="./1.png" width="300"><ul><li>Homepage: <a href="https://streampot.io/">https://streampot.io/</a></li><li>Repository: <a href="https://github.com/StreamPot/StreamPot">https://github.com/StreamPot/StreamPot</a></li><li>비디오 자르기, 오디오 제거, 트랜스코딩 같은 미디어 변환 작업을 위한 도구</li><li>fluent-FFmpeg 호환성, SQS 및 S3 통합 기능을 갖춘 API로 FFmpeg를 실행할 수 있음</li><li>초기 오픈소스 프로젝트로서 비동기 작업을 위한 메서드 추가, event source 또는 SSE를 통한 신호 전달, 문서화 등의 개선사항이 있음</li></ul><br><h2 id="MeTube-셀프-호스팅-Youtube-다운로더"><a href="#MeTube-셀프-호스팅-Youtube-다운로더" class="headerlink" title="MeTube: 셀프 호스팅 Youtube 다운로더"></a>MeTube: 셀프 호스팅 Youtube 다운로더</h2><ul><li>Repository: <a href="https://github.com/alexta69/metube">https://github.com/alexta69/metube</a></li><li>Youtube에서 동영상을 다운로드할 수 있는 명령어인 “yt-dlp”를 사용하는 자체 호스팅 Youtube 다운로더</li><li>즉, yt-dlp를 위한 UI를 제공함</li><li>새로운 Node 버전에서는 더 이상 32bit ARM 빌드를 지원하지 않으며, 64bit 운영체제로 마이그레이션이 필요함</li></ul><br><h2 id="FastHTML-파이썬으로-구현하는-웹-애플리케이션-프레임워크"><a href="#FastHTML-파이썬으로-구현하는-웹-애플리케이션-프레임워크" class="headerlink" title="FastHTML: 파이썬으로 구현하는 웹 애플리케이션 프레임워크"></a>FastHTML: 파이썬으로 구현하는 웹 애플리케이션 프레임워크</h2><img src="./2.svg" width="300"><ul><li>Homepage: <a href="https://fastht.ml/">https://fastht.ml/</a></li><li>Repository: <a href="https://github.com/AnswerDotAI/fasthtml">https://github.com/AnswerDotAI/fasthtml</a></li><li>하이퍼미디어 기반 앱을 위해 Python과 HTMX를 통합 및 비동기 지원을 위해 ASGI/Uvicorn/Starlette 삼중체를 사용함. 또한 FastTag를 포함하고 있음</li><li>잠재적인 복잡성, 쉬운 맞춤화를 해결하고 개발자가 JavaScript를 사용하거나 요청을 직접 수정할 수 있는 투명한 시스템을 제공하여 웹 앱 개발을 간소화하는 것을 목표하고 있음</li></ul><br><h2 id="Docker-OSX-Docker-컨테이너에서-MacOS를-네이티브-성능으로-실행할-수-있는-이미지"><a href="#Docker-OSX-Docker-컨테이너에서-MacOS를-네이티브-성능으로-실행할-수-있는-이미지" class="headerlink" title="Docker-OSX: Docker 컨테이너에서 MacOS를 네이티브 성능으로 실행할 수 있는 이미지"></a>Docker-OSX: Docker 컨테이너에서 MacOS를 네이티브 성능으로 실행할 수 있는 이미지</h2><img src="./3.png" width="500"><ul><li>Repository: <a href="https://github.com/sickcodes/Docker-OSX">https://github.com/sickcodes/Docker-OSX</a></li><li>High Sierra부터 Sonoma까지의 버전을 지원 (최신 Intel 및 NVIDIA GPU는 지원 x)</li><li>QEMU 내에서 Docker로 macOS를 실행하는 것은 가능하지만, GPU 가속과 관련하여 한계가 있음</li><li>MacOS 이미지를 재배포하는 것은 Apple 최종 사용자 라이선스 계약(EULA)을 위반할 수 있지만, 이 프로젝트는 개발 및 테스트 목적으로 사용됨</li><li>개발자 커뮤니티에서 큰 인기를 끌고 있음</li></ul><br><h2 id="FakeTraveler-안드로이드용-휴대폰-가짜-위치-앱"><a href="#FakeTraveler-안드로이드용-휴대폰-가짜-위치-앱" class="headerlink" title="FakeTraveler: 안드로이드용 휴대폰 가짜 위치 앱"></a>FakeTraveler: 안드로이드용 휴대폰 가짜 위치 앱</h2><img src="./4.png" width="300"><ul><li>Repository: <a href="https://github.com/mcastillof/FakeTraveler">https://github.com/mcastillof/FakeTraveler</a></li><li>사용자가 자신의 휴대폰 위치를 속일 수 있도록 해주는 안드로이드용 모의 위치 앱</li><li>F-Droid (무료 및 오픈 소스 안드로이즈 앱 저장소) 에서 이용 가능</li><li>기능성에도 불구하고, 일부 사용자는 은행 앱이나 포켓몬 고와 같은 특정 앱 제한을 추가 조치 없이 우회할 수 없다고 지적 중<ul><li>이에 대해서 기기를 루팅하는 등의 추가 조치가 필요하다는 의견이 있음</li></ul></li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[AWS] Cloud Practitioner 시험 준비 및 후기</title>
      <link href="/2024/09/30/Certificate/AWS/CloudPractitioner/"/>
      <url>/2024/09/30/Certificate/AWS/CloudPractitioner/</url>
      
        <content type="html"><![CDATA[<h2 id="AWS-사전-지식"><a href="#AWS-사전-지식" class="headerlink" title="AWS 사전 지식"></a>AWS 사전 지식</h2><ul><li>있음. CloudWatch, SQS, CloudFront, S3, EC2, Transfer Family, Route53, DynamoDB, RDS(Mysql), CloudFornation 등</li><li>따라서 개념 정리는 하루만 하고 바로 시험 문제로 들어간, 일종의 bottom-up 방식으로 공부를 진행했음.<br>만약 기초가 전혀 없다면 개념 정리는 넉넉하게 일주일 정도 잡고 문제를 푸는 것을 추천함</li></ul><h2 id="시험-준비-기간-1달-인데-빡집중한거는-1주-정도"><a href="#시험-준비-기간-1달-인데-빡집중한거는-1주-정도" class="headerlink" title="시험 준비 기간: 1달 (인데 빡집중한거는 1주 정도)"></a>시험 준비 기간: 1달 (인데 빡집중한거는 1주 정도)</h2><h3 id="1-전반적인-개념-정리-하루"><a href="#1-전반적인-개념-정리-하루" class="headerlink" title="(1) 전반적인 개념 정리: 하루"></a>(1) 전반적인 개념 정리: 하루</h3><ul><li>인터넷에 요약본 정리하면 나와있음: 너무 많아서 머리가 어지러운 나머지 하루하고 때려침. 대충 반정도는 알았어서 가능했음<ul><li><a href="https://velog.io/@chan9708/AWS-Cloud-Practitioner-%EC%99%84%EC%A0%84%EC%A0%95%EB%B3%B5-%EC%9A%94%EC%95%BD">블로그 1</a> </li><li><a href="https://tbvjrornfl.tistory.com/188">블로그 2</a></li></ul></li></ul><h3 id="2-시험-문제-공부-덤프-무료"><a href="#2-시험-문제-공부-덤프-무료" class="headerlink" title="(2) 시험 문제 공부: 덤프 (무료)"></a>(2) 시험 문제 공부: 덤프 (무료)</h3><ul><li>덤프: 일부 문제의 답에 대해서 갑론을박이 있으며, 이는 chatGPT를 활용해서 맞춰보는 것을 추천함<ul><li><a href="https://www.examtopics.com/exams/amazon/aws-certified-cloud-practitioner">aws-certified-cloud-practitioner</a></li><li><a href="https://www.examtopics.com/exams/amazon/aws-certified-cloud-practitioner-clf-c02">aws-certified-cloud-practitioner-clf-c02</a></li><li>본인은 CLF-02로 시험을 봤으나 둘 다 무료분까지 1회독 진행함</li></ul></li><li>헷갈리는 개념들은 노트에 직접 적으며 깜지 진행. 문제는 총 1회독 진행, 하루에 1시간 씩 공부함</li></ul><p><img src="./5.png"><br>이렇게 공부하니 대충 a4 5장 정도 나왔다.</p><h2 id="시험-준비물"><a href="#시험-준비물" class="headerlink" title="시험 준비물"></a>시험 준비물</h2><ul><li>신분증 2개(여권, 주민등록증) 또는 신분증 1개 + 신용카드를 준비해야 한다. 한글/영어 이름 확인을 위해서 이 둘은 필수!</li><li>당연하지만 시험장 내부에는 개인 필기구도 가져갈 수 없다. 오직 물품보관함 열쇠 + 신분증 + 안경(선택)만 허락한다</li></ul><h2 id="시험-팁"><a href="#시험-팁" class="headerlink" title="시험 팁"></a>시험 팁</h2><ul><li>기본적으로 영어 제공. 영어 외 언어 선택하면 해당 언어 번역본 + 20분 추가시간 주어짐 (인터넷에서는 한국어로 시험보면 30분 추가로 준다고 하던데, 언제부터인지 모르겠으나 일단 나는 20분 추가 시간 받음)</li><li>AWS Cloud Practitioner Certificate는 암기과목임. 초중고등학생 때 공부한 것처럼 외우기만 하면 됨</li><li>종종 AWS에서 온라인 스터디 여는데, 참여 시 50% 시험응시 할인 쿠폰을 받을 수 있음</li></ul><h2 id="시험-후기"><a href="#시험-후기" class="headerlink" title="시험 후기"></a>시험 후기</h2><ul><li>총 65문제 나왔고 검토는 1번해서 50분만에 나왔다. 내가 잘한다는 의미는 아니고, 찍거나 헷갈리는 문제는 전부 틀리는 사람인지라 굳이 시간낭비를 하기 싫었다 ㅎㅎ;;</li><li>좋았던 것은 시험 시간을 꼭 맞출 필요는 없다는 것이었는데, 오전 11시 시험으로 예약했으나 10시 20분에 도착해서 바로 시험에 들어갈 수 있었다.</li><li>시험은 <a href="https://naver.me/FqSi5ht7">SRTC</a>에서 봤으며, 시험장에 입장하기 전에 끄적일 수 있는 A4 한장을 주셨다. 코팅되어 있어서 제공해주시는 매직펜으로 맘껏 쓸 수 있었으며, 지우고 싶으면 손들면 된다고 하셨다. 근데 그렇게 끄적일게 없어서.. 일단 챙겨주시니 가져가서 잘 활용했다.</li><li>보안 개빡세다. 공항 몸수색 뺨치는 수준으로 본다. 바지 걷어서 양말을 보이거나, 안내자님 따라서 몸을 툭툭 두들겨야 하며, 이름 및 접수 기준 핸드폰 뒷자리 번호 등을 물어보셨다. 물론 컨닝을 할 계획이 없으니 당당하게 하면 된다.</li><li>합불여부는 시험 끝내면 바로 볼 수 있다. 몇 개 찍었는데 합격 나와서 기분이 좋은~ 참고로 시험점수는 840점이었다.</li><li>시험 난이도는.. 모르는거랑 헷갈리는거 몇 개 있었지만 덤프에 나왔던거 그대로 나온게 많아서 괜찮았다.</li><li>시험에 통과하면 다음 AWS 자격증 시험 50%를 할인 바우처 및 SME 참여 기회를 얻을 수 있다.</li></ul><p><img src="./1.png"></p>]]></content>
      
      
      <categories>
          
          <category> 👩‍💻 AWS </category>
          
      </categories>
      
      
        <tags>
            
            <tag> AWS </tag>
            
            <tag> Cloud </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 9월 오픈소스 소식지 (2): Typst, Jiff, Eza, Timeshift for Linux, Llama 3.1, 스위스 정부기관의 OSS 사용 의무화</title>
      <link href="/2024/09/29/OpenSource/2409(2)/"/>
      <url>/2024/09/29/OpenSource/2409(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Typst-LaTex-대안-오픈소스"><a href="#Typst-LaTex-대안-오픈소스" class="headerlink" title="Typst: LaTex 대안 오픈소스"></a>Typst: LaTex 대안 오픈소스</h2><img src="./1.png" width="700"><ul><li>Homepage: <a href="https://typst.app/">https://typst.app/</a></li><li>Repository: <a href="https://github.com/typst/typst">https://github.com/typst/typst</a></li><li>PDF 생성을 위한 LaTeX의 더 쉽고 자원 효율적인 대안으로 제시된 오픈소스</li><li>직관적인 템플릿 시스템과 대량의 문서를 신속하게 생성하는 성능에 대해 긍정적 평가를 받고 있음</li><li>학술 논문 작성 및 규제 문서 생성의 효율성을 높일 가능성으로 주목받고 있지만, 현재 HTML 출력 및 완전한 TeX 지원과 같은 일부 기능이 부족한 편</li></ul><br><h2 id="Jiff-Rust용-날짜-및-시간-라이브러리"><a href="#Jiff-Rust용-날짜-및-시간-라이브러리" class="headerlink" title="Jiff: Rust용 날짜 및 시간 라이브러리"></a>Jiff: Rust용 날짜 및 시간 라이브러리</h2><ul><li>Repository: <a href="https://github.com/BurntSushi/jiff">https://github.com/BurntSushi/jiff</a></li><li>높은 수준의 날짜 및 시간 원시 데이터, 원활한 시간대 데이터베이스 통합, DST 산술, 형식화, 구문 분석 및 선택적 Serde 지원과 같은 기능을 제공</li><li>기존 표준인 Chrono에 비해 더 사용자 친화적이고 유연한 API를 제공하면서 날짜 및 시간 작업의 정확성과 기능을 유지 중</li></ul><br><h2 id="Eza-ls-대체-명령어"><a href="#Eza-ls-대체-명령어" class="headerlink" title="Eza: ls 대체 명령어"></a>Eza: ls 대체 명령어</h2><img src="./2.gif" width="700"><ul><li>Homepage: <a href="https://eza.rocks/">https://eza.rocks/</a></li><li>Repository: <a href="https://github.com/eza-community/eza">https://github.com/eza-community/eza</a></li><li>Unix와 Linux에서 ls 명령어를 대체하는 새로운 명령어</li><li>색상 코드가 지정된 파일 유형, 심볼릭 링크 지원, 확장 속성, Git 통합, 그리고 사람이 읽기 쉬운 날짜를 지원함</li><li>하이퍼링크, 마운트 포인트 세부 정보, SELinux 컨텍스트 및 밝은 터미널 색상에 대한 추가 지원을 목표하고 있음</li></ul><br><h2 id="Timeshift-for-Linux-시스템-복원-도구"><a href="#Timeshift-for-Linux-시스템-복원-도구" class="headerlink" title="Timeshift for Linux: 시스템 복원 도구"></a>Timeshift for Linux: 시스템 복원 도구</h2><ul><li>Repository: <a href="https://github.com/linuxmint/timeshift">https://github.com/linuxmint/timeshift</a></li><li>macOS의 Time Machine 및 Windows의 시스템 복원과 유사하며, 사용자가 rsync와 하드링크를 사용하여 파일 시스템 스냅샷을 생성할 수 있게 해줌</li><li>restic, rclone, ZFS, BTRFS, LVM 스냅샷을 포함한 다양한 백업 솔루션과 구성에 대해 논의하고 있으며, 데이터베이스 일관성과 신뢰할 수 있는 백업을 위해 원자적 스냅샷의 중요성을 강조하는 중</li><li>다양한 파일 시스템과 스냅샷 방법의 장단점을 논의하면서 강력한 백업 전략의 필요성이 강조됨</li></ul><br><h2 id="Llama-3-1-출시"><a href="#Llama-3-1-출시" class="headerlink" title="Llama 3.1 출시"></a>Llama 3.1 출시</h2><img src="./3.png" width="300"><ul><li>8B, 70B, 405B 버전으로 제공되는 Meta의 오픈 소스 AI 모델</li><li>GPT-4와 같은 폐쇄형 모델과 경쟁력 있는 성능을 보이고 있음</li><li>405B 모델은 상당한 벤치마크 개선을 보여주지만, 클라우드 지원 없이는 가정에서 사용하기에 비실용적이며, 대형 모델을 로컬에서 실행하는 데 있어 어렵다고 함</li><li>Meta의 강력한 오픈 모델 출시가 경쟁 구도를 뒤흔들며 하드웨어 요구 사항, 양자화 솔루션, 그리고 AI 개발 및 접근성에 광범위한 영향을 미칠 것이라 보고됨<br></li></ul><h2 id="스위스-정부기관이-OSS-사용을-의무화함"><a href="#스위스-정부기관이-OSS-사용을-의무화함" class="headerlink" title="스위스 정부기관이 OSS 사용을 의무화함"></a>스위스 정부기관이 OSS 사용을 의무화함</h2><img src="./4.svg" width="200"><ul><li>오픈 소스 소프트웨어(OSS)를 사용하고 새로운 정부 코드를 오픈 소스 라이선스 하에 공개하도록 요구하는 법률, 즉 ‘정부 업무 수행을 위한 전자 수단 사용에 관한 연방법’(EMBAG)을 통과시킴</li><li>보안에 민감하지 않은 정부 데이터를 공개적으로 접근 가능하게 함으로써 투명성, 보안, 효율성을 향상시키는 것을 목표함</li><li>추후 유럽과 미국에서 OSS의 추가 채택을 촉진할 가능성이 있음</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>개발자 포트폴리오, 이렇게 준비해보자</title>
      <link href="/2024/09/12/Retrospect/Portfolio/"/>
      <url>/2024/09/12/Retrospect/Portfolio/</url>
      
        <content type="html"><![CDATA[<p>내부 사정으로 영상으로 올리려던 것을 블로그 글로 업로드 했습니다.<br>PPT는 따로 배포하지 않는 점 참고 바랍니다.<br>여러분의 취준 &amp; 이직에 도움되길 바랍니다 :)</p><p><br><br></p><h2 id="1-📁-포트폴리오-vs-이력서"><a href="#1-📁-포트폴리오-vs-이력서" class="headerlink" title="1. 📁 포트폴리오 vs 이력서"></a>1. 📁 포트폴리오 vs 이력서</h2><p><img src="1.png"></p><p>이력서와 포트폴리오를 차이점을 은근 헷갈려하는 경우가 많아 간단히 적어보자고 한다.</p><p>이력서는 지금까지의 경력, 학력, 스킬 등을 “텍스트”로 표현하는 것이고,<br>포트폴리오는 “이미지” 중심으로 해온 프로젝트를 자세하게 표현한다고 생각하면 된다.</p><p><br><br></p><h2 id="2-💡-포트폴리오의-필요성-및-중요성"><a href="#2-💡-포트폴리오의-필요성-및-중요성" class="headerlink" title="2. 💡 포트폴리오의 필요성 및 중요성"></a>2. 💡 포트폴리오의 필요성 및 중요성</h2><p>대부분 기업에서도 포트폴리오는 필수는 아니며 선택 사항으로 언급되는 경우가 많다.<br>그래서 준비가 귀찮거나 시간이 부족한 사람들은 포트폴리오를 따로 준비하지 않아도 된다.<br>하지만 포트폴리오를 준비하는 것이 입사 경쟁에 있어 매우 유리할 수 있다.</p><p>나날이 갈수록 청년 취업률은 떨어지고 있으며, 수많은 지원자들 속에서 조금이라도 눈에 띄기 위해서는 단순히 이력서에 나열된 경력이나 자격증만으로 부족한 때이다.<br><strong>포트폴리오는 자신의 경험과 역량을 실제 사례를 통해 시각적으로 보여줄 수 있는 도구</strong>로, 지원자가 어떤 방식으로 문제를 해결하고 창의적인 접근을 했는지 구체적으로 드러낼 수 있다.<br>특히, <strong>직무 관련 프로젝트나 작업물</strong>을 포트폴리오에 포함시키면, 고용주(=회사)는 지원자가 해당 분야에서 실제로 어떤 성과를 낼 수 있는지 보다 쉽게 이해할 수 있으며,<br>이는 단순히 글로 표현된 능력보다 훨씬 강력한 인상을 줄 수 있고 지원자의 실무 능력을 한눈에 확인할 수 있게 해준다.</p><p>결론적으로, 포트폴리오는 자신을 돋보이게 만들고, 경쟁자들 속에서 두드러지는 기회를 제공하는 중요한 수단이기에<br>귀찮더라도 포트폴리오를 준비하는 것이 더 나은 취업/이직 기회를 만들 수 있는 좋은 전략이 될 수 있다.</p><p><br><br></p><h2 id="3-📚-나에게-맞는-포트폴리오-종류-찾기"><a href="#3-📚-나에게-맞는-포트폴리오-종류-찾기" class="headerlink" title="3. 📚 나에게 맞는 포트폴리오 종류 찾기"></a>3. 📚 나에게 맞는 포트폴리오 종류 찾기</h2><p><img src="3.png"></p><p>기업마다 제출 형태는 다르지만, 내 경험에 의하면 보편적으로 이렇게 다섯 종류로 나뉘는 것 같다.<br>특히 대기업 공채일수록 정해진 포맷(ex. ppt, docs 등)에 맞춰서 내라는 경우가 많은데, 이때 꼭 기업에 만든 파일을 이용해서 제출하도록 하자.<br>(일부 기업들은 기업 내부에서 알고리즘 돌려서 서류 필터링을 한다는데, 대기업일수록 이런 포맷이 정해져 있다보니 안맞추면 알고리즘에 걸려 필터링에 걸릴 수 있기 때문이다.)</p><p><br><br></p><h2 id="4-🔍-포트폴리오-작성-꿀팁"><a href="#4-🔍-포트폴리오-작성-꿀팁" class="headerlink" title="4. 🔍 포트폴리오 작성 꿀팁"></a>4. 🔍 포트폴리오 작성 꿀팁</h2><h3 id="1-프로젝트-설명-공통-구조"><a href="#1-프로젝트-설명-공통-구조" class="headerlink" title="1) 프로젝트 설명 공통 구조"></a>1) 프로젝트 설명 공통 구조</h3><p><img src="4.png"></p><ul><li>어떤 포트폴리오 템플릿을 선택을 했든, 프로젝트를 잘 표현하기 위해서는 이 내용들이 꼭 들어가야 한다.</li><li>그 중에서 가장 중요한 것은 <code>참여도 / 구현 목록</code>이다.<ul><li>주니어 개발자일 경우, 이미지를 참고해 작성해보자</li><li>경력직일 경우, 이직을 위한 포트폴리오 작성 시 <code>기능 향상</code> 방향으로 작성하는 것을 추천한다. (물론 주니어일수록 이렇게 작성할 수 있다면 더 좋다)<ul><li>구체적인 <strong>수치</strong>로 작성하기, 될 수 있으면 <code>%</code> 이용하기<ul><li>API latency가 100ms였던 것을 50ms로 향상시킴 -&gt; 코드 리펙토링을 통해 API latency를 50% 감소</li><li>클라우드 아키텍처 재설계로 비용이 월 1000만원인 것을 100만원으로 감소 -&gt; 클라우드 아키텍처 재설계로 비용을 90% 감소</li></ul></li><li>사용한 라이브러리 및 문제 해결 과정 제시</li><li>코드 샘플 작성 및 삽입</li><li>아키텍처 다이어그램 삽입</li></ul></li></ul></li></ul><h3 id="2-지인-평가-Soft-Skill-강조하기"><a href="#2-지인-평가-Soft-Skill-강조하기" class="headerlink" title="2) 지인 평가: Soft Skill 강조하기"></a>2) 지인 평가: Soft Skill 강조하기</h3><h3 id="3-오픈소스-기여하기"><a href="#3-오픈소스-기여하기" class="headerlink" title="3) 오픈소스 기여하기"></a>3) 오픈소스 기여하기</h3><p>아무래도 다른 나라에 비해 한국에서 오픈소스를 기여하는 사람을 찾기 힘들다.<br>이 말은 뭐다? 오픈소스에 기여하면 다른 사람들과 비교해서 차별성 있는 스펙을 만들기 딱 좋다는 얘기다. (개인적으로 스펙쌓기 활동 중에 가장 알차다고 생각한다)</p><p>어차피 대기업에서 스타트업까지 모든 기업에서는 오픈소스를 적극 활용하는 편인데, 그 오픈소스를 기여하고 유지보수할 수 있음을 증명한다면 기업에서 여러 러브콜을 받을 수 있을 것이다.</p><p>그 외에 오픈소스를 기여 시 다음의 장점을 누릴 수 있다:</p><ul><li>협업 능력 증명<ul><li>오픈소스는 전 세계의 다양한 개발자들과 협업하는 형태로 진행되며, 협업 도구(ex. Git, Github 등)와 작업 흐름에 대한 이해도를 보여준다.</li><li>즉 다른 사람들과의 원활한 커뮤니케이션 능력을 증명할 수 있게 된다. (= soft skill로 연결됨)</li></ul></li><li>코딩 실력과 코드 품질 보증 가능: 작성한 코드에 대해 검토 및 피드백을 받을 수 있으며, 이를 통해 코드 품질을 개선하고 더 나은 개발자로 성장할 수 있다.</li><li>문제 해결 능력: 버그 수정 및 새로운 기능 추가 과정에서 문제 분석 및 해결 능력을 보여줄 수 있다.</li><li>전문성 강화: 기여하는 오픈소스 주제가 지원하고자 하는 분야와 관련있으면, 그 분야에서의 전문성을 증명할 수 있다.</li></ul><p>오픈소스 기여 방법은 [여기](추후 링크 추가 예정)를 참고하면 되며, 여기서는 오픈소스 프로젝트를 지원하는 프로그램을 적어보고자 한다.<br>어차피 오픈소스에 기여할거면 ✨간지나게✨ 하는게 좋지 않은가 ㅎㅎ</p><p>여러 가지 프로그램이 있는데, 그 중 가장 추천하는 프로그램은 바로 NIPA에서 운영 중인 오픈소스 생태계 지원 사업이다.</p><p><br><br></p><h2 id="5-📁-FAQ"><a href="#5-📁-FAQ" class="headerlink" title="5. 📁 FAQ"></a>5. 📁 FAQ</h2><p>현재도 다양한 SW 프로그램에서 멘토로 활동하고 있는데, 취업 관련해서 많이 들어오는 질문들을 한 번 정리해보았다.</p><blockquote><h4 id="Q1-포트폴리오에서-가장-도움-됐던-활동은"><a href="#Q1-포트폴리오에서-가장-도움-됐던-활동은" class="headerlink" title="Q1. 포트폴리오에서 가장 도움 됐던 활동은?"></a>Q1. 포트폴리오에서 가장 도움 됐던 활동은?</h4><br>아무래도 `대회 수상 내역` 및 `프로젝트`가 가장 도움이 됐던 것 같다.<p>다만 이 두 가지 조건을 충족하면 매우 좋겠지만, 모두 알다시피 현실이 그렇게 녹록치 않다.<br>따라서 나는 <strong><code>프로젝트</code>는 필수</strong>로 들고가고, <strong><code>대회 수상 내역</code>은 선택적</strong>으로 가져가는 것을 추천한다.<br>(개인적으로 전공 비전공을 떠나, 대회 수상 자체는 95%의 운과 5%실력이 있어야 한다고 생각한다)</p></blockquote><blockquote><h4 id="Q2-직무와-관련-없는-프로젝트를-포함해도-될까-ex-백엔드-직무-프론트-c언어-관련-프로젝트"><a href="#Q2-직무와-관련-없는-프로젝트를-포함해도-될까-ex-백엔드-직무-프론트-c언어-관련-프로젝트" class="headerlink" title="Q2. 직무와 관련 없는 프로젝트를 포함해도 될까? (ex. 백엔드 직무 - 프론트, c언어 관련 프로젝트)"></a>Q2. 직무와 관련 없는 프로젝트를 포함해도 될까? <br>(ex. 백엔드 직무 - 프론트, c언어 관련 프로젝트)</h4><br><p>무조건 빼야한다. 넣어도 어차피 안본다.<br>포트폴리오는 <strong>자신의 역량을 보여주는 도구</strong>이기 때문에, 이 때 자기 어필을 제대로 하지 못할 경우 요즘 기고 나는 개발자 지망생들에게 묻히기 십상이다.</p></blockquote><blockquote><h4 id="Q3-포트폴리오-만들면서-전공과목-알고리즘-데이터베이스-등-학습법"><a href="#Q3-포트폴리오-만들면서-전공과목-알고리즘-데이터베이스-등-학습법" class="headerlink" title="Q3. 포트폴리오 만들면서 전공과목(알고리즘, 데이터베이스 등) 학습법"></a>Q3. 포트폴리오 만들면서 전공과목(알고리즘, 데이터베이스 등) 학습법</h4><br><p>이런 말이 있다. 칼을 썰면 무라도 썰자. 그냥 <code>프로젝트를 하면 된다</code>.<br>물론 맨 땅에 헤딩이라고, 프로젝트를 들어가면 ‘그래서 난 도대체 뭘 해야하지’라며 갈팡질팡하는 경우가 많다.<br>만약 내가 프로젝트를 전혀 해본 적이 없거나 시작점을 못찾겠다 싶으면 <strong>유튜브나 블로그, 각종 학습 사이트에 업로드된 프로젝트를 클론코딩 해보자.</strong><br>그게 어느 정도 익숙해졌다면 그 때부터 원하는 주제로 프로젝트를 진행하면 된다. 그러면 자연스럽게 컴퓨터 공부를 할 수 있다.</p><p>다만 <strong>알고리즘은 따로 공부가 필요하다.</strong> 기업연계가 아닌 이상 한정된 데이터를 가지고 작업을 해야하기 때문에, 우리가 생각하는 알고리즘들을 구현할 기회가 거의 없을 수 밖에 없다.</p></blockquote><blockquote><h4 id="Q4-프로젝트-수준은-어디까지"><a href="#Q4-프로젝트-수준은-어디까지" class="headerlink" title="Q4. 프로젝트 수준은 어디까지?"></a>Q4. 프로젝트 수준은 어디까지?</h4><br><p>될 수 있으면 <code>실서비스(배포)</code>까지 하는 것을 추천한다.</p><p>요즘은 포트폴리오 준비를 국비지원(KDT)에서 많이 하는데, 여기서 서버비용까지 지원해주고 있기 때문에 서비스 배포까지 하는 경우가 굉장히 많다. 이는 곧 시간이 갈 수록 스펙이 상향조준 된다는 의미며, 평범하게 했다가는 남들에게 치여 뽑히지 못할 가능성이 크다(…)</p><p>개인적으로 주니어 개발자라면 배포까지는 너무 오버스펙이라 생각하지만… 어쨌든간에 다른 경쟁자들 사이에서 남다른 모습을 보이기 위해서는 못해도 중간은 해야하기 때문에, 될 수 있으면 배포까지 하는 것을 추천한다.</p></blockquote><blockquote><h4 id="Q5-개발자는-학력을-안-본다는-말이-맞는가"><a href="#Q5-개발자는-학력을-안-본다는-말이-맞는가" class="headerlink" title="Q5. 개발자는 학력을 안 본다는 말이 맞는가?"></a>Q5. 개발자는 학력을 안 본다는 말이 맞는가?</h4><p><img src="2.png"><br><br></p><p>개인적으로 지금 적고 있는 FAQ중 모든 사람들이 이 질문은 꼭 봐줬으면 싶다.<br>아니다. 본다. <code>무조건 본다</code>.</p><p>기업 공식 블로그나 KDT 입사 사례, 유튜브같은 곳을 보면, “비전공자인데 개발직군으로 취뽀해서 초봉 6000이상 받아요~”하는 내용을 쉽게 볼 수 있다.<br>이 사례들은 많은 비전공자들에게 희망을 주기도 하지만, 동시에 일부만 보고 전체를 판단하는 오류를 범하게 할 수 있다.<br>다들 은연 중에 알고 있을 것이다. 왜 이런 것들이 눈에 들어오는가. 바로 <strong>비전공자가 전공자랑 싸워서 개발직군에 취뽀한다 라는 것 자체가 굉장히 어렵기 때문</strong>이다.</p><p>기업 입장에서야 “우리는 전공/비전공을 가리지 않고 실력이 있으면 뽑습니다”라는 메시지를 전달하려는 의도로 만들었겠지만,<br>현실적으로 전공자는 다양한 교수님 및 전문 커리큘럼을 통해 체계적인 교육을 받을 기회가 많고, 비전공자는 이러한 리소스가 부족해 더 큰 노력이 필요한 편이다.<br>따라서 단순히 미디어에서 본 성공 사례만을 보고, 특히 비전공자 일수록 아무 노력도 하지 않았음에도 불구하고 ‘나도 저렇게 될거야’라고 희망만 가지다간 큰 낭패를 볼 수 있다.<br><br></p><p>그렇다면 개발자가 되기 위해 SW로 뛰어 든 비전공자들은 어떻게 해야하냐, <code>공부 기록</code>을 남기면 된다.<br>위에도 적었지만, 전공자들은 전문가에게 전문 커리큘럼으로 컴퓨터 공부를 하기 때문에 상대적으로 유리한 입장일 수 밖에 없다.<br>그리고 이 스펙은 <strong>ㅇㅇ대학교 컴퓨터공학과 졸업</strong> 같은 형식의 단 한줄로 압축해서 설명할 수 있는데 이것 또한 유리하게 적용될 수 밖에 없다.<br>한정된 글자수/페이지 내에서 자신이 할 수 있는 것들을 여러 개 나열해야 하는데, 비전공자일 경우 ‘이런 것을 했습니다’를 나열할 때<br>전공자는 ‘학과 졸업’ 하나로 기본적인 컴퓨터 공부를 했다는 것을 입증할 수 있으며 남은 공간에는 자기어필을 더 할 수 있기 때문이다.</p><p>즉, 비전공자들은 전공자들의 <strong>졸업</strong> 타이틀에 비빌 수 있는 스펙을 만들어놔야 기업에서도 수용을 하는데, 이러한 성과를 입증하는 방법은 결국 <code>무조건 기록</code>밖에 없기 때문에 무엇을 배우든 기록을 남기는 것을 추천한다.<br><br></p><p>말이 길어졌는데 정리하자면,</p><ul><li>기업은 (당연하게도) <strong>입증된 인재</strong>를 뽑길 원하며</li><li>공부 기록이 없는 이상 <strong>전문과정을 밟았음을 확실히 증명할 수 있는 전공자들이 유리한</strong> 것이 당연지사이다.</li><li>따라서 학력은 무조건 본다고 생각하면 된다.</li><li>비전공자일수록 전공자와의 격차를 줄이기 위해서 <code>공부기록</code>을 남기는 것을 추천한다.</li></ul></blockquote><blockquote><h4 id="Q6-취준은-언제부터-해야하는가"><a href="#Q6-취준은-언제부터-해야하는가" class="headerlink" title="Q6. 취준은 언제부터 해야하는가?"></a>Q6. 취준은 언제부터 해야하는가?</h4><br><p>이 글을 보는 당장 시작하는 것을 추천한다.</p><p>미리 자기소개서, 프로젝트, 포트폴리오, 코딩테스트 등을 준비해봐야 나중에 봤을 때 뭐가 부족한지 판단하고 앞으로의 계획을 수월하게 세울 수 있기 때문이다.<br>이 블로그 말고도 인터넷에 좋은 내용들이 많기 때문에, 인터넷을 뒤져보고 주변 강연에도 참여해보면서 자신만의 스펙을 어떻게 뽐낼 수 있을지 충분히 고민하는 시간을 가졌으면 좋겠다.</p></blockquote><p><br><br></p><h2 id="6-🍀-마지막-하고-싶은-말"><a href="#6-🍀-마지막-하고-싶은-말" class="headerlink" title="6. 🍀 마지막 하고 싶은 말"></a>6. 🍀 마지막 하고 싶은 말</h2><ul><li>포트폴리오는 제발 겸손하게 작성하지 말자. 아주 유능한 것처럼 꾸미자</li><li>빠를수록 손해볼게 전혀 없다. 미리미리 준비하자. 뭐라도 미리 해놔야 나중에 봤을 때 고칠 수 있기 때문이다</li></ul><p><br><br></p><h2 id="7-📝-같이-보면-좋은-소스들"><a href="#7-📝-같이-보면-좋은-소스들" class="headerlink" title="7. 📝 같이 보면 좋은 소스들"></a>7. 📝 같이 보면 좋은 소스들</h2><ul><li><a href="https://ruby-kim.github.io/2022/05/10/Retrospect/Bachelor/">대학생 때 알았다면 좋았을 SW 팁</a></li><li><a href="https://ruby-kim.github.io/2022/04/23/Retrospect/Junior/">[후기] 스타트업/중소기업/대기업 인턴 및 정규직 준비 과정</a></li></ul><p><br><br></p><h2 id="8-이미지-출처"><a href="#8-이미지-출처" class="headerlink" title="8. 이미지 출처"></a>8. 이미지 출처</h2><ul><li><a href="https://www.saramin.co.kr/zf_user/">사람인</a></li><li><a href="https://www.miricanvas.com/ko">미리캔버스</a></li><li><a href="https://www.flaticon.com/kr/free-icons/pictogram">Flaticon</a></li><li><a href="https://namu.wiki/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%EB%8C%80%EB%AC%B8">나무위키</a></li><li><a href="https://www.oss.kr/">OSS</a></li><li>그 외 직접 제작</li></ul>]]></content>
      
      
      <categories>
          
          <category> 🎈 Retrospect </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Retrospect </tag>
            
            <tag> Job </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 9월 오픈소스 소식지 (1): Fusion OS, KUtrace, Gitlab 매각 검토 사건, SQLite Transactions, Sendune, Garage</title>
      <link href="/2024/09/10/OpenSource/2409(1)/"/>
      <url>/2024/09/10/OpenSource/2409(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Fusion-OS-Nim으로-구현된-취미용-OS"><a href="#Fusion-OS-Nim으로-구현된-취미용-OS" class="headerlink" title="Fusion OS: Nim으로 구현된 취미용 OS"></a>Fusion OS: Nim으로 구현된 취미용 OS</h2><img src="./1.png" width="300"><ul><li>Repository: <a href="https://github.com/khaledh/fusion">https://github.com/khaledh/fusion</a></li><li>Nim 프로그래밍 언어를 사용하여 개발된 x86-64 아키텍처용 취미용 운영체제</li><li>현재 UEFI 부트로더, 물리 및 가상 메모리 관리자, 사용자 모드, 선점형 멀티태스킹, 시스템 호출, ELF 로더, 타이머 인터럽트 기능을 제공 중</li><li>프로세스 간 통신, 디스크 I/O, 파일 시스템, 키보드/마우스 입력, 셸 GUI 및 네트워킹을 추가를 계획 중</li></ul><br><h2 id="KUtrace-저비용-Linux-커널-추적-기능"><a href="#KUtrace-저비용-Linux-커널-추적-기능" class="headerlink" title="KUtrace: 저비용 Linux 커널 추적 기능"></a>KUtrace: 저비용 Linux 커널 추적 기능</h2><ul><li>Repository: <a href="https://github.com/dicksites/KUtrace">https://github.com/dicksites/KUtrace</a></li><li>KUtrace는 특히 다중 기계 시스템에서 성능 병목 현상을 이해하는 데 도움을 주기 위해 설계된 저비용 Linux 커널 추적 기능 오픈소스</li><li>eBPF 도구와 달리 KUtrace는 커널 패치와 루트 접근 권한이 필요하여 적극적인 유지 관리가 필요함</li><li>x86 및 ARM 프로세서를 지원</li><li>효율이 좋다며 극찬을 받는 중</li></ul><br><h2 id="Gitlab-매각-검토-사건"><a href="#Gitlab-매각-검토-사건" class="headerlink" title="Gitlab 매각 검토 사건"></a>Gitlab 매각 검토 사건</h2><img src="./2.jpg" width="300"><ul><li>Gitlab이 매각을 고려하고 있어 사용자들 사이에서 서비스 모델의 잠재적인 종료나 변경에 대한 우려가 제기되고 있음</li><li>Gitlab과 같은 오픈 소스 옵션의 장점에 대해 토론하며, 더 쉬운 마이그레이션과 커뮤니티 지원을 언급하고, Datadog이나 IBM과 같은 잠재적 구매자에 대해서도 추측하는 중</li><li>Gitlab의 가격 정책과 기업 중심 접근 방식에 대한 비판으로 인해 일부 사용자들은 GitHub와 같은 대안으로 전환을 고려하고 있음</li></ul><br><h2 id="SQLite-Transactions-새로운-SQLite-트랜젝션-벤치마킹-도구"><a href="#SQLite-Transactions-새로운-SQLite-트랜젝션-벤치마킹-도구" class="headerlink" title="SQLite Transactions: 새로운 SQLite 트랜젝션 벤치마킹 도구"></a>SQLite Transactions: 새로운 SQLite 트랜젝션 벤치마킹 도구</h2><ul><li>Homepage: <a href="https://reorchestrate.com/posts/sqlite-transactions/">https://reorchestrate.com/posts/sqlite-transactions/</a></li><li>Repository: <a href="https://github.com/seddonm1/sqlite-bench">https://github.com/seddonm1/sqlite-bench</a></li><li>특히 BEGIN CONCURRENT 브랜치를 DEFERRED 및 IMMEDIATE 동작과 비교하는데 강력한 도구</li><li>SQLite에서 동시성을 달성: 다중 연결 사용, 연결 풀링, 파일 I/O 혼잡 관리 등을 목표로 개발 중</li></ul><br><h2 id="Sendune-오픈소스-HTML-이메일-디자이너"><a href="#Sendune-오픈소스-HTML-이메일-디자이너" class="headerlink" title="Sendune: 오픈소스 HTML 이메일 디자이너"></a>Sendune: 오픈소스 HTML 이메일 디자이너</h2><img src="./3.png" width="500"><ul><li>작성 및 유지가 어려운 html 이메일 작성을 간소화하기 위해 제작됨</li><li>모든 이메일 서비스 제공업체와의 호환성을 위한 순수 html을 생성함</li><li>Firefox에서 드래그 앤 드롭 기능과 관련된 몇 가지 문제가 보고되었음에도 불구하고, 커뮤니티의 반응은 긍정적</li></ul><br><h2 id="Garage-오픈소스-분산-객체-저장소"><a href="#Garage-오픈소스-분산-객체-저장소" class="headerlink" title="Garage: 오픈소스 분산 객체 저장소"></a>Garage: 오픈소스 분산 객체 저장소</h2><img src="./4.svg" width="200"><ul><li>Homepage: <a href="https://garagehq.deuxfleurs.fr/">https://garagehq.deuxfleurs.fr/</a></li><li>Repository: <a href="https://git.deuxfleurs.fr/Deuxfleurs/garage">https://git.deuxfleurs.fr/Deuxfleurs/garage</a></li><li>자체 호스팅을 위해 설계된 오픈 소스 분산 객체 저장소 서비스: 데이터를 3개의 zone에 복제해 중복성 제공</li><li>Minio보다 작은 파일과 복제에서 더 나은 성능으로 채택되고 있음</li><li>성능 향상, 낮은 메모리 사용량, 분산 합의를 위한 CRDTs(충돌 없는 복제 데이터 유형) 지원</li><li>하드웨어를 지원하고 호환성을 위해 Amazon S3 API를 구현했으며, NGI POINTER, NLnet / NGI0 Entrust 및 유럽 연합의 Horizon 2021 연구 및 혁신 프로그램의 자금으로 지원받고 있음</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 8월 오픈소스 소식지 (2): RouteLLM, 비전 언어 모델, Tau, AuraFlow, gpu.cpp, Github 서버 다운</title>
      <link href="/2024/08/27/OpenSource/2408(2)/"/>
      <url>/2024/08/27/OpenSource/2408(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="RouteLLM-LLM-라우터-제공-및-평가-프레임워크"><a href="#RouteLLM-LLM-라우터-제공-및-평가-프레임워크" class="headerlink" title="RouteLLM: LLM 라우터 제공 및 평가 프레임워크"></a>RouteLLM: LLM 라우터 제공 및 평가 프레임워크</h2><img src="./1.png" width="300"><ul><li>Repository: <a href="https://github.com/lm-sys/RouteLLM">https://github.com/lm-sys/RouteLLM</a></li><li>비용 최적화에 중점을 두고 LLM(대형 언어 모델) 라우터를 제공하고 평가하기 위해 설계된 프레임워크</li><li>더 간단한 쿼리를 저렴한 모델로 라우팅하여 OpenAI의 클라이언트에 대한 비용 효율적인 대안을 제공</li><li>주요 기능: 훈련된 라우터를 제공하여 비용을 최대 85%까지 절감할 수 있으며, 속도 제한, 토큰당 비용, 모델 선택과 같은 문제를 해결 -&gt; 예산을 중시하는 기업들에게 유용할 것으로 보임</li><li>그 외로도 다양한 모델과 제공업체를 지원하며, 임베딩 생성을 위해 OPENAI_API_KEY가 필요하고 비용과 품질의 균형을 맞추기 위해 임계값 조정이 가능함</li></ul><br><h2 id="비전-언어-모델-시각적-작업에-대한-어려움"><a href="#비전-언어-모델-시각적-작업에-대한-어려움" class="headerlink" title="비전 언어 모델: 시각적 작업에 대한 어려움"></a>비전 언어 모델: 시각적 작업에 대한 어려움</h2><ul><li>최근 <a href="https://vlmsareblind.github.io/">논문</a>에 따르면 GPT-4와 Sonnet 3.5, Gemini-1.5 Pro와 같은 비전 언어 모델(VLM)이 이미지-텍스트 작업에서 뛰어나지만, 간단한 시각적 작업에서 어려움을 겪고 있다는 주장이 나옴</li><li>비평가들은 VLM이 특정 작업에서는 실패할 수 있지만, 관련 데이터로 훈련될 때 다른 작업에서는 뛰어난 성과를 보인다고 주장하며, 과장되고 오해를 불러일으킬 수 있는 제목에 대해 경고 중</li><li>이 주제는 VLMs를 평가하는 복잡성과 그 한계 및 강점을 이해하는 것의 중요성을 강조함</li></ul><br><h2 id="Tau-오픈소스-PaaS"><a href="#Tau-오픈소스-PaaS" class="headerlink" title="Tau: 오픈소스 PaaS"></a>Tau: 오픈소스 PaaS</h2><img src="./2.png" width="300"><ul><li>Homepage: <a href="https://tau.how/">https://tau.how/</a></li><li>Repository: <a href="https://github.com/taubyte/tau">https://github.com/taubyte/tau</a></li><li>네트워크 자동 검색을 위해 libp2p를 사용하고 분산 저장을 위해 IPFS를 사용하는 Vercel, Netlify, Cloudflare의 오픈 소스, 자체 호스팅 플랫폼 서비스(PaaS) 대안 오픈소스</li><li>WebAssembly 네이티브로 벤더 종속을 피하는 등의 이점이 있음</li><li>다만 사용자들은 문서가 모호하고 개념이 불분명한 편</li><li>만들어진 것에 비해 쿠버네티스 및 Coolify와 CapRover와 같은 다른 PaaS 솔루션과의 비교하면 큰 차이점은 없으며 이는 곧 프로젝트의 잠재력을 나타내고 있음</li></ul><br><h2 id="AuraFlow-Stable-Diffusion-3의-오픈소스-대안책"><a href="#AuraFlow-Stable-Diffusion-3의-오픈소스-대안책" class="headerlink" title="AuraFlow: Stable Diffusion 3의 오픈소스 대안책"></a>AuraFlow: Stable Diffusion 3의 오픈소스 대안책</h2><img src="./3.svg" width="300"><ul><li>Homepage: <a href="https://blog.fal.ai/auraflow/">https://blog.fal.ai/auraflow/</a></li><li>Repository: <a href="https://github.com/fal-ai">https://github.com/fal-ai</a></li><li>flow 기반 텍스트-이미지 생성 모델로, v0.1의 초기 출시임에도 불구하고 가능성을 보여주는 오픈소스</li><li>간단한 프롬프트에서는 잘 작동하지만 복잡한 프롬프트와 부정문에서 어려움을 겪고 있어 개선이 필요함</li><li>실제 인간이 생성하는 텍스트와 프롬프트 처리에 있어 NLP의 중요성이 대두되고 있음</li></ul><br><h2 id="gpu-cpp-휴대용-저수준-GPU-연산을-위한-라이브러리"><a href="#gpu-cpp-휴대용-저수준-GPU-연산을-위한-라이브러리" class="headerlink" title="gpu.cpp: 휴대용 저수준 GPU 연산을 위한 라이브러리"></a>gpu.cpp: 휴대용 저수준 GPU 연산을 위한 라이브러리</h2><ul><li>Repository: <a href="https://github.com/AnswerDotAI/gpu.cpp">https://github.com/AnswerDotAI/gpu.cpp</a></li><li>OpenGL, Direct3D, Metal에 익숙한 개발자들이 접근할 수 있도록 단일 헤더 파일 API를 제공하는 휴대용 저수준 GPU 연산을 위한 경량 라이브러리</li><li>라이브러리는 웹GPU 구현에 의존됨 = 크로스 플랫폼 기능과 dawn 및 wgpu와 같은 성숙한 구현</li><li>Vulkan, Metal, OpenCL, ROCm, CUDA와 같은 다른 GPU 계산 프레임워크와의 성능 비교에 대한 의견이 주를 이루고 있음</li></ul><br><h2 id="Github-서버가-다운됨"><a href="#Github-서버가-다운됨" class="headerlink" title="Github 서버가 다운됨"></a>Github 서버가 다운됨</h2><img src="./4.png" width="300"><ul><li>2024년 8월 15일, Github가 다운되는 사건이 발생함</li><li>데이터베이스 인프라 변경으로 정전이 발생했음: 중앙 집중식 서비스의 문제점과 백업 계획의 필요성이 강조됨</li><li>이 때 Actions, Pages, Pull Requests와 같은 서비스가 작동하지 않았음</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>OAuth2.0를 알아보자</title>
      <link href="/2024/08/20/Security/Oauth2/"/>
      <url>/2024/08/20/Security/Oauth2/</url>
      
        <content type="html"><![CDATA[<p>요즘 로그인 및 회원가입 구현 시 필수라는 Oauth2.0에 대해서 개념을 자세하게 톺아보고자 한다.</p><h2 id="OAuth란"><a href="#OAuth란" class="headerlink" title="OAuth란?"></a>OAuth란?</h2><p>풀네임으로는 Open Authorization으로 부르며, 웹 및 애플리케이션 인증 및 권한을 부여하는 개방형 표준 프로토콜이다.</p><p>설명에 앞서, 일단 유명 포털의 개발 문서에서 정의된 내용을 한 번 가져와봤다.</p><blockquote><p>이 프로토콜에서는 third-party 애플리케이션이 사용자의 리소스에 접근하기 위한 절차를 정의하고 서비스 제공자의 API를 사용할 수 있는 권한을 부여합니다.<br>대표적으로 네이버 로그인, 구글 로그인과 같은 소셜 미디어 간편 로그인이 있습니다.<br>OAuth2.0을 사용해 third-party 애플리케이션이 사용자의 소셜미디어 프로필 정보에 접근할 수 있도록 합니다.<br>B2B PRISM Live Studio 역시 OAuth2.0을 사용하여 권한을 관리하기 때문에 OAuth2.0의 기본 개념을 안내하고, 권한 부여 방법을 설명합니다.</p><p>출처: <a href="https://guide.ncloud-docs.com/docs/b2bpls-oauth2">NCP 개발 문서</a></p></blockquote><p>어느 정도 개발자 짬이 찬 사람이라면 바로 이해할 수 있겠지만, 개발에 입문한지 별로 안됐거나 개발 문서 읽는게 아직 익숙치 않은 사람들은 뭔 소린가 싶을 것이다.</p><p>쉽게 설명하자면, <code>OAuth는 다른 사이트, 앱에서 소셜 회원가입/로그인 (또는 간편 회원가입/로그인이라고 함)을 할 때 사용되는 것</code>이라고 보면 된다.<br>가령 어떤 사이트에 로그인을 할 때 <strong>Google로 로그인하기</strong>, <strong>Naver로 로그인하기</strong>가 보인다면 이 때 OAuth를 사용한다는 의미이다.</p><p><br><br></p><h2 id="OAuth-“2-0”"><a href="#OAuth-“2-0”" class="headerlink" title="OAuth “2.0”"></a>OAuth “2.0”</h2><p>인터넷에 검색해보면 대부분 <code>2.0</code>이라는 버전을 찾을 수 있는데, 현재 대중적으로 사용하는 버전이 <code>2.0</code>이기 때문이다.</p><p>즉 이전 버전(=1.0)이 있었으며, 이전 버전에서 보완할 점이 생겨서 2.0이 나왔다고 생각하면 된다.</p><p>이전에 사용한 것에서 어떤 문제가 있었는지, 그리고 최근에는 왜 2.0을 사용하는지 알아보자.</p><h3 id="1-기존-인증-방식-Basic-Authentication"><a href="#1-기존-인증-방식-Basic-Authentication" class="headerlink" title="(1) 기존 인증 방식: Basic Authentication"></a>(1) 기존 인증 방식: Basic Authentication</h3><p>어쨌든간에 개발자 입장에서 로그인 한 유저에게 프로그램 접근 권한을 주기 위해서는 인증이 된 유저라고 표시를 해야하긴 한다.</p><p>따라서 기존에는 Basic Authentication (흔히 Auth라고 부름)에 따라, 애플리케이션에 사용자의 아이디 &amp; 비밀번호를 직접 제공해 접근 권한을 줬다.</p><p>하지만 다음의 문제가 항상 거론되었고, 이 때문에 OAuth 1.0이 생겨났다.</p><ul><li>보안 취약성: 클라이언트가 사용자의 자격 증명을 저장하거나 전송하는 과정에서 유출 위험</li><li>권한 관리 불가: 특정 자원에 대한 제한적인 권한 부여가 불가능. (모든 권한이 열림)</li><li>복잡성 증가: 사용자 비밀번호가 변경되면, 이를 사용하는 모든 서비스에서 수정해야 함</li></ul><p>한줄 요약하면 <strong>해킹 당하면 모든 정보가 털려서 문제</strong>라는 의미이다.</p><h3 id="2-OAuth-1-0의-등장-및-제한점"><a href="#2-OAuth-1-0의-등장-및-제한점" class="headerlink" title="(2) OAuth 1.0의 등장 및 제한점"></a>(2) OAuth 1.0의 등장 및 제한점</h3><h5 id="개발-배경"><a href="#개발-배경" class="headerlink" title="개발 배경"></a>개발 배경</h5><p>소프트웨어는 나날이 발전하고 있고, 이 때문에 사람들은 보안에 대해 깊게 생각하게 되었다.<br>그래서 나온 개념이 바로 OAuth 1.0이다.</p><p>개발자 입장에서는 보안을 되게 민감하게 받아들여야 하고, 하지만 관리가 매우 빡세다보니 구글이나 네이버같이 <strong>(주로) 대기업에서 이미 구현해둔 인증 로직을 가져와서 사용</strong>하는 것이다.<br>대기업에서 구현한 인증 로직은 아무래도 중소규모 기업들에 비해 보안 관리가 빡셀 것이며, 만약에 정보가 털렸다고 해도 책임이 대기업에게 있지 우리같은 소시민에게는 없기 때문이다.<br><del>폭탄 돌리기</del><br><del>물론 구현 잘못해서 정보 노출되게 코딩하면 우리 잘못이긴 하다</del></p><p>물론 그 외에도, 이런 인증 로직 하나 구현하는게 좀 빡센 편이라 이미 구현한거 가져와서 개발 시간을 아끼는겸 사용하기도 한다.</p><h5 id="Auth와-다른-점"><a href="#Auth와-다른-점" class="headerlink" title="Auth와 다른 점"></a>Auth와 다른 점</h5><p>OAuth 1.0에서는 남이 구현한 사용자 인증 로직을 가져오는 것이기 때문에, 내가 해당 인증 로직을 가져와도 되는가를 증명할 수단이 필요하다. 이것이 바로 <code>HMAC-SHA1 (서명 기반 인증)</code>이다.<br>이 로직을 이용하면 기존에 구현된 인증 로직을 바탕으로, 아이디 및 비밀번호를 넣으면 접근 권한을 받아올 수 있다.</p><h5 id="한계점"><a href="#한계점" class="headerlink" title="한계점"></a>한계점</h5><ul><li>복잡한 프로세스: 요청마다 일일이 서명 생성 및 검증이 필요 -&gt; 구현 및 디버깅이 어려우며, 개발자에게 너무 많은 학습을 요구함</li><li>확장성 부족: 특정 인증/권한 시나리오에 맞춰 설계되어 다양한 클라이언트 유형(SPA, 모바일 애플리케이션 등)에 적용하기 어려움</li><li><strong>TSL 의존성 부족</strong>: 사실 상 원인<ul><li>서명으로 보안은 강화했으나, TLS를 필수로 요구하지 않아 <strong>Man-in-the-Middle</strong>에 매우 취약적</li><li>(참고) Man-in-the-Middle(중간자 공격): 두 당사자 간의 통신을 가로채서 조작 및 엿듣는 사이버 공격 방식<blockquote><p>(위치 선정)<br>공격자는 클라이언트(사용자)가 사용하고 있는 wifi에 접속함<br>그리고 클라이언트와 서버 사이의 통신 경로에 잠복</p><p>(통신 가로채기)<br>이 때 클라이언트가 서버에게 요청을 보냄<br>서버에 도달하기 전에 해당 요청을 공격자가 가로챔<br>클라이언트가 요청한 정보를 수정하거나 읽고 서버에 전달</p><p>(응답 가로채기)<br>마찬가지로, 서버에서 클라이언트에게 보낸 응답도 공격자가 가로챔<br>서버가 보낸 응답 내용을 수정하거나 읽고 클라이언트에게 전달</p></blockquote></li></ul></li></ul><h3 id="3-OAuth-2-0의-등장"><a href="#3-OAuth-2-0의-등장" class="headerlink" title="(3) OAuth 2.0의 등장"></a>(3) OAuth 2.0의 등장</h3><p>이렇게 OAuth 1.0의 한계를 극복하고자 나온 것이 바로 OAuth 2.0이다.</p><ul><li>프로세스 간소화: 서명 대신 <code>Access Token</code>을 사용해서 요청을 단순화</li><li>확장성 및 표준화<ul><li>확장 가능한 구조로, 추가적인 인증 메커니즘(JWT, OpenID Connect 등)과 쉽게 통합 가능</li><li>다양한 플랫폼과 서비스(Google, Facebook, GitHub 등)에서 표준으로 채택</li><li>다양한 클라이언트 유형 지원<ul><li>다양한 Grant Type 제공:<ul><li>Authorization Code Grant: 서버 사이드 애플리케이션.</li><li>Implicit Grant: 브라우저 기반 애플리케이션.</li><li>Client Credentials Grant: 서버 간 통신.</li><li>Resource Owner Password Grant: 신뢰할 수 있는 클라이언트.</li></ul></li><li>각 시나리오에 맞는 유연한 인증 방식 제공.</li></ul></li></ul></li><li>TSL 필수 사용: 데이터 전송 중에 보안을 보장하여 데이터의 무결성 입증 가능</li></ul><br><p>기능이 개선이 되었지만, 이것이 그렇다고 ✨만능✨인 것은 아니다.<br>현재 크게 두 가지 단점이 있는데, 바로</p><ul><li>초기 설정이 까다롭고</li><li><strong>Access Token</strong>이 유출되면 악용될 가능성이 매우 높아지기 때문이다.</li></ul><p>이 또한 언젠가 해결해야 하는 문제로 토론이 이루어지고 있으나, 현재까지로는 토큰만 유출 안되면 이론상 완벽하기 때문에 다들 바로 표준으로 채택한 것이다.<br>따라서 2.0이 2012년에 나왔는데, 현재까지 3.0은 나오지 않은 상태이다.</p><img src="./2.png" width="800"><h3 id="4-OAuth-2-0-주요-용어"><a href="#4-OAuth-2-0-주요-용어" class="headerlink" title="(4) OAuth 2.0 주요 용어"></a>(4) OAuth 2.0 주요 용어</h3><ul><li>Resource Owner (자원 소유자)<ul><li>자원의 주인. 일반적으로 사용자를 지칭함</li><li>ex) Facebook 계정을 가진 사용자</li></ul></li><li>Client (클라이언트)<ul><li>자원 소유자가 허용한 자원에 접근하려는 애플리케이션</li><li>ex) 자신의 Google Drive에 파일을 업로드하는 서비스</li></ul></li><li>Authorization Server (인증 서버)<ul><li>클라이언트가 인가 코드 또는 토큰을 요청하는 서버</li><li>예: Google, Facebook 등</li></ul></li><li>Resource Server (자원 서버)<ul><li>보호된 자원이 저장된 서버</li><li>예: Google Drive API 서버</li></ul></li><li>Access Token (액세스 토큰)<ul><li>클라이언트가 자원 서버에 접근할 때 사용하는 임시 키</li><li>만료 시간이 있음</li></ul></li></ul><h3 id="5-OAuth-2-0-작동-방식"><a href="#5-OAuth-2-0-작동-방식" class="headerlink" title="(5) OAuth 2.0 작동 방식"></a>(5) OAuth 2.0 작동 방식</h3><img src="./1.png" width="500"><p>출처: <a href="https://developers.google.com/identity/protocols/oauth2?hl=ko">GCP 개발 문서</a></p><ol><li><strong>Request token</strong><ul><li>사용자(클라이언트)는 로그인을 시도함. 이 때 Google이나 Naver같은 소셜 로그인을 선택함 = 사용자는 사용자 권한을 얻기 위해 인증을 받아야함</li><li>이때 사용하는 토큰은 업체마다 구현이 다름: 개발문서를 꼭 참고할 것</li></ul></li><li><strong>Authorization code</strong><ul><li>사용자가 인증 서버에서 로그인을 완료하면, 인증 서버는 Authorization code를 redirect url로 전달함</li><li>이 때 code는 임시로, 시간이 지나면 다시 재발급을 받아야 함</li></ul></li><li><strong>Exchange code for token &amp; Token response</strong>: code를 이용해서 curl 요청을 보냄으로써 <code>Access token</code>을 발급함</li><li><strong>Use token to call API</strong><ul><li>API를 요청할 때, Access token을 사용해서 사용자 정보를 인증함</li><li>설명을 위해 로그인을 예시로 들었기 때문에, 여기서는 login API가 사용될 것이고 인증이 잘 됐다면 바로 로그인이 될 것임</li></ul></li></ol>]]></content>
      
      
      <categories>
          
          <category> 🔐 Security </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Security </tag>
            
            <tag> Auth </tag>
            
            <tag> OAuth2 </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 8월 오픈소스 소식지 (1): Xpra, Rye, DB Browser for SQLite (DB4S), Crawlee for Python, AMD의 Silo AI 인수, Zed</title>
      <link href="/2024/08/11/OpenSource/2408(1)/"/>
      <url>/2024/08/11/OpenSource/2408(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Xpra-X11을-위한-원격-애플리케이션"><a href="#Xpra-X11을-위한-원격-애플리케이션" class="headerlink" title="Xpra: X11을 위한 원격 애플리케이션"></a>Xpra: X11을 위한 원격 애플리케이션</h2><ul><li>Repository: <a href="https://github.com/Xpra-org/xpra">https://github.com/Xpra-org/xpra</a></li><li>원격 호스트에서 X11 프로그램을 실행하고 로컬에서 표기하며, state를 잃지 않고 다시 연결할 수 있는 기능</li><li>오디오, 프린터, 클립보드, 시스템 트레이, 알림 및 웹캠과 같은 기능 통합</li><li>Windows, MacOS, Linux 등에서 설치 가능</li><li>Wayland와의 사용에 대한 논쟁이 계속되고 있으며, 각 애플리케이션마다 장단점이 있으니 잘 찾아보고 사용할 것</li></ul><br><h2 id="Rye-Python-프로젝트-및-패키지-관리-솔루션"><a href="#Rye-Python-프로젝트-및-패키지-관리-솔루션" class="headerlink" title="Rye: Python 프로젝트 및 패키지 관리 솔루션"></a>Rye: Python 프로젝트 및 패키지 관리 솔루션</h2><img src="./1.svg" width="300"><ul><li>Homepage: <a href="https://rye.astral.sh/">https://rye.astral.sh/</a></li><li>Repository: <a href="https://github.com/astral-sh/rye">https://github.com/astral-sh/rye</a></li><li>Python 설치, 프로젝트, 종속성 및 가상 환경 관리를 위한 통합 경험을 제공하는 포괄적인 프로젝트 및 패키지 관리 솔루션</li><li>복잡한 프로젝트, 모노레포(여러 프로젝트를 포함하는 저장소) 및 글로벌 도구 설치를 지원하여 다양한 개발 요구에 맞게 다재다능하게 사용 가능</li><li>설치가 간단하며, Linux, macOS 및 Windows에 대한 구체적인 지침이 제공되며, Rust와 Cargo를 사용하여 소스에서 컴파일하는 옵션도 제공됨</li><li>즉, 모든 플랫폼과 운영 체제에서 작동하는 requirements.txt 파일을 생성할 수 있는 “범용” 해상도를 지원하는 Python 패키징 도구</li><li>PyTorch와 같은 종속성을 포함한 복잡한 프로젝트에서 Rye의 향상된 해상 능력 덕분에 Poetry와 같은 다른 도구에서 Rye로의 성공적인 전환을 했다는 보고가 잇따르고 있음</li></ul><br><h2 id="DB-Browser-for-SQLite-DB4S"><a href="#DB-Browser-for-SQLite-DB4S" class="headerlink" title="DB Browser for SQLite (DB4S)"></a>DB Browser for SQLite (DB4S)</h2><img src="./2.svg" width="300"><ul><li>Homepage: <a href="https://sqlitebrowser.org/">https://sqlitebrowser.org/</a></li><li>Repository: <a href="https://github.com/sqlitebrowser/sqlitebrowser">https://github.com/sqlitebrowser/sqlitebrowser</a></li><li>스프레드시트와 유사한 인터페이스와 완전한 SQL 쿼리 기능을 갖춘 고품질의 시각적 오픈 소스 SQLite 데이터베이스 파일 관리 도구</li><li>데이터베이스 파일, 테이블 및 레코드를 생성, 편집 및 관리할 수 있으며, 데이터의 가져오기/내보내기와 SQL 쿼리 실행도 지원하여 데이터베이스 관리에 있어 다재다능한 도구</li><li>Windows, MacOS, Linux에서 사용 가능</li><li>특히 대용량 CSV 파일을 처리하는 데 있어 효율이 좋으며, DBeaver와 SQLiteStudio와 같은 다른 도구들과 비교하여 긍정적으로 평가되고 있음</li><li>STRICT 지원 및 오프라인 라이선스와 같은 추가 기능 및 지원이 필요한 상황</li></ul><br><h2 id="Crawlee-for-Python-웹-스크래핑-및-브라우저-자동화-라이브러리"><a href="#Crawlee-for-Python-웹-스크래핑-및-브라우저-자동화-라이브러리" class="headerlink" title="Crawlee for Python: 웹 스크래핑 및 브라우저 자동화 라이브러리"></a>Crawlee for Python: 웹 스크래핑 및 브라우저 자동화 라이브러리</h2><img src="./3.svg" width="300"><ul><li>Homepage: <a href="https://crawlee.dev/python/">https://crawlee.dev/python/</a></li><li>Repository: <a href="https://github.com/apify/crawlee-python">https://github.com/apify/crawlee-python</a></li><li>신뢰할 수 있는 크롤러를 빠르게 구축할 수 있도록 설계된 새로운 웹 스크래핑 및 브라우저 자동화 라이브러리</li><li>HTTP 및 헤드리스 브라우저 크롤링을 위한 통합 인터페이스, 자동 병렬 크롤링, 타입 힌트, 자동 재시도, 프록시 회전, 세션 관리, 구성 가능한 요청 라우팅, 지속적인 URL 큐, 플러그인 가능한 스토리지 지원</li><li>향후 문서 개선 및 추가 기능을 계획 중</li></ul><br><h2 id="AMD가-Silo-AI를-6억-6500만-달러에-인수"><a href="#AMD가-Silo-AI를-6억-6500만-달러에-인수" class="headerlink" title="AMD가 Silo AI를 6억 6500만 달러에 인수"></a>AMD가 Silo AI를 6억 6500만 달러에 인수</h2><ul><li>AMD가 AI 및 ML에서 소프트웨어를 향상을 위해 Silo AI를 인수함</li><li>따라서 AMD 하드웨어데서 Silo AI의 LLM을 세팅함으로써 AMD의 SW스택과 경쟁력을 강화할 것으로 예상됨</li></ul><br><h2 id="Zed-새로운-리눅스-텍스트-편집기"><a href="#Zed-새로운-리눅스-텍스트-편집기" class="headerlink" title="Zed: 새로운 리눅스 텍스트 편집기"></a>Zed: 새로운 리눅스 텍스트 편집기</h2><img src="./4.png" width="200"><ul><li>Homepage: <a href="https://zed.dev/linux">https://zed.dev/linux</a></li><li>Repository: <a href="https://github.com/zed-industries/zed">https://github.com/zed-industries/zed</a></li><li>Zed의 속도 및 Native한 느낌, 협업 가능, UI 디자인 등에서 호평을 받고 있음</li><li>다만 Typescript 통합 및 버전 관리에서는 지적을 받는 중</li><li>잠재적인 사용자가 많음에 따라 잠재적인 미래 수익화에 대한 우려가 재기되는 중. 현재는 대부분의 사용자들이 도구를 계속 사용하면서 개발 상황을 주시하는 중</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 7월 오픈소스 소식지 (2): SmoothMQ, OpenDNS, Ladybird, Windows 10의 Firefox 97 에러, Webflow</title>
      <link href="/2024/07/29/OpenSource/2407(2)/"/>
      <url>/2024/07/29/OpenSource/2407(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="SmoothMQ-SQLite-기반의-SQS-대체-오픈소스"><a href="#SmoothMQ-SQLite-기반의-SQS-대체-오픈소스" class="headerlink" title="SmoothMQ: SQLite 기반의 SQS 대체 오픈소스"></a>SmoothMQ: SQLite 기반의 SQS 대체 오픈소스</h2><ul><li>Repository: <a href="https://github.com/poundifdef/SmoothMQ">https://github.com/poundifdef/SmoothMQ</a></li><li>Amazon SQS를 대체할 수 있는 오픈소스</li><li>Go 언어로 작성되었으며 SQLite를 저장소로 사용하는 단일 바이너리로 배포됨</li><li>일정 관리, 가시성, 속도 제한과 같은 고급 기능을 제공하며, 단순히 엔드포인트를 변경함으로써 기존 SQS 애플리케이션과 호환됨</li><li>여러 프로토콜(AMQP, PubSub)을 지원하며 다양한 스토리지 백엔드(RocksDB, Postgres)에 적응할 수 있음</li><li>향후 분산 및 자동 확장 기능을 계획하고 있으며, 비용 효율적인 호스팅 큐 시스템을 제공하는 것을 목표함</li></ul><br><h2 id="OpenDNS-Canal-의-불법-복제-차단-명령으로-인해-프랑스에서-서비스-중단"><a href="#OpenDNS-Canal-의-불법-복제-차단-명령으로-인해-프랑스에서-서비스-중단" class="headerlink" title="OpenDNS: Canal+의 불법 복제 차단 명령으로 인해 프랑스에서 서비스 중단"></a>OpenDNS: Canal+의 불법 복제 차단 명령으로 인해 프랑스에서 서비스 중단</h2><ul><li>프랑스 법원이 Canal+의 요청에 따라 기존의 불법 사이트 차단을 우회하는 DNS 기록을 차단하도록 Google, Cloudflare, 및 Cisco에 명령함</li><li>이에 대응하여 주요 기업들이 프랑스에서 OpenDNS 서비스를 철회함</li><li>이는 DNS 조작과 잠재적인 정부 권한 남용으로 볼 수 있으며, 사용자들이 대체 DNS 서버 또는 VPN으로 이동하게 됨 = DNS 차단을 시행하는데 있어서 기술적인 어려움과 영향이 있을 것으로 보임</li></ul><br><h2 id="Ladybird-독립-웹-브라우저"><a href="#Ladybird-독립-웹-브라우저" class="headerlink" title="Ladybird: 독립 웹 브라우저"></a>Ladybird: 독립 웹 브라우저</h2><p><img src="1.webp"></p><ul><li>Homepage: <a href="https://github.com/LadybirdBrowser/ladybird">https://github.com/LadybirdBrowser/ladybird</a></li><li>Repository: <a href="https://github.com/LadybirdBrowser/ladybird">https://github.com/LadybirdBrowser/ladybird</a></li><li>처음에는 SerenityOS를 위한 HTML 뷰어였으나, 지금은 Linux, macOS 및 기타 유닉스 계열 시스템을 지원함</li><li>다른 브라우저의 코드를 사용하지 않으며, 웹 브라우저로서의 단일한 목적에 집중하고, 광고나 사용자 데이터를 통한 수익 창출이 없음</li><li>알파 버전 출시는 2026년 여름으로 계획되어 있으며, 개발 자금은 후원과 기부로 충당됨. 최근 Github 창립자 (크리스 완스트래스)에게 100만 달러 기부금을 받음</li></ul><br><h2 id="Windows-10의-Firefox-97-에러-복사-amp-붙여넣기-컨텍스트-메뉴-항목-비활성화"><a href="#Windows-10의-Firefox-97-에러-복사-amp-붙여넣기-컨텍스트-메뉴-항목-비활성화" class="headerlink" title="Windows 10의 Firefox 97 에러: 복사 &amp; 붙여넣기 컨텍스트 메뉴 항목 비활성화"></a>Windows 10의 Firefox 97 에러: 복사 &amp; 붙여넣기 컨텍스트 메뉴 항목 비활성화</h2><ul><li>Homepage: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1863246">https://bugzilla.mozilla.org/show_bug.cgi?id=1863246</a></li><li>페이지 북마크 뒤 앞뒤로 이동할 때, 복사 및 붙여넣기 컨텍스트 메뉴 항목이 비활성화되는 문제 확인</li><li>프로세스 간의 충돌을 원인으로 보고 있으며, 이를 해결하기 위해 수정 작업을 진행 중</li><li>임시 해결 방법으로는 주소 표시줄을 클릭하거나 탭을 전환하면 됨</li><li>향후 릴리즈에서 해결될 것으로 보이나, 관심이 있는 사람들은 오픈소스 기여를 생각해보면 좋을 듯</li></ul><br><h2 id="Webflow-간단한-플러그인으로-React-애플리케이션을-시각적으로-편집"><a href="#Webflow-간단한-플러그인으로-React-애플리케이션을-시각적으로-편집" class="headerlink" title="Webflow: 간단한 플러그인으로 React 애플리케이션을 시각적으로 편집"></a>Webflow: 간단한 플러그인으로 React 애플리케이션을 시각적으로 편집</h2><ul><li>Homepage: <a href="https://onlook.dev/">https://onlook.dev/</a></li><li>Repository: <a href="https://github.com/onlook-dev/onlook">https://github.com/onlook-dev/onlook</a></li><li>개발자가 로컬에서 실행 중인 React 애플리케이션을 시각적으로 편집하고 실시간으로 코드를 다시 작성할 수 있는 앱</li><li>간단한 플러그인 추가만으로 로컬에서 실행 가능하며, React parser, processing, CSS를 Tailwind로 변환하는 기능 포함</li><li>향후 레이어 검사 및 선택, 요소 재정렬, 코드 반영 전 변경 사항에 대한 테스트 개발이 필요함</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 7월 오픈소스 소식지 (1): Google Sheets, Corcel, Python, Posit, Eclipse Theia IDE, Overleaf</title>
      <link href="/2024/07/13/OpenSource/2407(1)/"/>
      <url>/2024/07/13/OpenSource/2407(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Google-Sheets-JavaScript-gt-WasmGC-이전"><a href="#Google-Sheets-JavaScript-gt-WasmGC-이전" class="headerlink" title="Google Sheets: JavaScript -> WasmGC 이전"></a>Google Sheets: JavaScript -&gt; WasmGC 이전</h2><ul><li>Google Sheets가 성능 향상을 위해 JavaScript에서 WasmGC(WebAssembly Garbage Collection)으로 전환</li><li>초기에는 성능이 느렸지만 JS버전보다 두 배 빠르게 최적화됨</li><li>하지만 여전히 Excel같은 네이티브 애플리케이션에 비해 느리다고 반응이 많으며, 웹 기술에 있어서 최적화에 지속적인 발전을 강조함</li></ul><br><h2 id="Corcel-WordPress-백엔드로-최적화된-라이브러리"><a href="#Corcel-WordPress-백엔드로-최적화된-라이브러리" class="headerlink" title="Corcel: WordPress 백엔드로 최적화된 라이브러리"></a>Corcel: WordPress 백엔드로 최적화된 라이브러리</h2><img src="./1.png" width="200"><ul><li>Repository: <a href="https://github.com/corcel/corcel">https://github.com/corcel/corcel</a></li><li>Laravel의 Eloquent ORM을 기반으로 구축된 PHP 라이브러리로: WordPress 데이터베이스에서 직접 데이터를 가져올 수 있으며, Composer를 통해 Laravel 또는 다른 PHP 프로젝트에서 사용할 수 있음</li><li>주요 기능: 사용자 정의 게시물 유형, 숏코드, 분류법, 페이지, 첨부 파일, 수정본, 썸네일, 옵션, 메뉴, 사용자 및 인증</li><li>설치 및 구성은 간단하며, Laravel 5.5+ 버전에서는 자동 등록이 가능함<ul><li>단 이전 버전이나 Laravel이 아닌 프로젝트의 경우 수동 설정이 필요함</li></ul></li><li>WordPress 데이터와의 매끄러운 인터페이스로 찬사를 받고 있으며, WordPress 데이터베이스와 상호작용이 필요한 PHP 프로젝트에 유지 가능한 솔루션을 제공하여 Prismic, Strapi, Shopify와 같은 도구들과 비교해도 긍정적인 평가를 받고 있음</li></ul><br><h2 id="Python-애플-앱-스토어-거부-사건"><a href="#Python-애플-앱-스토어-거부-사건" class="headerlink" title="Python: 애플 앱 스토어 거부 사건"></a>Python: 애플 앱 스토어 거부 사건</h2><ul><li>Python 3.11에서 3.12로 업그레이드 되면서, 일부 Python앱이 urllib파서에 포함된 <code>itms-services</code> 문자열 때문에 Apple의 앱 스토어에서 거부됨<ul><li>macOS의 샌드박스 앱에서 금지되어 있는 문자열임</li><li>PyInstall로 빌드된 경우 발생하는 것을 보고됨</li></ul></li><li>Python 3.13에서 “앱 스토어 준수”라는 빌드 타임 옵션을 추가하기로 합의가 이루어졌으며, 앱 스토어 제출 시 문제가 되는 코드를 제거하여 자유로은 SW 프로젝트가 될 수 있도록 결정함</li><li>대안으로는 SignPath의 무료 인증서를 사용하는 것으로 제안됨</li></ul><br><h2 id="Posit-RStudio-개발자가-제작한-Visual-Studio-Code-기반-R-및-Python-IDE"><a href="#Posit-RStudio-개발자가-제작한-Visual-Studio-Code-기반-R-및-Python-IDE" class="headerlink" title="Posit: RStudio 개발자가 제작한 Visual Studio Code 기반 R 및 Python IDE"></a>Posit: RStudio 개발자가 제작한 Visual Studio Code 기반 R 및 Python IDE</h2><img src="./2.svg" width="200"><ul><li>Homepage: <a href="https://positron.posit.co/">https://positron.posit.co/</a></li><li>Repository: <a href="https://github.com/posit-dev/positron">https://github.com/posit-dev/positron</a></li><li>macOS, Windows 및 Linux에서 사용할 수 있으며, 추가 확장 없이 R과 Python을 기본적으로 지원</li><li>IDE에는 데이터 및 변수 탐색기가 포함되어 있어 데이터 조작이 용이하며, OpenVSX 레지스트리를 통해 다른 VS Code 확장 기능도 지원하지만 아직 초기 개발 단계에 있음</li></ul><br><h2 id="Eclipse-Theia-IDE"><a href="#Eclipse-Theia-IDE" class="headerlink" title="Eclipse Theia IDE"></a>Eclipse Theia IDE</h2><ul><li>Eclipse 재단에서 Theia IDE를 이제 정식으로 사용할 수 있다고 발표함</li><li>이에 따라 Microsoft의 Visual Studio Code에 대한 오픈소스 대안으로 자기매김을 하는 중</li><li>Ericsson, IBM, Google과 같은 주요 기업들의 기여를 받고 있음</li><li>코드를 fork하지 않아도 광범위한 커스터마이징을 허용하여 데스크탑 및 클라우드 IDE 모두에 적합함</li></ul><br><h2 id="Overleaf-LaTeX-편집기"><a href="#Overleaf-LaTeX-편집기" class="headerlink" title="Overleaf: LaTeX 편집기"></a>Overleaf: LaTeX 편집기</h2><img src="./3.png" width="300"><ul><li>Repository: <a href="https://github.com/overleaf/overleaf">https://github.com/overleaf/overleaf</a></li><li>Overleaf: 호스팅 서비스와 로컬 배포 모두 가능한 오픈 소스 실시간 협업 LaTeX 편집기 -&gt; 주로 논문 작성에 사용됨</li><li>Overleaf Server Pro: 보안(SSO와 LDAP 또는 SAML) 및 고급 협업 도구를 포함</li><li>이 프로젝트는 배포를 위해 Docker를 사용하며, 자세한 빌드 지침과 기여는 GNU Affero General Public License Version 3에 의거함</li><li>Markdown에 대한 Pandoc 지원과 같은 추가 기능에 대한 요청이 있으며, 이에 대한 기여가 필요함</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Container 정리</title>
      <link href="/2024/07/12/DevOps/Container/"/>
      <url>/2024/07/12/DevOps/Container/</url>
      
        <content type="html"><![CDATA[<p>개발을 하다보면 아무래도 docker를 많이 쓰게 될텐데, 그 때 컨테이너 어쩔저쩔~~ 이라는 개념이 나오면서 사람들의 머리가 아파지기 시작한다.<br>따라서 컨테이너에 대해 개념을 잡고 싶은 사람이라면 이 글을 잘 읽어보길 추천한다. 배포 세팅(특히 devops, cloud native)에서 많이 언급되는 개념이기 때문이다.</p><h2 id="1-Container란"><a href="#1-Container란" class="headerlink" title="1. Container란"></a>1. Container란</h2><p>컨테이너는 애플리케이션과 필요한 라이브러리, 종속성을 하나로 묶어 어디서나 실행할 수 있는 일종의 <strong>가벼운 실행 환경</strong>이다.</p><p>따라서 특정 OS나 환경에 의존하지 않고 동일하게 실행된다는 의미다.</p><blockquote><p>쉽게 풀어보자면, 프로젝트를 진행하는데 A는 Windows에서, B는 MacOS에서 진행한다고 쳐보자.<br>따라서 각 환경마다 세팅이 다르기 때문에 각자 라이브러리 및 종속성을 같은 세팅으로 다운받더라도 오류가 날 수 있다는 의미다.<br>이 때 컨테이너를 사용하면 OS가 다름에도 불구하고 동일하게 프로그램이 실행된다. </p></blockquote><h2 id="2-Container에서-사용하는-중요-개념"><a href="#2-Container에서-사용하는-중요-개념" class="headerlink" title="2. Container에서 사용하는 중요 개념"></a>2. Container에서 사용하는 중요 개념</h2><p>말로만 적으면 이해가 어렵기 때문에 시나리오를 하나 정의해서 설명을 해보도록 하겠다.</p><blockquote><p><code>상황</code></p><ul><li>A: Windows 사용자, B: Macbook 사용자</li><li>이 둘은 팀플로 <strong>Python Flask 웹 애플리케이션</strong>을 개발 중</li><li>A는 로컬 Windows에서, B는 로컬 Macbook에서 작업 중임 = 프로젝트 실행 환경이 다름</li><li>A는 컨테이너 기술을 사용하여 동일한 환경에서 실행될 수 있도록 설정하고 이를 B에게 공유하려고 함</li></ul></blockquote><table><thead><tr><th align="center">개념</th><th align="center">설명</th><th align="center">예시</th></tr></thead><tbody><tr><td align="center">Container</td><td align="center">애플리케이션 실행 환경</td><td align="center">- A는 Python Flask 애플리케이션을 실행하기 위해 컨테이너를 사용함<br>- B는 A가 만든 컨테이너를 그대로 실행하면 동일한 환경에서 앱이 실행됨</td></tr><tr><td align="center">Container Image</td><td align="center">실행 환경을 템플릿으로 저장</td><td align="center">- A는 컨테이너 실행을 위한 환경(Python, Flask, 그 외 기타 requirements.txt 의존성 모듈)을 이미지로 저장</td></tr><tr><td align="center">Container Runtime</td><td align="center">컨테이너를 실행 및 관리</td><td align="center">- A와 B 모두 컨테이너 런타임을 사용하여 컨테이너를 실행</td></tr><tr><td align="center">Container Orchestration</td><td align="center">여러 컨테이너의 배포, 스케일링, 관리 등을 자동화</td><td align="center">- A와 B의 프로젝트가 성장하며 트래픽이 증가하면, 오케스트레이션 도구로 컨테이너를 확장</td></tr><tr><td align="center">Namespaces</td><td align="center">컨테이너의 리소스(CPU, 메모리 등) 격리</td><td align="center">- Flask 웹 컨테이너 / PostgreSQL 데이터베이스 컨테이너 / Redis 캐시 컨테이너 (각각 분리)<br>- 컨테이너별로 독립된 네트워크 스택(IP주소, 포트, 라우팅 테이블 등)을 가짐<br>- A의 로컬 시스템에서 실행 중인 프로세스를 확인할 때, 컨테이너의 내부 프로세스를 검색할 수 없음</td></tr><tr><td align="center">CGroups(Control Groups)</td><td align="center">리소스 사용량 제한</td><td align="center">- Flask 웹 컨테이너 / PostgreSQL 데이터베이스 컨테이너 / Redis 캐시 컨테이너 (각각 분리)<br>- A가 컨테이너를 생성할 때 한 쪽 컨테이너로만 너무 많이 리소스를 사용하지 않도록 제어</td></tr><tr><td align="center">Networking</td><td align="center">컨테이너 간 외부 통신</td><td align="center">- Flask 웹 컨테이너 / PostgreSQL 데이터베이스 컨테이너 / Redis 캐시 컨테이너 (각각 분리)<br>- A와 B는 웹 컨테이너와 데이터베이스 컨테이너를 연결하여 사용</td></tr><tr><td align="center">Registry</td><td align="center">컨테이너 이미지를 저장 및 배포</td><td align="center">- A는 컨테이너 이미지를 Hub에 업로드하여 B와 공유<br>- B는 Hub에서 이미지를 다운받아 사용</td></tr></tbody></table><h2 id="3-Container-VS-VM-Virtual-Machine"><a href="#3-Container-VS-VM-Virtual-Machine" class="headerlink" title="3. Container VS VM(Virtual Machine)"></a>3. Container VS VM(Virtual Machine)</h2><table><thead><tr><th align="center">Container</th><th align="center">Virtual Machine</th></tr></thead><tbody><tr><td align="center">Kernal 공유</td><td align="center">Hypervisor 기반</td></tr><tr><td align="center">빠른 속도, 가벼움, 이식성</td><td align="center">높은 격리성, 완전한 OS 제공</td></tr></tbody></table><h3 id="Kernal-커널-서로-사이좋게-양보하며-컴퓨터-자원-공유"><a href="#Kernal-커널-서로-사이좋게-양보하며-컴퓨터-자원-공유" class="headerlink" title="Kernal (커널): 서로 사이좋게 양보하며 컴퓨터 자원 공유"></a>Kernal (커널): 서로 사이좋게 양보하며 컴퓨터 자원 공유</h3><ul><li>OS의 핵심 부분으로, HW와 SW간의 다리 역할</li><li>애플리케이션이 하드웨어 자원(CPU, 메모리, 디스크, 네트워크 등)을 사용할 수 있도록 중개</li></ul><blockquote><p><code>상황</code> </p><ul><li>C, D, E는 각각 Flask, PostgreSQL, Redis로 실행 중</li><li>CPU는 4코어, 메모리는 8GB로 설정</li></ul><p><code>예시</code></p><ul><li>C가 러닝 중일 때 (D와 E는 유휴 상태):<ul><li>C(Flask) 가 모든 CPU와 메모리를 사용</li><li>다른 컨테이너(D, E)가 비활성 상태이므로 커널은 자원을 C에 최대한 배분</li></ul></li><li>D(PostgreSQL) 러닝 시작: 커널이 자원을 동적으로 조정<ul><li>C(Flask)** 가 CPU 2코어, 메모리 4GB를 사용하도록 줄임</li><li>D(PostgreSQL)*에게 CPU 2코어, 메모리 4GB를 배분</li><li>자원이 부족할 경우 <strong>cgroups(Control Groups)</strong> 설정에 따라 특정 컨테이너(C 또는 D)의 자원을 제한</li></ul></li><li>D와 E가 동시에 러닝 시작: 자원이 더 많이 나눠짐<ul><li>C(Flask): CPU 1코어, 메모리 3GB</li><li>D(PostgreSQL): CPU 2코어, 메모리 3GB</li><li>E(Redis): CPU 1코어, 메모리 2GB</li></ul></li></ul></blockquote><h3 id="Hypervisor-하이퍼바이저-사이가-안좋아서-자원을-빌리되-서로-공유하지-않음"><a href="#Hypervisor-하이퍼바이저-사이가-안좋아서-자원을-빌리되-서로-공유하지-않음" class="headerlink" title="Hypervisor (하이퍼바이저): 사이가 안좋아서 자원을 빌리되 서로 공유하지 않음"></a>Hypervisor (하이퍼바이저): 사이가 안좋아서 자원을 빌리되 서로 공유하지 않음</h3><ul><li>가상화를 위한 소프트웨어</li><li>물리적 하드웨어(= 실제 컴퓨터)에서 여러 개의 VM을 실행할 수 있게함</li></ul><blockquote><p><code>상황</code></p><ul><li>C, D, E는 각각 Windows, Ubuntu, CentOS로 실행 중<br>CPU는 8코어, 메모리는 16GB로 설정</li></ul><p><code>예시</code></p><ul><li>C가 실행 중일 때 (D와 E는 비활성 상태):<ul><li>C(Windows)가 CPU 8코어, 메모리 16GB를 사용</li><li>다른 VM(D, E)이 비활성 상태이므로 하이퍼바이저는 모든 자원을 C에 배분</li></ul></li><li>D(Ubuntu)가 실행을 시작하면: 하이퍼바이저가 자원을 동적으로 조정<ul><li>C(Windows): CPU 4코어, 메모리 8GB</li><li>D(Ubuntu): CPU 4코어, 메모리 8GB</li><li>각 VM은 독립된 OS와 애플리케이션을 실행하며 서로 영향을 주지 않음</li></ul></li><li>D와 E(CentOS)가 동시에 실행을 시작하면: 자원이 세 VM으로 나눠짐<ul><li>C(Windows): CPU 3코어, 메모리 6GB</li><li>D(Ubuntu): CPU 3코어, 메모리 6GB</li><li>E(CentOS): CPU 2코어, 메모리 4GB</li><li>각 VM은 독립된 OS와 애플리케이션을 실행하며 서로 영향을 주지 않음<br>=&gt; 많아지면 컴퓨터 속도 저하 원인</li></ul></li></ul></blockquote><h2 id="4-Container-도구들"><a href="#4-Container-도구들" class="headerlink" title="4. Container 도구들"></a>4. Container 도구들</h2><p>(하나씩 글 작성 ing. 작성할 때마다 링크 추가 예정)</p><h3 id="Container-Runtime"><a href="#Container-Runtime" class="headerlink" title="Container Runtime"></a>Container Runtime</h3><ul><li>Docker: 컨테이너 생태계를 주도한 대표적인 런타임</li><li>Containerd: Docker의 핵심 런타임으로 분리되어 Kubernetes에서 직접 사용 가능</li><li>Podman: 데몬리스 컨테이너 실행환경으로 Docker의 대체제</li><li>CRI-O: Kubernetes와 호환되는 경량 런타임</li></ul><h3 id="Container-Ochestration"><a href="#Container-Ochestration" class="headerlink" title="Container Ochestration"></a>Container Ochestration</h3><ul><li>Kubernetes: 가장 널리 사용되는 컨테이너 오케스트레이션 도구. 자동 스케일링, 복구, 배포 지원</li><li>Docker Swarm: 간단한 오케스트레이션에 적합한 Docker 내장 도구</li><li>Nomad: HashiCorp에서 개발한 경량 오케스트레이션 도구</li></ul><h3 id="Container-Image"><a href="#Container-Image" class="headerlink" title="Container Image"></a>Container Image</h3><ul><li>Buildah: Docker 없이 이미지를 빌드 가능</li><li>Kaniko: 클라우드 환경에서 안전하게 이미지 빌드</li></ul><h3 id="컨테이너-보안-도구"><a href="#컨테이너-보안-도구" class="headerlink" title="컨테이너 보안 도구"></a>컨테이너 보안 도구</h3><ul><li>Falco: 실시간 컨테이너 보안 이벤트 감지</li><li>Aqua Security: 컨테이너 환경 보안을 포괄적으로 관리</li></ul>]]></content>
      
      
      <categories>
          
          <category> ♼ DevOps </category>
          
      </categories>
      
      
        <tags>
            
            <tag> DevOps </tag>
            
            <tag> Container </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 6월 오픈소스 소식지 (2): June-va, Farm, Llama.ttf, LetterDrop, LINQPad, CentOS Linux 7</title>
      <link href="/2024/06/30/OpenSource/2406(2)/"/>
      <url>/2024/06/30/OpenSource/2406(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="June-va-로컬-음성-챗봇"><a href="#June-va-로컬-음성-챗봇" class="headerlink" title="June-va: 로컬 음성 챗봇"></a>June-va: 로컬 음성 챗봇</h2><ul><li>Repository: <a href="https://github.com/mezbaul-h/june">https://github.com/mezbaul-h/june</a></li><li>june-va는 Ollama, Hugging Face Transformers, Coqui TTS Toolkit을 통합하여 데이터를 로컬에서 처리함으로써 프라이버시를 보장하는 로컬 음성 챗봇</li><li>기본 모드: 음성 입력 및 오디오/텍스트 출력</li><li>Python 3.10+ 이상에서 설치 필요, JSON 구성 파일을 통해 사용자 정의를 해야함</li><li>특히 Coqui XTTSv2의 스트리밍 모드에서 약 500ms의 latency를 기록함</li><li>차세대 대화형 AI로써 많은 주목을 받고 있으며, 홈 어시스턴트 통합을 위한 와이오밍 프로토콜을 주목하는 중</li></ul><br><h2 id="Farm-Rust로-작성된-vite-호환-가능한-빠른-빌드-도구"><a href="#Farm-Rust로-작성된-vite-호환-가능한-빠른-빌드-도구" class="headerlink" title="Farm: Rust로 작성된 vite 호환 가능한 빠른 빌드 도구"></a>Farm: Rust로 작성된 vite 호환 가능한 빠른 빌드 도구</h2><img src="./1.png" width="300"><ul><li>Homepage: <a href="https://www.farmfe.org/">https://www.farmfe.org/</a></li><li>Repository: <a href="https://github.com/windirstat/windirstat">https://github.com/windirstat/windirstat</a></li><li>JS 라이브러리 설정을 위해 설계된 Rust 기반의 웹 빌도 도구</li><li>지속적인 모듈 수준의 캐싱을 통해 변경된 모듈만 컴파일</li><li>React와 Vue같은 다양한 파일 유형과 프레임워크를 지원하는 풍부한 기능 제공. 특히 Vite에서의 빌드 시간을 크게 단축할 수 있음: CI 파이프라인에서 매우 긍적적인 면모를 보임</li><li>ESBuild, Rollup, Bun같은 것들과 비교해서, 성능 향상 및 안정성, 생태계 지원에 대한 지속적인 관심을 가질 것을 요구함</li></ul><br><h2 id="Llama-ttf-LLM-폰트"><a href="#Llama-ttf-LLM-폰트" class="headerlink" title="Llama.ttf: LLM 폰트"></a>Llama.ttf: LLM 폰트</h2><img src="./2.png" width="300"><ul><li>Homepage: <a href="https://fuglede.github.io/llama.ttf/">https://fuglede.github.io/llama.ttf/</a></li><li>Harfbuzz 폰트 셰이핑 엔진과 WebAssembly (Wasm)를 활용하여 LLM 및 추론 엔진으로도 작동하는 폰트 파일</li><li>Wasm이 활성화된 Harfbuzz 기반 애플리케이션 내(ex. 텍스트 편집기, 이메일 클라이언트 등)에서 공급업체 업데이트 없이 텍스트 생성이 가능함</li><li>사용자가 사용하는 폰트 파일 크기는 60MB이며, 로컬 LLM 실행이 가능함</li><li>단 개발에 있어 사용하는 폰트 파일 크기는 280GB로 상당히 커서 사용하기에는 아직 어려움이 있음</li></ul><br><h2 id="LetterDrop-TinyLetter를-대체하는-뉴스레터-관리-서비스"><a href="#LetterDrop-TinyLetter를-대체하는-뉴스레터-관리-서비스" class="headerlink" title="LetterDrop: TinyLetter를 대체하는 뉴스레터 관리 서비스"></a>LetterDrop: TinyLetter를 대체하는 뉴스레터 관리 서비스</h2><img src="./3.svg" width="300"><ul><li>Homepage: <a href="https://letterdrop.com/">https://letterdrop.com/</a></li><li>Repository: <a href="https://github.com/i365dev/LetterDrop">https://github.com/i365dev/LetterDrop</a></li><li>Cloudflare Workers를 사용하여 구축된 안전하고 효율적인 뉴스레터 관리 서비스</li><li>Cloudflare의 Workers, KV, R2, Queues와 같은 도구를 사용하여 뉴스레터 생성, 배포, 구독 관리 및 실패한 이메일 처리를 핸들링 할 수 있음</li><li>향후 유닛 테스트 추가, 이메일 템플릿, 이메일 열람률 추적, 더 많은 서드파티 이메일 서비스 지원, 그리고 다중 테넌트 기능을 도입할 것을 계획 중</li></ul><br><h2 id="LINQPad-소개"><a href="#LINQPad-소개" class="headerlink" title="LINQPad 소개"></a>LINQPad 소개</h2><img src="./4.png" width="300"><ul><li>Homepage: <a href="https://www.linqpad.net/">https://www.linqpad.net/</a></li><li>Repository: <a href="https://github.com/magicuidesign/magicui">https://github.com/magicuidesign/magicui</a></li><li>C# 12, .NET 8 지원</li><li>LINQ(또는 SQL)의 DB 쿼리: SQL/Azure, 오라클, SQLite, PostgresDB 및 MySQL 지원</li><li>AI 자동 완성, 통합 디버깅 및 풍부한 출력 형식화와 같은 고급 기능 제공: 빠른 코딩 및 동적 개발을 위한 강력한 도구로 주목받고 있음</li><li>단 Windows 전용이며 비용에 대한 문제가 있으며, 크로스 플랫폼 지원 및 Visual Studio 통합에 대해 토론 중</li></ul><br><h2 id="CentOS-Linux-7-2024년-6월-30일-EOL"><a href="#CentOS-Linux-7-2024년-6월-30일-EOL" class="headerlink" title="CentOS Linux 7: 2024년 6월 30일 EOL"></a>CentOS Linux 7: 2024년 6월 30일 EOL</h2><ul><li>EOL: End Of Life = 제품의 라이플 사이클 종료 = 더 이상 업데이트 및 보안 패치가 없음</li><li>대안점으로 Rocky Linux, AlmaLinux또는 Debian이 거론되고 있음. 또는 운영체제 변경 완화를 위한 컨테이너 고려 중</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[컨퍼런스] Tech Summit Silicon Valley 2024 후기 - 2일차</title>
      <link href="/2024/06/22/Conference/24USA/silicon-valley-2/"/>
      <url>/2024/06/22/Conference/24USA/silicon-valley-2/</url>
      
        <content type="html"><![CDATA[<h2 id="1-PANEL-SESSION-The-Future-of-Tech-Startups-Trends-and-Predictions"><a href="#1-PANEL-SESSION-The-Future-of-Tech-Startups-Trends-and-Predictions" class="headerlink" title="1. PANEL SESSION: The Future of Tech Startups: Trends and Predictions"></a>1. PANEL SESSION: The Future of Tech Startups: Trends and Predictions</h2><img src="./1.jpeg" width="500"><p>여기서는 유명 대기업 테크기업부터 스타트업까지 모두 모여서 이야기를 진행했다.<br>주제가 주제다보니까 당연하게도 AI와 연관되어 질문이 많이 나왔는데, 내용은 대략적으로 이렇게 있었다.</p><ul><li>AI가 발전하는 과정에서, 우리는 앞으로 정확한 솔루션/철저한 보안 관련 쪽으로 신경을 많이 써야한다.</li><li>데이터의 퀄리티가 올라가고 있기 때문에 갈수록 비싸질 것이다. 모델도 그 비싼 데이터로 운영되기 때문이다.</li><li>Intrastructure적으로는 챌린지가 될 것이다. 여기도 결국 돈이 연관되어 있기 때문이다.</li><li>AI라고 무턱대고 도전하는건 지양한다. 예전에 암호화폐 유행했었을 때도 다들 그쪽으로 뛰어들었는데, 결과가 많이 좋지 않았다. 어느 정도 잘 알아보고 하는게 좋을 것 같다.</li><li>Founder라면 무조건 공부가 필요하다. 이것저것 잡다하게 최대한 공부해야한다. 그리고 솔루션이 scalable한지, 싼지 알아봐야 한다.</li></ul><h2 id="2-Unraveling-Tomorrow-Mapping-the-Next-20-Years-of-Technological-Evolution"><a href="#2-Unraveling-Tomorrow-Mapping-the-Next-20-Years-of-Technological-Evolution" class="headerlink" title="2. Unraveling Tomorrow: Mapping the Next 20 Years of Technological Evolution"></a>2. Unraveling Tomorrow: Mapping the Next 20 Years of Technological Evolution</h2><img src="./2.jpeg" width="500"><p>이 세션에서는 IoT, Bio, Eco, VR/AR 등 다양한 필드에서의 변화 및 전망을 발표했다.<br>여기서도 결국 하는 얘기는 같았는데, 데이터가 점점 쌓일수록 퀄리티가 올라가며, 가격이 비싸질 것이라는 얘기였다.</p><p>여기서는 세션 제목에 Technological이 붙어서 그런지 개발자만 참여하는 기적(?)이 일어나서 기술적으로 깊게 토론하는 시간을 가질 수 있었다.</p><ul><li>IoT쪽도 지금 AI를 도입하는 중이다. 근데 여기도 Cloud 환경을 이용하는 경우가 많기 때문에 Infrastructure쪽으로 일단 cost조절을 최우선으로 두고 개발하고 있다.<ul><li>Cloud는 AWS가 가장 편한데 비싸다. 차라리 GCP를 사용하는게 더 낫다. AWS보다는 접근성이 좀 떨어지는데 가격면에서는 좋다.</li><li>근데 IaC가 나오면서 AWs, GCP, Azure도 사용하기 편해졌다. Terraform을 사용하면 이 모든 것들을 관리할 수 있다. 아직 이걸 다루는 사람이 부족한 편인 것 같더라.</li><li>Terraform 자체를 사용하는 것은 좋은 아이디어인데, 그게 오픈소스다보니까 불안정한면이 있긴 하다. 그런데 AI기반 산업발전속도가 빠르다보니 오픈소스가 안정화되기 전에 치고 올라가버리니 사용이 애매하다. -&gt; 그건 어쩔 수 없는 것 같다. 그저 우리가 최대한 기여하는 수밖에 없다. 원래 여기 업계는 빨리 변하지 않느냐</li></ul></li></ul><h2 id="3-How-AI-is-transforming-skill-development-and-validation-of-the-future-of-work"><a href="#3-How-AI-is-transforming-skill-development-and-validation-of-the-future-of-work" class="headerlink" title="3. How AI is transforming skill development and validation of the future of work"></a>3. How AI is transforming skill development and validation of the future of work</h2><img src="./3.jpeg" width="500"><p>이 세션은 재밌게 봤는데, 발표자분이 NLP에 10년 넘게 종사하신 분이었기 때문이다.<br>자신이 개발한 기술을 예시로 NLP가 어떻게 발전했는지 얘기했는데, 내가 NLP 프로젝트를 하면서 놓쳤던 부분에 대해 자연스럽게 짚어주시는걸 보고 신기하다는 느낌을 받았다.<br>참고로 이분이 강조하신 것도 다른 세션과 거의 동일했다.</p><ul><li>앞으로는 인공지능 퀄리티가 더 좋아질 것이다. 즉 서비스 제공 질이 더 좋아질 것이다.</li><li>즉 우리는 이거를 어떻게 “활용”하는지에 관건이 달렸다.</li><li>개발자 입장에서도 어떻게 퀄리티 높은 모델을 제공할건지 고민해야 할 필요성이 있다.<br>일단 좋은 모델을 만들기 위해서는 좋은 데이터가 필요하며, 이 과정에서 데이터 전처리의 중요성이 더 커지고 있다.</li><li>투자자도 공부를 해야한다. AI/개발에 대해 전혀 모르는 상태에서 투자할 것이 아니라, 데이터의 퀄리티가 어떤지를 파악하는 눈을 길러야 한다. 많은 기업들에서 쓰레기 데이터로 학습을 시켜 돈을 낭비하는 경우가 많은데, 이를 알아봐야 한다.<ul><li>GPT기술이 많이 발전했기 때문에 이 모델들에게 물어보면 어느 정도 사전 지식을 얻을 수 있을 것이다.</li></ul></li><li>(정리) 앞으로 인공지능 산업은 모델이 아닌 “퀄리티”로 승패를 나눌 것이다. 이 과정에서 데이터 전처리/자동화의 중요성은 더 커질 것이다.</li></ul><h2 id="2일차-후기"><a href="#2일차-후기" class="headerlink" title="2일차 후기"></a>2일차 후기</h2><ul><li><p>이날따라 AI에 대한 깊은 토론이 진행됐던 것 같다. 공식 석상에서 기술적인 얘기는 안했다만, 다들 한결같이 “데이터 전처리”, “자동화”에 강조를 두는 것을 보면 앞으로의 AI개발에 이를 눈여겨봐야 할 것 같다는 생각이 들었다.</p></li><li><p>이 날도 1일차와 동일하게 세션이 끝나고 개발자들끼리 모여서 대화의 장을 펼쳤다.<br>영어로 대화했기 때문에 정신집중 하느라 너무 피곤했는데, 다들 그거 감안하고 나한테 말을 걸어주더라ㅋㅋㅋㅠㅠㅠ 참 따뜻한 사람들이다 ㅎㅎㅎ</p><p>대화 내용을 요약하면 아래와 같다.</p><ul><li>이 날은 데이터에 대해서 심도 있게 대화를 나눴는데, 사람 사는게 다 거기서 거기인지 생각이 동일한 곳이 많았다.<br>대표적으로 데이터 정제에 관해서였는데, 데이터 정제가 까다롭다보니 기술+시간 비용이 크게 드는 편이라고 한다.<br>그런데 비전공자들(특히 비전공자 CEO같은 사람들)이 이것조차 모르는 상태에서 투자를 계속하다보니 전체 투자금의 30% 이상을 엉뚱한 곳에 돈을 사용하면서 최적의 결과물을 요구한다며 한숨을 쉬더라.</li><li>어쨌든간에 오픈소스 면에서는 데이터 정제 쪽으로 코드가 있으면 여러모로 SW산업에 긍정적인 영향을 미칠 것 같다는 얘기가 나왔다.</li><li>그 외로는 서로 회사에 관한 얘기와 앞으로의 핫이슈 프레임워크/라이브러리에 대한 토론을 나눴다. 내가 모르는 오픈소스들을 많이 접할 수 있어서 한층 더 똑똑해진 기분이 들었다.</li></ul></li><li><p>평일에 열리다보니 다들 회사 &lt;-&gt; 컨퍼런스를 오가느라 행사가 생각보다 시끌벅쩍하지는 않았다. 다만 시간대마다 다양한 사람들을 만날 수 있어서 재밌었던 것 같다. (체감상으로는 한 1000명 정도 온듯..?)<br>다음에 기회가 된다면 또 가서 사람들이랑 대화를 나눠보고 싶은 생각이 들었다 😁</p></li></ul>]]></content>
      
      
      <categories>
          
          <category> ✈️ Conference </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Conference </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[컨퍼런스] Tech Summit Silicon Valley 2024 후기 - 1일차</title>
      <link href="/2024/06/21/Conference/24USA/silicon-valley-1/"/>
      <url>/2024/06/21/Conference/24USA/silicon-valley-1/</url>
      
        <content type="html"><![CDATA[<h2 id="그-많고-많은-컨퍼런스-중-실리콘밸리를-선택한-이유는"><a href="#그-많고-많은-컨퍼런스-중-실리콘밸리를-선택한-이유는" class="headerlink" title="그 많고 많은 컨퍼런스 중 실리콘밸리를 선택한 이유는?"></a>그 많고 많은 컨퍼런스 중 실리콘밸리를 선택한 이유는?</h2><p>개발자들의 세계 최고의 필드 “실리콘밸리”에서 열리는 컨퍼런스라는 것도 의미가 있었지만, 나는 그 무엇보다 <u>실리콘밸리 개발자들과 최신 기술 동향에 대해 ‘네트워킹’</u>을 해보고 싶어서 참석하게 되었다.</p><p>필자는 작년에 영어공부 플랫폼을 통해 실리콘밸리에 초청받아 구글, 우버, 메타 등 다양한 기업들을 투어해봤는데, <u>점심/저녁을 먹거나 심지어 쉬는 시간일 때조차 실리콘밸리 개발자들은 매우 열정적으로 어떤 주제에 대해 토론</u>하는 모습이 참 인상 깊었기 때문이다.</p><p>그 당시 언젠가는 대화하겠지라며 사람들에게 특별히 말을 걸지는 않고 넘어갔는데, <a href="https://www.oss.kr/open_up_intro">OpenUp</a>에서 최대 250만원까지 컨퍼런스 지원을 해준 덕에 1년 뒤인 지금 바로 꿈을 이루게 되었다 (?!)</p><p>참고로 이번에 참여한 컨퍼런스 이름은 바로 <a href="https://techsummit.tech/san-francisco/">Tech Summit Silicon Valley</a> 였다.</p><img src="./1.png" width="500"><br><h2 id="실리콘밸리에-갈-때-참고할-점"><a href="#실리콘밸리에-갈-때-참고할-점" class="headerlink" title="실리콘밸리에 갈 때 참고할 점"></a>실리콘밸리에 갈 때 참고할 점</h2><p>원래 후기를 컨퍼런스 내용에 대해서만 적으려고 했으나, 컨퍼런스 장소가 <u>외국 + 시골</u>인 점을 감안해서 한 번 작성을 해보도록 한다.<br>실리콘밸리에 가게 된다면 아래 내용을 참고하자.</p><ul><li>실리콘밸리 = 깡시골<ul><li>물론 우리나라 시골에 비해 버스와 지하철이 잘 되어 있으나, 결국 시골은 시골이다. 하물며 도시 대중교통도 잘 연착되는 편인데, 시골이면 오죽할까 (…)<br>돈 아끼려고 대중교통 이용하다가 오히려 약속에 늦는 비상사태가 벌어질 수 있다.</li><li>게다가 “미국”의 시골이다. 미국 땅덩어리와 우리나라를 비교하면 절대 안된다. 미국은 모든 곳이 차가 없으면 돌아다니기가 참 힘들다. 차로 10분인 거리가 도보로는 1시간이 걸리는 곳이다.</li><li>될 수 있으면 샌프란시스코 국제공항에서 내리자마자 렌트카를 빌리자. 생각보다 싸다. 그리고 미국의 교통 법규는 우리나라와 거의 동일하다.<ul><li>“비보호 좌회전, STOP표지판, 스쿨버스”가 가장 큰 차이점인데, 이거는 유튜브 영상 몇 개 보면 쉽게 이해할 수 있다.</li><li>도로가 매우 넓으며, (고속도로에 한해) 속도 제한도 한국보다 너그러운 편이라 쉽게 적응할 수 있다.</li><li>이 때 구글 지도로 네비게이션을 이용하면 된다.</li></ul></li></ul></li><li>미국 동부보다 영어에 대한 거부감이 적은 편<ul><li>필자의 개인적인 생각이다만, 능력있는 사람들이 모여있는 곳이다보니 영어권이 아닌 사람들이 많다.</li><li>그만큼 다양한 영어 발음을 구사해 서로의 영어를 못알아듣는 경우가 많다. 그래서 영어로 어떻게든 대화를 하려고 한다면 (동부보다 비교적) 상대방을 더욱 존중하고 이해하려는 모습을 보여준다.</li><li>영어에 두려움을 갖지 말고 자신이 무슨 말을 하고싶은지 어필하자. 다들 열심히 들어주고 얘기해줄 것이다.</li></ul></li></ul><p>그 외 나머지는 인터넷에 “미국 여행”같은 키워드를 검색해서 찾아보면 될 것이다.</p><p><br><br><br></p><p>서두는 이렇게 마무리하고, 본격적으로 컨퍼런스 후기를 작성해보도록 하겠다.<br>이번 포스트에서는 6월 19일에 진행된 컨퍼런스 내용을 바탕으로 작성해봤다.</p><img src="./2.jpeg" width="300"><p><del>막상 글 작성하니 이 사진 넣을 곳이 없어서 여기다가 낑겨본다</del></p><hr><h2 id="1-Using-technology-as-a-way-to-enable-financial-inclusion-in-emerging-markets"><a href="#1-Using-technology-as-a-way-to-enable-financial-inclusion-in-emerging-markets" class="headerlink" title="1. Using technology as a way to enable financial inclusion in emerging markets"></a>1. Using technology as a way to enable financial inclusion in emerging markets</h2><img src="./4.png" width="500">원래 AI/DB쪽으로 들으려다가 해당 강연들이 변경/취소되어 시간이 비어 고민하다가 들어보게 되었다.<p>스마트폰으로 배달, 주차, 학습 등 모든 것을 할 수 있는 시대가 되었으며, 은행업무도 디지털화가 많이 가속되었다며 2025년에는 3.7 trilion만큼의 시장 규모를 예측하고 있다는 내용이었다.</p><p>브라질의 76%, 페루의 63%, 멕시코의 71%, 칠레의 81%들이 디지털뱅크를 사용하고 있다는 연구결과도 보고, 이쪽 분야 초심자로서 내용을 쉽게 풀이해줘서 재밌게 들었다.</p><p>여기는 QnA가 재밌었는데, 인상이 깊어서 한 번 남겨본다.</p><ul><li>Q) 이러한 정보는 어떻게 찾았는가?<br>A) MasterCard, Visa 등에서 연구를 활용한 것이며, 정부에서도 해당 데이터를 종합해서 앞으로의 시장이 어떻게 변화할 것인지 예측하고 있음. 스터디도 찾아보면 많음</li><li>Q) 아메리카에서 최근 대두되고 있는 전략은?<br>A) Cash Free, Bank Transfer를 해결하는 방향으로 전략을 잡고 있다</li><li>Q) 앞으로 디지털뱅크쪽으로 산업이 확장될 것 같은가?<br>A) 전형적인 종이통장은 송금하는데 불편한 점이 많으며, 디지털뱅크는 이 단점을 전부 해결하기 때문에 결국에는 시장을 다 먹을 거긴 할거다. 그게 언젠지는 모르겠지만</li></ul><h2 id="2-WORKSHOP-Unlocking-Growth-AI-Driven-Strategies-Beyond-Metrics-and-Manuals"><a href="#2-WORKSHOP-Unlocking-Growth-AI-Driven-Strategies-Beyond-Metrics-and-Manuals" class="headerlink" title="2. WORKSHOP: Unlocking Growth: AI-Driven Strategies Beyond Metrics and Manuals"></a>2. WORKSHOP: Unlocking Growth: AI-Driven Strategies Beyond Metrics and Manuals</h2><img src="./6.png" width="500">이 분은 교수님인데, AI에 대해서 좀 더 집중적으로 세션을 진행했다.<p>최근 암호화 작업부터 전부 컴퓨터에 의존하고 있는 상황이기 때문에, AI가 결국에는 모든 일을 다 할거다는 얘기와 최근에는 자동화 쪽으로 크게 관심을 받고 있는 상황이라 이 시장을 유의하라고 했다.<br>또한 최근 AI + 오픈소스의 발전으로 개발이 쉬워졌기 때문에 비전공자라도 한 번 개발에 도전을 해볼만하다는 내용이 있었다.</p><p>여기서는 이 내용을 크게 강조했다.</p><ul><li>Identify your key workflows</li><li>Experiment with different ai tools</li><li>Create replicable prompts</li><li>Measure and iterate</li></ul><h2 id="3-PANEL-SESSION-Exploring-the-Power-of-Artificial-Intelligence"><a href="#3-PANEL-SESSION-Exploring-the-Power-of-Artificial-Intelligence" class="headerlink" title="3. PANEL SESSION: Exploring the Power of Artificial Intelligence"></a>3. PANEL SESSION: Exploring the Power of Artificial Intelligence</h2><img src="./3.png" width="500"><p>여기서도 AI가 주제인 만큼, 최근 AI업계의 핫이슈 ChatGPT에 대해 길게 토론하는 시간을 가졌다.<br>내 생각과 동일하게 “간단한 것에 대해서는 사용이 용이하나, C레벨의 임원직인 경우에는 의사결정이 필요할 때 사용을 주의해야 한다”는 내용이었다.</p><p>두 번째로는 AI 학습에 관해서도 얘기를 나눴는데, 인공지능 개발에 있어서도 결국 데이터의 organization이 중요하다며 체계적으로 분류하는 방법에 대해서 연구해야한다고 대화를 나눴다.<br>그리고 데이터를 체계적으로 나누는 것은 결국 자동화가 들어가게 될텐데, 개발자든 비개발자든 이쪽으로도 관심을 가지면 좋을 것이라고 이야기가 와갔다.</p><p>마지막으로 AI개발자의 동향에 관한 토론도 이루어졌는데, 임원직들에게는 “AI개발자를 바로 채용하지 말고 ChatGPT나 Llama3같은 걸 먼저 사용해볼 것. BM 스케일이 커질 때 고용을 고려하라”,<br>개발자에게는 “채용 시장이 동결된 만큼 보수적으로 접근해야 한다. 따라서 AI개발자가 되려면 degree를 못해도 석사까지는 해놓는게 좋을 것 같다”라는 내용으로 정리할 수 있을 것 같다.</p><h2 id="4-PANEL-SESSION-Data-Driven-Innovation"><a href="#4-PANEL-SESSION-Data-Driven-Innovation" class="headerlink" title="4. PANEL SESSION: Data-Driven Innovation"></a>4. PANEL SESSION: Data-Driven Innovation</h2><img src="./5.png" width="500"><p>여기서는 데이터에 관해서 좀 더 자세하게 패널들이 대화를 나누는 세션이었다.</p><p>최근의 데이터는 고객을 이해시키기 위해 사용되는 것이며, “보안, 정확성”에 대한 어필이 좀 더 필요하고<br>기술을 발달로 인해 프레임워크와의 결합이 쉽고 데이터엔지니어들이 파이프라인을 쉽게 구축할 수 있어 무조건적으로 데이터퀄리티를 증가시켜야 한다는 내용이었다.</p><p>다만 체계적으로 정리하는 습관을 기를거면 수학 공부는 무조건적으로 추천하며, AI에 관심이 있다면 언어 모델 플랫폼이 2년 사이에 많이 발전했기 때문에 퀄리티는 툴마다 다르겠지만 개발은 쉬울 것이라는 얘기가 나왔다.</p><p>결론적으로는 데이터에 대한 “보안, 정확성”에 대해서 정부 규제까지 강화될 것으로 보이기 때문에<br>데이터 모델 리펙토링은 매우 조심해야 한다는 내용이 있었다.</p><p>오픈소스를 기업에서도 사용할텐데, 이 점에서는 오픈소스 개발자들도 유의해야겠는 생각이 들었다.</p><h2 id="1일차-후기"><a href="#1일차-후기" class="headerlink" title="1일차 후기"></a>1일차 후기</h2><ul><li><p>일단 개발자 중심의 컨퍼런스가 아니기 때문에, 컨퍼런스 내용은 일반인들도 이해하기 쉽게끔 구성이 되어 있었다.<br>근데 실리콘밸리 특성답게 결국은 개발자들끼리 자발적으로 모여서 추가로 의견을 나누는 시간을 가질 수 있어서 컨퍼런스가 재미있었던 것 같다.<br>다들 따스웠던게, 요즘 트랜드 파악 겸 오픈소스 개발하는데 좀 도움되는 정보 있나 싶어 한국에서 비행기타고 와서 참가했다고 얘기하니까<br>비행기 타고 오느라 힘들었겠다며 음식을 이것 저것 잘 챙겨줬다. 영어도 잘한다고 칭찬해주고.. <del>토종한국인은 감동의 눈물을 흘렸어요</del></p><p>아래는 대화 내용을 요약한 것이다.</p><ul><li>오픈소스에 대해서는 다른 나라에서도 생태계를 키우려고 노력한다고 한다. 듣기로는 프랑스(였던걸로 기억하는데 정확하지는 않고.. 일단 유럽 어딘가)는 올해의 오픈소스를 매년 선정하여 해당 메인 컨트리뷰터에게 상금을 준다고 한다. 외국인도 돈을 준다고 하던데 한 번 관심 있으면 찾아보라고 하더라</li><li>최근 이슈였던 Redis에 대해서도 열띤 토론을 했는데, 다들 이번 사태로 오픈소스 생태계가 어느 정도 수축되었다며 아쉬어하는 목소리를 냈다.</li><li>당연히 AI와 데이터베이스에 대해서도 대화를 나눴다. 여기서도 동일하게 AI든 데이터베이스든 일단 organization이 제대로 되야 관리면에서, 학습면에서 모두 좋은 결과물을 얻을 수 있다고 얘기했다.<br>그 외 평소에 궁금했던 것들(ex. 데이터베이스에 로컬시간 저장 관련)을 물어봤는데, 다들 사람인지라 의견이 다들 다르더라. 근데 얘기를 들어보면 정리 스타일만 다를 뿐 데이터를 체계적으로 정리한 것은 동일했기에 모두 들어볼 만 했다.<br>그것보다 대화를 나누는데 서로 의견을 존중하면서 의견 어필하는게 인상 깊었다. 여기는 말하는 것부터도 되게 전문적으로 하는 느낌이랄까.</li><li>취직 면에서는… 미국 시장은 아직도 매우 차갑다고 한다.<br>실제로 나를 마음에 들어했던 빅테크 기업 개발자는 시장이 어느정도 괜찮으면 나보고 여기서 일하자고 추천하고 싶은데, 여기가 너무 살얼음판이다보니 지금 직장에 계속 다니는게 안전해 보인다며 아쉬워하더라. (실리콘밸리 자체가 쉽게 취직되고 잘리는 곳이라지만, 요즘 정리해고는 쉽고 취직/이직이 어려워졌다고 한숨을 쉬는 건 덤)<br>개인적인 생각이다만 미국이 한국 시장의 1년 뒤라고 생각하고 보는 편인데, 아직도 여기가 얼음장인거 보면 취직 시장이 참 춥구나 싶은 생각이 든다 ㅠㅠ</li></ul></li></ul><ul><li><p>원래 이날 듣고 싶었던 컨퍼런스 주제가</p><ul><li>AI translation &amp; language accessibility</li><li>Business Models Innovation using AI Technology Workshop</li></ul><p>였으나, 아쉽게도 해당 주제는 변경/취소되어 참석하지 못했다. 특히 NLP쪽으로 관심이 많았는데 좀 많이 아쉽더라 🥲</p></li><li><p>왜인지 모르겠으나 앞에 빈자리가 많음에도 불구하고 뒤에서 서서 듣는 사람들이 많았다. 중간에 나갈려고 그런가 싶었는데, 그건 또 아닌 것 같았다. 대부분 들어와서 끝까지 듣더라. 여기 문화가 그런건지, 아니면 앞에 앉아서 주목받기 싫어서 그런건지는 아직도 미스테리 ㅎㅎ;;</p></li></ul>]]></content>
      
      
      <categories>
          
          <category> ✈️ Conference </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Conference </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 6월 오픈소스 소식지 (1): Alacritty, WinDirStat Microsoft, Emacs Easy Draw, MagicUI, Spot</title>
      <link href="/2024/06/10/OpenSource/2406(1)/"/>
      <url>/2024/06/10/OpenSource/2406(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Alacritty-베타-버전-공개"><a href="#Alacritty-베타-버전-공개" class="headerlink" title="Alacritty: 베타 버전 공개"></a>Alacritty: 베타 버전 공개</h2><p><img src="1.png"></p><ul><li>Homepage: <a href="https://alacritty.org/">https://alacritty.org/</a></li><li>Repository: <a href="https://github.com/alacritty/alacritty">https://github.com/alacritty/alacritty</a></li><li>OpenGL을 사용하는 고성능 크로프 플랫폼 터미널 에뮬레이터: macOS, Linux, BSD 지원</li><li>일부 누락된 기능 및 버그가 있으며, 현재 다른 애플리케이션과의 “통합”에 중점을 두고 프로그램을 개발 중</li><li>속도와 GPU측면에서는 호평을 받고 있으나, 스크롤바 기능이 없어 추후 기능 제공이 필요함</li></ul><br><h2 id="WinDirStat-Windows용-오픈-소스-디스크-사용량-정리-프로그램"><a href="#WinDirStat-Windows용-오픈-소스-디스크-사용량-정리-프로그램" class="headerlink" title="WinDirStat: Windows용 오픈 소스 디스크 사용량 정리 프로그램"></a>WinDirStat: Windows용 오픈 소스 디스크 사용량 정리 프로그램</h2><img src="./2.png" width="100"><ul><li>Homepage: <a href="https://windirstat.net/">https://windirstat.net/</a></li><li>Repository: <a href="https://github.com/windirstat/windirstat">https://github.com/windirstat/windirstat</a></li><li>Windows에서 디스크 사용량을 보고 정리할 수 있는 오픈소스</li><li>대중적인 오픈소스지만 전반적으로 느리다는 비판이 있음</li><li>최근 속도 및 보안, 시각화에 대해서 기여자를 모집하고 있음</li></ul><br><h2 id="Microsoft-서비스-중단으로-여러-오픈소스-서비스-일시-중단"><a href="#Microsoft-서비스-중단으로-여러-오픈소스-서비스-일시-중단" class="headerlink" title="Microsoft 서비스 중단으로 여러 오픈소스 서비스 일시 중단"></a>Microsoft 서비스 중단으로 여러 오픈소스 서비스 일시 중단</h2><img src="./3.png" width="600"><ul><li>2024년 5월 23일에 Microsoft가 일시 서비스 중단이 발생함: Bing, Copilot, ChatGPT, DuckDuckGo 등 다양한 오픈소스 서비스에 장애 발생</li><li>“온라인 서비스의 Microsoft 인프라에 대한 높은 의존도”를 주제로 다양한 토론이 진행되고 있음</li></ul><br><h2 id="Emacs-Easy-Draw-소개"><a href="#Emacs-Easy-Draw-소개" class="headerlink" title="Emacs Easy Draw 소개"></a>Emacs Easy Draw 소개</h2><img src="./4.gif" width="600"><ul><li>Homepage: <a href="https://misohena.jp/blog/2021-09-21-emacs-easy-draw.html">https://misohena.jp/blog/2021-09-21-emacs-easy-draw.html</a></li><li>Repository: <a href="https://github.com/misohena/el-easydraw">https://github.com/misohena/el-easydraw</a></li><li>Emacs용 그리기 도구로, 사용자가 직접 그림을 만들고 편집할 수 있으며, HTML또는 LaTeX로 내보내기 기능 지원</li><li>현재 필기 및 협업 기능이 부족하지만, 잠재적으로 높은 평을 받고 있으며 최근 프로그램 “통합”에 중점을 두고 개발을 진행 중</li></ul><br><h2 id="MagicUI-소개"><a href="#MagicUI-소개" class="headerlink" title="MagicUI 소개"></a>MagicUI 소개</h2><img src="./5.gif" width="600"><ul><li>Homepage: <a href="https://magicui.design/">https://magicui.design/</a></li><li>Repository: <a href="https://github.com/magicuidesign/magicui">https://github.com/magicuidesign/magicui</a></li><li>React, Typescript, Tailwind CSS 등으로 제작된 무료 오픈소스 애니메이션 컴포넌트 라이브러리</li><li>디자인과 기능에 대해 호평을 받고 있으나, 속도가 느리며 리소스를 필요 이상으로 소비해 갑론을박이 진행중</li></ul><br><h2 id="Spot-소개"><a href="#Spot-소개" class="headerlink" title="Spot 소개"></a>Spot 소개</h2><img src="./6.gif" width="600"><ul><li>Homepage: <a href="https://llama.meta.com/llama3/">https://llama.meta.com/llama3/</a></li><li>Repository: <a href="https://github.com/meta-llama/llama3">https://github.com/meta-llama/llama3</a></li><li>Go 개발자들을 위한 새로운 크로스 플랫폼 GUI 라이브러리</li><li>macOS, Linux, BMD에서 일관된 API를 제공할 수 있도록 설계됨</li><li>신생 프로젝트로 오픈소스 개발자로서 흥미를 가지고 있다면 프로젝트에 기여하는 것을 추천</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 5월 오픈소스 소식지 (2): Quill, DuckDuckGo, NoTunes, OpenAI, Secret Llama</title>
      <link href="/2024/05/27/OpenSource/2405(2)/"/>
      <url>/2024/05/27/OpenSource/2405(2)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Quill-v2-릴리즈"><a href="#Quill-v2-릴리즈" class="headerlink" title="Quill v2 릴리즈"></a>Quill v2 릴리즈</h2><img src="./1.png" width="600"><ul><li>Homepage: <a href="https://quilljs.com/">https://quilljs.com/</a></li><li>Repository: <a href="https://github.com/slab/quill">https://github.com/slab/quill</a></li><li>무료 오픈소스 위즈윅(WYSIWYG) 편집기</li><li>소규모 프로젝트에 적합하며 텍스트 편집기로서 극찬을 받고 있음</li><li>다만 사용하는데 있어서 난이도가 있으며, ProseMirror와 대조해 앞으로의 개발 방향성에 대해 활발한 토론을 진행 중</li></ul><br><h2 id="DuckDuckGo-AI-채팅-지원"><a href="#DuckDuckGo-AI-채팅-지원" class="headerlink" title="DuckDuckGo: AI 채팅 지원"></a>DuckDuckGo: AI 채팅 지원</h2><p><img src="./2.png"></p><ul><li>Homepage: <a href="https://duckduckgo.com/?q=DuckDuckGo&amp;ia=chat">https://duckduckgo.com/?q=DuckDuckGo&amp;ia=chat</a></li><li>Repository: <a href="https://github.com/duckduckgo">https://github.com/duckduckgo</a></li><li>개인정보를 수집하지 않는 검색 엔진이며, 코드 일부가 오픈소스로 구성되어 있음</li><li>이번에 GPT-3.5, Claude 3, Llama3 등의 AI 모델을 적용함</li><li>검색 결과를 생성하는 AI 알고리즘의 효율성과 프라이버시 보장 정도에 대한 의견이 최근 다뤄지고 있음</li></ul><br><h2 id="NoTunes-Apple음악-자동-실행-중지-프로그램-macOS"><a href="#NoTunes-Apple음악-자동-실행-중지-프로그램-macOS" class="headerlink" title="NoTunes: Apple음악 자동 실행 중지 프로그램 (macOS)"></a>NoTunes: Apple음악 자동 실행 중지 프로그램 (macOS)</h2><p><img src="3.png"></p><ul><li>Repository: <a href="https://github.com/tombonez/noTunes">https://github.com/tombonez/noTunes</a></li><li>Apple음악이 자동으로 실행되지 않도록 설계된 macOS 앱</li><li>Apple음악 말고도 다양한 macOS 애플리케이션에 불만이 있는 사람들이 많으며, 시간이 지날수록 이와 비슷한 오픈소스들이 나올 것으로 예측됨</li></ul><br><h2 id="OpenAI-ChatGPT-4o-공개-및-기득권에-대한-논란"><a href="#OpenAI-ChatGPT-4o-공개-및-기득권에-대한-논란" class="headerlink" title="OpenAI: ChatGPT 4o 공개 및 기득권에 대한 논란"></a>OpenAI: ChatGPT 4o 공개 및 기득권에 대한 논란</h2><p><img src="4.png"></p><ul><li>AI와 사람같이 대화할 수 있는 ChatGPT 4o 공개</li><li>전직 직원들이 제한적인 오프보딩 계약으로 회사를 비판할 권한과 기득권을 “평생” 잃게 됨으로써 논란이 현재진행중</li></ul><br><h2 id="비공개-LLM-챗봇-Secret-Llama-Llama-3-Mistral-및-기타-오픈-소스-모델을-지원하는-브라우저-내-완전-비공개-LLM-챗봇"><a href="#비공개-LLM-챗봇-Secret-Llama-Llama-3-Mistral-및-기타-오픈-소스-모델을-지원하는-브라우저-내-완전-비공개-LLM-챗봇" class="headerlink" title="비공개 LLM 챗봇 Secret Llama: Llama 3, Mistral 및 기타 오픈 소스 모델을 지원하는 브라우저 내 완전 비공개 LLM 챗봇"></a>비공개 LLM 챗봇 Secret Llama: Llama 3, Mistral 및 기타 오픈 소스 모델을 지원하는 브라우저 내 완전 비공개 LLM 챗봇</h2><img src="./5.png" width="300"><ul><li>Homepage: <a href="https://secretllama.com/">https://secretllama.com</a></li><li>Repository: <a href="https://github.com/abi/secret-llama">https://github.com/abi/secret-llama</a></li><li>대화 데이터가 컴퓨터 외부로 유출되지 않으며, 서버가 필요하지 않아 설치할 필요 없이 바로 오프라인 브라우저에서 작동하는 프로그램</li><li>Llama3, Mistral 및 기타 오픈 소스 모델을 채택 중 / ChatGPT처럼 구성된 유저친화적인 UI</li><li>인터페이스 개선 및 다양한 모델 지원, 초기 모델 로딩 시간 단축, 버그 수정 등 다방면에서 오픈소스 기여자를 모집 중</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[오픈소스] 2024년 5월 오픈소스 소식지 (1): Penpot, CoreNet, Redka, Valkey, Asciinema, Llama3</title>
      <link href="/2024/05/13/OpenSource/2405(1)/"/>
      <url>/2024/05/13/OpenSource/2405(1)/</url>
      
        <content type="html"><![CDATA[<p><img src="0.png"></p><p>(참고/출처)<br>2024년 정보통신산업진흥원: <a href="https://www.oss.kr/open_up_intro">OpenUP 프로그램</a>의 2024년 기여형 프론티어로서, 오픈소스SW를 함께 개발 및 공유하기 위해 작성되었습니다.<br>해당 내용은 제 github 홈페이지의 Explore repositories 및 feed 내용을 토대로 만들어졌으며, 게시글에 문의 사항이 있으신 분들은 댓글 또는 <a href="mailto:dev.rubykim@gmail.com">dev.rubykim@gmail.com</a>으로 연락 부탁드립니다.</p><p><br><br><br></p><h2 id="Penpot-2-0-릴리즈"><a href="#Penpot-2-0-릴리즈" class="headerlink" title="Penpot 2.0 릴리즈"></a>Penpot 2.0 릴리즈</h2><p><img src="1.png"></p><ul><li>Homepage: <a href="https://penpot.app/">https://penpot.app/</a></li><li>Repository: <a href="https://github.com/penpot/penpot">https://github.com/penpot/penpot</a></li><li>웹 기반 오픈 소스 디자인 도구로, 디자이너와 개발자 간의 협업을 촉진하는 프로젝트</li><li>깔끔한 UI/UX로 간편하게 프로그램 컨트롤이 가능함</li><li>UI 디자인에 대해서 피그마와 차별성이 있다고 토론이 진행되는 중</li></ul><br><h2 id="Apple의-새로운-AI-모델-CoreNet"><a href="#Apple의-새로운-AI-모델-CoreNet" class="headerlink" title="Apple의 새로운 AI 모델: CoreNet"></a>Apple의 새로운 AI 모델: CoreNet</h2><img src="./2.png" width="100"><ul><li>Repository: <a href="https://github.com/apple/corenet">https://github.com/apple/corenet</a></li><li>2024년 4월 24일부터 운영 시작</li><li>CoreNet: 객체 분류, 감지 및 세분화 작업을 위한 소규모 모델부터 대규모 모델까지 훈련하기 위해 Apple에서 만든 심층 신경망 툴킷<ul><li>Python 3.9 이상 또는 Pytorch 3.10 이상이 필요</li><li>CVNets에서 발전함</li></ul></li><li>개발자를 위한 Apple Silicon 기기 및 도구 사용 고려 사항, macOS 설정 관리를 위한 Nix-Darwin, 오픈 소스 제품의 수익화 가능성에 대해서도 논의 중</li></ul><br><h2 id="Redka-SQLite로-생성된-Redis"><a href="#Redka-SQLite로-생성된-Redis" class="headerlink" title="Redka: SQLite로 생성된 Redis"></a>Redka: SQLite로 생성된 Redis</h2><img src="./3.svg" width="200"><ul><li>Repository: <a href="https://github.com/nalgeon/redka">https://github.com/nalgeon/redka</a></li><li>2024년 4월 6일부터 운영 시작</li><li>SQLite를 활용하여 기존의 Redis를 재구성하는 프로젝트</li><li>문자열 관련 CLI에 중점을 두고 주요 Redis 데이터 유형과 명령을 지원하며, 독립형 서버 옵션과 Go API를 활용한 인프로세스 서버 옵션 모두 제공: SQL 보기, Redis API와의 호환성, ACID 트랜잭션 등의 기능을 중심으로 개발</li><li>Redis보다 약 2~6배 정도 느리지만 Redka의 상당한 읽기 및 쓰기 작업을 관리할 수 있음</li><li>현재 메모리 효율성, ACID 트랜잭션 및 SQL 인터페이스와 같은 이점을 제공하는 사용자 친화적인 API를 목표로 토론 및 개발 진행 중</li><li><strong>[참고]</strong><ul><li>최근 Redis의 오픈소스 라이선스가 변경됐으며, Redka도 영향을 받을 것으로 예상됨</li><li>이에 대한 반발이 무척 심해 바로 다음에 소개할 <code>Valkey</code>가 최근 지지를 받고 있음</li></ul></li></ul><br><h2 id="Valkey-Redis의-라이선스-변경으로-인해-큰-지지를-받고-있는-데이터베이스"><a href="#Valkey-Redis의-라이선스-변경으로-인해-큰-지지를-받고-있는-데이터베이스" class="headerlink" title="Valkey: Redis의 라이선스 변경으로 인해 큰 지지를 받고 있는 데이터베이스"></a>Valkey: Redis의 라이선스 변경으로 인해 큰 지지를 받고 있는 데이터베이스</h2><p><img src="6.svg"></p><ul><li>Homepage: <a href="https://valkey.io/">https://valkey.io/</a></li><li>Repository: <a href="https://github.com/valkey-io/valkey">https://github.com/valkey-io/valkey</a></li><li>저명한 기업 및 관리자로부터 상당한 지지를 얻고 있으며 AWS, Google Cloud, Oracle과 같은 주요 업체 지원을 받는 중</li><li>Redis의 라이선스 변경으로 Redis의 주요 고객들이 Valkey로 마이그레이션을 진행 중</li></ul><br><h2 id="Asciinema-LLM-알고리즘-도입으로-프로그램-속도-향상"><a href="#Asciinema-LLM-알고리즘-도입으로-프로그램-속도-향상" class="headerlink" title="Asciinema: LLM 알고리즘 도입으로 프로그램 속도 향상"></a>Asciinema: LLM 알고리즘 도입으로 프로그램 속도 향상</h2><p><img src="4.png"></p><ul><li>Homepage: <a href="https://asciinema.org/">https://asciinema.org/</a></li><li>Repository: <a href="https://github.com/asciinema/asciinema">https://github.com/asciinema/asciinema</a></li><li>터미널 입력 내용을 CLI로 쉽게 기록할 수 있는 프로그램</li><li>새로운 알고리즘으로 LLM 추론 속도를 2배로 향상시킴: 모델 속도 및 정확도, 메모리 로딩을 유연하게 선택할 수 있음</li></ul><br><h2 id="Meta의-새로운-AI-모델-Llama3"><a href="#Meta의-새로운-AI-모델-Llama3" class="headerlink" title="Meta의 새로운 AI 모델: Llama3"></a>Meta의 새로운 AI 모델: Llama3</h2><img src="./5.png" width="100"><ul><li>Homepage: <a href="https://llama.meta.com/llama3/">https://llama.meta.com/llama3/</a></li><li>Repository: <a href="https://github.com/meta-llama/llama3">https://github.com/meta-llama/llama3</a></li><li>다양한 화면 크기에서 반응형 디자인을 위한 CSS 미디어 쿼리를 보여주는 “반응형 디자인을 위한 AI 모델” 출시</li></ul>]]></content>
      
      
      <categories>
          
          <category> 👐 OpenSource </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Opensource </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[TIPS] Python, Javascript 프로젝트에서 유용한 regex 문법 및 관련 패키지 모음집</title>
      <link href="/2022/11/25/Tips/Regex/"/>
      <url>/2022/11/25/Tips/Regex/</url>
      
        <content type="html"><![CDATA[<p>사용자의 입력값이 유효한지 확인하는 작업을 해야할 때가 있는데, 이 때 사용하면 유용한 패키지와 각종 regex를 정리해봤습니다.</p><p>(상시 업데이트 예정)</p><h2 id="Python3"><a href="#Python3" class="headerlink" title="Python3"></a>Python3</h2><hr><ul><li><a href="https://pydantic-docs.helpmanual.io/">pydantic</a></li></ul><br><h3 id="Email-Validation"><a href="#Email-Validation" class="headerlink" title="- Email Validation"></a>- Email Validation</h3><ul><li><p>RFC-5322 표준 기준</p><pre class="line-numbers language-python"><code class="language-python"><span class="token keyword">import</span> reEMAIL_REGEX <span class="token operator">=</span> r<span class="token string">"((?:[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&amp;'*+/=?^_`{|}~-]+)*|\"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*\")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\]))g"</span><span class="token keyword">return</span> re<span class="token punctuation">.</span>fullmatch<span class="token punctuation">(</span>EMAIL_REGEX<span class="token punctuation">,</span> email<span class="token punctuation">)</span>     <span class="token comment" spellcheck="true"># True or False</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul><h3 id="Name-Validation"><a href="#Name-Validation" class="headerlink" title="- Name Validation"></a>- Name Validation</h3><ul><li>letter(a-z, A-Z), apostrophe, hyphen 지원</li><li>여기서는 최소 길이 1 및 최대 길이 20인 문자열만 유효한 것으로 판단<pre class="line-numbers language-python"><code class="language-python"><span class="token keyword">import</span> reNAME_REGEX <span class="token operator">=</span> r<span class="token string">"(^[aA-zZ '-]{1,20})"</span><span class="token keyword">return</span> re<span class="token punctuation">.</span>fullmatch<span class="token punctuation">(</span>NAME_REGEX<span class="token punctuation">,</span> name<span class="token punctuation">)</span>       <span class="token comment" spellcheck="true"># True or False</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul><p><br><br><br></p><h2 id="Javascript"><a href="#Javascript" class="headerlink" title="Javascript"></a>Javascript</h2><hr><ul><li><a href="https://github.com/jquense/yup">yup</a>: 주로 <a href="https://formik.org/">formik</a>과 합쳐서 사용한다<br></li></ul><h3 id="Email-Validation-1"><a href="#Email-Validation-1" class="headerlink" title="- Email Validation"></a>- Email Validation</h3><ul><li>RFC-5322 표준 기준<pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">const</span> EMAIL_REGEX <span class="token operator">=</span> <span class="token regex">/^[-a-z0-9!#$%&amp;'*+/=?^_`{|}~]+(\.[-a-z0-9!#$%&amp;'*+/=?^_`{|}~]+)*@([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?$/i</span><span class="token punctuation">;</span><span class="token keyword">const</span> ex1 <span class="token operator">=</span> <span class="token string">"I can do it"</span><span class="token punctuation">;</span><span class="token keyword">const</span> ex2 <span class="token operator">=</span> <span class="token string">"my.email@address.com"</span><span class="token punctuation">;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ex1<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>EMAIL_REGEX<span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token comment" spellcheck="true">// false</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>ex2<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>EMAIL_REGEX<span class="token punctuation">)</span><span class="token punctuation">)</span>    <span class="token comment" spellcheck="true">// true</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Python3 </tag>
            
            <tag> Regex </tag>
            
            <tag> Javascript </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>네트워크 기본</title>
      <link href="/2022/05/30/NS/Basic/"/>
      <url>/2022/05/30/NS/Basic/</url>
      
        <content type="html"><![CDATA[<h2 id="IPv4"><a href="#IPv4" class="headerlink" title="IPv4"></a>IPv4</h2><hr><p><img src="./ipv4.png"></p><ul><li>컴퓨터 사이에 통신을 하기 위해서는 컴퓨터 위치값을 알아야 함</li><li>이때 각 컴퓨터의 <code>위치값(주소)</code> IP 주소라고 지칭함 (IP Version 4)</li><li>점<code>.</code> 사이의 숫자들은 옥텟(octet)이라고 부름</li></ul><h4 id="IPv4-클래스"><a href="#IPv4-클래스" class="headerlink" title="IPv4 클래스"></a>IPv4 클래스</h4><p><img src="./ipclass.png"></p><ul><li>첫 번째 옥탯의 앞자리에 따라 클래스 구분</li><li>주로 A, B class 사용<ul><li><strong>A Class</strong>: 첫 번째 옥탯의 맨 앞자리 비트가 0<br><img src="./nethostbitA.png"><ul><li>8bit의 네트워크 bit + 24bit의 호스트 bit</li><li>즉 1개의 네트워크가 2^24개의 ip를 보유</li><li>이러한 네트워크가 2^7개만큼 있음 (식별자 제외)</li><li>대규모 프로젝트에 적합: 국가 단위</li></ul></li><li><strong>B Class</strong>: 첫 번째 옥탯의 앞 두자리의 비트가 1, 0<br><img src="./nethostbitB.png"><ul><li>16bit의 네트워크 bit + 16bit의 호스트 bit</li><li>즉 1개의 네트워크가 2^16개의 ip를 보유</li><li>이러한 네트워크가 2^14개만큼 있음 (식별자 제외)</li></ul></li><li><strong>C Class</strong>: 첫 번째 옥탯의 앞 세자리의 비트가 1, 1, 0<br><img src="./nethostbitC.png"><ul><li>24bit의 네트워크 bit + 8bit의 호스트 bit</li><li>즉 1개의 네트워크가 2^8개의 ip를 보유</li><li>이러한 네트워크가 2^21개만큼 있음 (식별자 제외)</li><li>소규모 프로젝트에 적합</li></ul></li></ul></li></ul><p><br><br></p><h2 id="Subnet-Sub-Network"><a href="#Subnet-Sub-Network" class="headerlink" title="Subnet: Sub + Network"></a>Subnet: Sub + Network</h2><hr><p><img src="./subnet.png"></p><ul><li>한 사람이 하나의 네트워크를 소유 시 IP가 모자름 -&gt; 모자른 IP를 방지하기 위해 네트워크를 분할하는 개념</li><li>빨간색 부분의 숫자만 바뀌는 것을 확인할 수 있음</li><li>이를 간편하게 표기하기<ul><li><code>[그룹에서 맨 앞의 ip주소/32bit 중 그대로인 부분 개수]</code>로 표기</li><li>subnet A: 211.11.124.0/25</li><li>subnet B: 211.11.124.128/25</li></ul></li></ul><p><br><br></p>]]></content>
      
      
      <categories>
          
          <category> 🔐 Network/Security </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Network </tag>
            
            <tag> IP </tag>
            
            <tag> Subnet </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Windows &amp; Mac에서 nvm 설치하기 (Node.js, Npm, Yarn 설치)</title>
      <link href="/2022/05/17/Etc/Windows-Mac-Osx-Nvm-Install/"/>
      <url>/2022/05/17/Etc/Windows-Mac-Osx-Nvm-Install/</url>
      
        <content type="html"><![CDATA[<p>개발 프로젝트에 따라서 Node의 버전을 여러 개 설치하고 번갈아 사용해야 하는 경우가 있는데,<br>이럴 때는 nvm(Node Version Manager)를 사용하면 여러 개의 node 버전을 설치하여 원하는 node 버전을 골라서 사용할 수 있다.</p><br><h2 id="설치-시-사전-주의-사항"><a href="#설치-시-사전-주의-사항" class="headerlink" title="설치 시 사전 주의 사항"></a>설치 시 사전 주의 사항</h2><ul><li>기존에 Node가 설치되어 있다면 Node를 제거해야 한다.</li><li>글은 업로드한 날짜 그대로 있지만, node는 프로그램으로 계속 끊임없이 업데이트되며 발전한다.<br>글에 나와있는 버전 그대로 따라 치는 것보다는 <strong>자신이 사용할 버전을 직접 고르고 설치할 것</strong>을 추천한다.<br>설치할 수 있는 node 버전 리스트는 여기서 참고하면 된다: <a href="https://nodejs.org/ko/download/releases/">https://nodejs.org/ko/download/releases/</a></li></ul><p><br><br></p><h2 id="Windows에서-설치하기"><a href="#Windows에서-설치하기" class="headerlink" title="Windows에서 설치하기"></a>Windows에서 설치하기</h2><ol><li><p><a href="https://github.com/coreybutler/nvm-windows/releases">nvm-windows repository</a>에 접속하여 release된 파일을 다운받는다. 이 때 파일유형이 <code>.zip</code>인 것을 다운받는다.<br><img src="1.png"></p><br></li><li><p>압축을 풀면 폴더 내부에 <code>nvm-setup.exe</code> 파일이 있는데, 해당 파일을 실행하면 nvm이 설치된다.<br><img src="2.png"></p><br></li><li><p>윈도우 터미널에서 아래 명령어들을 통해 node를 버전별로 설치 및 관리, 사용을 할 수 있다.</p><pre class="line-numbers language-shell"><code class="language-shell"># nvm 버전 확인nvm version# 설치된 node 리스트nvm ls# node 버전별 설치하기nvm install 14.17.6# nvm에서 특정 node 버전 활성화하기nvm use 15.11.0# npm으로 yarn 설치하기npm install -g yarn<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol><p><br><br></p><h2 id="Mac에서-설치하기"><a href="#Mac에서-설치하기" class="headerlink" title="Mac에서 설치하기"></a>Mac에서 설치하기</h2><ul><li><p>nvm repository: <a href="https://github.com/nvm-sh/nvm">https://github.com/nvm-sh/nvm</a></p><pre class="line-numbers language-shell"><code class="language-shell"># nvm 설치하기curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash# node 버전별 설치하기nvm install 14.17.3# nvm에서 특정 node 버전 활성화하기nvm use 15.11.0# npm으로 yarn 설치하기npm install -g yarn<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>만약에 nvm을 설치하고 확인했을 때 <code>command not found</code>가 나오면 <code>bash_profile</code>을 확인하자.</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">vi</span> ~/.bash_profile<span class="token comment" spellcheck="true"># 아래의 코드 확인. 오타나 누락 시 직접 수정</span><span class="token function">export</span> NVM_DIR<span class="token operator">=</span><span class="token string">"<span class="token variable">$HOME</span>/.nvm"</span><span class="token punctuation">[</span> -s <span class="token string">"<span class="token variable">$NVM_DIR</span>/nvm.sh"</span> <span class="token punctuation">]</span> <span class="token operator">&amp;&amp;</span> <span class="token keyword">.</span> <span class="token string">"<span class="token variable">$NVM_DIR</span>/nvm.sh"</span> <span class="token comment" spellcheck="true"># This loads nvm</span><span class="token comment" spellcheck="true"># 재시작</span><span class="token function">source</span> ~/.bash_profile<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Node.js </tag>
            
            <tag> Npm </tag>
            
            <tag> Yarn </tag>
            
            <tag> Nvm </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>DevOps 개요</title>
      <link href="/2022/05/12/DevOps/Intro/"/>
      <url>/2022/05/12/DevOps/Intro/</url>
      
        <content type="html"><![CDATA[<h2 id="1-DevOps-정의"><a href="#1-DevOps-정의" class="headerlink" title="1. DevOps 정의"></a>1. DevOps 정의</h2><hr><blockquote><p>“A set of practices intended to reduce the time between commiting a change to a system and the change being placed into normal production, while ensuring high quality”</p><p>제품의 변경사항을 품질을 보장함과 동시에 프로덕션에 반영하는데 걸리는 시간을 단축하기 위한 실천 방법의 모음</p></blockquote><ul><li>개발(Dev)와 운영(Ops)의 합성어</li><li>개발과 운영의 경계를 허물과 하나의 팀으로 통합하고자 하는 문화 또는 철학</li><li>개발과 운영의 벽을 허물어 더 빨리 자주 배포하는 것</li></ul><p><br><br></p><h2 id="2-DevOps가-필요한-이유"><a href="#2-DevOps가-필요한-이유" class="headerlink" title="2. DevOps가 필요한 이유"></a>2. DevOps가 필요한 이유</h2><hr><p><img src="./sdlc.png"></p><ul><li>조직의 규모가 커지면 각 단계 별 전문가로 구성된 기능 조직을 운영할 수 있음</li><li>그만큼 의사소통이 많아지기 때문에 커뮤니케이션의 문제가 발생</li><li>개발자가 SW 생애주기 중 여러 단계에 참여한다면 이러한 문제를 해결할 수 있음</li></ul><p><img src="./netflix.png"></p><ul><li>넷플릭스에서 제안하는 <strong>Full-cycle Developer</strong></li><li>SW 개발 생애주기의 전체에 직접 참여하는 개발자</li></ul>]]></content>
      
      
      <categories>
          
          <category> ♼ DevOps </category>
          
      </categories>
      
      
        <tags>
            
            <tag> DevOps </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>대학생 때 알았다면 좋았을 SW 팁</title>
      <link href="/2022/05/10/Retrospect/Bachelor/"/>
      <url>/2022/05/10/Retrospect/Bachelor/</url>
      
        <content type="html"><![CDATA[<p>SW분야를 선택하고 스펙을 쌓으며 가장 고생했던 것 중 하나가 바로 <strong>조언해주는 사람이 없다는 것</strong>이었다.</p><p>어떤 분야든 멘토가 있다면 효율적으로 스펙을 쌓고 빠르게 기술을 습득할 수 있겠지만, 주변에 컴퓨터 분야에 종사하는 사람이 눈 씻고봐도 전혀 없었다.<br>심지어 대학교 자체를 나온 사람이 주변에 친언니(문과 전공) 하나밖에 없었기에, 혼자서 익스트림 칠전팔기 도전기를 찍었던 것 같다.</p><p>나같은 사람이 더 이상 없길 바라며, 나름 생각하는 꿀팁들을 적어보려고 한다.</p><blockquote><p>추가적으로 궁금한 내용 있으시면 언제든지 편하게 댓글 남겨주세요 :-)</p></blockquote><p><br><br></p><h2 id="언어-선택"><a href="#언어-선택" class="headerlink" title="언어 선택"></a>언어 선택</h2><p>본인이 하고 싶은 분야의 언어를 선택한다. 딱히 하고 싶은 분야가 없다면 제일 무난한 <code>Java</code>를 추천한다. 취업시장 자체가 서버 개발자 수요가 많은데, 그 중 전반적으로 가장 많이 구하는 기술 스택이 바로 <code>Java</code>이기 때문이다.<br>다만 스타트업을 노리고 있다면 <code>Javascript</code>, <code>Python</code>을 추천한다. 최근 스타트업들이 이 두 언어를 주요 기술 스택으로 선택하는 추세다.</p><p>코딩 테스트 언어로는 무난하게 <code>C/C++</code>, <code>Python</code>을 추천한다. 다른 언어를 선택해도 관계없다. 자신이 가장 자신있는 언어를 선택하는 것이 좋다.<br>주변에서 종종 시간초과 문제 때문에 <code>Python</code>을 망설이는 경우가 있는데, 시간초과 문제는 나중에 해결할 일이다. 일단 돌아가는 코드를 만들어야 부분점수라도 얻을 수 있지 않겠는가.</p><p>사실 학부생 수준에서 언어 선택은 크게 중요하지 않다. 왜냐면 취직해봤자 온보딩만 평균 1개월-3개월 정도 돌리는데 그러면 일은 커녕 공부만 주구장창 하고있기 때문이다.<br>(카카오 다니는 지인 왈, <strong>입사한지 5개월 됐는데 일 하나도 안하고 공부만 했어…</strong> <del>물경력</del>)<br>그래서 학부생 시절에 될 수 있으면 다양한 수업을 접하면서 여러 언어들을 익혀보는 것을 추천한다.<br>다만 분야마다 주력으로 하는 언어가 있기 때문에, 특정 분야를 가기로 결심했으면 그 언어는 공부해놓는게 좋다.</p><table>    <tbody><tr>        <td><b>분야</b></td>        <td><b>언어</b></td>    </tr>    <tr>        <td>AI/빅데이터</td>        <td>Python</td>    </tr>    <tr>        <td>서버</td>        <td>Java</td>    </tr>    <tr>        <td>프론트엔드</td>        <td>Javascript</td>    </tr>    <tr>        <td>하드웨어/임베디드</td>        <td>C, C++</td>    </tr></tbody></table><p><br><br></p><h2 id="졸업-전-반드시-들어야-할-전공-과목"><a href="#졸업-전-반드시-들어야-할-전공-과목" class="headerlink" title="졸업 전 반드시 들어야 할 전공 과목"></a>졸업 전 반드시 들어야 할 전공 과목</h2><ul><li>자료구조</li><li>알고리즘</li><li>데이터베이스</li><li>네트워크</li><li>운영체제</li></ul><p>대부분 기업들이 <code>코딩테스트 &gt; 면접</code> 과정을 거치는데, 먼저 코딩테스트는 대부분 자료구조, 알고리즘 문제가 출제된다.<br>면접에서는 데이터베이스, 네트워크, 운영체제에 관련해 질문이 따발총으로 들어오므로 꼭 수강해놓는 것을 추천한다.<br>이 과목들 중 하나라도 공부를 안하고 취뽀에 도전한다면 현실적으로 많이 힘들다.</p><p><br><br></p><h2 id="비전공자-개발자"><a href="#비전공자-개발자" class="headerlink" title="비전공자 개발자"></a>비전공자 개발자</h2><p>컴퓨터공학이 만만한 학문은 아니지만, 분야 특성 상 인터넷에 수많은 지료들이 존재하며 자료 공유가 활발한 편이다.<br>유튜브, 카카오톡 오픈톡방, 그 외 다양한 커뮤니티들 및 사이트에서 원하는 정보를 쉽게 찾을 수 있다.</p><p>그래도 적성이 안맞으면 굉장히 괴로운 분야이기 때문에 대학생이라면 프로그래밍 과목을 한 번 들어보고, 아니라면 인터넷 자료들을 통해 공부를 해보는 것을 추천한다.</p><p><br><br></p><h2 id="학교-x2F-비전공자-메리트"><a href="#학교-x2F-비전공자-메리트" class="headerlink" title="학교 / 비전공자 메리트"></a>학교 / 비전공자 메리트</h2><p>어떤 곳이든 기본적으로 학벌을 보기에 여기 또한 학벌의 존재를 피해갈 순 없다. 다만 다른 분야에 비하면 개발 자체는 학교 학과를 안 보는 직군으로 평가된다.<br>따라서 학교 네임밸류와 컴퓨터 외 전공 때문에 취업이 안된다고 말하는 사람들은 ‘내가 과연 열심히 살았나?’라며 솔직하게 자기반성의 시간을 가져야 한다. 정말 노력만 한다면 커버가 될 수 있기 때문이다.</p><blockquote><p>그럼에도 불구하고 나는 안된다 하시는 분들, 경쟁자들과 비빌 수 있는 스펙을 만들기 위해 부던히 노력을 하셨습니까? 남들이 놀 때 정말 잠도 안자고 공부하셨나요? 가슴에 손을 얹고 한 번 생각해보시길 바랍니다.</p></blockquote><p>비전공자들에 관련해서 추가적인 조언을 해보자면, 비전공자가 뽑히지 않는 이유는 <code>전공자와 비교했을 때 그만한 경험과 지식이 부족하다고 판단</code>되기 때문이다. 대부분의 비전공자들이 부트캠프나 국비지원으로 개발공부를 하는데, 이 모든 과정들이 길어봤자 1년이기 때문에 현실적으로도 4년제 전공생들과 비교되는건 당연하다.</p><p>그래도 개발 스펙을 쌓고자 한다면 개인적으로 추천하는 것은 <code>부트캠프</code>이다.<br>이미 개발자들 사이에서 <strong>국비지원 = 개발자 찍어대는 공장 -&gt; 국비지원 출신 = 코딩 대충 배운 사람</strong>으로 인식하는 경우가 많기 때문이다. (좆소기업을 유심히 살펴보면 국비지원 출신이 많은 경우를 찾을 수 있다)</p><p>다음은 그 중 추천하는 부트캠프 프로그램이다.</p><ul><li><a href="https://woowacourse.github.io/">우아한 테크코스 (우테코)</a></li><li><a href="https://boostcamp.connect.or.kr/">BoostCamp (부스트캠프 / 부캠)</a></li><li><a href="https://www.swmaestro.org/sw/main/main.do">SW마에스트로(소마)</a></li><li><a href="https://42seoul.kr/seoul42/main/view">42SEOUL</a>: 프랑스의 유명 프로그램인 42Ecole을 벤치마킹한 대한민국 정부 지원 SW 개발자 양성 프로그램이다. 전 세계적으로 유명한 프로그램인 만큼 회사 지원했을 때 도움되는 경우가 많다.</li><li><a href="https://www.ssafy.com/">Ssafy(싸피)</a>: 삼성에서 지원하는 SW 개발자 양성 프로그램이다. 졸예자 이상만 참가 가능하다.</li></ul><p>국비지원을 선택했더라도 자신의 노력에 달렸으니 더더욱 열심히 CS공부를 하는 것을 추천한다.</p><p><br><br></p><h2 id="개발자로-지원할-수-있는-기업"><a href="#개발자로-지원할-수-있는-기업" class="headerlink" title="개발자로 지원할 수 있는 기업"></a>개발자로 지원할 수 있는 기업</h2><p>크게 두 가지로 나뉜다.<br>(금융권 IT 등 다양하게 있겠지만 이 쪽으로는 잘 몰라서 패스)</p><ul><li><strong>대기업 IT 자회사</strong>: LG CNS, 현대오토에버, 삼성 SDS 등<ul><li>그룹 계열사의 IT 서비스를 개발 및 운영</li><li>흔히 대기업 SI로 불리며, 취업 시장에서 가장 많이 채용</li><li>장점: 높은 연봉과 안정성</li><li>단점: 수직적인 기업문화, 개발 기회가 적음(대체로 운영 업무 위주)</li></ul></li><li><strong>IT 서비스 기업</strong>: 네카라쿠배(네이버, 카카오, 라인, 쿠팡, 배달의 민족)<ul><li>개발적인 측면에서 자유를 보장받을 수 있으며 다양한 기회 또한 접할 수 있음</li><li>계속 개발 공부를 하면서 성장하고 싶다면 추천</li><li>장점: 자유로운 기업문화</li><li>단점: 평생 공부, 기업별 연봉차가 매우 큼(대기업 vs 스타트업), 안정성 보장 못함</li></ul></li></ul><p><br><br></p><h2 id="같이-읽어보면-좋은-글"><a href="#같이-읽어보면-좋은-글" class="headerlink" title="같이 읽어보면 좋은 글"></a>같이 읽어보면 좋은 글</h2><ul><li><a href="https://ruby-kim.github.io/2022/04/23/Retrospect/Junior/">[후기] 스타트업/중소기업/대기업 인턴 및 정규직 준비 과정</a></li><li><a href="https://ruby-kim.github.io/2024/09/12/Retrospect/Portfolio/">개발자 포트폴리오, 이렇게 준비해보자</a></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🎈 Retrospect </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Retrospect </tag>
            
            <tag> Job </tag>
            
            <tag> 42SEOUL </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[MSA] Micro Service Architecture: Outer - Service Mesh</title>
      <link href="/2022/04/30/Architecture/MSA-outer-service-mesh/"/>
      <url>/2022/04/30/Architecture/MSA-outer-service-mesh/</url>
      
        <content type="html"><![CDATA[<p>MSA의 Outer Architecture 중 Service Mesh에 대해 알아보자.</p><p><br><br></p><h2 id="MSA-개념-설명-읽어보기"><a href="#MSA-개념-설명-읽어보기" class="headerlink" title="MSA 개념 설명 읽어보기"></a>MSA 개념 설명 읽어보기</h2><hr><ul><li><a href="https://ruby-kim.github.io/2022/04/26/Architecture/MSA-Intro/">[MSA] Micro Service Architecture 개요</a></li></ul><p><br><br></p><h2 id="Service-Mesh"><a href="#Service-Mesh" class="headerlink" title="Service Mesh"></a>Service Mesh</h2><hr><p><img src="1.png"></p><ul><li>마크크로서비스 간의 통신(네트워크)을 제어하는 역할<ul><li>통신 및 네트워크 기능을 비즈니스 로직과 분리한 네트워크 통신 인프라</li><li>모든 서비스의 인프라 layer로 서비스들 간의 통신 처리</li></ul></li><li>service discovery, service routing, load balancing(트래픽 관리) 및 보안 등을 담당함</li></ul><p><br><br></p><h2 id="API-Gateway와의-차이점"><a href="#API-Gateway와의-차이점" class="headerlink" title="API Gateway와의 차이점"></a>API Gateway와의 차이점</h2><hr><p>먼저 <a href="https://ruby-kim.github.io/2022/04/28/Architecture/MSA-outer-gateway/">[MSA] Micro Service Architecture: Outer - External Gateway</a>를 읽고 아래 표를 보는 것을 추천한다.</p><ul><li>최근 MSA에서 다음과 같이 사용:<ul><li>API Gateway는 노출되는 부분(External)에 위치하며 내부서비스를 보호 및 제어하는 역할로 사용</li><li>Service Mesh는 내부 서비스(Internal)에 위치하여 서비스를 관리하는 구조로 사용<br><img src="2.png"></li></ul></li></ul><table>    <tbody><tr>        <td></td>        <td>API Management</td>        <td>Service Mesh</td>    </tr>    <tr>        <td><b>적용되는 위치</b></td>        <td>마이크로서비스 그룹의 외부 경계에 위치하여 역할 수행</td>        <td>경계 내부에서 역할 수행</td>    </tr>    <tr>        <td><b>아키텍쳐 형태</b></td>        <td>중앙집중형 아키텍쳐 = SPOF(Single Point of Failure) 생성</td>        <td>분산형 아키텍쳐 = SPOF를 생성하지 않고 확장이 용이</td>    </tr>    <tr>        <td><b>패턴</b></td>        <td>- Gateway proxy pattern 사용<br>- Consumer(호출자)가 구현 내용을 알 필요없이 Gateway를 호출하는 방법만 알면 Gateway가 알아서 수행해주는 방식</td>        <td>- Sidecar proxy pattern 사용<br>- Consumer(호출자)의 코드에 Provider(공급자)의 주소를 찾는 방법, failover와 관련된 코드 등의 내용이 들어가게 설정<br>- 호출자의 코드는 어플리케이션 코드(비즈니스 로직)에 내장되지 x, sidecar 형태로 별개로 관리됨</td>    </tr>    <tr>        <td>라우팅 주체</td>        <td>서버</td>        <td>요청하는 서비스</td>    </tr>    <tr>        <td>라우팅 구성요소</td>        <td>별도의 네티워크를 도입하는 독립적인 API gateway 구성 요소</td>        <td>서비스 내 sidecar로 Local network 스택의 일부가 됨</td>    </tr>    <tr>        <td>로드 밸런싱</td>        <td>- 단일 엔드포인트를 제공<br>- API Gateway 내 로드밸런싱을 담당하는 구성요소에 요청을 redirection하여 해당 구성 요소가 처리함</td>        <td>- Service Registry에서 서비스 목록을 수신함<br>- sidecar에서 로드밸런싱 알고리즘을 통해 수행함</td>    </tr>    <tr>        <td>네트워크</td>        <td>외부 인터넷과 내부 서비스 네트워크 사이</td>        <td>- 내부 서비스 네트워크 사이 <br> - 응용 프로그램의 네트워크 경계 내에서만 통신이 가능하게 함</td>    </tr>    <tr>        <td>분석</td>        <td>API에 대한 사용자 및 공급자에 대한 모든 호출에 대해 수집되고 분석</td>        <td>Mesh 내 모든 마이크로서비스 구성요소에 대해 분석</td>    </tr></tbody></table><p><br><br></p><h2 id="Service-Mesh의-종류"><a href="#Service-Mesh의-종류" class="headerlink" title="Service Mesh의 종류"></a>Service Mesh의 종류</h2><hr><p><img src="3.png"></p><h4 id="PaaS-Platform-as-a-Service-의-일부로-서비스-코드에-포함되는-유형"><a href="#PaaS-Platform-as-a-Service-의-일부로-서비스-코드에-포함되는-유형" class="headerlink" title="PaaS (Platform as a Service)의 일부로 서비스 코드에 포함되는 유형"></a>PaaS (Platform as a Service)의 일부로 서비스 코드에 포함되는 유형</h4><ul><li>Microsoft Azure Service fabric, lagom, SENECA</li><li>프레임워크 기반의 프로그래밍 모델 -&gt; service mesh를 구현하는데 특화한 코드가 필요함(Mesh-native Code)</li></ul><h4 id="라이브러리로-구현되어-API-호출을-통해-Service-mesh에-결합되는-유형"><a href="#라이브러리로-구현되어-API-호출을-통해-Service-mesh에-결합되는-유형" class="headerlink" title="라이브러리로 구현되어 API 호출을 통해 Service mesh에 결합되는 유형"></a>라이브러리로 구현되어 API 호출을 통해 Service mesh에 결합되는 유형</h4><ul><li>Spring Cloud, Netflix OSS(Ribon/Hystrix/Eureka/Archaius), finagle</li><li>프레임워크 라이브러리를 사용<ul><li>Netflix의 Prana는 sidecar 형태로 동작함</li></ul></li><li>Service mesh를 이해하고 코드를 작성해야 함 (Mesh Aware Code)</li></ul><h4 id="Sidecar-proxy를-이용하여-Service-mesh를-마이크로서비스에-주입하는-유형"><a href="#Sidecar-proxy를-이용하여-Service-mesh를-마이크로서비스에-주입하는-유형" class="headerlink" title="Sidecar proxy를 이용하여 Service mesh를 마이크로서비스에 주입하는 유형"></a>Sidecar proxy를 이용하여 Service mesh를 마이크로서비스에 주입하는 유형</h4><ul><li>Istio/Envoy, Consul, Linkerd</li><li>sidecar proxy 형태로 동작</li><li>service mesh와 무관하게 코드 작성<blockquote><p><b>sidecar pattern</b><br><img src="4.png"></p><ul><li>컨테이너 배포방식의 경우 모든 응용 프로그램 컨테이너에 추가로 sidecar 컨테이너가 배포됨</li><li>서비스에 들어오거나 나가는 모든 네트워크 트래픽을 처리 </li><li>비즈니스 로직이 포함된 실제 서비스와 sidecar가 병렬로 구성됨 = 서비스 호출에서 proxy를 통해 호출(서비스가 직접 서비스 호출x)</li><li>대규모 마이크로서비스 환경이여도 개발자가 별도의 작업 없이 서비스의 연결, 로깅, 모니터링, 보안, 트래픽 제어를 할 수 있음</li><li>최근 Service Mesh에서 Sidecar pattern 유형을 많이 사용하는 추세</li></ul></blockquote></li></ul><p><br><br></p><h2 id="Service-Mesh의-주요-기능"><a href="#Service-Mesh의-주요-기능" class="headerlink" title="Service Mesh의 주요 기능"></a>Service Mesh의 주요 기능</h2><hr><p>일반적으로 Istio나 consul, Linkerd와 같은 Service Mesh 프레임워크들에서 기능 지원</p><ul><li>Service Discovery</li><li>Load balancing (지연시간 기반 / 대기열 기반)</li><li>Dynamic Request Routing</li><li>Circuit Breaking</li><li>암호화 (TLS)</li><li>보안</li><li>Health check, Retry and Timeout</li><li>Metric 수집</li></ul>]]></content>
      
      
      <categories>
          
          <category> 🔧 Architecture </category>
          
      </categories>
      
      
        <tags>
            
            <tag> MSA </tag>
            
            <tag> Architecture </tag>
            
            <tag> API </tag>
            
            <tag> ESB </tag>
            
            <tag> Sidecar </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[MSA] Micro Service Architecture: Outer - External Gateway</title>
      <link href="/2022/04/28/Architecture/MSA-outer-gateway/"/>
      <url>/2022/04/28/Architecture/MSA-outer-gateway/</url>
      
        <content type="html"><![CDATA[<p>MSA의 Outer Architecture 중 External Gateway에 대해 알아보자.</p><p><br><br></p><h2 id="MSA-개념-설명-읽어보기"><a href="#MSA-개념-설명-읽어보기" class="headerlink" title="MSA 개념 설명 읽어보기"></a>MSA 개념 설명 읽어보기</h2><hr><ul><li><a href="https://ruby-kim.github.io/2022/04/26/Architecture/MSA-Intro/">[MSA] Micro Service Architecture 개요</a></li></ul><p><br><br></p><h2 id="External-Gateway"><a href="#External-Gateway" class="headerlink" title="External Gateway"></a>External Gateway</h2><hr><p><img src="1.png"></p><ul><li>전체 서비스 외부로부터 들어오는 접근을 내부 구조를 드러내지 않고 처리하기 위한 요소</li><li>사용자 인증 (Consumer Identity Provider)과 권한 정책관리(Policy Management)를 수행</li><li><code>API Gateway</code>가 가장 핵심적인 역할</li></ul><p><br><br></p><h2 id="API-Gateway"><a href="#API-Gateway" class="headerlink" title="API Gateway"></a>API Gateway</h2><hr><ul><li>서버 최앞단에 위치하여 모든 API 호출을 받음 (API 서버들의 endpoint 단일화를 해주는 또다른 서버)</li><li>API에 대한 인증과 인가 기능을 가지고 있음: 받은 API 호출을 인증한 후, 적절한 서비스들에 메세지를 전달(routing)</li><li>SOA의 핵심 인프라인 <code>ESB</code>(Enterprise Service Bus)에서 비롯됨<ul><li>EBS는 SOAP/XML 기반의 무거운 기능</li><li>API Gateway는 REST/JSON 기반의 가벼운 기능</li></ul></li></ul><p><br><br></p><h2 id="API-Gateway의-주요-기능"><a href="#API-Gateway의-주요-기능" class="headerlink" title="API Gateway의 주요 기능"></a>API Gateway의 주요 기능</h2><hr><ol><li><strong>인증 및 인가</strong> (Authentication and Authorization)<ul><li>MSA에서 각각의 서비스에 API호출에 대한 인증 및 인가를 한다는 것 = 같은 소스코드를 서비스 인스턴스들마다 심어줘야 함 = 소스의 중복이 심하여 유지 관리가 어렵고, 로깅 모니터링을 관리하는 것도 매우 어려워짐</li><li>따라서 인증서 관리나 인증, SSL, 프로토콜 변환화 같은 기능들을 API Gateway에서 오프로드 -&gt; 각각의 서비스 부담 줄이기 및 서비스 관리, 업그레이드가 용이함<blockquote><p>Authentication (인증) vs Authorization (인가)</p><ul><li>Authentication: 유저가 누구인지 확인하는 절차 </li><li>Authorizatoin: 어떠한 유저가 특정 자원에 접근하려 할 때, 그에 대한 접근 권한이 있는지 확인하는 절차</li></ul></blockquote></li></ul></li><li><strong>요청 절차의 단순화</strong><ul><li>API Gateway가 없을 시 클라이언트에 여러 서비스들에 대한 요청을 진행해야 함</li><li>API Gateway는 여러 클라이언트의 요청을 단일 클라이언트의 요청으로 대체 가능하도록 만들어줌</li><li>따라서 클라이언트와 백엔드 간 APU 통신량이 줄어 대기시간이 줄어줄이고 효율성을 높일 수 있음</li></ul></li><li><strong>라우팅 및 로드밸런싱</strong><ul><li>클라이언트로부터 접수된 메시지에 따라, API 호출을 적절한 서비스에 라우팅</li><li>서비스 인스턴스들에 대한 부하분산 가능</li></ul></li><li><strong>서비스 오케스트레이션</strong><ul><li><code>오케스트레이션</code>: 여러 개의 마이크로 서비스를 묶어 새로우 서비스를 만드는 개념</li><li>과도한 오케스트레이션 로직: APU Gateway의 부담을 늘리는 것  = 성능 저하</li></ul></li><li><strong>서비스 디스커버리</strong><ul><li>API Gateway는 각 서비스 호출을 위해 서비스마다 IP주소 및 포트번호를 알고 있어야 함</li><li>lagacy 환경에서는 크게 문제될 점이 없지만, 클라우드 환경에서는 <code>동적</code>으로 배포되기 때문에 서비스 위치를 찾는 것이 어려움<ul><li>이러한 서비스의 위치를 찾는 것을 <code>Service Discory</code></li></ul></li><li>서버 사이드나 클라이언트 사이드를 기준으로 서비스 디스커버리 구현 가능</li></ul></li></ol><p><br><br></p><h2 id="API-Gateway-적용-시-고려사항"><a href="#API-Gateway-적용-시-고려사항" class="headerlink" title="API Gateway 적용 시 고려사항"></a>API Gateway 적용 시 고려사항</h2><hr><ul><li><p>API Gateway 계층이 추가적으로 만들어진다는 의미 = 그 만큼 네트워크 latency 증가</p></li><li><p>API Gateway의 Scale-out 적용이 유연하게 일어나지 않을 경우, API Gateway가 병목지점이 되어 어플리케이션의 성능저하가 일어날 수 있음</p></li><li><p>API Gateway의 가장 큰 단점은 <code>API Gateway를 내부 마이크로서비스와 결합한다는 것</code><br>-&gt; 기존 SOA에서의 EBS(Enterprise Service Bus)에서 발생했던 문제점이 다시 발생할 수 있음</p><blockquote><p>2000년대 후반, 많은 SOA 프로젝트가 실패한 이유로 SOA의 핵심적인 요소 중 하나인 ESB가 꼽히는 경우가 많음.</p><ul><li>당시 EBS 내부 처리 로직을 XML 기반으로 했는데, XML의 파싱은 오버헤드가 큰 작업</li><li>EBS는 가벼운 연산 외에도 과도한 Orchestration 등 무거운 로직을 가짐. 대부분 ESB를 Gateway로의 특성이 아닌 시스템을 통합하기 위한 역할로 많이 구현했음</li></ul></blockquote></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🔧 Architecture </category>
          
      </categories>
      
      
        <tags>
            
            <tag> MSA </tag>
            
            <tag> Architecture </tag>
            
            <tag> API </tag>
            
            <tag> ESB </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[MSA] Micro Service Architecture 개요</title>
      <link href="/2022/04/26/Architecture/MSA-Intro/"/>
      <url>/2022/04/26/Architecture/MSA-Intro/</url>
      
        <content type="html"><![CDATA[<p>요즘 핫이슈로 개발자라면 무조건 알아야 할 개념인 MSA에 적어보고자 한다.</p><h2 id="MSA의-등장배경-모놀리식-아키텍처-Monolithic-Architecture"><a href="#MSA의-등장배경-모놀리식-아키텍처-Monolithic-Architecture" class="headerlink" title="MSA의 등장배경: 모놀리식 아키텍처 (Monolithic Architecture)"></a>MSA의 등장배경: 모놀리식 아키텍처 (Monolithic Architecture)</h2><hr><p><img src="1.png"></p><ul><li>소프트웨어의 모든 구성 요소가 한 프로젝트에 통합되어있는 형태<ul><li>쉽게 학교에서 프로젝트할 때를 생각하면 됨<ul><li>소규모 프로젝트에서 합리적: 간단한 architecture, 용이한 유지보수</li></ul></li></ul></li><li>수백명의 개발자가 투입되는 프로젝트같은, <strong>일정 규모 이상의 서비스</strong>를 운영할 때 한계가 있음<ul><li>서비스, 프로젝트가 커지면 커질수록 영향도 파악 및 전체 시스템 구조 파악에 어려움이 있음</li><li>빌드 시간 및 테스트 시간, 배포 시간이 기하급수적으로 늘어남</li><li>서비스를 부분적으로 scale-out하기 힘듦</li><li>부분의 장애가 전체 서비스의 장애로 이어질 수 있음</li></ul></li></ul><p><br><br></p><h2 id="Micro-Service-뜻"><a href="#Micro-Service-뜻" class="headerlink" title="Micro Service 뜻"></a>Micro Service 뜻</h2><hr><p><img src="2.png"></p><blockquote><p>“the microservice architectural style is an approach to developing a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms, often an HTTP resource API. These services are built around business capabilities and independently deployable by fully automated deployment machinery.”</p></blockquote><p>출처: <a href="https://martinfowler.com/articles/microservices.html">https://martinfowler.com/articles/microservices.html</a></p><ul><li><strong>small services, each running in its own process</strong>: 스스로 돌아갈 수 있는 작은 서비스</li><li><strong>independently deployable</strong>: 독립적 배포 가능</li><li>각각의 서비스는<ul><li>매우 작은 단위로 구성되어 있지만 서비스 자체는 하나의 MA(모놀리틱 아키텍처)와 유사 구조를 지님</li><li>독립적으로 배포 가능</li><li>다른 서비스에 대한 의존성이 최소화 되어야 함</li><li>개별 프로세스로 구동되며, REST와 같은 가벼운 방식으로 통신되어야 함</li></ul></li></ul><p><br><br></p><h2 id="MSA의-장점"><a href="#MSA의-장점" class="headerlink" title="MSA의 장점"></a>MSA의 장점</h2><hr><ul><li>배포(Deployment) 관점: 서비스 별 개별 배포 가능 (배포 시 전체 서비스 중단이 없음) -&gt; 요구사항을 신속하게 반영하여 빠르게 배포할 수 있음</li><li>확장(Scaling) 관점: 특정 서비스에 대한 확장성이 용이 -&gt; 클라우드 사용에 적합한 아키텍처</li><li>장애(Failure) 관점: 장애가 전체 서비스로 확장될 가능성이 적음 -&gt; 부분적 장애에 대한 격리가 수월함</li><li>신기술의 적용이 유연하며, 서비스를 polyglot하게 개발/운영할 수 있음</li></ul><p><br><br></p><h2 id="MSA의-단점"><a href="#MSA의-단점" class="headerlink" title="MSA의 단점"></a>MSA의 단점</h2><hr><ul><li>Monolithic Architecture보다 복잡한 아키텍처 -&gt; 전체 서비스가 커질수록 그 복잡도는 기하급수적으로 늘어남</li><li>성능: 서비스 간 호출 시 API를 사용함 -&gt; 통신 비용 및 latency(지연 시간)이 그만큼 늘어남</li><li>테스트/트랜잭션: 서비스가 분리되어 있음 -&gt; 테스트와 트랜잭션 복잡도 증가, 많은 자원을 요구</li><li>데이터 관리: 데이터가 여러 서비스에 걸쳐 분산되기 때문에 한 번에 조회화기 어렵고, 데이터의 정합성 또한 관리가 힘듦</li></ul><p><br><br></p><h2 id="MSA-구조"><a href="#MSA-구조" class="headerlink" title="MSA 구조"></a>MSA 구조</h2><hr><p><img src="3.png"></p><ol><li><strong>Inner Architecture</strong> (남색 부분): 내부 서비스와 관련된 아키텍처<ul><li>고려사항<ul><li>마이크로 서비스를 어떻게 정의할 것인가?</li><li>DB Access 구조를 어떻게 설계할 것인가?</li><li>마이크로 서비스 내 api를 어떻게 설계할 것인가?</li><li>논리적인 컴포넌트들의 layer를 어떠한 방식으로 설계할 것인가?</li></ul></li><li>표준이 없어 MSA를 설계하는데 가장 어려운 부분</li></ul></li><li><strong>Outer Architecture</strong> (회색 부분)<ul><li><a href="https://ruby-kim.github.io/2022/04/28/Architecture/MSA-outer-gateway/">External Gateway</a></li><li><a href="https://ruby-kim.github.io/2022/04/30/Architecture/MSA-outer-service-mesh/">Service Mesh</a></li><li>Container Management</li><li>Backing Services</li><li>Telemetry</li><li>CI/CD Automation</li></ul></li></ol>]]></content>
      
      
      <categories>
          
          <category> 🔧 Architecture </category>
          
      </categories>
      
      
        <tags>
            
            <tag> MSA </tag>
            
            <tag> Architecture </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[후기] 스타트업/중소기업/대기업 인턴 및 정규직 준비 과정</title>
      <link href="/2022/04/23/Retrospect/Junior/"/>
      <url>/2022/04/23/Retrospect/Junior/</url>
      
        <content type="html"><![CDATA[<h2 id="1-👩🏻‍💻-내가-개발자…"><a href="#1-👩🏻‍💻-내가-개발자…" class="headerlink" title="1. 👩🏻‍💻 내가 개발자…?"></a>1. 👩🏻‍💻 내가 개발자…?</h2><p>대입준비를 하면서도 컴퓨터는 단 1도 생각하지 않았지만 현실부정을 하기엔 이미 대학교 등록까지 마쳐버렸다.<br>결론적으로 소프트웨어학과에 입학했으니 한 번 해보자며 도전했는데 글쎄, 다들 한 번에 합격하던 학교 c언어 인증시험을 2번이나 낙방했다.</p><p>이 때 컴퓨터에 대한 재능이 그렇게 뛰어나지 않은걸 깨달아 다른 길을 찾으려 했지만 바늘 구멍보다 더 좁은, 취업이 힘든 이 시국에 내가 배운거라곤 컴퓨터밖에 없어 결국 개발자의 길을 반강제적으로 선택하게 됐다.<br><code>개발자로 취직한다</code>라고 내 자신을 납득시키고 인정하도록 만드는게 가장 어려웠던 것 같다.</p><p><br><br></p><h2 id="2-🎯-세부-진로-선택-스펙-쌓기-x3D-대외활동"><a href="#2-🎯-세부-진로-선택-스펙-쌓기-x3D-대외활동" class="headerlink" title="2. 🎯 세부 진로 선택 + 스펙 쌓기 = 대외활동"></a>2. 🎯 세부 진로 선택 + 스펙 쌓기 = 대외활동</h2><p>개발자로 목표를 잡았으니 풀스택, 안드로이드, 데이터사이언스 등 세부 진로를 잡아야 하는데 컴퓨터 분야가 너무 넓어 도저히 선택을 할 수 없었다.<br>그나마 재능 있는 분야로 가야할 것 같은데 배울 내용이 너무나도 많았고, 가뜩이나 머리도 좋은 편이 아닌데 아르바이트 + 학교(21학점) 병행으로 온전히 학습에 집중하기 어려운 환경이었다.<br>그래서 효율적인 학습방안을 고안했는데 그게 바로 <code>대외활동</code>이였다.</p><h4 id="왜-대외활동"><a href="#왜-대외활동" class="headerlink" title="왜 대외활동?"></a>왜 대외활동?</h4><p>돈 없는 학생 입장에서 무언가를 무료로 배울 수 있다는 것, 가끔은 활동비도 준다는게 매우 긍정적으로 보였다.<br>그리고 대학생이 되었으니 그 때만 받을 수 있는 혜택 최대한 다 받아봐야 하지 않겠는가 싶었다.</p><h4 id="대외활동-종류"><a href="#대외활동-종류" class="headerlink" title="대외활동 종류"></a>대외활동 종류</h4><ul><li>제주코딩베이스캠프 10기 (2019년 상반기) <a href="https://blog.naver.com/dev_rubykim/222449187535">책1</a> <a href="https://blog.naver.com/dev_rubykim/222449183632">책2</a><br>3년에 한번 들어갈까 말까하는 페이스북 계정이 있는데, 갑자기 생각나 잠시 들어갔더니 친구 한 명이 제주코딩베이스캠프에 좋아요 표시를 남긴게 피드에 뜨면서 자연스레 알게 되었다.<br>아무것도 없는 스펙이라 진심을 담아 지원서를 썼더니 운좋게 합격했다. (뭔지는 모르겠지만 1장 썼는데 합격했다. 반면 10장 넘게 쓴 사람은 떨어졌다고 한다. 운영진 말로는 지원이유에 포커싱을 잘 맞춘 지원자를 뽑았다던데 내껀… 잘 모르겠다.)<br>가서 파이썬 자동화 수업을 들으며 이왕 잡은 기회 틈틈히 엿보다가 운 좋게 책 2권을 공동집필 및 출판했다.</li><li><a href="https://blog.naver.com/dev_rubykim/222457413201">네이버 BOOSTER</a> (2019년 하반기)<br>네이버의 부스트코스를 수강하던 중, 부스트 코스 홍보대사를 뽑는다는 공지를 보고 지원했다.<br>당시 블로그 운영에 집중하고 있던터라 일방문자가 100명 정도 됐는데 그 덕에 합격한 것 같다.<br>덕분에 안드로이드 코스를 수강하며 무료로 전문가 첨삭을 받을 수 있었다. 1회에 3만 5천원 정도였던 걸로 기억하는데 홍보대사로서 대차게 잘 활용했던 대외활동이다.</li><li><a href="https://blog.naver.com/dev_rubykim/222457399153">HUFS IT</a> (2020년 하반기)<br>이 프로그램은 취준생 + 창업을 위한 사람을 뽑는 곳이다. 처음에는 3학년이라는 이유로 떨어졌는데, 4학년에 다시 지원하니 붙었다. 인공지능과 블록체인에 대한 수업을 들었는데 전부 이론관련 내용이었다. 여담으로 중간에 자소서 첨삭 등도 봐주셨는데 유익했던 것 같다.</li><li><a href="https://blog.naver.com/PostList.naver?blogId=dev_rubykim&amp;from=postList&amp;categoryNo=23">대코캠(대학교 코딩 캠프) 서포터즈 1기</a> (2021년 하반기)<br>당시 코드잇에서 DB 강의를 들었는데 지금까지 들었던 수업 중 가장 쉽고 머리에 쏙쏙 박히는 설명에 열심히 수업을 수강하던 중이었다. 수강 만료 기간이 다가와 아쉬워하던 차 대코캠 서포터즈를 하면 추가 수강권을 준다고 하여 지원했고, 덕분에 수강권을 받아 추가로 수업을 더 들을 수 있었다.</li><li><a href="https://blog.naver.com/PostList.naver?blogId=dev_rubykim&amp;from=postList&amp;categoryNo=39">JE코베 서포터JU 2기</a> (2021년 하반기)<br>제주코딩베이스캠프에서 주최하는 서포터즈 활동으로, 제코베에서 만든 강의들을 모두 무료로 제공해준다 하여 지원하고 열심히 수강했다. 여기서 Django 수업을 많이 수강했다.</li></ul><h4 id="대외활동-합격팁"><a href="#대외활동-합격팁" class="headerlink" title="대외활동 합격팁"></a>대외활동 합격팁</h4><ol><li><p>대부분의 대외활동들은 자기 기업 PR을 위해 진행한다.<br>따라서 효과적인 기업홍보를 할 수 있는 방안을 미리 만들어놓는 것이 좋다.</p><ul><li><a href="https://blog.naver.com/dev_rubykim">블로그</a>: 보통 대외활동은 블로그를 통해 프로그램 관련 포스팅을 진행한다.</li><li><a href="https://www.youtube.com/channel/UCbOmJzYjQAxdtuJdPI0f9Sg">유튜브</a>: 개발 관련 대외활동으로는 거의 쓰이지 않는다.</li><li><a href="https://www.instagram.com/rubyhae_/">인스타그램</a>: 보통 카드뉴스 형식으로 진행된다.</li></ul><p>플랫폼에 상관없이, 미리 약간의 콘텐츠를 업로드하여 어느 정도의 방문자를 만들어 놓는 것이 관건이다.</p></li><li><p>각 대외활동에서 중요시 보는 부분 파악하기<br>각각의 기업마다 중요시 하는 부분이 다르다.<br><strong>봉사</strong>같이 남에게 선한 영향력을 끼칠 수 있는가, 아니면 <strong>취업</strong>이나 <strong>창업</strong>에 관심이 있는가 등 다양한 조건을 가지고 지원자의 합불을 결정한다.<br>이는 주최사의 회사이념이나 창업자의 가치관을 보고 쉽게 판단할 수 있는데, 보통 인터넷에 검색하면 자료들을 찾을 수 있으니 이것저것 한 번 검색해보는걸 추천한다. 대외활동 사이트에 있는 사람들의 후기들을 통해서도 살펴볼 수 있다.</p></li></ol><h4 id="대외활동-사이트-추천"><a href="#대외활동-사이트-추천" class="headerlink" title="대외활동 사이트 추천"></a>대외활동 사이트 추천</h4><p>여러 대외활동 사이트가 있는데, 대부분의 대외활동 사이트에 동일한 내용이 올라오기 때문에 사이트는 하나만 추천하려고 한다.</p><ul><li><a href="https://allforyoung.com/">요즘것들</a><br>시중에 나와있는 대외활동 사이트 중 가장 깔끔한 UI로 구성됐다.</li><li><a href="https://github.com/ruby-kim/Realtime-IT-Contest-notification">공모전 &amp; 대외활동 알림 repository</a><br>42SEOUL을 하면서 잠깐 사람들 모아 진행했던 프로젝트다. 3일에 1번 대외활동 사이트를 크롤링하여 issue를 자동 open/close하도록 설정했다.</li></ul><h4 id="그-외-스펙을-위한-활동"><a href="#그-외-스펙을-위한-활동" class="headerlink" title="그 외 스펙을 위한 활동"></a>그 외 스펙을 위한 활동</h4><p>이왕 쓰는거 오직 스펙 쌓기를 위해 참가했던 프로그램 및 대회에 관해서도 적어본다.</p><ol><li>학교 연구실 인턴 (2019년 상반기)<br>이왕 대학생이 된거 대학원 비스무리한 생활도 해보고파 방법을 찾던 중 학교에서 연구실 인턴을 뽑는다는 공고문을 보고 지원했다.<br>교수님과 면접을 봤는데 좋게 봐주셔서 인턴으로 들어갔다. 그런데 인턴이라 그런가 너무 프리하게 놔주시더라.<br>뭔가 교수님이 하라는대로 하는데, 결과물을 내놓아도 그에 맞는 페이나 결과 등.. 내게 남는 것이 전혀 없어서 결국 나왔다.</li><li>고교 SW멘토링 (2019년 상반기)<br>바쁠 것 같아서 처음에는 안하려고 했는데 친구의 권유로 참가했다. 여름방학에 2주 정도 고등학교에 방문해서 파이썬을 가르쳤다.</li><li>학교 교내 SW/AI 해커톤 (2018년 하반기 / 2019년 상반기 / 2020년 상반기)<br>맨 처음 해커톤은 아무것도 모르는 상태에서 야식 공짜로 먹으러 참가한거라 아무 소득없이 1차에서 바로 탈락했다.<br>나머지 해커톤에서는 상을 받았는데, 먼저 2019년도 해커톤은 당시 인공지능 프로젝트에서 사용했던 모델 그대로 사용해도 괜찮겠다는 생각이 들어 참가했고 운 좋게 상을 수상했다.<br>그 다음해에는 서로 합이 맞은 친구들과 같이 해커톤에 참가하여 수상했다.</li><li><a href="https://blog.naver.com/dev_rubykim/222457473353">2019년도 K-SW Purdue Program</a> (2019년 하반기)<br>정부 지원으로 전공공부와 더불어 외국생활을 할 수 있다는 것에 감명받아 열심히 준비했다. (원래 외국에서 일해보고자 하는 꿈을 갖고 있었다.)<br>당시 OPIc 성적이 IL과 IM1을 받을 만큼 그닥 좋지 않아 영어 면접 질문 답변 리스트를 빽빽이로 5장 정도 준비했던게 기억난다.</li><li><a href="https://blog.naver.com/dev_rubykim/222454922801">42SEOUL</a> (2020년 하반기)<br>온보딩 신청은 2019년 11월에 바로 했는데, 당시 K-SW Purdue Program으로 외국에 있어 일부러 2기로 신청했다. 원래라면 2020년 3월 즈음에 라피신을 진행해야 했지만, 코로나로 인해 연장이 되면서 7월부터 라피신을 진행했다. 최종합격 이후, 9월부터 본격적으로 42SEOUL 본과정에 합류해 프로젝트를 진행했다.</li></ol><p><br><br></p><h2 id="3-🌸-스펙의-꽃-인턴에-도전-정규직까지"><a href="#3-🌸-스펙의-꽃-인턴에-도전-정규직까지" class="headerlink" title="3. 🌸 스펙의 꽃, 인턴에 도전 + 정규직까지!"></a>3. 🌸 스펙의 꽃, 인턴에 도전 + 정규직까지!</h2><p>이렇게 대외활동들을 통해 어느 정도 기술을 습득했다. 하지만 학생과 직장인에게는 엄연히 큰 차이가 있다.<br>그 차이를 어느 정도 극복을 해놔야 나중에 취준할 때 도움이 될 것 같아서, 그리고 어떤 분야로 갈지 확실히 정하기위해 경험삼아 인턴십에 도전했다.</p><p><del>사실대로 말하면 학교가기 싫어서 인턴 도전했다. 제발 졸업시켜주세요</del></p><p>참고로 스타트업은 맨 앞 첫 글자만 작성했다. 아무래도 사람이 적은 스타트업 특성 상 회사 이름을 그냥 적어버리면 사람들이 누군지 눈치챌 것 같다는 느낌아닌 느낌이랄까 (될 수 있으면 조용히 살고 싶다)</p><h4 id="Google-Korea-인턴-2019년-하반기-불합격"><a href="#Google-Korea-인턴-2019년-하반기-불합격" class="headerlink" title="Google Korea 인턴 (2019년 하반기): 불합격"></a>Google Korea 인턴 (2019년 하반기): 불합격</h4><p>당시 K-SW Purdue Program으로 미국에 있었는데, 경험삼아 도전해볼까?하며 했던게 면접까지 진출해버렸다(…)<br>포지션은 <code>안드로이드 개발자</code>였는데, 큰 이유는 없고 인턴 지원 당시 네이버 BOOSTER로 활동하며 공부했던 안드로이드가 내 최신 기술이었기 때문이다.</p><p>1차 코딩테스트 이후 서류를 가지고 합불을 가렸는데 코테결과가 나름 처참했음에도 서류가 좋아서 그런가 합격했다.<br>코딩테스트는 <a href="https://codingcompetitions.withgoogle.com/kickstart">Kick Start</a>에서 진행했는데, 알고리즘 보다는 무지성 + 노가다로 문제를 풀었다.<br><img src="1.png"></p><p>이후로는 1차 면접날, 면접관님과 ‘안녕하세요’와 ‘소리 잘 들리시죠?’ 이 두 마디 이후 바로 면접이 시작됐다.<br>소문으로만 들었던 외국계 면접이 이런거구나 체감했던 것 같다. 면접관님은 시종일관 면접에 관련된 질문만 던지시고 내 스펙, 성적 등 전부 관심이 없으셨다.</p><p>1차 면접은 거의 <code>2차 코딩테스트</code>였다. 특정한 자료 구조를 주며 구글 Docs에 직접 구현해보는 것이었는데, 솔직히 이런 문제가 나올줄 몰랐고 무엇보다 면접이 영어로 진행됐기 때문에 어버버 하면서 면접에 임했다. 당시 영어라곤 OPIc IM1이 다인, 자유롭게 영어로 얘기를 전혀 못하는 사람이었다. 그 때문인가 2차에서 결국 탈락했다.</p><p>기술면접이 끝나고 주니어 개발자로서 궁금한 내용이 있으면 물어보라는 얘기에 이런저런 얘기를 했는데, 좋은 말씀을 많이 해주셔서 도움이 됐던 것 같다. 여담으로 구글 코리아 지하의 운동시설이 그렇게 좋다는 정보를 얻었다.</p><h4 id="Naver-Clova-인턴-2019년-하반기-불합격"><a href="#Naver-Clova-인턴-2019년-하반기-불합격" class="headerlink" title="Naver Clova 인턴 (2019년 하반기): 불합격"></a>Naver Clova 인턴 (2019년 하반기): 불합격</h4><p>이 또한 K-SW Purdue Program으로 미국에 있을 때 갑자기 지원했던 인턴십이다.<br>당시 멘토님을 뵙고자 팀원들과 시카고로 갔는데, 교수님께서 카톡으로 네이버 클로바 인턴으로 추천해줄테니 한 번 지원해보지 않겠냐며 권유를 하셨다.<br>좋은 기회인 것 같아 급작스럽지만 서류와 포트폴리오를 열심히 준비했다. <del>그렇게 시카고 미술관 입구만 구경한 채 건너편 스타벅스에서 컴퓨터만 깔짝댔다.</del></p><p>당시 인공지능 관련 스펙이라곤 학교 프로젝트가 다였기에, 서류에서부터 떨어졌던 것 같다.</p><h4 id="스타트업-M사-인턴-2020년-상반기-불합격"><a href="#스타트업-M사-인턴-2020년-상반기-불합격" class="headerlink" title="스타트업 M사 인턴 (2020년 상반기): 불합격"></a>스타트업 M사 인턴 (2020년 상반기): 불합격</h4><p>뭔 바람이 불었는지 갑자기 인공지능에 꽂혀 <code>인공지능 개발자</code> 포지션으로 국내 인공지능 스타트업으로 유명한 M사에 지원했다.</p><p>웃기게도 코딩테스트는 5문제 중 1문제(심지어 그 1문제의 테스트 케이스를 전부 맞추지 못했다)를 맞췄는데, 서류와 포트폴리오가 너무 잘 되어있어 궁금하다 하셔서 반강제로 1차에서 합격했다.<br>코딩테스트를 못 본 이유가 있었다. <strong>다익스트라</strong> 같이 알고리즘 과목에 대한 깊은 지식이 있어야 풀 수 있는 문제가 출제됐는데, 당시 알고리즘을 아예 배우지 않은 상태에서 코딩테스트를 봤으니 점수가 처참했다.</p><p>면접에서는 추가적인 알고리즘 시험이 있었다. 파이썬 구현 문제였는데 정답이긴 하지만 10%정도? 부족한 답변을 내놓았다. 다만 다른 파이썬 문제는 의도대로 잘 풀었다.<br>다음으로는 프로젝트에 관한 면접이 진행됐고 차근히 잘 맞받아쳤던 것으로 기억한다.</p><p>다만 면접을 보시면서 자꾸 걱정하시던게 하나 있으셨는데, 바로 내가 그 당시 3학년 2학기를 준비하고 있었다는 것었다.<br>그 때문에 몇 번 망실이시는 모습을 보여주시더니 결국 최종에서 불합격을 받았다.</p><h4 id="스타트업-D사-인턴-2020년-상반기-합격"><a href="#스타트업-D사-인턴-2020년-상반기-합격" class="headerlink" title="스타트업 D사 인턴 (2020년 상반기): 합격"></a>스타트업 D사 인턴 (2020년 상반기): 합격</h4><p>이 회사는 <code>풀스택 엔지니어</code>로 지원했다. 위 M사와 동일하게 <code>인공지능 개발자</code>로 회사를 지원하고자 인터넷을 뒤졌는데, 인공지능 개발자로 4학년 이하의 학사를 뽑는 경우가 거의 없었다.<br>고민 끝에 <strong>인공지능 회사에 들어가서 어깨 너머로 배워야겠다</strong>라는 무대포 마음으로 무작정 인공지능 관련 회사에 아무 기술 포지션으로 지원했다.</p><p>전남에 있는 회사인데, 당시 코시국으로 뉴스가 난리났음에도 불구하고 직접 기차타고 오라 하길래 고민하다가 결국 비대면으로 면접을 봤다.<br>Django에서 손을 뗀지 1년이 넘어 아리까리했는데, 의외로 면접을 좋게 봤던 것 같다. 몇 문제는 제대로 답변을 못했지만 <strong>이런건 인턴으로 들어와서 다시 공부하면 되는거니까 걱정 마세요</strong>라며 <strong>인상 좋고 참 밝으시네요</strong>라며 시종일관 칭찬만 들었다.<br>지금이야 얘기하지만 사실 이 회사 면접은 형편없었다. 전부 알맹이가 빠진 질문들만 해왔기 때문이다.</p><p>위에 적었듯이 학교가기 싫어서 인턴을 지원했던터라 맨 처음에는 유일하게 합격한 여기로 인턴을 가고자 했지만, 바로 뒤에 후술할 회사 또한 합격해 이 회사는 결국 패스했다.</p><h4 id="중견기업-S사-인턴-2020년-상반기-합격"><a href="#중견기업-S사-인턴-2020년-상반기-합격" class="headerlink" title="중견기업 S사 인턴 (2020년 상반기): 합격"></a>중견기업 S사 인턴 (2020년 상반기): 합격</h4><p>최종적으로 2020년 상반기에서는 여기서 인턴십을 진행했다. <code>인공지능 개발자</code> 포지션의 인턴을 뽑길래 지원했고 코딩테스트도 5문제 중 4문제로 무난하게 풀었다.</p><p>그런데 면접을 갔더니 이미 실장님께서는 나를 인턴으로 내정하신 상태였다. 면접을 보러갔는데 시종일관 칭찬만 들었다. <strong>3학년인데 인공지능을 할 줄 알아요?</strong> <strong>포트폴리오 너무 잘 만들었네요. 3학년 맞아요?</strong> <strong>인사성도 좋고 인상도 좋고 아주 좋아요. 이번 인턴은 기대되는데요?</strong> 눈 앞에서 직격타로 칭찬을 들으니 낯간지럽고 그냥 그 자리를 벗어나고 싶다는 생각만 들었다.</p><p>회사는 음성인식 관련 인공지능을 개발하는 곳으로, 인터넷에 Open 음성인식 API를 찾아 돌아다니면 종종 볼 수 있는 곳이였다. 이 회사가 위 D사보다 규모도 더 크고, 무엇보다 인공지능을 배울 수 있다는 생각에 여기를 선택했다.</p><h4 id="외국계-기업-인턴-amp-정규직-88개-1승-87패-2020년-하반기-2021년-하반기"><a href="#외국계-기업-인턴-amp-정규직-88개-1승-87패-2020년-하반기-2021년-하반기" class="headerlink" title="외국계 기업 인턴 &amp; 정규직 88개: 1승 87패 (2020년 하반기 - 2021년 하반기)"></a>외국계 기업 인턴 &amp; 정규직 88개: 1승 87패 (2020년 하반기 - 2021년 하반기)</h4><p>주변 사람들에게 누누히 얘기했지만, 해외에서 바로 취직하고 싶다는 마음에 학교 졸업 프로젝트를 하면서 시간이 날 때마다 기업에 지원했다. (비자 때문에 일찍 지원하는게 맞다고 생각했다.)</p><p>원래 계획은 <code>ICT 프로젝트 인턴십 해외과정 합격</code> -&gt; <code>실리콘밸리 입성</code> -&gt; <code>정규직으로 전환 후 알박기</code>였는데, 맨 처음인 ICT 프로젝트 인턴십 학교 선발에서부터 불합격을 받아버렸다.<br>영어회화가 문제인 것 같아 하루에 6시간 이상을 혼자 영어로 떠들며 열심히 준비했더니, 2021년 하반기 과정 참여 대학 리스트 중 재학 중인 학교가 없어 결국 지원하지 못했다.</p><p>그래도 한 번 휴학을 한 탓에 내게는 4학년 2학기 과정이 남아있었고, 아직 졸업을 하지 않았으니 지금 이 순간에는 내가 하고 싶은대로 기업에 지원을 해보자며 여러 외국계 기업에 이력서를 뿌렸다. 하도 많이 제출해서 잊어버릴까봐 Notion으로 리스트를 작성했다. 종종 면접 예상 질문 및 답변들을 추가하고 수정하며 결과를 기다렸다.<br><img src="2.png"></p><p>그리고 당연하겠지만 돌아오는 메일이 없었다. 간혹 한 장씩 날라오면 전부 <b>Unfortunately…</b>로 메일이 시작됐다.<br>이 때 쯤에는 외국계 기업이라는 목표를 거의 포기했었다. 애초에 외국계 기업 TO가 적으니 당연한거지..라며 납득하고 있던 찰나, 운 좋게 미국 스타트업의 한국지부에서 인턴을 뽑는다는 소식을 들었다.</p><p>이게 마지막이다 하면서 포트폴리오와 이력서를 다시 재정비했고, 운 좋게 면접까지 모두 합격하여 인턴으로 선발됐다.<br>아직도 생각하면 운이 정말 좋았던 것 같다. 하루 전에 영어로 2시간 30분 동안 기술 + 인성 면접을 본다고 통보받아 거의 자포자기 했는데, 면접관들께서 너무 좋게 봐주셨다.<br><img src="6.png"></p><h4 id="국내-기업-정규직-12개-11승-1패-2021년-상반기-2021년-하반기"><a href="#국내-기업-정규직-12개-11승-1패-2021년-상반기-2021년-하반기" class="headerlink" title="국내 기업 정규직 12개: 11승 1패 (2021년 상반기 - 2021년 하반기)"></a>국내 기업 정규직 12개: 11승 1패 (2021년 상반기 - 2021년 하반기)</h4><p>국내 기업에서는 대승을 거뒀다. 해외와 상반되는 결과에 기분이 밍숭맹숭했다.<br>참고로 1패는 <code>네이버</code>인데, 코딩테스트를 합격했지만 고민 끝에 면접을 보지 않아서 불합격으로 분류했다. 면접까지 봤으면 최종 결과가 어떻게 나왔을지 잘 모르겠다.<br><img src="4.png"></p><p>포트폴리오를 뜯어고치고 github를 즐기차게 꾸며놨더니 모든 회사들이 너무 마음에 든다며 만족해하셨다. 덕분에 코딩테스트를 노답으로 보더라도 포트폴리오를 이렇게까지 잘 만든 내가 궁금하다며 면접까지 강제로 합격되는 경우도 허다했다.</p><p>이렇게 정규직 포지션으로 기업을 합격했지만, 위에 외국계 기업에서 인턴으로 합격했기 때문에 이 모든 것들을 포기하고 외국계 기업 인턴을 선택했다.</p><h4 id="최종-기업-선택-2021년-하반기-인턴-중인-외국계-스타트업-S사로-결정"><a href="#최종-기업-선택-2021년-하반기-인턴-중인-외국계-스타트업-S사로-결정" class="headerlink" title="최종 기업 선택 (2021년 하반기): 인턴 중인 외국계 스타트업 S사로 결정"></a>최종 기업 선택 (2021년 하반기): 인턴 중인 외국계 스타트업 S사로 결정</h4><p>인턴십을 진행했던 S사에서 배울 점이 많았고 모두가 친절했으며 무엇보다 외국계 회사 경험을 실제로 한다는게 내게 너무 꿈만같았다. 또한 다들 한국이 아닌 <strong>세상을 상대로 경쟁하는 사람</strong>인지라 엄청난 괴물급 스펙을 가진 인재들이어서, 여기에 있으면 여러모로 발전할 수 있겠구나 생각했다.</p><p>그래서 11월에 네이버 면접을 고민했지만, 결국 네이버를 포기하고 인턴 중인 S사를 선택했다. 인턴십이 끝나고 12월 말에 CEO와 간단한 온라인 미팅(면접)을 통해 정규직을 확정받았고, 2022년 1월부터 정규직으로 근무하기 시작했다. 그렇게 대학 졸업 1개월 전에 취뽀를 해버렸다.</p><p>아 맨 처음에 오퍼메일을 받았을 때 <strong>1-year appointment period</strong>라고 적혀있어 이건 뭔가 싶었는데, 알고보니 정규직이 맞고 1년마다 연봉 갱신한다는 의미에서 이 단어가 들어갔다고 하더라.<br><img src="5.png"></p><h4 id="기타-기업-찾기-amp-고르기"><a href="#기타-기업-찾기-amp-고르기" class="headerlink" title="기타: 기업 찾기 &amp; 고르기"></a>기타: 기업 찾기 &amp; 고르기</h4><ol><li><p>기업 찾기</p><ul><li><a href="https://github.com/jojoldu/junior-recruit-scheduler">jojoldu/junior-recruit-scheduler</a>: 주니어 개발자 채용 정보</li><li><a href="https://github.com/milooy/remote-or-flexible-work-company-in-korea">milooy</a>: 한국 자율/원격 출퇴근 회사 리스트</li><li><a href="https://github.com/gcreddy42/hiring2020">gcreddy42/hiring2020</a>: Internship status of companies - COVID-19</li></ul><p>기본적으로 github에 검색을 해보면 정보가 많이 나온다. 대기업은 누구나 다 알테니 중소기업이나 (특히) 스타트업에 관심있는 사람들은 github를 활용하는 것을 추천한다.</p></li><li><p>기업 고르기 (feat. 좆소 거르기)</p><ul><li><p><strong><code>LinkedIn</code>을 사용하는 직원이 많은 회사로 가자</strong><br>좆소 기업들의 특징이 <strong>개발 직군에 대한 정확한 지식 없어 고나리질</strong> 을 한다는 것인데, 모든 좆소가 그런건 아니겠지만 대부분 국비지원 출신들이 고위직에 있을 경우 이런 사태가 잘 발생한다. 좆소 경험이 있는 지인에게 듣길, 1년 과정 국비지원 출신 상사가 4년제 컴퓨터공학과 출신 지인에게 <b>‘이렇게 일을 못하시다니 국비지원 수업 좀 들어보는거 어때요?’</b>라며 큰소리를 치기도 했단다.</p><p>국비지원이라도 기초부터 잘 공부해서 취직하면 할 말 없겠지만, 1년 정도의 커리큘럼 가지고는 CS공부를 했다고 말하기엔 다소 무리가 있다. 괜히 4년제 대학에 컴퓨터공학과가 있을까.<br>그 사람들은 <b>더닝 크루거 효과의 멍청함의 피크(좆문가)</b>의 단계에 있다. 즉 아무리 열심히 설명해도 자신이 무조건 맞으며 개발자의 말을 못 알아듣는 상황이다.<br><img src="3.png"></p><p>말이 길어졌는데 이제 <code>LinkedIn</code>에 대한 이유를 설명해보겠다. 개발자들의 이직 과정은 꽤 재밌다. <strong>직접 다른 회사에 이력서를 제출</strong>하거나 <strong>헤드헌터들에게 이직 제안을 받고 바로 코딩테스트와 면접을 보는 경우</strong>가 허다한데, 대부분 능력있는 경력직군은 후자로 많이 이직을 선택한다.</p><p>이 때 헤드헌터들이 사용하는 플랫폼이 무엇인가 알아야 하는데, 대부분이 <code>LinkedIn</code>을 사용한다. 그래서 능력있는 개발자들은 기본적으로 <code>LinkedIn</code> 계정을 갖고 있고, 그런 사람들이 많은 회사를 들어가면 SW를 제대로 공부한 사람끼리 서로 의사소통이 잘 되기 때문에 좆소와 매우 거리가 멀어진다.</p></li><li><p><strong>생각보다 도움이 안되는 <code>기업 리뷰 사이트</code></strong><br>대부분 회사를 지원할 때 잡플래닛, 사람인 등 기업 리뷰를 보게 된다. 그런데 막상 기업에 지원해보니 이 리뷰들이 솔직히 도움이 안됐다.<br>그 당시 사람들이 여러 이유로 고통을 받았다고 하더라도, 막상 들어가면 상황이 이미 다 정리되어 매우 편하게 회사생활을 할 수 있는 경우가 있었다. (주변 지인들 + 내 경험담)</p><p>어떻게 생각해보면 당연한 얘기다. 굳이 리뷰 사이트에 들어가서 글을 남기는 사람이 있을까? 엄청난 애사심이나 증오심이 있지 않은 이상 대부분 귀찮다며 사이트 자체도 들어가지 않을 것이다. 당장 네카라쿠배에 들어가보면 별점이 <code>3.8</code> 정도 되는, 생각보다 그렇게 높지 않은 평점을 확인할 수 있다.</p><p>인터뷰 팁도 의외로 도움이 되지 않았다. 매년 바뀌는 문제, 바뀌는 면접관으로 적중률이 생각보다 높지 않았다. 굳이 나오면.. 포켓몬빵에서 피카츄 걸리는 확률로 기업 인터뷰 후기에 있는 문제가 나왔던 것 같다.</p></li><li><p><strong>잠재성 있는 산업 분야 선택하기</strong><br>입사를 하면 연봉 협상을 해야하는데 기업 입장에서는 최대한 적게, 신입 입장에서는 최대한 크게 연봉 협상을 진행해야 한다.</p><p>대부분 회사들이 <b>“우리 회사가 많이 어려워서요, 이 정도면 가능할 것 같습니다”</b>라는 얼토당토 말도 안되는 방식으로 연봉 후려치기를 하는 경우가 많은데, 사전에 이런 말이 나오지 않도록  차라리 <code>의료</code>, <code>교육</code> 등 미래잠재성이 큰 분야를 타겟으로 사업을 운영하는 회사를 선택하는 것도 좋은 방법이다.<br>미래 인류를 위한 사업으로 대회 상금이나 과제 따오는게 다른 분야보다 쉬운 편이고, 그만큼 자본금도 다른 분야에 비해 널널하기 때문이다.<br>(애초에 회사 사정이 어려운걸 우리가 왜 이해해야 하는지 잘 모르겠다. 회사가 어렵다? 그건 CEO 잘못이다.)</p><p>참고로 이러한 분야를 선택한다고 해서 연봉이 극적으로 올라가는건 아니다. 연봉협상은 말빨이다. 말빨로 상대방이 정신차리지 못하도록 탈탈탈 호로록 털어버리는 것이다.</p></li></ul></li></ol><p><br><br></p><h2 id="5-📖-서류-amp-인터뷰-준비법"><a href="#5-📖-서류-amp-인터뷰-준비법" class="headerlink" title="5. 📖 서류 &amp; 인터뷰 준비법"></a>5. 📖 서류 &amp; 인터뷰 준비법</h2><p>(수정 중. 추후 업로드 예정)</p><p><br><br></p><h2 id="6-📚-최종-이력서-x2F-포트폴리오-x2F-기타-스펙"><a href="#6-📚-최종-이력서-x2F-포트폴리오-x2F-기타-스펙" class="headerlink" title="6. 📚 최종 이력서 / 포트폴리오 / 기타 스펙"></a>6. 📚 최종 이력서 / 포트폴리오 / 기타 스펙</h2><ul><li>(링크 수정 중. 추후 업로드 예정)</li><li>기타 스펙: OPIc IH (딱 하나..)</li></ul><p><br><br></p><h2 id="7-💼-취업-이후로는"><a href="#7-💼-취업-이후로는" class="headerlink" title="7. 💼 취업 이후로는?"></a>7. 💼 취업 이후로는?</h2><p>학교 과제로 뻘뻘대던 시절이 끝나고, 나름의 인간으로서 권리를 누릴 수 있게 되었다. 이젠 하루에 3~4시간을 자게 되었다. 더 자야하는걸 아는데 몸뚱아리가 너무 고생해서 주인 말을 안듣는 반항아가 되었다… ㅠㅠ</p><p>회사 근무를 끝마치면 근무 관련 기술(AWS, React 등)이나 영어공부를, 그리고 부업(블로그, 유튜브 등)을 하고 있다. 또한 직업을 바꾸기 위해 이제는 이것저것 관심있는 분야를 하나 씩 건들면서 내 재능을 확인하는 중이다. <del>항상 얘기하지만 컴퓨터 하기 진짜 싫다 ㅠㅠ</del></p><p>이 글이 취업을 원하는 누군가에게 도움이 되길 바라며, 모두가 원하는 직종으로 빠르게 합격했으면 좋겠다.</p><p><br><br></p><h2 id="8-같이-보면-좋은-소스들"><a href="#8-같이-보면-좋은-소스들" class="headerlink" title="8. 같이 보면 좋은 소스들"></a>8. 같이 보면 좋은 소스들</h2><ul><li><a href="https://ruby-kim.github.io/2022/05/10/Retrospect/Bachelor/">대학생 때 알았다면 좋았을 SW 팁</a></li><li><a href="https://ruby-kim.github.io/2024/09/12/Retrospect/Portfolio/">개발자 포트폴리오, 이렇게 준비해보자</a></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🎈 Retrospect </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Retrospect </tag>
            
            <tag> Job </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[React.js] React 라이프 사이클</title>
      <link href="/2022/04/22/Frontend/Reactjs/ReactLifeCycle/"/>
      <url>/2022/04/22/Frontend/Reactjs/ReactLifeCycle/</url>
      
        <content type="html"><![CDATA[<h2 id="React-Life-Cycle"><a href="#React-Life-Cycle" class="headerlink" title="React Life Cycle"></a>React Life Cycle</h2><hr><p>Reacts는 컴포넌트(component) 기반의 View를 중심으로 한 라이브러리이다.<br>따라서 각각의 컴포넌트에는 라이프사이클, 즉 컴포넌트의 <code>수명 주기</code>가 존재하는데, 컴포넌트의 수명은 보통 <strong>페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다</strong>.</p><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>  <span class="token keyword">return</span> <span class="token punctuation">(</span>    <span class="token operator">&lt;</span>div<span class="token operator">></span>      <span class="token operator">&lt;</span>h1<span class="token operator">></span>Hello World<span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">></span>    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>  <span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token punctuation">;</span>ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#root"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p>아래의 사진이 바로 리엑트 라이프 사이클을 나타낸 것이다.<br>(사이트는 <a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/">여기</a> 참고)<br><img src="1.png"></p><p><br><br></p><h2 id="Mount-생성될-때"><a href="#Mount-생성될-때" class="headerlink" title="Mount (생성될 때)"></a>Mount (생성될 때)</h2><hr><ol><li><p>constructor</p><ul><li>페이지 로드 되고 컴포넌트가 만들어질 때 처음으로 실행됨</li><li>초기 state 설정이 필요할 때 사용됨</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>        <span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span> count<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// Hooks</span><span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>    <span class="token keyword">const</span> <span class="token punctuation">[</span>count<span class="token punctuation">,</span>setCount<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>static getDerivedStateFromProps(nextProps, prevState)</p><ul><li>React 16.3버전 이후에 생긴 메서드</li><li>props로 받아 온 값을 state에 동기화시키는 용도</li><li>컴포넌트가 마운트, 업데이트될 때 호출됨</li><li>리턴타입을 Javascript Object로 설정해야 함</li><li>리턴된 Object는 State에 반영됨</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token keyword">static</span> <span class="token function">getDerivedStateFromProps</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">,</span> prevState<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">if</span> <span class="token punctuation">(</span>nextProps<span class="token punctuation">.</span>value <span class="token operator">!==</span> prevState<span class="token punctuation">.</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>            <span class="token keyword">return</span> value<span class="token punctuation">:</span> nextProps<span class="token punctuation">.</span>value<span class="token punctuation">;</span>        <span class="token punctuation">}</span>        <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>    <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>Render()</p><ul><li>React component의 유일한 필수 메서드</li><li>state 변경이 있으면 side effect 발생</li><li>함수형 컴포넌트에서는 render 사용 없이 렌더링 가능</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>  <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>    <span class="token keyword">return</span> <span class="token operator">&lt;</span>div<span class="token operator">></span>컴포넌트<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>  <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// Hooks</span><span class="token keyword">const</span> example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>  <span class="token keyword">return</span> <span class="token operator">&lt;</span>div<span class="token operator">></span>컴포넌트<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>componentDidMount()</p><ul><li>컴포넌트가 DOM에 추가 된 후 실행</li><li>DOM과 상호작용하거나 서드파티 라이브러리들을 사용하는 코드들을 여기서 작성 (ajax 등)</li><li>함수형 Hooks에서는 useEffect를 활용하여 구현<ul><li>useEffect의 [] 의존성 배열을 지워야 똑같은 메소드로 구현할 수 있음</li></ul></li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token operator">...</span>    <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// Hooks</span><span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>    <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>        <span class="token operator">...</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol><p><br><br></p><h2 id="Update-업데이트-할-때"><a href="#Update-업데이트-할-때" class="headerlink" title="Update (업데이트 할 때)"></a>Update (업데이트 할 때)</h2><hr><ol><li><p>static getDerivedStateFromProps(nextProps, prevState)</p><ul><li>Mount 단계와 동일</li></ul></li><li><p>shouldComponentUpdate</p><ul><li>리턴 타입은 True, False</li><li>리턴되는 결과에 따라 DOM에 리 렌더링을 여부를 결정</li><li>성능 개선을 위해 사용이 가능</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">shouldComponentUpdate</span><span class="token punctuation">(</span>nextProps<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">return</span> nextProps<span class="token punctuation">.</span>value <span class="token operator">!==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>value    <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// Hooks</span><span class="token keyword">const</span> Example <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">memo</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>        <span class="token operator">...</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>prevProps<span class="token punctuation">,</span> nextProps<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>        <span class="token keyword">return</span> nextProps<span class="token punctuation">.</span>value <span class="token operator">===</span> prevProps<span class="token punctuation">.</span>value    <span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>Render()</p><ul><li>Mount 단계와 동일</li></ul></li><li><p>getSnapshotBeforeUpdate</p><ul><li>Virtual DOM이 실제 DOM에 반영되기 직전에 실행됨</li><li>이전과 현재의 props와 state애 접근 가능</li><li>return으로 넘겨진 값은 componentDidUpdate의 3번째 인자로 전달됨</li><li>채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI에서 주로 사용</li><li>함수형에서는 아직 이 기능을 대처할만한 hook이 없음</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">getSnapshotBeforeUpdate</span><span class="token punctuation">(</span>prevProps<span class="token punctuation">,</span> prevState<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token keyword">if</span> <span class="token punctuation">(</span>prevProps<span class="token punctuation">.</span>list<span class="token punctuation">.</span>length <span class="token operator">&lt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>list<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>            <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>listRef<span class="token punctuation">.</span>current            <span class="token keyword">return</span> list<span class="token punctuation">.</span>scrollHeight <span class="token operator">-</span> list<span class="token punctuation">.</span>scrollTop        <span class="token punctuation">}</span>        <span class="token keyword">return</span> <span class="token keyword">null</span>    <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>componentDidUpdate</p><ul><li>매 업데이트마다 UI sync와 서드파티 라이브러리를 사용하는 코드 작성</li><li>리랜더링을 완료 후 실행: 업데이트가 끝난 직후이므로 DOM관련 처리를 해도 무방</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">componentDidUpdate</span><span class="token punctuation">(</span>prevProps<span class="token punctuation">,</span> prevState<span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token operator">...</span>    <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token comment" spellcheck="true">// Hooks</span><span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>    <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>        <span class="token operator">...</span>    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol><p><br><br></p><h2 id="UnMount-제거할-때"><a href="#UnMount-제거할-때" class="headerlink" title="UnMount (제거할 때)"></a>UnMount (제거할 때)</h2><hr><ol><li><p>ComponentWillUnMount</p><ul><li>DOM에서 컴포넌트가 지워질때 실행</li><li>컴포넌트와 관련된 것을 정리하는데 사용<br>ex) 로그아웃시 주 구성 Component를 해제하기 전에 사용자 세부정보와 모든 인증 토큰을 지운다거나 setInterval을 clear하는 등에 사용</li><li>함수영 컴포넌트에서는 useEffect CleanUp 함수로 구현</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">coomponentWillUnmount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>        <span class="token operator">...</span>    <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true">// Hooks</span><span class="token keyword">const</span> Example <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>    <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>            <span class="token operator">...</span>        <span class="token punctuation">}</span>    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li><p>componentDidCatch</p><ul><li>컴포넌트 렌더링 도중 에러가 발생했을 때 어플리케이션을 멈추지 않고 오류 UI를 보여줌</li><li>곧 Hooks에 해당 라이프 사이클 메서드 추가 예정</li></ul><pre class="line-numbers language-javascript"><code class="language-javascript"><span class="token comment" spellcheck="true">// Class</span><span class="token keyword">class</span> <span class="token class-name">Example</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>    <span class="token function">componentDidCatch</span><span class="token punctuation">(</span>error<span class="token punctuation">,</span> info<span class="token punctuation">)</span> <span class="token punctuation">{</span>        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Error'</span><span class="token punctuation">)</span>    <span class="token punctuation">}</span><span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol>]]></content>
      
      
      <categories>
          
          <category> ✨ Frontend </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Javascript </tag>
            
            <tag> Frontend </tag>
            
            <tag> React </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Github Wiki에서 TOC 만들기 </title>
      <link href="/2022/04/21/Etc/Github-Wiki-TOC/"/>
      <url>/2022/04/21/Etc/Github-Wiki-TOC/</url>
      
        <content type="html"><![CDATA[<p><img src="2.png"><br>종종 프로젝트를 하다보면 wiki의 크기가 커지는 경우가 많은데, 문서 가시성을 위해 wiki에서 TOC(Table Of Content, 목차)를 만드는 방법을 소개해보고자 한다.</p><h2 id="repository-wiki에-접속-후-sidebar-추가하기"><a href="#repository-wiki에-접속-후-sidebar-추가하기" class="headerlink" title="repository wiki에 접속 후 sidebar 추가하기"></a>repository wiki에 접속 후 sidebar 추가하기</h2><hr><p><img src="1.png"></p><p><br><br></p><h2 id="아래의-형태로-원하는-항목-작성"><a href="#아래의-형태로-원하는-항목-작성" class="headerlink" title="아래의 형태로 원하는 항목 작성"></a>아래의 형태로 원하는 항목 작성</h2><hr><pre class="line-numbers language-md"><code class="language-md"># My menu* [목차1][home]* [목차2][techdocs]* [목차3][usermanual][home]: https://github.com/myproject/wiki/목차1[techdocs]: https://github.com/myproject/wiki/목차2[usermanual]: https://github.com/myproject/wiki/목차3<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>위의 코드가 이해가 안된다면 기존의 마크다운처럼 작성 후 변경 에디터로 코드를 변경하자: <a href="https://ecotrust-canada.github.io/markdown-toc/">https://ecotrust-canada.github.io/markdown-toc/</a><ul><li>변경한 코드에서 <code>&lt;small&gt; ... &lt;/small&gt;</code> 부분은 지워도 괜찮다.</li></ul></li></ul>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> Markdown </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Hexo] Github Blog 백업하기</title>
      <link href="/2022/04/15/Hexo/Backup/"/>
      <url>/2022/04/15/Hexo/Backup/</url>
      
        <content type="html"><![CDATA[<p>기본적인 블로그 세팅이 끝났다.<br>이전 포스트를 따라 블로그 세팅을 했다면, 실질적으로 .md파일이 저장되는 repository가 없음을 확인할 수 있다.<br>즉 다른 컴퓨터 환경에서 블로그 포스트를 이어서 작성할 수 없으며, .md파일들을 백업하지 않는 이상 해당 데이터들이 손실됐을 때 저 스틱스 강에 영원한 쎄이굿바이를 외쳐야 한다.<br>테마도 마찬가지다. 오픈소스 특징으로 테마도 항상 업데이트되는데, 모두가 사람인지라 코드가 항상 완벽할 수 없다. 그래서 최신의 테마를 가져와서 프로그램을 구동하다보면 치명적인 에러가 발생하는 경우가 많다.</p><p>이러한 불상사를 막기 위해 .md파일과 테마를 백업할 수 있도록 세팅을 진행해보자.</p><h2 id="사전-준비"><a href="#사전-준비" class="headerlink" title="사전 준비"></a>사전 준비</h2><hr><ul><li><a href="https://ruby-kim.github.io/2022/04/07/Hexo/Install/">[Hexo] Markdown으로 Github Blog를 만들어보자</a></li><li><a href="https://ruby-kim.github.io/2022/04/12/Hexo/InitTheme/">[Hexo] Github Blog 테마를 자유롭게 선택 및 수정해보자</a></li></ul><p><br><br></p><h2 id="백업-Repository-생성하기"><a href="#백업-Repository-생성하기" class="headerlink" title="백업 Repository 생성하기"></a>백업 Repository 생성하기</h2><hr><p>각자의 github에 접속하여 2개의 repository를 생성한다.</p><ul><li>theme를 저장할 repository</li><li>.md파일을 저장할 repository</li></ul><p><br><br></p><h2 id="theme-백업하기"><a href="#theme-백업하기" class="headerlink" title="theme 백업하기"></a>theme 백업하기</h2><hr><p><code>themes/테마명</code> 내에서 다음의 명령어들을 실행한다.</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># 원격 저장소 변경(theme url로 된 세팅을 자신의 repository url로 재세팅)</span><span class="token function">git</span> remote set-url origin <span class="token string">"theme를 저장할 repository 주소"</span><span class="token comment" spellcheck="true"># 테마 내용 백업</span><span class="token function">git</span> commit -m <span class="token string">"theme backup"</span><span class="token function">git</span> push origin<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><br><br></p><h2 id="md-파일-백업하기"><a href="#md-파일-백업하기" class="headerlink" title=".md 파일 백업하기"></a>.md 파일 백업하기</h2><hr><p>hexo blog 디렉토리에서 .md파일을 저장할 repository를 세팅해준다.</p><pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># git 초기화</span><span class="token function">git</span> init<span class="token comment" spellcheck="true"># 원격 저장소 등록</span><span class="token function">git</span> remote add origin <span class="token string">".md파일을 저장할 repository 주소"</span><span class="token comment" spellcheck="true"># 현재 내용 백업</span><span class="token function">git</span> add <span class="token keyword">.</span><span class="token function">git</span> commit -m <span class="token string">"blog backup"</span><span class="token function">git</span> push origin<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><p><br><br></p><h2 id="선택-theme폴더-submodule-추가"><a href="#선택-theme폴더-submodule-추가" class="headerlink" title="(선택) theme폴더 submodule 추가"></a>(선택) theme폴더 submodule 추가</h2><hr><ul><li>이제부턴 다른 환경에서 이 백업파일들을 클론하면 .md파일들과 테마들이 그대로 유지된다.<br>다만 git clone을 두 번 써야 한다는 불편함이 있는데, 한 번의 git clone으로 theme도 자동으로 클론할 수 있도록 세팅을 해준다.<br>이 작업은 hexo blog 디렉토리에서 진행한다. 아래의 명령어를 잘 입력하면 자동으로 theme도 같이 clone 때 다운받아진다.<pre class="line-numbers language-bash"><code class="language-bash"><span class="token comment" spellcheck="true"># 기존의 &lt;themes/테마명>를 삭제</span><span class="token function">rm</span> -rf themes/테마명<span class="token comment" spellcheck="true"># 백업해둔 theme repository를 submodule로 추가</span><span class="token function">git</span> submodule add <span class="token string">"theme를 저장한 repository 주소"</span><span class="token comment" spellcheck="true"># 현재 내용 백업</span><span class="token function">git</span> add <span class="token keyword">.</span><span class="token function">git</span> commit -m <span class="token string">"blog theme submodule"</span><span class="token function">git</span> push origin<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li><li>앞으로 새로운 환경에서 블로그를 다시 운영할 때 아래의 명령어로 기존 환경을 재구성해준다.<pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">git</span> clone --recursive <span class="token string">".md파일을 저장한 repository 주소"</span> blog<span class="token function">cd</span> blog<span class="token function">npm</span> <span class="token function">install</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🏹 Blog </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> Markdown </tag>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Hexo] Github Blog 테마를 자유롭게 선택 및 수정해보자</title>
      <link href="/2022/04/12/Hexo/InitTheme/"/>
      <url>/2022/04/12/Hexo/InitTheme/</url>
      
        <content type="html"><![CDATA[<p>이번에는 github blog에 원하는 테마를 적용할건데, Hexo에서 가장 유명한 테마인 icarus를 활용할 예정이다.<br>다른 테마를 원한다면 github에 hexo를 검색해보거나 <a href="https://ruby-kim.github.io/2022/04/11/Hexo/RecommendTheme/">[Hexo] Hexo theme 추천 리스트</a>를 읽어보는 것을 추천한다.</p><p><br><br></p><h2 id="사전-준비"><a href="#사전-준비" class="headerlink" title="사전 준비"></a>사전 준비</h2><hr><ul><li><a href="https://ruby-kim.github.io/2022/04/07/Hexo/Install/">[Hexo] Markdown으로 Github Blog를 만들어보자</a></li></ul><p><br><br></p><h2 id="Hexo-디렉토리-구조"><a href="#Hexo-디렉토리-구조" class="headerlink" title="Hexo 디렉토리 구조"></a>Hexo 디렉토리 구조</h2><hr><pre class="line-numbers language-bash"><code class="language-bash"><span class="token keyword">.</span>├── .deploy_git├── .github├── .gitignore├── _config.landscape.yml├── _config.yml├── node_modules├── package-lock.json├── package.json├── scaffolds├── <span class="token function">source</span>│   └── _posts└── theme<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>theme 세팅은 디렉토리 구조에서 보이는 <code>theme</code>와 <code>_config.yml</code>에서 이루어진다.</li><li><code>theme</code>폴더 내에 원하는 테마를 import하고, <code>_config.yml</code>에서 해당 테마를 사용한다고 선언하면 테마 적용이 된다.</li></ul><p><br><br></p><h2 id="원하는-테마-파일-clone-및-dependencies-설치"><a href="#원하는-테마-파일-clone-및-dependencies-설치" class="headerlink" title="원하는 테마 파일 clone 및 dependencies 설치"></a>원하는 테마 파일 clone 및 dependencies 설치</h2><hr><ul><li>git clone 명령어를 통해 파일을 다운받는다. 이때 디렉토리 위치는 <code>theme/다운받은_테마_파일명</code>로 설정한다.<br>즉 우리가 사용할 테마인 <code>icarus</code>를 다운받는다면, 디렉토리는 <code>theme/icarus</code>로 설정된다.<pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/ppoffice/hexo-theme-icarus.git icarus<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li>dependencies 설치를 진행한다. 각 테마마다 dependencies가 다르니 잘 읽어보고 설치하자.<pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> cheerio share-this hexo-generator-json-content -g<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li></ul><p><br><br></p><h2 id="config-yml-파일을-수정하여-theme를-icarus로-세팅"><a href="#config-yml-파일을-수정하여-theme를-icarus로-세팅" class="headerlink" title="_config.yml 파일을 수정하여 theme를 icarus로 세팅"></a>_config.yml 파일을 수정하여 theme를 icarus로 세팅</h2><hr><ul><li>icarus가 아닌, hexo 블로그(Hexo 디렉토리 구조)의 <code>_config.yml</code>에서 theme 수정<pre class="line-numbers language-yml"><code class="language-yml">theme: icarus<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li>이후 서버를 실행하여 테마 적용 결과를 확인한다.<pre class="line-numbers language-bash"><code class="language-bash">hexo s        <span class="token comment" spellcheck="true"># 또는 hexo server</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><img src="1.png"></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🏹 Blog </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> Markdown </tag>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Hexo] Hexo theme 추천 리스트</title>
      <link href="/2022/04/11/Hexo/RecommendTheme/"/>
      <url>/2022/04/11/Hexo/RecommendTheme/</url>
      
        <content type="html"><![CDATA[<p>기본적으로 github에 hexo를 검색하면 <code>hexo-theme-프로젝트명</code>으로 다양한 테마를 확인할 수 있는데, 그 중 괜찮아 보이는 것 몇 개를 소개해보고자 한다.<br>각 테마마다 설치해야 할 package가 다르니 꼼꼼하게 README.md나 데모 페이지의 설명서를 읽어보자.</p><h2 id="hexo-theme-matery-현재-사용-중인-테마"><a href="#hexo-theme-matery-현재-사용-중인-테마" class="headerlink" title="hexo-theme-matery (현재 사용 중인 테마)"></a>hexo-theme-matery (현재 사용 중인 테마)</h2><hr><ul><li>github: <a href="https://github.com/blinkfox/hexo-theme-matery">https://github.com/blinkfox/hexo-theme-matery</a></li><li>demo는 제 블로그를 참고하시면 됩니다. (github에 있는 demo는 공대생의 느낌이 923900472배 정도 흠씬 나는…)</li></ul><p><br><br></p><h2 id="hexo-theme-icarus"><a href="#hexo-theme-icarus" class="headerlink" title="hexo-theme-icarus"></a>hexo-theme-icarus</h2><hr><ul><li>github: <a href="https://github.com/ppoffice/hexo-theme-icarus">https://github.com/ppoffice/hexo-theme-icarus</a></li><li>demo: <a href="https://blog.zhangruipeng.me/hexo-theme-icarus/">https://blog.zhangruipeng.me/hexo-theme-icarus/</a><br><img src="1.png"></li></ul><p><br><br></p><h2 id="hexo-theme-ylion"><a href="#hexo-theme-ylion" class="headerlink" title="hexo-theme-ylion"></a>hexo-theme-ylion</h2><hr><ul><li>github: <a href="https://github.com/GeekaholicLin/hexo-theme-ylion">https://github.com/GeekaholicLin/hexo-theme-ylion</a></li><li>demo: <a href="http://blog.geekaholic.cn/">http://blog.geekaholic.cn/</a><br><img src="2.png"></li></ul><p><br><br></p><h2 id="hexo-theme-Chic"><a href="#hexo-theme-Chic" class="headerlink" title="hexo-theme-Chic"></a>hexo-theme-Chic</h2><hr><ul><li>github: <a href="https://github.com/Siricee/hexo-theme-Chic">https://github.com/Siricee/hexo-theme-Chic</a></li><li>demo: <a href="https://siricee.github.io/hexo-theme-Chic/">https://siricee.github.io/hexo-theme-Chic/</a><br><img src="3.png"></li></ul><p><br><br></p><h2 id="hexo-theme-next"><a href="#hexo-theme-next" class="headerlink" title="hexo-theme-next"></a>hexo-theme-next</h2><hr><ul><li>github: <a href="https://github.com/theme-next/hexo-theme-next">https://github.com/theme-next/hexo-theme-next</a></li><li>demo: <a href="https://theme-next.org/">https://theme-next.org/</a><br><img src="4.png"></li></ul><p><br><br></p><h2 id="hexo-theme-yilia"><a href="#hexo-theme-yilia" class="headerlink" title="hexo-theme-yilia"></a>hexo-theme-yilia</h2><hr><ul><li>github: <a href="https://github.com/litten/hexo-theme-yilia">https://github.com/litten/hexo-theme-yilia</a></li><li>demo: <a href="http://litten.me/">http://litten.me/</a><br><img src="5.gif"></li></ul><p><br><br></p><h2 id="hexo-theme-tranquilpeak"><a href="#hexo-theme-tranquilpeak" class="headerlink" title="hexo-theme-tranquilpeak"></a>hexo-theme-tranquilpeak</h2><hr><ul><li>github: <a href="https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak">https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak</a></li><li>demo: <a href="https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/">https://louisbarranqueiro.github.io/hexo-theme-tranquilpeak/</a><br><img src="6.png"></li></ul><p><br><br></p><h2 id="hexo-theme-melody"><a href="#hexo-theme-melody" class="headerlink" title="hexo-theme-melody"></a>hexo-theme-melody</h2><hr><ul><li>github: <a href="https://github.com/Molunerfinn/hexo-theme-melody">https://github.com/Molunerfinn/hexo-theme-melody</a></li><li>demo: <a href="https://molunerfinn.com/">https://molunerfinn.com/</a><br><img src="7.png"></li></ul><p><br><br></p><h2 id="hexo-theme-hipaper"><a href="#hexo-theme-hipaper" class="headerlink" title="hexo-theme-hipaper"></a>hexo-theme-hipaper</h2><hr><ul><li>github: <a href="https://github.com/iTimeTraveler/hexo-theme-hipaper">https://github.com/iTimeTraveler/hexo-theme-hipaper</a></li><li>demo: <a href="https://itimetraveler.github.io/hexo-theme-hipaper/">https://itimetraveler.github.io/hexo-theme-hipaper/</a><br><img src="8.png"></li></ul><p><br><br></p><h2 id="hexo-theme-indigo"><a href="#hexo-theme-indigo" class="headerlink" title="hexo-theme-indigo"></a>hexo-theme-indigo</h2><hr><ul><li>github: <a href="https://github.com/yscoder/hexo-theme-indigo">https://github.com/yscoder/hexo-theme-indigo</a></li><li>demo: <a href="https://imys.net/">https://imys.net/</a><br><img src="9.png"></li></ul><p><br><br></p><h2 id="hexo-theme-next5-leaf"><a href="#hexo-theme-next5-leaf" class="headerlink" title="hexo-theme-next5-leaf"></a>hexo-theme-next5-leaf</h2><hr><ul><li>github: <a href="https://github.com/leafjame/hexo-theme-next5-leaf">https://github.com/leafjame/hexo-theme-next5-leaf</a></li><li>demo: <a href="https://www.liaofuzhan.com/">https://www.liaofuzhan.com/</a><br><img src="10.png"></li></ul><p><br><br></p><h2 id="hexo-theme-replica"><a href="#hexo-theme-replica" class="headerlink" title="hexo-theme-replica"></a>hexo-theme-replica</h2><hr><ul><li>github: <a href="https://github.com/sabrinaluo/hexo-theme-replica">https://github.com/sabrinaluo/hexo-theme-replica</a></li><li>demo: <a href="https://sabrinaluo.github.io/tech/">https://sabrinaluo.github.io/tech/</a></li><li>Github가 아닌, Github 테마를 활용했음<br><img src="11.png"></li></ul><p><br><br></p><h2 id="hexo-theme-vexo"><a href="#hexo-theme-vexo" class="headerlink" title="hexo-theme-vexo"></a>hexo-theme-vexo</h2><hr><ul><li>github: <a href="https://github.com/yanm1ng/hexo-theme-vexo">https://github.com/yanm1ng/hexo-theme-vexo</a></li><li>demo: <a href="https://yanm1ng.github.io/">https://yanm1ng.github.io/</a><br><img src="12.png"></li></ul><p><br><br></p><h2 id="hexo-theme-book"><a href="#hexo-theme-book" class="headerlink" title="hexo-theme-book"></a>hexo-theme-book</h2><hr><ul><li>github: <a href="https://github.com/kaiiiz/hexo-theme-book">https://github.com/kaiiiz/hexo-theme-book</a></li><li>demo: <a href="https://kaiiiz.github.io/hexo-theme-book-demo/">https://kaiiiz.github.io/hexo-theme-book-demo/</a><br><img src="13.png"></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🏹 Blog </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> Markdown </tag>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Hexo] Markdown으로 Github Blog를 만들어보자</title>
      <link href="/2022/04/07/Hexo/Install/"/>
      <url>/2022/04/07/Hexo/Install/</url>
      
        <content type="html"><![CDATA[<p>Github로 블로그를 운영할 때 어떤 기술을 사용해야 하는지, 아니면 어떻게 시작을 할지 고민하는 사람들을 위해 이번 포스팅을 해본다.</p><h2 id="Hexo란"><a href="#Hexo란" class="headerlink" title="Hexo란"></a>Hexo란</h2><hr><ul><li><a href="https://hexo.io/ko/index.html">헥소(Hexo) 공식 홈페이지</a></li><li>Node.js 기반정적 사이트 생성기(Static site generator)의 일종</li><li>주요 사용자는 중국인으로, 테마를 찾아보면 대부분 중국어로 작성되어 있음 (물론 영어설명도 포함되어 있음)</li><li>Markdown으로 글을 작성</li><li>빠른 빌드 및 배포가 가능</li><li>일반적으로 2개의 github 저장소가 필요<ul><li>빌드 및 배포되는 실질적으로 보이는 저장소(…github.io)</li><li>실제 소스가 들어있는 저장소(블로그 설정 파일 및 테마 파일)</li></ul></li></ul><p><br><br></p><h2 id="Hexo-설치-및-기본-세팅하기"><a href="#Hexo-설치-및-기본-세팅하기" class="headerlink" title="Hexo 설치 및 기본 세팅하기"></a>Hexo 설치 및 기본 세팅하기</h2><hr><ul><li>github repository 생성: <code>자신의 github 계정명.github.io</code> (ex. <a href="https://github.com/ruby-kim/ruby-kim.github.io">ruby-kim.github.io</a>)</li><li>터미널에서 <code>npm</code>을 이용하여 hexo-cli 설치 및 hexo folder 생성<pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-cli -ghexo init <span class="token string">"원하는 폴더명"</span><span class="token function">cd</span> <span class="token string">"원하는 폴더명"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li></ul><p><br><br></p><h2 id="Hexo-init-시-디렉토리-구조"><a href="#Hexo-init-시-디렉토리-구조" class="headerlink" title="Hexo init 시 디렉토리 구조"></a>Hexo init 시 디렉토리 구조</h2><hr><pre class="line-numbers language-bash"><code class="language-bash"><span class="token keyword">.</span>├── .deploy_git├── .github├── .gitignore├── _config.landscape.yml├── _config.yml├── node_modules├── package-lock.json├── package.json├── scaffolds├── <span class="token function">source</span>│   └── _posts└── theme<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre><ul><li>hexo init이 잘 되었다면 다음의 구조를 확인할 수 있다.</li><li>여기서 블로그를 운영하면서 사용할 폴더는 <code>source</code>와 <code>theme</code>이다.<ul><li><code>source</code>: 블로그 글 관리</li><li><code>theme</code>: 블로그 디자인</li></ul></li></ul><p><br><br></p><h2 id="Hexo-server-실행시키기"><a href="#Hexo-server-실행시키기" class="headerlink" title="Hexo server 실행시키기"></a>Hexo server 실행시키기</h2><hr><p>아래의 명령어를 입력하고 localhost:4000에 접속하면 다음의 화면을 확인할 수 있다.</p><pre class="line-numbers language-bash"><code class="language-bash">hexo s        <span class="token comment" spellcheck="true"># 또는 hexo server</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p><img src="start.png"></p><p><br><br></p><h2 id="Hexo-글-작성하기"><a href="#Hexo-글-작성하기" class="headerlink" title="Hexo 글 작성하기"></a>Hexo 글 작성하기</h2><hr><ul><li>다음의 명령어를 입력하면 <code>/source/_post/</code>에 .md파일이 생성된다.<pre class="line-numbers language-bash"><code class="language-bash">hexo new <span class="token string">"글제목"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li>물론 명령어를 입력 안하고 직접 <code>/source/_post/</code>에서 파일을 생성해도 된다.<br><img src="files.png"></li><li>글쓰기 예시<br><img src="real.png"> <img src="ex.png"></li></ul><p><br><br></p><h2 id="Hexo에서-md파일을-html로-변환하기"><a href="#Hexo에서-md파일을-html로-변환하기" class="headerlink" title="Hexo에서 md파일을 html로 변환하기"></a>Hexo에서 md파일을 html로 변환하기</h2><hr><p>다음의 명령어를 입력할 시 public이라는 폴더가 생성되며, 글이 html로 변환되는 것을 확인할 수 있다.</p><pre class="line-numbers language-bash"><code class="language-bash">hexo g        <span class="token comment" spellcheck="true"># 또는 hexo generate</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre><p><br><br></p><h2 id="작성한-html를-github-blog에-배포하기"><a href="#작성한-html를-github-blog에-배포하기" class="headerlink" title="작성한 html를 github blog에 배포하기"></a>작성한 html를 github blog에 배포하기</h2><hr><ul><li>hexo에서 github repository로 배포하기 위해서는 <code>hexo-deployer-git</code>플러그인과 <code>_config.yml</code>에서 기본 세팅이 필요하다.</li><li>먼저 다음의 명령어로 배포 플러그인 설치<pre class="line-numbers language-bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-deployer-git --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li><code>_config.yml</code>을 다음과 같이 수정한다. repo 주소가 .git으로 끝나는지 확인한다.<pre class="line-numbers language-bash"><code class="language-bash">deploy:  type: <span class="token function">git</span>  repo: <span class="token string">"자신의 github.io repository 주소"</span>  branch: master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre></li><li>아래의 명령어로 블로그를 배포한다.<pre class="line-numbers language-bash"><code class="language-bash">hexo d -g        <span class="token comment" spellcheck="true"># 또는 hexo deploy -generate</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li><li>이후 <code>자신의 github 닉네임.github.io</code>(ex: <a href="https://ruby-kim.github.io/">https://ruby-kim.github.io/</a>) 에 접속하면 local에서만 봤던 내용을 확인할 수 있다.</li><li>만약 블로그 수정 내역 반영이 안됐다면, 아래의 명령어를 입력 후 다시 블로그를 배포해본다.<pre class="line-numbers language-bash"><code class="language-bash">hexo clean<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li></ul>]]></content>
      
      
      <categories>
          
          <category> 🏹 Blog </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> Markdown </tag>
            
            <tag> Hexo </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>SSL/TSL 개념과 기본 동작 원리</title>
      <link href="/2022/03/30/NS/SSLTSL/"/>
      <url>/2022/03/30/NS/SSLTSL/</url>
      
        <content type="html"><![CDATA[<h2 id="SSL-Secure-Socket-Layer"><a href="#SSL-Secure-Socket-Layer" class="headerlink" title="SSL (Secure Socket Layer)"></a>SSL (Secure Socket Layer)</h2><hr><ul><li>1994년 netscape사의 웹 브라우저 보안 프로토콜로 처음 고안됨</li><li>1996년까지 버전 3.0까지 발표됨<ul><li>3.0을 표준화로 한 것이 바로 <strong>TLS</strong></li><li>통상적으로 SSL과 TLS는 같은 의미로 사용됨</li></ul></li></ul><p><br><br></p><h2 id="SSL-탄생-배경"><a href="#SSL-탄생-배경" class="headerlink" title="SSL 탄생 배경"></a>SSL 탄생 배경</h2><hr><ul><li>대칭키를 공유할 때 외부로의 노출이 발생됨<ul><li>이 키를 누군가가 중간에서 가로챈다면…?</li></ul></li><li>따라서 비대칭키로 암호화 통신을 진행하면 됨<ul><li>그런데 이는 너무 느리고 비효율적</li></ul></li><li>가장 효율적이고 빠른 방법: 처음 대칭키를 교환할때만 비대칭키 암호를 사용 -&gt; TLS의 역할</li></ul><p><br><br></p><h2 id="TLS에서-제공하는-보안-서비스"><a href="#TLS에서-제공하는-보안-서비스" class="headerlink" title="TLS에서 제공하는 보안 서비스"></a>TLS에서 제공하는 보안 서비스</h2><hr><ul><li>기밀성: 남들이 데이터를 훔쳐가도 볼 수 없는 비밀 제공</li><li>무결성<ul><li>메시지 인증 코드 (MAC: Message Authentication Code)를 통해서 메시지 인증 제공</li><li>위, 변조 여부 확인 가능</li></ul></li><li>인증: 연결 초기 설정에서 주고 받은 인증서를 통해 신뢰할 수 있는 개체인지 인증 가능</li></ul><p><br><br></p><h2 id="TLS-Layer-Transport-Layer-Security"><a href="#TLS-Layer-Transport-Layer-Security" class="headerlink" title="TLS Layer (Transport Layer Security)"></a>TLS Layer (Transport Layer Security)</h2><hr><ul><li>TLS는 Transection Layer 위에서 TLS 계층을 따로 두어 동작함</li><li>TLS를 사용하는 어플리케이션 프로토콜은 끝에 s가 붙음<ul><li>TLS 기반의 HTTP는 HTTPS라고 지칭</li><li>TLS 기반의 FTP 또한 FTPS라고 부름</li></ul></li></ul><p><img src="layer.png"></p><ol><li>Handshake: 양쪽 간에 연결을 설정할 때 보안 협상을 위한 프로토콜<br><img src="handshaker.png"></li><li>Change Cipher Spec: 보안 파라미터를 변경하거나 적용할 때 사용 (ex. 대칭키 알고리즘을 변경할 때)</li><li>Alert: 오류 전송 시 사용</li><li>Application Data: 실제 데이터를 전송할 때 사용</li><li>Record: 협상된 보안 파라미터를 이용하여 암, 복호화, 무결성 검증 등을 수행할 때 사용</li></ol>]]></content>
      
      
      <categories>
          
          <category> 🔐 Network/Security </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Network </tag>
            
            <tag> Security </tag>
            
            <tag> SSL </tag>
            
            <tag> TSL </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Automatic Tech Blog Management] Github blog 포스트를 Tistory에 자동 업로드하기</title>
      <link href="/2022/03/28/Projects/AutomaticTechBlogManagement/Gitblog-Tistory/"/>
      <url>/2022/03/28/Projects/AutomaticTechBlogManagement/Gitblog-Tistory/</url>
      
        <content type="html"><![CDATA[<p>지금까지 작성한 코드가 잘 작동하는지 확인해보는겸 글 하나를 타겟으로 티스토리에 업로드를 해본다.</p><h2 id="사전-준비물"><a href="#사전-준비물" class="headerlink" title="사전 준비물"></a>사전 준비물</h2><hr><ul><li><a href="https://ruby-kim.github.io/2022/03/19/Projects/AutomaticTechBlogManagement/Gitblog-Analyze/">[Automatic Tech Blog Management] Github Blog: .md파일 및 xml 분석하기</a></li><li><a href="https://ruby-kim.github.io/2022/03/17/Projects/AutomaticTechBlogManagement/Tistory-API-Generate/">[Automatic Tech Blog Management] Tistory API 발급받기</a></li></ul><br><h2 id="run-py-생성하기"><a href="#run-py-생성하기" class="headerlink" title="run.py 생성하기"></a>run.py 생성하기</h2><hr><pre><code>```pythonfrom gitblog import *from tistory import *import markdown2from sys import platformdef personal_setting(head, body):    def code_line(text):        text = text.split('\n')        for idx, b in enumerate(text):            if "```" in b:                if "&lt;pre&gt;&lt;code&gt;" in b:                    text[idx] = b[:11]                else:                    if len(b) == 3:                        text[idx] = ""        return '\n'.join(text)    return head, code_line(body)def create_post(githubBlog, tistory):flag = 0for g_content in githubBlog.contents:    for t_content in tistory.contents:        if t_content["title"] == g_content["title"]:            flag = 1    if flag:        flag = 0        continue    else:        path = '/' + '/'.join(g_content["link"].split('/')[6:-1]) + ".md"        head, body = githubBlog.parsing_md(path)        body = markdown2.markdown(body)        head, body = personal_setting(head, body)        tistory.posting(            head['title'],            body,            head['categories'],            head['tags'],        )if __name__ == "__main__":    target_os = ''    if platform == "linux" or platform == "linux2":        target_os = "linux"    elif platform == "darwin":        target_os = "_osx"    elif platform == "win32":        target_os = "_win.exe"        githubBlog = GithubBlog("https://ruby-kim.github.io")    tistory = Tistory('https://dev-rubykim.tistory.com/', target_os)    tistory.get_access_token()    githubBlog.parsing_xml()    tistory.parsing_rss()    tistory.toc_post()    create_post(githubBlog, tistory)```</code></pre><ul><li>전체적인 알고리즘은 <code>python-markdown2</code> 패키지를 사용하여 <code>.md</code> 파일을 <code>.html</code>로 변경 후 tistory에 업로드 하는 것이다.</li><li>각자 로컬에서 실행하는 개발환경이 다른 점을 고려하여 platform 설정도 넣어놨다. (아래에 tistory 클래스 변경사항 참고)<ul><li>따라서 Windows가 아닌 Linux, OS X를 사용하는 개발자는 자신의 개발환경에 맞춰 chromedriver 파일을 넣어준다.</li></ul></li><li><code>create_post()</code> 함수는 github blog과 tistory의 포스트를 비교 후 해당 포스트가 없을 시 자동생성 및 업로드 해주는 코드이다.<ul><li>코드 중 flag가 바로 중복 포스트 체크를 위한 변수이다.</li><li>hexo 백업용 repository의 <code>/source/_posts</code> 내의 데이터에 접근하기 위해 각자의 github url을 파악 후 알맞게 세팅해준다.<ul><li>현재 사용 중인 github blog는 **<a href="https://ruby-kim.github.io/YYYY/MM/DD/[.md%ED%8C%8C%EC%9D%BC">https://ruby-kim.github.io/YYYY/MM/DD/[.md파일</a> path]**로 되어 있으므로, 이에 따라 path를 다음과 같이 설정했다.</li></ul></li><li><code>personal_setting()</code>은 말 그대로 각자 작성한 <code>.md</code> 변환 결과물에서 변경되지 않은 부분이 있을 시 직접 세팅해주는 함수이다.<ul><li>56번째 줄의 결과물을 출력해보면 markdown에서 html로 변환 시 코드블럭에 관한 전처리가 덜 되어있음을 확인할 수 있다. (```가 추가됨)</li><li>따라서 해당 부분을 전처리하는 함수 <code>code_line()</code>를 <code>personal_setting()</code>에 선언 및 처리한다.</li></ul></li></ul></li></ul><br><h2 id="Tistory-class-내용-변경"><a href="#Tistory-class-내용-변경" class="headerlink" title="Tistory class 내용 변경"></a>Tistory class 내용 변경</h2><hr><pre><code>```pythonimport requestsfrom selenium import webdriverfrom selenium.webdriver.common.by import Byfrom urllib.parse import unquoteimport timeimport osimport json                                                               # 추가class Tistory:    def __init__(self, blogUrl, platform):        # local params        load_dotenv()        self.app_id = os.environ.get("TISTORY_APP_ID")        self.secret_key = os.environ.get("TISTORY_SECRET_KEY")        self.tistory_id = os.environ.get('TISTORY_ID')        self.tistory_pwd = os.environ.get('TISTORY_PWD')        self.tistory_rss = blogUrl + "rss"        # Github Actions params        # self.app_id = os.environ['TISTORY_APP_ID']        # self.secret_key = os.environ['TISTORY_SECRET_KEY']        # self.tistory_id = os.environ['TISTORY_ID']        # self.tistory_pwd = os.environ['TISTORY_PWD']        # self.tistory_rss = blogUrl + "rss"        # Etc params        self.callback_url = blogUrl        self.oauth_url = 'https://www.tistory.com/oauth/authorize'        self.access_token = None        # selenium setting params        self.webdriver_options = webdriver.ChromeOptions()        self.webdriver_options.add_argument('headless')        self.chromedriver = "./chromedriver/chromedriver" + platform      # 변경    # ... (생략된 코드는 모두 기존과 동일)    def get_access_token(self):        """        generate access-token automatically        :return: access-token        """        browser = webdriver.Chrome(            executable_path=self.chromedriver,                            # 변경            options=self.webdriver_options        )        self.login_kakao(browser)        self.access_token = self.confirm_tistory_oauth(browser)        if self.access_token is None:            assert "Non-existence access token"        else:            assert "Generate access token Successfully"        def posting(self, title, content, category, tag):                     # 추가        try:            tistory_url = 'https://www.tistory.com/apis/post/write?'            headers = {'Content-Type': 'application/json; charset=utf-8'}            params = {                'access_token': self.access_token,                'output': 'json',                'blogName': 'dev-rubykim',      # 자신의 tistory url 참고                'title': title,                'content': content,                'visibility': '0',                'category': str(category[1:-1]),                'published':'',                'slogan':'',                'tag': str(tag[1:-1]),                'acceptComment': '1',                'password':''            }            data=json.dumps(params)            response = requests.post(tistory_url, headers=headers, data=data)            print(response.text)        except:            print("Error while uploading post in Tistory!")    ...```</code></pre><ul><li>OS에 따른 chromedriver 세팅을 하면서 자잘한 파라미터 값들을 수정한다.</li><li>tistory 글을 업로드 할 수 있는 <code>posting()</code>을 만든다. <img src="1.png"></li></ul><br><h2 id="GithubBlog-class-내용-변경"><a href="#GithubBlog-class-내용-변경" class="headerlink" title="GithubBlog class 내용 변경"></a>GithubBlog class 내용 변경</h2><hr><pre><code>```pythonclass GithubBlog:    def __init__(self, blogUrl):        self.url = blogUrl        self.xml = blogUrl + "/atom.xml"        self.contents = []        self.curTime = datetime.now(pytz.utc).isoformat()        self.md_head = {}        self.md_body = ""    def parsing_md(self, target_path):        # local params        load_dotenv()        repo = get_github_repo(os.environ.get('MY_GITHUB_BLOG_BACKUP'), 'koBlog_backup')        file = get_repo_specific_file_content(repo, target_path)        self.md_head, self.md_body = preprocess(file, target_path)        return self.md_head, self.md_body                                                       # 변경```</code></pre><p>기존의 코드에서는 .md의 header와 body를 반환하지 않아 GithubBlog 내부에서만 활용할 수 있는데, 직관적인 코드를 위해 return으로 변경해준다.</p><br><h2 id="run-py-실행하기"><a href="#run-py-실행하기" class="headerlink" title="run.py 실행하기"></a>run.py 실행하기</h2><hr><pre><code>```shellpython3 run.py```</code></pre><ul><li>결과물이 다음과 같이 나오면 성공적으로 티스토리에 업로드 된 것을 확인할 수 있다.<ul><li><code>{"tistory":{"status":"200","postId":"12","url":"https:\/\/dev-rubykim.tistory.com\/12"}}</code><br><img src="2.png"></li></ul></li></ul><br><h2 id="전체-코드"><a href="#전체-코드" class="headerlink" title="전체 코드"></a>전체 코드</h2><hr><ul><li><a href="https://github.com/ruby-kim/automatic-tech-blog-management/blob/83b54426b1f90f3e78bb742f1941f94ddc298ddd/run.py">https://github.com/ruby-kim/automatic-tech-blog-management/blob/local/run.py</a></li><li><a href="https://github.com/ruby-kim/automatic-tech-blog-management/blob/83b54426b1f90f3e78bb742f1941f94ddc298ddd/tistory.py">https://github.com/ruby-kim/automatic-tech-blog-management/blob/local/tistory.py</a></li><li><a href="https://github.com/ruby-kim/automatic-tech-blog-management/blob/83b54426b1f90f3e78bb742f1941f94ddc298ddd/gitblog.py">https://github.com/ruby-kim/automatic-tech-blog-management/blob/local/gitblog.py</a></li></ul><p><br><br></p><h2 id="관련-포스트-더보기"><a href="#관련-포스트-더보기" class="headerlink" title="관련 포스트 더보기"></a>관련 포스트 더보기</h2><hr><p><a href="https://ruby-kim.github.io/2022/03/16/Projects/AutomaticTechBlogManagement/Intro/">[Automatic Tech Blog Management] Intro</a></p>]]></content>
      
      
      <categories>
          
          <category> ⚒ Projects </category>
          
      </categories>
      
      
        <tags>
            
            <tag> API </tag>
            
            <tag> Parsing </tag>
            
            <tag> Crawling </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Automatic Tech Blog Management] Github Blog: .md파일 및 xml 분석하기</title>
      <link href="/2022/03/19/Projects/AutomaticTechBlogManagement/Gitblog-Analyze/"/>
      <url>/2022/03/19/Projects/AutomaticTechBlogManagement/Gitblog-Analyze/</url>
      
        <content type="html"><![CDATA[<p>Github blog에 글을 업로드하면 다른 블로그들도 자동 업로드가 되도록 세팅해주기 위해 데이터 분석이 필요하다.<br><strong>rss</strong>는 최신 글 업로드 현황을 파악하는 용도로, <strong>markdown</strong>은 포스트 내용을 위해 분석할 계획이다.</p><h2 id="사전-준비물"><a href="#사전-준비물" class="headerlink" title="사전 준비물"></a>사전 준비물</h2><hr><p>Github blog를 분석하기 위해서는 먼저 Personal Access Token을 이용해 Github repository 접근 권한을 가져와야 한다.<br>아래의 url을 통해 발급부터 세팅까지 해보자.<br><a href="https://ruby-kim.github.io/2022/03/18/Etc/Github-PAT/">Github: Personal Access Token을 이용해 로컬에서 원하는 repository를 조작해보자</a></p><br><h2 id="import-modules"><a href="#import-modules" class="headerlink" title="import modules"></a>import modules</h2><hr><pre><code>```pythonimport pytzfrom bs4 import BeautifulSoupfrom datetime import datetimeimport requestsimport osfrom github import Github```</code></pre><br><h2 id="초기값-세팅"><a href="#초기값-세팅" class="headerlink" title="초기값 세팅"></a>초기값 세팅</h2><hr><pre><code>```pythonclass GithubBlog:    def __init__(self, blogUrl):        self.url = blogUrl        self.xml = blogUrl + "/atom.xml"        self.contents = []        self.curTime = datetime.now(pytz.utc).isoformat()        self.md_head = {}        self.md_body = ""```</code></pre><ul><li>xml 사이트 분석 후 데이터를 저장하기 위한 <code>contents</code></li><li>markdown(.md) 파일에 대한 데이터를 저장하기 위한 <code>md_head</code>와 <code>md_body</code><ul><li>hexo로 구현된 블로그의 포스트는 아래와 같이 구성된다. <img src="1.png"></li><li>그 중 빨간색으로 표시간 구간은 포스트 이름, 생성 날짜, 카테고리, 태그 등 다양한 정보들을 설정할 수 있다.<br>이 부분의 정보가 담길 곳이 <code>md_head</code></li><li>그 외에 나머지 부분은 <code>md_body</code></li></ul></li></ul><br><h2 id="Github-Blog-xml-분석하기"><a href="#Github-Blog-xml-분석하기" class="headerlink" title="Github Blog: xml 분석하기"></a>Github Blog: xml 분석하기</h2><hr><pre><code>```pythonclass GithubBlog:    def __init__(self, blogUrl): (...)    def parsing_xml(self):        html = requests.get(self.xml)        soup = BeautifulSoup(html.text, "html.parser")        for elem in soup.find_all("entry"):            article = {                "title": elem.find("title").get_text(),                "link": elem.find("link").get("href"),                "published": elem.find("published").get_text("published"),                "updated": elem.find("updated").get_text("updated"),                "category": elem.find("category").get("term").replace("\u200d", ""),                "tags": [c.get("term")                        for idx, c in enumerate(elem.find_all("category")) if idx != 0],            }            self.contents.append(article)```</code></pre><ul><li>xml을 살펴보면 다음과 같이 구성되어 있다.<br>글 자동 생성 및 중복 여부를 파악하기 위해서는 최소 노란색 하이라이트 친 부분의 정보를 가져와야 한다.<img src="2.png"></li><li>xml도 Beautifulsoup을 사용하면 쉽게 파싱이 가능하기에 Beautifulsoup를 사용했다.</li><li>블로그 카테고리를 보면 앞에 이모지를 사용했는데, 몇 이모지들은 합쳐져서 만들어져서 그런지 <code>\u200d</code>라는 값이 생성되어 빼버렸다.<ul><li>원래 결과물: 👩‍💻</li><li>파싱 결과물: 👩\ud200d💻</li><li>혹시 이모티콘 합친 결과물이 안보일 시 <a href="https://ruby-kim.github.io/2022/03/19/Projects/AutomaticTechBlogManagement/Gitblog-Analyze/">Github blog</a>로 와서 보세요</li></ul></li><li>해당 코드를 실행 시 결과물은 다음처럼 나온다. <img src="3.png"></li></ul><br><h2 id="Github-Blog-md-파일-분석하기"><a href="#Github-Blog-md-파일-분석하기" class="headerlink" title="Github Blog: .md 파일 분석하기"></a>Github Blog: .md 파일 분석하기</h2><hr><h3 id="Gihub-repository-관련-함수-세팅"><a href="#Gihub-repository-관련-함수-세팅" class="headerlink" title="Gihub repository 관련 함수 세팅"></a>Gihub repository 관련 함수 세팅</h3><pre><code>```python# github repository 접근def get_github_repo(access_token, repo_name):    g = Github(access_token)    repository = g.get_user().get_repo(repo_name)    return repository# .md파일 내용 불러오기def get_repo_specific_file_content(repository, file_path):    target_file = repository.get_contents("source/_posts" + file_path)    raw_content = target_file.decoded_content    return raw_content.decode('utf-8')```</code></pre><ul><li>위에서 발급받는 Personal Access Token과 해당 함수들을 이용하면 github repository에 접근 및 파일 해독이 가능하다.</li><li><code>raw_content</code>를 decode없이 가져올 시 한글이 전부 깨져 나오기 때문에 <code>'utf-8'</code> 설정은 필수</li></ul><h3 id="Github-repository에서-특정-파일-md-을-찾아-전처리"><a href="#Github-repository에서-특정-파일-md-을-찾아-전처리" class="headerlink" title="Github repository에서 특정 파일(.md)을 찾아 전처리"></a>Github repository에서 특정 파일(.md)을 찾아 전처리</h3><pre><code>```pythonclass GithubBlog:    def __init__(self, blogUrl): (...)    def parsing_md(self, target_path):        repo = get_github_repo("Gihub에서 발급받은 Personal Access Token", "repository 이름")        file = get_repo_specific_file_content(repo, target_path)        self.md_head, self.md_body = preprocess(file, target_path) # preprocess 코드는 다음 항목에 있음```</code></pre><ul><li>불러올 repository는 hexo로 구성된 github blog 백업 repository</li><li>예시로 한번 가져와보면 다음과 같다. <img src="4.png"></li><li>여기서 <code>repository 이름</code>은 <code>koBlog_backup</code></li><li>hexo 특성 상 모든 글들은 <code>/source/_posts</code>에 생성된다. 따라서 해당 이미지 기준으로 <code>target_path</code>는 <code>/AWS/IAM</code></li></ul><h3 id="md파일-전처리"><a href="#md파일-전처리" class="headerlink" title=".md파일 전처리"></a>.md파일 전처리</h3><pre><code>```pythondef preprocess(content, target_path):    def rindex(lst, val):        lst.reverse()        i = lst.index(val)        lst.reverse()        return len(lst) - i - 1    # separate head and body part    content_head_row \        = content[0:content.rfind("---") + 3].replace("---", "").strip().split("\n")    content_body_split_start = rindex(content.split("\n"), "---")    content_body_row = content.split("\n")[content_body_split_start + 1:]    # head preprocessing    content_head = {}    for head in content_head_row:        colon = head.find(':')        key = head[:colon]        value = head[colon + 1:].replace('"', '').replace("\u200d", '').strip()        if key == 'img':            value = f"https://github.com/ruby-kim/ruby-kim.github.io/blob/master{value}?raw=true"        content_head[key] = value    # body preprocessing    content_body = []    target_path_name = '/'.join(target_path.split("/")[1:]).replace(".md", "")    for body in content_body_row:        if '![]' in body and '.png)' in body:            uploaded_date = content_head["date"].split()[0].replace('-', '/')            img_filename = body.replace("![](", "").replace(")", "")            body = body.replace(img_filename, f"https://github.com/ruby-kim/ruby-kim.github.io/blob/master/"                                            f"{uploaded_date + '/' + target_path_name + '/' + img_filename}?raw=true")        content_body.append(body)    return content_head, '\n'.join(content_body)```</code></pre><ul><li>위에 hexo 블로그 .md파일 구조를 살펴보면 <code>---</code>로 감싸진 부분에 글의 정보가 담겨있고, 그 아래로는 내용이 있다.</li><li>따라서 <code>---</code>기준으로 글 정보(head)와 글 내용(body)를 분리 후 전처리를 진행해야 한다.</li><li>그 중 <code>---</code>는 총 2개가 있으므로, 오른쪽에 있는 <code>---</code>를 찾기 위해 rindex()를 생성했다.</li><li>hexo 블로그 .md파일을 잘 살펴보면 이미지 업로드 부분이 있는데, 이대로 바로 데이터를 보내버리면 이미지 로딩이 안되기 때문에 유효한 이미지 url을 생성할 수 있도록 전처리를 진행했다.</li><li>이미지는 원래 private repository에서 불러오려 했으나, private이라 뒤에 토큰값이 붙어 실제 <a href="https://github.com/ruby-kim/ruby-kim.github.io">github blog repository</a>에서 이미지 url을 가져왔다.</li><li>코드 실행 시 결과물은 다음처럼 나온다.<br>(맨 처음 사진과 비교해보면 똑같은 내용임을 확인할 수 있다) <img src="5.png"></li></ul><br><h2 id="개인정보-env에-저장-및-코드-수정"><a href="#개인정보-env에-저장-및-코드-수정" class="headerlink" title="개인정보 .env에 저장 및 코드 수정"></a>개인정보 .env에 저장 및 코드 수정</h2><hr><p><a href="https://ruby-kim.github.io/2022/03/16/Etc/Python-env/">Python3에서 환경변수 .env 사용하기</a></p><br><h2 id="전체-코드"><a href="#전체-코드" class="headerlink" title="전체 코드"></a>전체 코드</h2><hr><ul><li><a href="https://github.com/ruby-kim/automatic-tech-blog-management/blob/14b0d85db8110e8fe8e7fc04a05dd7c972640ab0/gitblog.py">https://github.com/ruby-kim/automatic-tech-blog-management/blob/local/gitblog.py</a></li></ul><p><br><br></p><h2 id="관련-포스트-더보기"><a href="#관련-포스트-더보기" class="headerlink" title="관련 포스트 더보기"></a>관련 포스트 더보기</h2><hr><p><a href="https://ruby-kim.github.io/2022/03/16/Projects/AutomaticTechBlogManagement/Intro/">[Automatic Tech Blog Management] Intro</a></p>]]></content>
      
      
      <categories>
          
          <category> ⚒ Projects </category>
          
      </categories>
      
      
        <tags>
            
            <tag> API </tag>
            
            <tag> Parsing </tag>
            
            <tag> Crawling </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Github: Personal Access Token을 이용해 로컬에서 원하는 repository를 조작해보자</title>
      <link href="/2022/03/18/Etc/Github-PAT/"/>
      <url>/2022/03/18/Etc/Github-PAT/</url>
      
        <content type="html"><![CDATA[<p>프로젝트를 하다보면 private repository에 로컬에서 접근을 해야하는 경우가 있다.<br>또는 로컬에서 repository issue를 생성하는 등 다양한 이유가 있는데, Github에서 Personal Access Token을 이용해 원하는 repository를 조작해보고자 한다.</p><br><h2 id="Personal-Access-Token-발급받기"><a href="#Personal-Access-Token-발급받기" class="headerlink" title="Personal Access Token 발급받기"></a>Personal Access Token 발급받기</h2><hr><ol><li>오른쪽 프로필 아이콘에서 <strong>Settings</strong>를 클릭한다.<br><img src="1.png"></li></ol><br><ol start="2"><li>왼쪽 메뉴에서 <strong>Developer settings</strong>를 클릭한다.<br><img src="2.png"></li></ol><br><ol start="3"><li><strong>Personal access tokens</strong>에서 <strong>Generate new token</strong>을 클릭한다.<br><img src="3.png"></li></ol><br><ol start="4"><li>사용 용도에 맞게 값을 세팅한다. 설정이 끝났다면 <strong>Generate token</strong>버튼을 클릭한다.<br><img src="4.png"></li></ol><br><ol start="5"><li>화면에 생성된 토큰을 확인하고 백업한다. (이 페이지를 벗어나면 영원히 보지 못한다)<br><img src="5.png"></li></ol><br><h2 id="예시"><a href="#예시" class="headerlink" title="예시"></a>예시</h2><hr><ul><li>준비물: Python3, 발급받은 token, 접근할 repository 이름</li><li>함수 참고 사이트: <a href="https://pygithub.readthedocs.io/en/latest/introduction.html">https://pygithub.readthedocs.io/en/latest/introduction.html</a><br>```python<br>import os<br>from github import Github # pip3 install PyGithub</li></ul><p>def get_github_repo(access_token, repo_name):<br>    g = Github(access_token)<br>    repository = g.get_user().get_repo(repo_name)<br>    return repository</p><p>repo = get_github_repo(“발급받은 token”, “repository 이름”)<br>```</p>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> Personal Access Token </tag>
            
            <tag> Python3 </tag>
            
            <tag> Repository </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Github Actions: 환경변수 등록하기</title>
      <link href="/2022/03/17/Etc/Github-Actions-env/"/>
      <url>/2022/03/17/Etc/Github-Actions-env/</url>
      
        <content type="html"><![CDATA[<p>API를 사용하다보면 자신의 개인정보(Authentication)을 이용해야 하는데, 대놓고 깃허브에 업로드하면 개인정보가 털릴 수 있으므로 조심해야 한다.</p><p>이러한 민감한 정보를 아무도 모르게 사용할 수 있는, Github Actions 환경변수 등록 방법에 대해 알아보자.</p><br><ol><li>상단 탭의 <strong>Settings</strong>로 이동한다.<br><img src="1.png"></li></ol><br><ol start="2"><li>좌측 <strong>Secrets</strong> 항목에서 <strong>Actions</strong>를 선택 후 <strong>New repository secret</strong>을 클릭한다.<br><img src="2.png"></li></ol><br><ol start="3"><li>Name과 Value를 각각 입력 후 <strong>Add secret</strong>을 클릭한다.<br><img src="3.png"></li></ol><br><ol start="4"><li>생성완료<br><img src="4.png"></li></ol><br><ol start="5"><li>Github 내에서는 다음과 같이 작성한다.<ul><li>코드<pre class="line-numbers language-python"><code class="language-python"><span class="token keyword">import</span> osapp_id <span class="token operator">=</span> os<span class="token punctuation">.</span>environ<span class="token punctuation">[</span><span class="token string">'TISTORY_APP_ID'</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre></li><li>Github Actions<pre class="line-numbers language-yml"><code class="language-yml">name: projecton:  schedule:    - cron: '0 21 */ * *'jobs:  build:    ...    - name: set parameters      env:        MY_GITHUB_TOKEN: ${{ secrets.TISTORY_APP_ID }}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ul></li></ol>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Github </tag>
            
            <tag> .env </tag>
            
            <tag> Github Actions </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Automatic Tech Blog Management] Tistory API 발급받기</title>
      <link href="/2022/03/17/Projects/AutomaticTechBlogManagement/Tistory-API-Generate/"/>
      <url>/2022/03/17/Projects/AutomaticTechBlogManagement/Tistory-API-Generate/</url>
      
        <content type="html"><![CDATA[<p>티스토리 자동화를 위해서는 API가 필요한데, 이 API를 사용하기 위해서는 OpenAPI 신청과 매번 새로운 access token이 필요하다. (access token의 유효시간은 1시간이다)</p><h2 id="직접-access-token-발급받기"><a href="#직접-access-token-발급받기" class="headerlink" title="직접 access token 발급받기"></a>직접 access token 발급받기</h2><hr><ol><li><a href="https://www.tistory.com/guide/api/manage/register">블로그 API 등록</a> 사이트에 접속 후 작성한다.<ul><li>서비스 URL: 블로그 주소</li><li>CallBack: 블로그 주소<br><img src="tistory1.png"></li></ul></li></ol><br><ol start="2"><li>[앱 관리] 탭에서 설정 부분을 눌러 App ID와 Secret Key를 확인한다.<br><img src="tistory2.png"> <img src="tistory3.png"></li></ol><br><ol start="3"><li>먼저 본인 정보에 맞게 아래의 주소를 변경하고 접속한다.<pre><code>https://www.tistory.com/oauth/authorize?client_id={App ID}&amp;redirect_uri={블로그 주소}&amp;response_type=code&amp;state={state-param}</code></pre><img src="tistory4.png"><br>그러면 위의 페이지가 뜨는데 ‘허가하기’ 버튼을 눌러주면 된다.<br>허가하기를 누르면 본인 블로그로 보내지는데, 이때 그 상태의 주소창 주소를 잘 기억하자. (Code값이 필요함)<pre><code>https://{티스토리 설정 주소}.tistory.com/?code={여기 값을 기억하자}&amp;state={state-param}</code></pre></li></ol><br><ol start="4"><li>아래의 주소로 다시 접속해서 access-token을 발급받는다.<pre><code>https://www.tistory.com/oauth/access_token?client_id={App ID}&amp;client_secret={Secret Key}&amp;redirect_uri={블로그 주소}&amp;code={3번 결과값에서 code부분}&amp;grant_type=authorization_code</code></pre>Network(F12)를 확인하면 access_token을 확인할 수 있다.<br><img src="tistory5.png"></li></ol><br><h2 id="Github-Action을-통해-자동으로-access-token-가져오기"><a href="#Github-Action을-통해-자동으로-access-token-가져오기" class="headerlink" title="Github Action을 통해 자동으로 access token 가져오기"></a>Github Action을 통해 자동으로 access token 가져오기</h2><hr><p>그런데 우리의 목적은 글 자동 업로드기 때문에,<br>유효기간이 1시간인 access-token을 매번 발급받기에는 위 방법은 적합하지 않다.<br>따라서 이러한 과정들을 파이썬으로 구현해봤다.</p><ul><li>참고: <a href="https://tistory.github.io/document-tistory-apis/auth/authorization_code.html">https://tistory.github.io/document-tistory-apis/auth/authorization_code.html</a></li></ul><h3 id="import-modules"><a href="#import-modules" class="headerlink" title="import modules"></a>import modules</h3><pre><code>```pythonimport requestsfrom selenium import webdriverfrom selenium.webdriver.common.by import Byfrom urllib.parse import unquoteimport timeimport os```</code></pre><ul><li>페이지를 동적으로 가져오기 위해 selenium을 import함</li><li>중간에 파싱(code, access_token)할 때 인코딩 에러가 발생해서 이를 위해 unquote를 import함</li></ul><h3 id="초기값-세팅"><a href="#초기값-세팅" class="headerlink" title="초기값 세팅"></a>초기값 세팅</h3><pre><code>```pythonclass Tistory:    def __init__(self, blogUrl):        self.app_id = "발급받은 App ID"        self.secret_key = "발급받은 Secret Key"        self.tistory_id = "티스토리 아이디(kakao 계정)"        self.tistory_pwd = "티스토리 비밀번호(kakao 계정)"        self.tistory_rss = blogUrl + "rss"        # Etc params        self.callback_url = blogUrl        self.oauth_url = 'https://www.tistory.com/oauth/authorize'        self.access_token = None        # selenium setting params        self.webdriver_options = webdriver.ChromeOptions()        self.webdriver_options.add_argument('headless')```</code></pre><ul><li>프로그램 제작에 있어 기본적인 변수들을 선언</li><li>webdriver_options는 webdriver 창 나오는거 방지를 위해 작성</li></ul><h3 id="티스토리-카카오-로그인"><a href="#티스토리-카카오-로그인" class="headerlink" title="티스토리 카카오 로그인"></a>티스토리 카카오 로그인</h3><pre><code>```pythonclass Tistory:    def __init__(self, blogUrl): (...)    def login_kakao(self, browser):        """        login kakao account        :param browser: chrome webdriver (windows: .exe)        :return:        """        browser.get(self.oauth_url + "?client_id=" + self.app_id                    + "&amp;redirect_uri=" + self.callback_url + "&amp;response_type=code")        browser.find_element(By.CLASS_NAME, "txt_login").click()        time.sleep(5)        username = browser.find_element(By.ID, "id_email_2")        password = browser.find_element(By.ID, "id_password_3")        username.send_keys(self.tistory_id)        password.send_keys(self.tistory_pwd)        browser.find_element(By.CLASS_NAME, "btn_confirm").click()        time.sleep(5)        browser.get(browser.current_url)```</code></pre><ul><li>selenium을 이용한 티스토리 카카오 로그인 코드</li><li>selenium으로 하다보니 코드 로딩 전에 프로그램이 진행되어 정확한 값이 나오지 않아 오류가 발생하는 경우가 있어 중간에 sleep을 넣어줌</li></ul><h3 id="티스토리-Oauth-확인-및-access-token-생성"><a href="#티스토리-Oauth-확인-및-access-token-생성" class="headerlink" title="티스토리 Oauth 확인 및 access token 생성"></a>티스토리 Oauth 확인 및 access token 생성</h3><pre><code>```pythonclass Tistory:    def __init__(self, blogUrl): (...)    def login_kakao(self, browser): (...)        def confirm_tistory_oauth(self, browser):        """        clicking confirm button in tistory oauth page        :param browser: chrome webdriver (windows: .exe)        :return:        """        time.sleep(5)        browser.get(browser.current_url)        try:            time.sleep(5)            browser.find_element(By.ID, "contents") \                .find_element(By.CLASS_NAME, "buttonWrap") \                .find_element(By.CLASS_NAME, "confirm").click()            browser.get(browser.current_url)            time.sleep(5)            if "code" in browser.current_url:                url = unquote(unquote(browser.current_url.encode('utf8')))                end = url.find("state=")                start = url.find("code=")                code = url[start + 5:end]                response = requests.get(                    "https://www.tistory.com/oauth/access_token?client_id=" + self.app_id                    + "&amp;client_secret=" + self.secret_key                    + "&amp;redirect_uri=" + self.callback_url                    + "&amp;code=" + code                    + "&amp;grant_type=authorization_code")                if response.status_code == 200:                    access_token = response.text.split('=')[1]                    return access_token                else:                    assert "Failed to generate access token: status error"        finally:            browser.quit()        return None```</code></pre><ul><li>여기도 마찬가지로 너무 빨라 코드 로딩이 안됐는데 파싱하는 경우가 생겨 sleep을 넣어줌</li></ul><h3 id="개인정보-env에-저장-및-코드-수정"><a href="#개인정보-env에-저장-및-코드-수정" class="headerlink" title="개인정보 .env에 저장 및 코드 수정"></a>개인정보 .env에 저장 및 코드 수정</h3><ul><li><a href="https://ruby-kim.github.io/2022/03/16/Etc/Python-env/">Python3에서 환경변수 .env 사용하기</a></li></ul><br><h3 id="전체-코드"><a href="#전체-코드" class="headerlink" title="전체 코드"></a>전체 코드</h3><ul><li><a href="https://github.com/ruby-kim/automatic-tech-blog-management/blob/449f4555a4bf3abde592c303deba4c8a30c67ef9/tistory.py">https://github.com/ruby-kim/automatic-tech-blog-management/blob/local/tistory.py</a></li></ul><p><br><br></p><h2 id="관련-포스트-더보기"><a href="#관련-포스트-더보기" class="headerlink" title="관련 포스트 더보기"></a>관련 포스트 더보기</h2><hr><p><a href="https://ruby-kim.github.io/2022/03/16/Projects/AutomaticTechBlogManagement/Intro/">[Automatic Tech Blog Management] Intro</a></p>]]></content>
      
      
      <categories>
          
          <category> ⚒ Projects </category>
          
      </categories>
      
      
        <tags>
            
            <tag> API </tag>
            
            <tag> Parsing </tag>
            
            <tag> Crawling </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>Python3에서 환경변수 .env 사용하기</title>
      <link href="/2022/03/16/Etc/Python-env/"/>
      <url>/2022/03/16/Etc/Python-env/</url>
      
        <content type="html"><![CDATA[<p>프로젝트를 진행하다 보면 코드에 서버 접속 정보를 기입해야 하는 상황이 올 때가 있다.<br>이는 정보보안에 있어서 매우 민감한 문제인데, 외부에 이 정보들을 감추고 싶을 때 환경변수를 설정해서 코드에 import하여 사용한다.</p><p>다양한 라이브러리들 및 방법이 있지만, 쉽게 찾아볼 수 있는 <strong>dotenv 라이브러리</strong>를 사용해보고자 한다.</p><br><ol><li><strong>dotenv</strong>를 설치한다.<pre class="line-numbers language-python"><code class="language-python">pip3 install python<span class="token operator">-</span>dotenv<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre></li></ol><br><ol start="2"><li>실행파일과 같은 디렉토리에 <strong>.env</strong>파일을 생성한다.<br><img src="1.png" alt="실행파일: tistory.py"></li></ol><br><ol start="3"><li><strong>.env</strong>파일에 사용하고자 하는 변수들을 정의한다.<pre><code>APP_ID="1234567890"SECRET_KEY="I hate Coding"</code></pre></li></ol><br><ol start="4"><li>실행파일에서 import하여 변수에 저장하여 사용한다.<pre class="line-numbers language-python"><code class="language-python"><span class="token comment" spellcheck="true"># tistory.py</span><span class="token keyword">from</span> dotenv <span class="token keyword">import</span> load_dotenv<span class="token keyword">import</span> osload_dotenv<span class="token punctuation">(</span><span class="token punctuation">)</span>app_id <span class="token operator">=</span> os<span class="token punctuation">.</span>environ<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">"APP_ID"</span><span class="token punctuation">)</span>secret_key <span class="token operator">=</span> os<span class="token punctuation">.</span>environ<span class="token punctuation">.</span>get<span class="token punctuation">(</span><span class="token string">"SECRET_KEY"</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li></ol><br><ol start="5"><li>.env를 .gitignore에 추가한다.<pre><code># .gitignore.env</code></pre></li></ol>]]></content>
      
      
      <categories>
          
          <category> 💾 Etc </category>
          
      </categories>
      
      
        <tags>
            
            <tag> Python3 </tag>
            
            <tag> .env </tag>
            
        </tags>
      
    </entry>
    
    
    
    <entry>
      <title>[Automatic Tech Blog Management] Intro</title>
      <link href="/2022/03/16/Projects/AutomaticTechBlogManagement/Intro/"/>
      <url>/2022/03/16/Projects/AutomaticTechBlogManagement/Intro/</url>
      
        <content type="html"><![CDATA[<p>블로그가 여러 개다 보니 관리하기가 너무 귀찮아졌다.<br>선택과 집중을 해야하지만 솔직히 뭘 고를지도 많이 고민이 되고…<br>그래서 준비한 이번 프로젝트: Github Actions를 이용한 포스트 자동 관리 시스템 구축하기!</p><h2 id="블로그-리스트"><a href="#블로그-리스트" class="headerlink" title="블로그 리스트"></a>블로그 리스트</h2><hr><ul><li>Github blog(실제 글 업로드): <a href="https://ruby-kim.github.io/">https://ruby-kim.github.io/</a></li><li>Tistory(자동 업로드): <a href="https://dev-rubykim.tistory.com/">https://dev-rubykim.tistory.com/</a></li><li>[예정] Velog(자동 업로드): <a href="https://velog.io/@rubyhae">https://velog.io/@rubyhae</a></li><li>[보류] Naver blog(자동 업로드): <a href="https://blog.naver.com/dev_rubykim">https://blog.naver.com/dev_rubykim</a> -&gt; API 서비스 종료</li></ul><p>글 업로드 플랫폼은 고민을 했는데, 평생 사라질 걱정 없는 안전한 <strong>Github blog</strong>로 선정했다.<br>블로그 백업용 private repository의 글(Markdown 파일)을 파싱 후 html로 변환하여 <strong>Tistory</strong> (Velog는 추후 추가)에 자동 업로드 할 예정이다.</p><h2 id="프로젝트-관련-포스트-업데이트-중"><a href="#프로젝트-관련-포스트-업데이트-중" class="headerlink" title="프로젝트 관련 포스트 (업데이트 중)"></a>프로젝트 관련 포스트 (업데이트 중)</h2><hr><ul><li><a href="https://ruby-kim.github.io/2022/03/19/Projects/AutomaticTechBlogManagement/Gitblog-Analyze/">[Automatic Tech Blog Management] Github Blog: .md파일 및 xml 분석하기</a></li><li><a href="https://ruby-kim.github.io/2022/03/17/Projects/AutomaticTechBlogManagement/Tistory-API-Generate/">[Automatic Tech Blog Management] Tistory API 발급받기</a></li><li><a href="https://ruby-kim.github.io/2022/03/28/Projects/AutomaticTechBlogManagement/Gitblog-Tistory/">[Automatic Tech Blog Management] Github blog 포스트를 Tistory에 자동 업로드하기</a></li><li>기타<ul><li><a href="https://ruby-kim.github.io/2022/03/17/Etc/Github-Actions-env/">Github Actions: 환경변수 등록하기</a></li><li><a href="https://ruby-kim.github.io/2022/03/16/Etc/Python-env/">Python3에서 환경변수 .env 사용하기</a></li><li><a href="https://ruby-kim.github.io/2022/03/18/Etc/Github-PAT/">Github: Personal Access Token을 이용해 로컬에서 원하는 repository를 조작해보자</a></li></ul></li></ul><h2 id="준비물"><a href="#준비물" class="headerlink" title="준비물"></a>준비물</h2><hr><ul><li>Python3: <a href="https://github.com/ruby-kim/automatic-tech-blog-management">프로젝트 repository</a>에서 <code>requirements.txt</code> 설치</li><li>블로그 계정: Github, Naver, Tistory, (Velog)</li><li>APIs: Naver blog, Tistory</li><li>RSS:<ul><li>Github Blog: 각자 준비하기 <code>https://ruby-kim.github.io/atom.xml</code></li><li>Tistory: <a href="">https://[티스토리-주소]/rss</a> <code>https://dev-rubykim.tistory.com/rss</code></li><li>[예정] Velog: <a href="https://v2.velog.io/rss/[velog-%EC%95%84%EC%9D%B4%EB%94%94]">https://v2.velog.io/rss/[velog-아이디]</a> <code>https://v2.velog.io/rss/rubyhae</code></li><li>[보류] Naver: <a href="https://rss.blog.naver.com/[%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%95%84%EC%9D%B4%EB%94%94].xml">https://rss.blog.naver.com/[네이버-아이디].xml</a> <code>https://rss.blog.naver.com/dev_rubykim.xml</code></li></ul></li></ul><h2 id="기타"><a href="#기타" class="headerlink" title="기타"></a>기타</h2><hr><ul><li>local과 master branch가 있습니다. (환경변수 세팅으로 2개의 branch 사용)<ul><li>local: 디버깅용. 로컬에서 코드 디버깅 시 사용</li><li>master: github action용. github actions에서 사용 (local 완성 시 업로드 예정)</li></ul></li></ul>]]></content>
      
      
      <categories>
          
          <category> ⚒ Projects </category>
          
      </categories>
      
      
        <tags>
            
            <tag> API </tag>
            
            <tag> Github </tag>
            
            <tag> Github Actions </tag>
            
            <tag> Parsing </tag>
            
            <tag> Crawling </tag>
            
            <tag> Project </tag>
            
        </tags>
      
    </entry>
    
    
  
  
</search>