<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>Hyde on code</title>
    <link>https://hyde-on-code.tistory.com/</link>
    <description>hyde-on-code 님의 블로그 입니다.</description>
    <language>ko</language>
    <pubDate>Fri, 12 Jun 2026 20:17:01 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>Hyde on code</managingEditor>
    <item>
      <title>[Bug Fix Log] Tkinter에서 한글이 깨질 때 해결 방법</title>
      <link>https://hyde-on-code.tistory.com/9</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;/p&gt;
&lt;h1&gt;[Setup Log] Tkinter에서 한글이 깨질 때 해결 방법&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Tkinter를 사용해 Python GUI를 만들 때, 한글이 네모(□)나 물음표(?)로 깨져 보이는 현상이 자주 발생합니다. 이는 Tkinter 기본 폰트가 한글을 지원하지 않기 때문입니다. 아래의 방법으로 해결할 수 있습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;655&quot; data-origin-height=&quot;268&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/y17DZ/btsOcafy0P5/9gNT5rbVt7IpFOue7LAfm1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/y17DZ/btsOcafy0P5/9gNT5rbVt7IpFOue7LAfm1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/y17DZ/btsOcafy0P5/9gNT5rbVt7IpFOue7LAfm1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fy17DZ%2FbtsOcafy0P5%2F9gNT5rbVt7IpFOue7LAfm1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;655&quot; height=&quot;268&quot; data-origin-width=&quot;655&quot; data-origin-height=&quot;268&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✅ 1. 한글 폰트 설치&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Ubuntu 또는 WSL 환경에서 아래 명령어로 한글 폰트를 설치합니다.&lt;/p&gt;
&lt;pre class=&quot;gauss&quot;&gt;&lt;code&gt;sudo apt update
sudo apt install fonts-nanum fonts-nanum-coding fonts-noto-cjk&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;설치 후, 다음 명령어로 폰트가 설치되었는지 확인할 수 있습니다:&lt;/p&gt;
&lt;pre class=&quot;elixir&quot;&gt;&lt;code&gt;fc-list :lang=ko | grep -i nanum&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✅ 2. Tkinter 코드에서 폰트 적용&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;폰트 이름을 직접 지정하여 Label 등에 적용합니다.&lt;/p&gt;
&lt;pre class=&quot;reasonml&quot;&gt;&lt;code&gt;import tkinter as tk

root = tk.Tk()
tk.Label(root, text=&quot;안녕하세요. 주식 분석기입니다!&quot;, font=(&quot;NanumGothic&quot;, 12)).pack()
root.mainloop()&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✅ 3. 기본 폰트 전체 설정&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;모든 위젯에 기본 적용되는 폰트를 설정하려면 아래처럼 작성합니다:&lt;/p&gt;
&lt;pre class=&quot;xquery&quot;&gt;&lt;code&gt;import tkinter as tk
import tkinter.font as tkFont

root = tk.Tk()
default_font = tkFont.nametofont(&quot;TkDefaultFont&quot;)
default_font.configure(family=&quot;Noto Sans CJK KR&quot;, size=12)

tk.Label(root, text=&quot;전체 기본 폰트 적용!&quot;).pack()
root.mainloop()&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✅ 4. 여전히 안 될 경우&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;code&gt;fc-cache -fv&lt;/code&gt; 실행 후 시스템 재시작&lt;/li&gt;
&lt;li&gt;폰트 이름 정확히 일치하는지 확인&lt;/li&gt;
&lt;li&gt;&lt;code&gt;fc-list :lang=ko&lt;/code&gt;로 전체 한글 폰트 목록 확인&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  요약&lt;/h2&gt;
&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;문제&lt;/th&gt;
&lt;th&gt;해결 방법&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;한글이 네모로 깨짐&lt;/td&gt;
&lt;td&gt;폰트 설치 후 Tkinter에 &lt;code&gt;font=(...)&lt;/code&gt; 명시&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;폰트 설치해도 안 나옴&lt;/td&gt;
&lt;td&gt;&lt;code&gt;fc-cache -fv&lt;/code&gt; 실행, 정확한 폰트 이름 확인&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;전체 위젯에 폰트 적용&lt;/td&gt;
&lt;td&gt;&lt;code&gt;tkFont.nametofont(&quot;TkDefaultFont&quot;).configure(...)&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt; ️ 태그&lt;/h3&gt;
&lt;div class=&quot;tag-list&quot;&gt;Tkinter, 한글 깨짐, 폰트 설정, Python GUI, fonts-nanum, WSL, Ubuntu, Setup Log&lt;/div&gt;</description>
      <category>  Bug Fix Log</category>
      <category>bug fix</category>
      <category>fonts-nanum</category>
      <category>python gui</category>
      <category>setup log</category>
      <category>tkinter</category>
      <category>ubuntu</category>
      <category>WSL</category>
      <category>폰트 설정</category>
      <category>한글 깨짐</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/9</guid>
      <comments>https://hyde-on-code.tistory.com/9#entry9comment</comments>
      <pubDate>Sun, 25 May 2025 20:51:45 +0900</pubDate>
    </item>
    <item>
      <title>[Setup Log] Ubuntu 한국어 깨짐 문제 해결</title>
      <link>https://hyde-on-code.tistory.com/8</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h1&gt;[Setup Log] Ubuntu 한국어 깨짐 문제 해결&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Ubuntu 또는 WSL 환경에서 한글이 깨지거나 입력이 되지 않는 문제는 의외로 자주 발생합니다. 이 포스트에서는 터미널에서 한글이 &lt;code&gt;???&lt;/code&gt;처럼 깨지는 문제부터, 파일 내 한글 인코딩 문제까지 단계별로 해결하는 방법을 정리합니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;1️⃣ 현재 로케일 확인&lt;/h2&gt;
&lt;pre class=&quot;ebnf&quot;&gt;&lt;code&gt;locale&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;출력 예시:&lt;/p&gt;
&lt;pre class=&quot;makefile&quot;&gt;&lt;code&gt;LANG=C.UTF-8
LC_ALL=
...&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;2️⃣ 한국어 언어팩 설치&lt;/h2&gt;
&lt;pre class=&quot;sql&quot;&gt;&lt;code&gt;sudo apt update
sudo apt install language-pack-ko&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;3️⃣ 로케일 설정 변경&lt;/h2&gt;
&lt;pre class=&quot;routeros&quot;&gt;&lt;code&gt;sudo update-locale LANG=ko_KR.UTF-8 LC_ALL=ko_KR.UTF-8&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이후 터미널 재시작:&lt;/p&gt;
&lt;pre class=&quot;awk&quot;&gt;&lt;code&gt;exit&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;4️⃣ 변경 확인&lt;/h2&gt;
&lt;pre class=&quot;bash&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;locale
# or
cat /etc/default/locale&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예상 출력:&lt;/p&gt;
&lt;pre class=&quot;routeros&quot;&gt;&lt;code&gt;LANG=ko_KR.UTF-8
LC_ALL=ko_KR.UTF-8
...&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;5️⃣ Windows Terminal 폰트 설정 (WSL 사용자만 해당)&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Windows Terminal 실행&lt;/li&gt;
&lt;li&gt;설정 &amp;rarr; Ubuntu / WSL 프로파일 선택&lt;/li&gt;
&lt;li&gt;모양 &amp;gt; 글꼴 &amp;rarr; &lt;code&gt;D2Coding&lt;/code&gt;, &lt;code&gt;나눔고딕코딩&lt;/code&gt;, &lt;code&gt;Ubuntu Mono&lt;/code&gt; 등 한글 지원 폰트로 변경&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;6️⃣ 한글 파일 인코딩 문제 해결&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Windows에서 생성된 한글 파일이 깨지는 경우:&lt;/p&gt;
&lt;pre class=&quot;css&quot;&gt;&lt;code&gt;iconv -f euc-kr -t utf-8 oldfile.txt &amp;gt; newfile.txt&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;code&gt;vim&lt;/code&gt;에서 인코딩 변경:&lt;/p&gt;
&lt;pre class=&quot;routeros&quot;&gt;&lt;code&gt;:set fileencoding=utf-8
:w&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  요약&lt;/h2&gt;
&lt;table border=&quot;1&quot; cellspacing=&quot;0&quot; cellpadding=&quot;6&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;문제&lt;/th&gt;
&lt;th&gt;해결 방법&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;한글이 터미널에서 깨짐&lt;/td&gt;
&lt;td&gt;&lt;code&gt;language-pack-ko&lt;/code&gt; 설치 + &lt;code&gt;update-locale&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;로케일이 C.UTF-8&lt;/td&gt;
&lt;td&gt;&lt;code&gt;ko_KR.UTF-8&lt;/code&gt;로 변경&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;한글 파일 인코딩 깨짐&lt;/td&gt;
&lt;td&gt;&lt;code&gt;iconv&lt;/code&gt; 또는 vim으로 인코딩 재설정&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Windows Terminal에서 글자 깨짐&lt;/td&gt;
&lt;td&gt;글꼴을 한글 지원 폰트로 변경&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;div class=&quot;tag-list&quot;&gt;&amp;nbsp;&lt;/div&gt;</description>
      <category>  Setup Log</category>
      <category>Linux 설정</category>
      <category>locale</category>
      <category>setup log</category>
      <category>ubuntu</category>
      <category>UTF-8</category>
      <category>WSL</category>
      <category>개발환경</category>
      <category>터미널 인코딩</category>
      <category>한글 깨짐</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/8</guid>
      <comments>https://hyde-on-code.tistory.com/8#entry8comment</comments>
      <pubDate>Sun, 25 May 2025 20:43:36 +0900</pubDate>
    </item>
    <item>
      <title>[Setup Log] pip 설치가 안되어 있을 때</title>
      <link>https://hyde-on-code.tistory.com/7</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;/p&gt;
&lt;h1&gt;  pip 설치 가이드&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Python의 패키지 매니저 &lt;code&gt;pip&lt;/code&gt;이 설치되지 않았을 경우, 아래 방법으로 설치할 수 있습니다.&lt;/p&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;1. Python 설치 여부 확인&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;터미널 또는 명령 프롬프트에 아래 명령어를 입력해 Python이 설치되어 있는지 확인하세요:&lt;/p&gt;
&lt;pre class=&quot;vim&quot;&gt;&lt;code&gt;python --version&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;또는&lt;/p&gt;
&lt;pre class=&quot;vim&quot;&gt;&lt;code&gt;python3 --version&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;설치되지 않았다면 &lt;a href=&quot;https://www.python.org/downloads/&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;공식 Python 다운로드 페이지&lt;/a&gt;에서 설치하세요.&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;393&quot; data-origin-height=&quot;129&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ceZpem/btsOaXWb0DY/x20kLoNDVeu4OLDWB89kI0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ceZpem/btsOaXWb0DY/x20kLoNDVeu4OLDWB89kI0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ceZpem/btsOaXWb0DY/x20kLoNDVeu4OLDWB89kI0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FceZpem%2FbtsOaXWb0DY%2Fx20kLoNDVeu4OLDWB89kI0%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;393&quot; height=&quot;129&quot; data-origin-width=&quot;393&quot; data-origin-height=&quot;129&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;2. get-pip.py로 설치&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;pip 공식 설치 스크립트를 다운로드하여 설치하는 방법입니다:&lt;/p&gt;
&lt;pre class=&quot;dsconfig&quot;&gt;&lt;code&gt;curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&quot;vim&quot;&gt;&lt;code&gt;python get-pip.py&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;또는 &lt;a href=&quot;https://bootstrap.pypa.io/get-pip.py&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;여기&lt;/a&gt;에서 직접 파일을 다운로드할 수 있습니다.&lt;/p&gt;
&lt;/div&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;3. 설치 확인&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;설치 후 아래 명령어로 pip가 정상적으로 설치되었는지 확인합니다:&lt;/p&gt;
&lt;pre class=&quot;ada&quot;&gt;&lt;code&gt;pip --version&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  참고&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;code&gt;python&lt;/code&gt;이 아닌 &lt;code&gt;python3&lt;/code&gt; 명령어를 사용하는 환경도 있습니다.&lt;/li&gt;
&lt;li&gt;macOS나 Linux에서는 &lt;code&gt;sudo&lt;/code&gt;를 붙여야 할 수도 있습니다: &lt;code&gt;sudo python3 get-pip.py&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</description>
      <category>  Setup Log</category>
      <category>ensurepip</category>
      <category>get-pip.py</category>
      <category>linux python 환경</category>
      <category>pip 설치</category>
      <category>pip가 없을 때</category>
      <category>python 설치</category>
      <category>setup log</category>
      <category>windows python 셋업</category>
      <category>개발환경 설정</category>
      <category>파이썬 패키지 설치</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/7</guid>
      <comments>https://hyde-on-code.tistory.com/7#entry7comment</comments>
      <pubDate>Sun, 25 May 2025 19:49:48 +0900</pubDate>
    </item>
    <item>
      <title>[Web Basics] HTML 입문 &amp;ndash; 웹이 작동하는 원리부터 실습 도구까지</title>
      <link>https://hyde-on-code.tistory.com/6</link>
      <description>&lt;h1&gt;  HTML 완전 처음이라면 꼭 알아야 할 개념 3가지&lt;/h1&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;HTML을 배우기 시작하면서 가장 먼저 부딪히는 벽은 &amp;ldquo;어디서부터 어떻게 시작하지?&amp;rdquo;라는 막막함입니다.&lt;br /&gt;이 글에서는 생활코딩의 입문 강의를 바탕으로, HTML을 완전히 처음 접하는 분들을 위해 필수 개념 3가지를 쉽고 간단하게 소개합니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;1️⃣ HTML이란 무엇인가요?&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;HTML은 &lt;b&gt;HyperText Markup Language&lt;/b&gt;의 약자입니다. 웹페이지의 뼈대를 만드는 언어로, 제목, 문단, 이미지, 링크 등 다양한 콘텐츠를 구조화하는 역할을 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예를 들어 아래 코드는 제목과 문단을 표시하는 가장 기본적인 HTML입니다:&lt;/p&gt;
&lt;pre class=&quot;xml&quot;&gt;&lt;code&gt;&amp;lt;h1&amp;gt;나의 첫 번째 웹페이지&amp;lt;/h1&amp;gt;
&amp;lt;p&amp;gt;HTML은 생각보다 쉽습니다!&amp;lt;/p&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;549&quot; data-origin-height=&quot;302&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cbecDC/btsObEutA1R/VY5A02Kj6ny4HtIO8zGWVk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cbecDC/btsObEutA1R/VY5A02Kj6ny4HtIO8zGWVk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cbecDC/btsObEutA1R/VY5A02Kj6ny4HtIO8zGWVk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbecDC%2FbtsObEutA1R%2FVY5A02Kj6ny4HtIO8zGWVk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;549&quot; height=&quot;302&quot; data-origin-width=&quot;549&quot; data-origin-height=&quot;302&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;2️⃣ 웹사이트는 어떻게 작동하나요?&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;웹사이트는 크게 3가지 구성 요소로 이루어져 있습니다:&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;브라우저&lt;/b&gt;: 사용자가 HTML을 볼 수 있게 해주는 도구 (예: Chrome, Safari)&lt;/li&gt;
&lt;li&gt;&lt;b&gt;서버&lt;/b&gt;: HTML 파일을 저장하고, 요청이 오면 보내주는 컴퓨터&lt;/li&gt;
&lt;li&gt;&lt;b&gt;인터넷&lt;/b&gt;: 사용자와 서버를 연결하는 길&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;브라우저는 HTML 파일을 받아 읽고, 우리가 보는 웹페이지처럼 예쁘게 보여줍니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;3️⃣ HTML은 어디에다 작성하나요?&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;HTML은 텍스트로 구성되어 있기 때문에, 기본적인 &lt;b&gt;텍스트 편집기&lt;/b&gt;에서 작성할 수 있습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;대표적인 예시:&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Windows: 메모장, VS Code&lt;/li&gt;
&lt;li&gt;Mac: 텍스트에디트, VS Code&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;파일을 저장할 때는 반드시 확장자를 &lt;code&gt;.html&lt;/code&gt;로 지정해야 브라우저에서 인식할 수 있습니다.&lt;br /&gt;예: &lt;code&gt;index.html&lt;/code&gt;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  마치며&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지금 이 순간에도 수많은 웹페이지가 HTML로 만들어지고 있습니다. 처음에는 태그가 낯설고 복잡해 보일 수 있지만, 구조를 이해하면 &lt;b&gt;내가 만드는 웹사이트&lt;/b&gt;가 어느새 현실이 됩니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음 글에서는 실제로 HTML 문서를 작성해보며 본격적으로 시작해보겠습니다! &lt;i&gt;&amp;ldquo;Hello, world!&amp;rdquo;&lt;/i&gt;를 웹페이지에 띄워볼 준비 되셨나요?&lt;/p&gt;</description>
      <category>Frontend/HTML</category>
      <category>HTML</category>
      <category>웹개발</category>
      <category>웹사이트구조</category>
      <category>코딩입문</category>
      <category>프론트엔드</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/6</guid>
      <comments>https://hyde-on-code.tistory.com/6#entry6comment</comments>
      <pubDate>Sun, 25 May 2025 19:36:44 +0900</pubDate>
    </item>
    <item>
      <title>[Setup Log] Windows PowerShell에서 리눅스 사용하기 wsl</title>
      <link>https://hyde-on-code.tistory.com/5</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h1&gt;  [Setup Log] Windows PowerShell에서 리눅스 사용하기 - WSL&lt;/h1&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt; ️ 개요&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;WSL(Windows Subsystem for Linux)은 Windows 환경에서 리눅스 배포판을 설치하고 사용할 수 있도록 해주는 기능입니다. Git Bash보다 강력한 리눅스 환경이 필요하거나 Ubuntu 등의 배포판에서 개발하고자 할 때 유용합니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  설치 전 확인사항&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Windows 10 (버전 2004 이상) 또는 Windows 11 필요&lt;/li&gt;
&lt;li&gt;PowerShell을 &lt;b&gt;관리자 권한&lt;/b&gt;으로 실행&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  설치 방법&lt;/h2&gt;
&lt;pre class=&quot;ada&quot;&gt;&lt;code&gt;wsl --install&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위 명령어 하나로 WSL과 기본 Ubuntu 배포판이 자동 설치됩니다. 설치 완료 후 시스템 재시작이 필요할 수 있습니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  다른 배포판 설치&lt;/h2&gt;
&lt;pre class=&quot;brainfuck&quot;&gt;&lt;code&gt;wsl --list --online
wsl --install -d Ubuntu-22.04&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;예: &lt;code&gt;wsl --install -d Debian&lt;/code&gt;&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;⚙️ WSL 버전 확인 및 설정&lt;/h2&gt;
&lt;pre class=&quot;vim&quot;&gt;&lt;code&gt;wsl --list --verbose
wsl --set-version &amp;lt;배포판 이름&amp;gt; 2&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;WSL 2는 전체 리눅스 커널 기능을 제공하며 Docker와 호환됩니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  파일 시스템 접근&lt;/h2&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;리눅스 홈 디렉토리: &lt;code&gt;/home/사용자이름/&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Windows 경로 접근: &lt;code&gt;/mnt/c/Users/사용자이름/Desktop/&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  PowerShell에서 리눅스 명령어 바로 사용&lt;/h2&gt;
&lt;pre class=&quot;vim&quot;&gt;&lt;code&gt;wsl ls -al&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;PowerShell에서도 WSL을 통해 리눅스 명령어를 직접 실행할 수 있습니다.&lt;/p&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;✨ Ubuntu 환경에서 oh-my-zsh 사용하기&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;시작 -&amp;gt; Ubuntu 실행 -&amp;gt; 계정 이름 설정 -&amp;gt; 비밀번호 설정&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;816&quot; data-origin-height=&quot;523&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cbIwmV/btsOa0rHKlf/1H1IRMwdfHHi7dxfEcy1Jk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cbIwmV/btsOa0rHKlf/1H1IRMwdfHHi7dxfEcy1Jk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cbIwmV/btsOa0rHKlf/1H1IRMwdfHHi7dxfEcy1Jk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcbIwmV%2FbtsOa0rHKlf%2F1H1IRMwdfHHi7dxfEcy1Jk%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;816&quot; height=&quot;523&quot; data-origin-width=&quot;816&quot; data-origin-height=&quot;523&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Ubuntu가 정상적으로 설치되고 실행된다면, &lt;code&gt;zsh&lt;/code&gt; 및 &lt;code&gt;oh-my-zsh&lt;/code&gt;와 같은 고급 셸 환경도 사용할 수 있습니다. 개발 효율성과 사용자 경험을 모두 향상시킬 수 있는 설정입니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;설치 및 설정 방법은 아래 링크의 가이드를 참고해 주세요:&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;a href=&quot;https://hyde-on-code.tistory.com/2&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;   [Setup Log] WSL Ubuntu에서 zsh + oh-my-zsh 설치 및 설정하기 &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;❗ wsl 명령어가 없다고 나올 때&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;PowerShell에 &lt;code&gt;wsl&lt;/code&gt; 명령어를 입력했을 때, &quot;wsl은 인식되지 않는 명령입니다&quot; 또는 &quot;wsl: 명령을 찾을 수 없습니다&quot;라는 메시지가 나온다면, 다음과 같은 원인과 해결 방법이 있습니다.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;1️⃣ WSL 기능이 Windows에 설치되어 있지 않은 경우&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음 명령어를 PowerShell(관리자 권한)에서 입력하여 WSL 기능을 수동으로 활성화할 수 있습니다.&lt;/p&gt;
&lt;pre class=&quot;jboss-cli&quot;&gt;&lt;code&gt;dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위 두 명령어를 실행한 후 컴퓨터를 재시작해 주세요.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;2️⃣ Windows 버전이 너무 낮은 경우&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;WSL 2는 Windows 10 2004 버전 이상 또는 Windows 11에서만 지원됩니다. 아래 명령어로 현재 Windows 버전을 확인할 수 있습니다:&lt;/p&gt;
&lt;pre class=&quot;groovy&quot;&gt;&lt;code&gt;systeminfo | findstr /B /C:&quot;OS Version&quot;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;출력된 버전이 &lt;code&gt;10.0.19041&lt;/code&gt; 이상인지 확인하세요. 낮은 경우 Windows 업데이트가 필요합니다.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;3️⃣ 그래도 안 될 경우: WSL 수동 설치&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Microsoft에서 제공하는 WSL 설치 파일을 직접 받아 설치할 수 있습니다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;a href=&quot;https://aka.ms/wslinstall&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://aka.ms/wslinstall&lt;/a&gt; 에서 최신 WSL 설치 파일 다운로드&lt;/li&gt;
&lt;li&gt;설치 후 PowerShell을 다시 실행해 &lt;code&gt;wsl --version&lt;/code&gt;이 작동하는지 확인&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 data-ke-size=&quot;size26&quot;&gt;  WSL에서 &lt;code&gt;apt&lt;/code&gt; 명령어가 안 되는 경우&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;WSL 설치 후 Ubuntu에 진입했는데 &lt;code&gt;sudo apt update&lt;/code&gt;를 입력했을 때 &quot;apt: command not found&quot; 또는 비정상적인 오류가 발생하는 경우, 다음 원인과 해결 방법을 참고하세요.&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;1️⃣ apt가 없는 배포판을 설치한 경우&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;code&gt;apt&lt;/code&gt;는 &lt;b&gt;Ubuntu 또는 Debian&lt;/b&gt; 계열에서만 사용됩니다. Fedora, Alpine, Arch 등은 &lt;code&gt;apt&lt;/code&gt;가 없으므로 다른 패키지 관리자를 사용해야 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;현재 배포판 확인:&lt;/p&gt;
&lt;pre class=&quot;arduino&quot;&gt;&lt;code&gt;cat /etc/os-release&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;출력 결과가 &lt;code&gt;Ubuntu&lt;/code&gt; 또는 &lt;code&gt;Debian&lt;/code&gt;이 아니라면, 아래 명령어로 Ubuntu-22.04 LTS를 설치하는 것을 권장합니다:&lt;/p&gt;
&lt;pre class=&quot;ada&quot;&gt;&lt;code&gt;wsl --install -d Ubuntu-22.04&lt;/code&gt;&lt;/pre&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;2️⃣ Ubuntu 설치가 비정상적으로 된 경우&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;간혹 배포판 설치 도중 오류가 발생해 &lt;code&gt;/etc/apt&lt;/code&gt; 관련 파일이 손상된 경우도 있습니다. 이럴 땐 해당 배포판을 제거하고 재설치하면 됩니다.&lt;/p&gt;
&lt;pre class=&quot;dsconfig&quot;&gt;&lt;code&gt;# 설치된 배포판 목록 보기
wsl --list --verbose

# 예: Ubuntu 제거
wsl --unregister Ubuntu

# 다시 설치
wsl --install -d Ubuntu-22.04
&lt;/code&gt;&lt;/pre&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;3️⃣ 네트워크 오류 또는 리포지토리 접근 불가&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;리포지토리 서버가 일시적으로 접근 불가하거나 DNS 문제로 &lt;code&gt;apt update&lt;/code&gt;가 실패할 수 있습니다. 아래 방법으로 DNS 설정을 초기화해보세요.&lt;/p&gt;
&lt;pre class=&quot;jboss-cli&quot;&gt;&lt;code&gt;sudo rm /etc/resolv.conf
echo &quot;nameserver 8.8.8.8&quot; | sudo tee /etc/resolv.conf&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그리고 다시 &lt;code&gt;sudo apt update&lt;/code&gt;를 시도하세요.&lt;/p&gt;</description>
      <category>powershell 명령어</category>
      <category>ubuntu 설치</category>
      <category>Windows PowerShell</category>
      <category>windows에서 리눅스</category>
      <category>WSL</category>
      <category>wsl 설치방법</category>
      <category>[setup log]</category>
      <category>개발환경설정</category>
      <category>리눅스</category>
      <category>윈도우 리눅스</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/5</guid>
      <comments>https://hyde-on-code.tistory.com/5#entry5comment</comments>
      <pubDate>Sun, 25 May 2025 12:03:04 +0900</pubDate>
    </item>
    <item>
      <title>[Setup Log] 내가 사용하는 VSCode 확장 기능: GitHub Copilot &amp;amp; Ruff</title>
      <link>https://hyde-on-code.tistory.com/4</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;  [Setup Log] 내가 사용하는 VSCode 확장 기능: GitHub Copilot &amp;amp; Ruff&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코딩을 좀 더 효율적으로 해보고 싶어서 이것저것 찾아보다가, 결국 Visual Studio Code(VSCode)에 정착하게 됐다.&lt;br /&gt;그런데 정말 놀라운 건, 이 에디터 자체가 아니라 그 위에 얹는 &lt;b&gt;&amp;lsquo;확장 기능&amp;rsquo;&lt;/b&gt;이었다.&lt;br /&gt;오늘은 내가 직접 써보고 만족했던 VSCode 확장 기능 두 가지를 소개하고, 설치 방법부터 활용 팁까지 정리해보려 한다.&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ VSCode 확장 기능 설치 방법&lt;/h3&gt;
&lt;ol style=&quot;list-style-type: decimal;&quot; data-ke-list-type=&quot;decimal&quot;&gt;
&lt;li&gt;사이드바에서 &lt;b&gt;확장(Extensions)&lt;/b&gt; 탭 클릭&lt;/li&gt;
&lt;li&gt;검색창에 원하는 확장 기능 입력&lt;/li&gt;
&lt;li&gt;&lt;b&gt;[Install]&lt;/b&gt; 버튼 클릭&lt;/li&gt;
&lt;/ol&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  아래 이미지는 확장 기능 검색 및 설치 화면 예시이다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;544&quot; data-origin-height=&quot;645&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/DS2um/btsN8F8vSNt/X7mnYxQq2sf2kkQ6B5kyzK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/DS2um/btsN8F8vSNt/X7mnYxQq2sf2kkQ6B5kyzK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/DS2um/btsN8F8vSNt/X7mnYxQq2sf2kkQ6B5kyzK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDS2um%2FbtsN8F8vSNt%2FX7mnYxQq2sf2kkQ6B5kyzK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;544&quot; height=&quot;645&quot; data-origin-width=&quot;544&quot; data-origin-height=&quot;645&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  내가 사용하는 확장 기능&lt;/h3&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;1. GitHub Copilot&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;AI가 자동으로 코드 완성, 주석 기반 코드 생성까지 지원한다.&lt;br /&gt;반쯤 페어 프로그래밍 느낌. 생각보다 똑똑하다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;ChatGPT와 다른 점:&lt;/b&gt; VSCode 내부에서 바로 반응함&lt;/li&gt;
&lt;li&gt;&lt;b&gt;추천 이유:&lt;/b&gt; &amp;ldquo;그걸 왜 내가 직접 타이핑해야 해?&amp;rdquo; 싶을 때 딱&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  Copilot을 검색 한 후 사용하면 된다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1410&quot; data-origin-height=&quot;649&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b0mb0O/btsN7XaQMcJ/qkakxKgbb4R0Cvt6nBiyKK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b0mb0O/btsN7XaQMcJ/qkakxKgbb4R0Cvt6nBiyKK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b0mb0O/btsN7XaQMcJ/qkakxKgbb4R0Cvt6nBiyKK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb0mb0O%2FbtsN7XaQMcJ%2FqkakxKgbb4R0Cvt6nBiyKK%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1410&quot; height=&quot;649&quot; data-origin-width=&quot;1410&quot; data-origin-height=&quot;649&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코파일럿과 페어 코딩이 가능하다 !&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;작성하고 싶은 코드를 주석으로 작성하면 알아서 내용들을 작성해준다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  아래 GIF는 주석을 작성한 후 Copilot이 코드를 생성하는 실제 시연 장면이다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 4.05.29.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;687&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/9H644/btsN8usFAvA/hk0ADroSsLKTSVFwgyGWJ1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/9H644/btsN8usFAvA/hk0ADroSsLKTSVFwgyGWJ1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/9H644/btsN8usFAvA/hk0ADroSsLKTSVFwgyGWJ1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/9H644/btsN8usFAvA/hk0ADroSsLKTSVFwgyGWJ1/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;687&quot; data-filename=&quot;화면 기록 2025-05-23 오전 4.05.29.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;687&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;2. Ruff&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;파이썬 린터 겸 포매터. 빠르고, 너무 빠르고, 진짜 빠르다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;기존 flake8, black, isort의 기능을 통합&lt;/li&gt;
&lt;li&gt;설정도 간단하고 CLI 연동도 잘 됨&lt;/li&gt;
&lt;li&gt;VSCode에서 바로 오류 잡고 정리해주는 게 체감됨&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  사용 팁:&lt;/b&gt; &lt;code&gt;pyproject.toml&lt;/code&gt;에 설정하면 저장할 때 자동 포맷도 가능!&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;Ruff 세팅&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;settings.json 파일을 열고 내부에 추가해주면 된다.&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;mac: command + shift + p: setting.json&lt;/li&gt;
&lt;li&gt;window: ctrl + shift + p: setting.json&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;bash&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;{
  &quot;python.formatting.provider&quot;: &quot;black&quot;,
  &quot;editor.formatOnSave&quot;: true,
  &quot;editor.codeActionsOnSave&quot;: {
    &quot;source.organizeImports&quot;: true,
    &quot;source.fixAll&quot;: true
  },
  &quot;ruff.enable&quot;: true,
  &quot;ruff.formatOnSave&quot;: true
}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  아래 GIF는 Ruff를 세팅하는 과정이다 settings.json을 실행 후 위 내용을 복사해서 붙여넣으면 된다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 4.29.27.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;527&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/k8dxG/btsOahrzt4W/Uxv9dJvhqQs041G2H7eHvk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/k8dxG/btsOahrzt4W/Uxv9dJvhqQs041G2H7eHvk/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/k8dxG/btsOahrzt4W/Uxv9dJvhqQs041G2H7eHvk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/k8dxG/btsOahrzt4W/Uxv9dJvhqQs041G2H7eHvk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;527&quot; data-filename=&quot;화면 기록 2025-05-23 오전 4.29.27.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;527&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  ruff 라고 검색하고 확장 프로그램을 받으면 된다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1589&quot; data-origin-height=&quot;718&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/PcMSR/btsN9wbUasQ/Qkq1GfsABQwcekw9JV2pL1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/PcMSR/btsN9wbUasQ/Qkq1GfsABQwcekw9JV2pL1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/PcMSR/btsN9wbUasQ/Qkq1GfsABQwcekw9JV2pL1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPcMSR%2FbtsN9wbUasQ%2FQkq1GfsABQwcekw9JV2pL1%2Fimg.png&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1589&quot; height=&quot;718&quot; data-origin-width=&quot;1589&quot; data-origin-height=&quot;718&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  마지막 GIF는 저장할 때 자동으로 린트 및 포맷이 실행되는 모습이다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 4.08.45 (1).gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;687&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dyXpp2/btsN8HFirtQ/EnY5R0DYmKktdfa4v7pBrk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dyXpp2/btsN8HFirtQ/EnY5R0DYmKktdfa4v7pBrk/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dyXpp2/btsN8HFirtQ/EnY5R0DYmKktdfa4v7pBrk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/dyXpp2/btsN8HFirtQ/EnY5R0DYmKktdfa4v7pBrk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;687&quot; data-filename=&quot;화면 기록 2025-05-23 오전 4.08.45 (1).gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;687&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  마무리&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;오늘 소개한 두 가지 확장 기능은 실제로 내 작업 흐름을 눈에 띄게 줄여줬고,&lt;/p&gt;
&lt;p data-end=&quot;292&quot; data-start=&quot;236&quot; data-ke-size=&quot;size16&quot;&gt;혹시 개발 속도를 조금이라도 올리고 싶다면,&lt;br /&gt;이 두 가지 확장 기능부터 써보는 걸 추천한다.&lt;/p&gt;</description>
      <category>  Setup Log</category>
      <category>Github Copilot</category>
      <category>hyde setup</category>
      <category>python lint</category>
      <category>Ruff</category>
      <category>vscode</category>
      <category>vscode 추천 확장기능</category>
      <category>vscode 확장</category>
      <category>vscode 환경설정</category>
      <category>개발환경 셋업</category>
      <category>파이썬 포매터</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/4</guid>
      <comments>https://hyde-on-code.tistory.com/4#entry4comment</comments>
      <pubDate>Fri, 23 May 2025 03:53:35 +0900</pubDate>
    </item>
    <item>
      <title>[Setup Log] Windows에서 Visual Studio Code 설치하기 (2분 컷)</title>
      <link>https://hyde-on-code.tistory.com/3</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt; ️ Visual Studio Code 설치 가이드 (Windows)&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;⏱️ 소요시간: 약 2분&lt;/b&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 1 - VSCode 공식 홈페이지로 이동&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;  &lt;a href=&quot;https://code.visualstudio.com/download&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;https://code.visualstudio.com/download&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/IbJ4i4m.png&quot; alt=&quot;vscode homepage&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 2 - Windows 버튼 클릭&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;클릭 후 자동으로 설치 파일 다운로드가 시작됩니다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/AikEr8Z.png&quot; alt=&quot;windows download&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 3 - 다운로드한 설치파일 실행&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/Gtmq15t.png&quot; alt=&quot;installer&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 4 - 설치 진행&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;설치 경로를 따로 지정하지 않는다면 대부분 &lt;b&gt;'다음(N)'&lt;/b&gt; 버튼으로 계속 진행하면 됩니다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/YYxjHJK.png&quot; alt=&quot;next button&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 5 - 설치 경로 지정&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/yBnZvgQ.png&quot; alt=&quot;install path&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 6 - 시작 메뉴 폴더 바로가기 설정&lt;/h3&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/yBnZvgQ.png&quot; alt=&quot;start menu&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 7 - PATH에 추가&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;code&gt;code&lt;/code&gt; 명령어로 실행할 수 있도록 설정합니다.&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/Q8OxGcP.png&quot; alt=&quot;path option&quot; /&gt;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;✅ Step 8 - VSCode 실행&lt;/h3&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;▶ A. 아이콘 클릭 실행&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/obRtG7O.png&quot; alt=&quot;desktop icon&quot; /&gt;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;▶ B. 터미널에서 실행&lt;/h4&gt;
&lt;pre class=&quot;clean&quot;&gt;&lt;code&gt;code&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;터미널(Git Bash, CMD 등)에서 &lt;code&gt;code&lt;/code&gt; 입력 시 VSCode가 실행됩니다.&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;  실행 화면 예시&lt;/h4&gt;
&lt;p&gt;&lt;img src=&quot;https://i.imgur.com/yDhVxeY.png&quot; alt=&quot;vscode launched&quot; /&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-end=&quot;172&quot; data-start=&quot;139&quot; data-ke-size=&quot;size26&quot;&gt;vs code가 안될 때&lt;/h2&gt;
&lt;h2 data-end=&quot;172&quot; data-start=&quot;139&quot; data-ke-size=&quot;size26&quot;&gt;✅ 1. code 명령어를 설치 (macOS 기준)&lt;/h2&gt;
&lt;p data-end=&quot;203&quot; data-start=&quot;174&quot; data-ke-size=&quot;size16&quot;&gt;VS Code에서 명령어 등록은 다음과 같이 합니다:&lt;/p&gt;
&lt;h3 data-end=&quot;223&quot; data-start=&quot;205&quot; data-ke-size=&quot;size23&quot;&gt;① VS Code 실행&lt;/h3&gt;
&lt;h3 data-end=&quot;240&quot; data-start=&quot;224&quot; data-ke-size=&quot;size23&quot;&gt;② 상단 메뉴에서:&lt;/h3&gt;
&lt;div&gt;
&lt;div&gt;css&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;복사&lt;span data-state=&quot;closed&quot;&gt;편집&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;Code&lt;/span&gt;&lt;/span&gt;&lt;span&gt; &amp;gt; Settings &amp;gt; Command Palette... &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-end=&quot;323&quot; data-start=&quot;286&quot; data-ke-size=&quot;size16&quot;&gt;또는 ⇧⌘P (Shift + Command + P) 단축키 입력&lt;/p&gt;
&lt;h3 data-end=&quot;343&quot; data-start=&quot;325&quot; data-ke-size=&quot;size23&quot;&gt;③ 명령어 검색창에 입력:&lt;/h3&gt;
&lt;div&gt;
&lt;div&gt;bash&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;복사&lt;span data-state=&quot;closed&quot;&gt;편집&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;&lt;span&gt;&lt;span&gt;Shell Command: Install &lt;/span&gt;&lt;span&gt;&lt;span&gt;'code'&lt;/span&gt;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;command&lt;/span&gt;&lt;/span&gt;&lt;span&gt; &lt;/span&gt;&lt;span&gt;&lt;span&gt;in&lt;/span&gt;&lt;/span&gt;&lt;span&gt; PATH &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-end=&quot;438&quot; data-start=&quot;398&quot; data-ke-size=&quot;size16&quot;&gt;선택하면 자동으로 code 명령어가 터미널에서 작동하도록 등록됩니다.&lt;/p&gt;
&lt;hr data-end=&quot;443&quot; data-start=&quot;440&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;h2 data-end=&quot;460&quot; data-start=&quot;445&quot; data-ke-size=&quot;size26&quot;&gt;✅ 2. 설치 후 확인&lt;/h2&gt;
&lt;p data-end=&quot;495&quot; data-start=&quot;462&quot; data-ke-size=&quot;size16&quot;&gt;터미널에서 아래를 입력해 정상적으로 등록되었는지 확인합니다:&lt;/p&gt;
&lt;div&gt;
&lt;div&gt;bash&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;복사&lt;span data-state=&quot;closed&quot;&gt;편집&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;&lt;span&gt;&lt;span&gt;code --version &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-end=&quot;575&quot; data-start=&quot;525&quot; data-ke-size=&quot;size16&quot;&gt;버전이 출력되면 성공입니다. 이제 다음처럼 폴더나 파일을 VS Code로 열 수 있습니다:&lt;/p&gt;
&lt;div&gt;
&lt;div&gt;bash&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;복사&lt;span data-state=&quot;closed&quot;&gt;편집&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;&lt;span&gt;&lt;span&gt;code . &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;hr data-end=&quot;600&quot; data-start=&quot;597&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;h2 data-end=&quot;633&quot; data-start=&quot;602&quot; data-ke-size=&quot;size26&quot;&gt;✅ 3. 그래도 안 될 경우: 직접 PATH에 추가&lt;/h2&gt;
&lt;p data-end=&quot;676&quot; data-start=&quot;635&quot; data-ke-size=&quot;size16&quot;&gt;만약 위 방법이 실패할 경우, 수동으로 심볼릭 링크를 추가할 수 있습니다:&lt;/p&gt;
&lt;div&gt;
&lt;div&gt;bash&lt;/div&gt;
&lt;div&gt;
&lt;div&gt;
&lt;div&gt;복사&lt;span data-state=&quot;closed&quot;&gt;편집&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;ln&lt;/span&gt;&lt;/span&gt;&lt;span&gt; -s &lt;/span&gt;&lt;span&gt;&lt;span&gt;&quot;/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code&quot;&lt;/span&gt;&lt;/span&gt;&lt;span&gt; /usr/local/bin/code &lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p data-end=&quot;826&quot; data-start=&quot;788&quot; data-ke-size=&quot;size16&quot;&gt;설치 후 터미널을 껐다 켜고 code 명령을 다시 실행해 보세요.&lt;/p&gt;</description>
      <category>  Setup Log</category>
      <category>dev환경</category>
      <category>hydesetup</category>
      <category>vscode</category>
      <category>설치가이드</category>
      <category>윈도우</category>
      <category>초보자</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/3</guid>
      <comments>https://hyde-on-code.tistory.com/3#entry3comment</comments>
      <pubDate>Fri, 23 May 2025 03:39:42 +0900</pubDate>
    </item>
    <item>
      <title>[Hyde&amp;rsquo;s Setup] 맥북 iTerm 기본 세팅 가이드</title>
      <link>https://hyde-on-code.tistory.com/2</link>
      <description>&lt;h2 data-ke-size=&quot;size26&quot;&gt;  모든 플러그인 한 번에 설치하기&lt;/h2&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  전제: Oh-My-Zsh 설치 후 진행!&lt;/b&gt;&lt;/p&gt;
&lt;pre class=&quot;bash&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;sudo apt update
sudo apt install zsh -y
sh -c &quot;$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)&quot;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지웠다가 재설치 할 때&lt;/p&gt;
&lt;pre class=&quot;crystal&quot;&gt;&lt;code&gt;rm -rf ~/.oh-my-zsh

sh -c &quot;$(curl -fsSL &amp;lt;https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh&amp;gt;)&quot;
&lt;/code&gt;&lt;/pre&gt;
&lt;h2 data-end=&quot;430&quot; data-start=&quot;405&quot; data-ke-size=&quot;size26&quot;&gt;  zsh을 기본 셸로 바꾸고 싶다면?&lt;/h2&gt;
&lt;div&gt;
&lt;pre id=&quot;code_1748151801841&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;chsh -s $(which zsh)&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-end=&quot;505&quot; data-start=&quot;466&quot; data-ke-style=&quot;style1&quot;&gt;
&lt;p data-end=&quot;505&quot; data-start=&quot;468&quot; data-ke-size=&quot;size16&quot;&gt;  이후에 Ubuntu를 다시 실행하면 zsh이 기본으로 실행&lt;/p&gt;
&lt;/blockquote&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style5&quot; /&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;b&gt;autojump&lt;/b&gt;: &lt;code&gt;j 폴더명&lt;/code&gt;으로 빠른 디렉토리 이동&lt;/li&gt;
&lt;li&gt;&lt;b&gt;autosuggestions&lt;/b&gt;: 이전 명령어 자동 추천&lt;/li&gt;
&lt;li&gt;&lt;b&gt;syntax-highlighting&lt;/b&gt;: 명령어 오류 색상 강조&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;bash&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;brew install autojump
brew install zsh-autosuggestions
brew install zsh-syntax-highlighting

git clone https://github.com/wting/autojump.git
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

cd autojump
./install.py

vi ~/.zshrc

# plugins 설정 예시
plugins=(
    git
    autojump
    zsh-autosuggestions
    zsh-syntax-highlighting
)

source ~/.zshrc&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  autojump&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;한 번 방문한 폴더는 &lt;b&gt;어디서든 빠르게 이동&lt;/b&gt; 가능!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 2.53.54 (1).gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;207&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/2SEiv/btsN9a7ESF8/R8K5kDZAMRe0CM0OJ02AiK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/2SEiv/btsN9a7ESF8/R8K5kDZAMRe0CM0OJ02AiK/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/2SEiv/btsN9a7ESF8/R8K5kDZAMRe0CM0OJ02AiK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/2SEiv/btsN9a7ESF8/R8K5kDZAMRe0CM0OJ02AiK/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;207&quot; data-filename=&quot;화면 기록 2025-05-23 오전 2.53.54 (1).gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;207&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre class=&quot;vim&quot;&gt;&lt;code&gt;brew install autojump
git clone git://github.com/wting/autojump.git

cd autojump
./install.py
&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  zsh-autosuggestions&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;명령어 자동 추천, &lt;code&gt;탭&lt;/code&gt; 키로 빠르게 완성&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 3.06.35.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;207&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/kLIPl/btsN9EHqFST/42JEe81Bt5zVs1JkKTWV00/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/kLIPl/btsN9EHqFST/42JEe81Bt5zVs1JkKTWV00/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/kLIPl/btsN9EHqFST/42JEe81Bt5zVs1JkKTWV00/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/kLIPl/btsN9EHqFST/42JEe81Bt5zVs1JkKTWV00/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;207&quot; data-filename=&quot;화면 기록 2025-05-23 오전 3.06.35.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;207&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre class=&quot;awk&quot;&gt;&lt;code&gt;brew install zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt; &amp;nbsp;zsh-syntax-highlighting&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;정상 명령어는 &lt;span style=&quot;color: green;&quot;&gt;녹색&lt;/span&gt;, 오류는 &lt;span style=&quot;color: red;&quot;&gt;빨간색&lt;/span&gt;!&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 3.08.16.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;207&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/sWEFo/btsN8aHY5Uy/ocki6P6atTCp6TW2wqKwD0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/sWEFo/btsN8aHY5Uy/ocki6P6atTCp6TW2wqKwD0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/sWEFo/btsN8aHY5Uy/ocki6P6atTCp6TW2wqKwD0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/sWEFo/btsN8aHY5Uy/ocki6P6atTCp6TW2wqKwD0/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;207&quot; data-filename=&quot;화면 기록 2025-05-23 오전 3.08.16.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;207&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre class=&quot;bash&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;brew install zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

vi ~/.zshrc

plugins=(
    git
    autojump
    zsh-autosuggestions
    zsh-syntax-highlighting
)

source ~/.zshrc&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;  랜덤 테마 적용&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;테마를 랜덤으로 적용 !&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;마음에 드는 테마가 나오면 선택해 사용하면 된다 !&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;화면 기록 2025-05-23 오전 3.11.49.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;557&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dxtw42/btsOad3Lkr3/IbyroqOuuKcnoC8gxXzuXk/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dxtw42/btsOad3Lkr3/IbyroqOuuKcnoC8gxXzuXk/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dxtw42/btsOad3Lkr3/IbyroqOuuKcnoC8gxXzuXk/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/dxtw42/btsOad3Lkr3/IbyroqOuuKcnoC8gxXzuXk/img.gif&quot; onerror=&quot;this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';&quot; loading=&quot;lazy&quot; width=&quot;1000&quot; height=&quot;557&quot; data-filename=&quot;화면 기록 2025-05-23 오전 3.11.49.gif&quot; data-origin-width=&quot;1000&quot; data-origin-height=&quot;557&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;pre class=&quot;bash&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;vim ~/.zshrc

ZSH_THEME=&quot;random&quot;

# 마음에 드는 테마
# ZSH_THEME=&quot;fino-time&quot;&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;  참고:&lt;/b&gt; &lt;a href=&quot;https://hjiee.tistory.com/entry/터미널-Oh-My-ZSH로-터미널-아름답게-꾸며보기&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot;&gt;[터미널] Oh My ZSH로 터미널 아름답게 꾸며보기&lt;/a&gt;&lt;/p&gt;</description>
      <category>  Setup Log</category>
      <author>Hyde on code</author>
      <guid isPermaLink="true">https://hyde-on-code.tistory.com/2</guid>
      <comments>https://hyde-on-code.tistory.com/2#entry2comment</comments>
      <pubDate>Fri, 23 May 2025 02:28:11 +0900</pubDate>
    </item>
  </channel>
</rss>