<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>블로그3(k-map)</title>
    <link>https://reactnode.tistory.com/</link>
    <description>reactnode 님의 블로그 입니다.</description>
    <language>ko</language>
    <pubDate>Sun, 10 May 2026 08:43:15 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>리액트JS</managingEditor>
    <item>
      <title>[초간편] 리눅스 ubuntu 에 무료인증서 발급하기 python 용</title>
      <link>https://reactnode.tistory.com/2</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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;iwinv.kr 에서 서버호스팅 구매후 ssl 인증이 필요해서 설치하는 과정을 알려드립니다.&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;서버호스팅 구매후 root 계정을 안내받고 서버에 접속하신후 인증을 받습니다.&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;최초에 잘못몰라서 chatgpt의 도움을 받아 설치를 하였습니다.&amp;nbsp;&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;&lt;b&gt; 수동으로 Let's Encrypt 인증서 발급&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-end=&quot;127&quot; data-start=&quot;89&quot; data-ke-size=&quot;size26&quot;&gt;✅ 1. 인증서 수동 발급 (Certbot 사용, 웹서버 없이)&lt;/h2&gt;
&lt;h3 data-end=&quot;135&quot; data-start=&quot;129&quot; data-ke-size=&quot;size23&quot;&gt;조건&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-end=&quot;219&quot; data-start=&quot;136&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li data-end=&quot;168&quot; data-start=&quot;136&quot;&gt;도메인 A레코드가 서버 IP로 연결되어 있어야 합니다.&lt;/li&gt;
&lt;li data-end=&quot;219&quot; data-start=&quot;169&quot;&gt;서버의 &lt;b&gt;80 포트가 열려 있어야&lt;/b&gt; 합니다. (다른 서버가 실행 중이면 중단 필요)&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-end=&quot;248&quot; data-start=&quot;226&quot; data-ke-size=&quot;size23&quot;&gt;  1단계: Certbot 설치&lt;/h3&gt;
&lt;p data-end=&quot;260&quot; data-start=&quot;250&quot; data-ke-size=&quot;size16&quot;&gt;Ubuntu 기준:&lt;/p&gt;
&lt;p data-end=&quot;260&quot; data-start=&quot;250&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;774&quot; data-origin-height=&quot;128&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/pmETN/btsOkGfHcP7/H02tOSdlQ9LIULKnCICLck/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/pmETN/btsOkGfHcP7/H02tOSdlQ9LIULKnCICLck/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/pmETN/btsOkGfHcP7/H02tOSdlQ9LIULKnCICLck/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpmETN%2FbtsOkGfHcP7%2FH02tOSdlQ9LIULKnCICLck%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;774&quot; height=&quot;128&quot; data-origin-width=&quot;774&quot; data-origin-height=&quot;128&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;   2단계: 수동 인증서 발급&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;779&quot; data-origin-height=&quot;101&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/basVKB/btsOmr8QWnR/8wJXqwPVa6gqxD0xViiT91/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/basVKB/btsOmr8QWnR/8wJXqwPVa6gqxD0xViiT91/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/basVKB/btsOmr8QWnR/8wJXqwPVa6gqxD0xViiT91/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbasVKB%2FbtsOmr8QWnR%2F8wJXqwPVa6gqxD0xViiT91%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;779&quot; height=&quot;101&quot; data-origin-width=&quot;779&quot; data-origin-height=&quot;101&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;도메인이&amp;nbsp; &lt;a href=&quot;https://abcd.com&quot;&gt;https://abcd.com&lt;/a&gt; 이라면&amp;nbsp; sudo certbot certonly --standalone -d abcd.com 이라고 입력하면 됩니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-end=&quot;624&quot; data-start=&quot;603&quot; data-ke-size=&quot;size23&quot;&gt;  3단계: 인증서 경로 확인&lt;/h3&gt;
&lt;p data-end=&quot;649&quot; data-start=&quot;626&quot; data-ke-size=&quot;size16&quot;&gt;성공하면 인증서는 아래 경로에 생성됩니다:&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-end=&quot;777&quot; data-start=&quot;651&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li data-end=&quot;714&quot; data-start=&quot;651&quot;&gt;인증서:&lt;br /&gt;&lt;b&gt;/etc/letsencrypt/live/abcd/fullchain.pem&lt;/b&gt;&lt;/li&gt;
&lt;li data-end=&quot;777&quot; data-start=&quot;715&quot;&gt;개인 키:&lt;br /&gt;&lt;b&gt;/etc/letsencrypt/live/abcd/privkey.pem&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;✅ 2. Python 서버에 적용 예시&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;▶ Flask 예시:&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;777&quot; data-origin-height=&quot;487&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b532Ub/btsOmJ2wNkF/yJfNOGmWk6ZyvzdWihvBZk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b532Ub/btsOmJ2wNkF/yJfNOGmWk6ZyvzdWihvBZk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b532Ub/btsOmJ2wNkF/yJfNOGmWk6ZyvzdWihvBZk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb532Ub%2FbtsOmJ2wNkF%2FyJfNOGmWk6ZyvzdWihvBZk%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;777&quot; height=&quot;487&quot; data-origin-width=&quot;777&quot; data-origin-height=&quot;487&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;h2 data-end=&quot;1227&quot; data-start=&quot;1212&quot; data-ke-size=&quot;size26&quot;&gt;  3. 인증서 갱신&lt;/h2&gt;
&lt;p data-end=&quot;1272&quot; data-start=&quot;1229&quot; data-ke-size=&quot;size16&quot;&gt;Let's Encrypt 인증서는 90일짜리이므로 주기적으로 갱신해야 합니다.&lt;/p&gt;
&lt;p data-end=&quot;1272&quot; data-start=&quot;1229&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-end=&quot;1272&quot; data-start=&quot;1229&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;792&quot; data-origin-height=&quot;281&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/myE6j/btsOkQPRF1d/ElCdNbWxfBM0EiBheiqPL0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/myE6j/btsOkQPRF1d/ElCdNbWxfBM0EiBheiqPL0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/myE6j/btsOkQPRF1d/ElCdNbWxfBM0EiBheiqPL0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmyE6j%2FbtsOkQPRF1d%2FElCdNbWxfBM0EiBheiqPL0%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;792&quot; height=&quot;281&quot; data-origin-width=&quot;792&quot; data-origin-height=&quot;281&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h2 data-end=&quot;1425&quot; data-start=&quot;1403&quot; data-ke-size=&quot;size26&quot;&gt;⚠️ 권장: 자동 갱신 + 스크립트&lt;/h2&gt;
&lt;p data-end=&quot;1499&quot; data-start=&quot;1427&quot; data-ke-size=&quot;size16&quot;&gt;crontab 또는 systemd timer로 갱신 자동화 가능하며, Python 서버도 자동 재시작하도록 하면 좋습니다.&lt;/p&gt;
&lt;p data-end=&quot;1499&quot; data-start=&quot;1427&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-end=&quot;1499&quot; data-start=&quot;1427&quot; data-ke-size=&quot;size16&quot;&gt;crontab 에 89일에 한번 갱신하도록 설정하면 합니다.&lt;/p&gt;
&lt;p data-end=&quot;1499&quot; data-start=&quot;1427&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-end=&quot;1499&quot; data-start=&quot;1427&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <author>리액트JS</author>
      <guid isPermaLink="true">https://reactnode.tistory.com/2</guid>
      <comments>https://reactnode.tistory.com/2#entry2comment</comments>
      <pubDate>Sat, 31 May 2025 23:10:21 +0900</pubDate>
    </item>
    <item>
      <title>[1] 프로그램 설치 및 환경설정</title>
      <link>https://reactnode.tistory.com/1</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;node 윈도우 버전을 설치하고 creat-react-app 설치한다.&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;(1) node js 다운로드&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1849&quot; data-origin-height=&quot;767&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bVgr8u/btsMpmQzkmk/DVlQkCBdq3eepeBkKHedk0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bVgr8u/btsMpmQzkmk/DVlQkCBdq3eepeBkKHedk0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bVgr8u/btsMpmQzkmk/DVlQkCBdq3eepeBkKHedk0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbVgr8u%2FbtsMpmQzkmk%2FDVlQkCBdq3eepeBkKHedk0%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;1849&quot; height=&quot;767&quot; data-origin-width=&quot;1849&quot; data-origin-height=&quot;767&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://nodejs.org/ko&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://nodejs.org/ko&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1740060948587&quot; contenteditable=&quot;false&quot; data-ke-type=&quot;opengraph&quot; data-ke-align=&quot;alignCenter&quot; data-og-type=&quot;website&quot; data-og-title=&quot;Node.js &amp;mdash; 어디서든 JavaScript를 실행하세요&quot; data-og-description=&quot;Node.js&amp;reg; is a JavaScript runtime built on Chrome's V8 JavaScript engine.&quot; data-og-host=&quot;nodejs.org&quot; data-og-source-url=&quot;https://nodejs.org/ko&quot; data-og-url=&quot;https://nodejs.org/ko&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/bUi1jI/hyYjF3hjRR/IXCSUtMrPVw9WAmGs3rfdk/img.png?width=1200&amp;amp;height=600&amp;amp;face=0_0_1200_600,https://scrap.kakaocdn.net/dn/qTsFH/hyYf1NKU8C/ELP0pWfmXKAGRbexquOrm1/img.png?width=224&amp;amp;height=256&amp;amp;face=0_0_224_256&quot;&gt;&lt;a href=&quot;https://nodejs.org/ko&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://nodejs.org/ko&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/bUi1jI/hyYjF3hjRR/IXCSUtMrPVw9WAmGs3rfdk/img.png?width=1200&amp;amp;height=600&amp;amp;face=0_0_1200_600,https://scrap.kakaocdn.net/dn/qTsFH/hyYf1NKU8C/ELP0pWfmXKAGRbexquOrm1/img.png?width=224&amp;amp;height=256&amp;amp;face=0_0_224_256');&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; data-ke-size=&quot;size16&quot;&gt;Node.js &amp;mdash; 어디서든 JavaScript를 실행하세요&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;Node.js&amp;reg; is a JavaScript runtime built on Chrome's V8 JavaScript engine.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;nodejs.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;해당설치위치에서 설치하시고 윈도우+R 눌러서 cmd를 입력하면 커먼트 창이 뜨는데 버전을 확인한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1115&quot; data-origin-height=&quot;628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cs3ozC/btsMqjserVd/jhlqyIIxuTkG6XP3p5Sxe0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cs3ozC/btsMqjserVd/jhlqyIIxuTkG6XP3p5Sxe0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cs3ozC/btsMqjserVd/jhlqyIIxuTkG6XP3p5Sxe0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcs3ozC%2FbtsMqjserVd%2FjhlqyIIxuTkG6XP3p5Sxe0%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;1115&quot; height=&quot;628&quot; data-origin-width=&quot;1115&quot; data-origin-height=&quot;628&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;node의 버전은 v20.18.0 이고 npm의 버전은 10.9.0 으로 확인된다.&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;(2) 폴더생성&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;mkdir 생성폴더 여기에선 test1이라고 지정해본다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1115&quot; data-origin-height=&quot;628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/nB4h0/btsMrwc1mGa/Lih4xtTze85kt8XC8lZHk1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/nB4h0/btsMrwc1mGa/Lih4xtTze85kt8XC8lZHk1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/nB4h0/btsMrwc1mGa/Lih4xtTze85kt8XC8lZHk1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnB4h0%2FbtsMrwc1mGa%2FLih4xtTze85kt8XC8lZHk1%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;1115&quot; height=&quot;628&quot; data-origin-width=&quot;1115&quot; data-origin-height=&quot;628&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;cd test로 해당폴더로 들어간다.&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;(3) yarn 설치&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;756&quot; data-origin-height=&quot;338&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b79wXY/btsMp9XwL0O/Zswqi5MldJswIgqpHchgZ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b79wXY/btsMp9XwL0O/Zswqi5MldJswIgqpHchgZ0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b79wXY/btsMp9XwL0O/Zswqi5MldJswIgqpHchgZ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb79wXY%2FbtsMp9XwL0O%2FZswqi5MldJswIgqpHchgZ0%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;756&quot; height=&quot;338&quot; data-origin-width=&quot;756&quot; data-origin-height=&quot;338&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;npm install -g yarn 으로 yarn을 설치한다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;npm install -g npm@11.1.0 으로 최신버전으로 업데이트 한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock widthContent&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;953&quot; data-origin-height=&quot;493&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bqdZZ7/btsMrFt9LEh/SZWnJahY8mEOgeBxgVnvg1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bqdZZ7/btsMrFt9LEh/SZWnJahY8mEOgeBxgVnvg1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bqdZZ7/btsMrFt9LEh/SZWnJahY8mEOgeBxgVnvg1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqdZZ7%2FbtsMrFt9LEh%2FSZWnJahY8mEOgeBxgVnvg1%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;953&quot; height=&quot;493&quot; data-origin-width=&quot;953&quot; data-origin-height=&quot;493&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;yarn 에 대해서 chatgpt에서 문의하여 위와 같은 답변을 받았다.&amp;nbsp;&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;실제 사용해보면 빠르고 편하다는걸 알수있습니다. 아직은 알수없으니 그냥 이런게 있다고 생각하고 넘어가보시지요&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;3) yarn 버전 확인&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;yarn -v&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;574&quot; data-origin-height=&quot;124&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bFkP5f/btsMpjNgM5F/ZuKL8HMWPYhvIJaRokgeJk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bFkP5f/btsMpjNgM5F/ZuKL8HMWPYhvIJaRokgeJk/img.png&quot; data-alt=&quot;yarn 버전확인&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bFkP5f/btsMpjNgM5F/ZuKL8HMWPYhvIJaRokgeJk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFkP5f%2FbtsMpjNgM5F%2FZuKL8HMWPYhvIJaRokgeJk%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;574&quot; height=&quot;124&quot; data-origin-width=&quot;574&quot; data-origin-height=&quot;124&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;yarn 버전확인&lt;/figcaption&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;4) create-react-app 설치로 실제 앱설치&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;npm install -g create-react-app 으로 create-react-app 을 설치한다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;982&quot; data-origin-height=&quot;354&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/mVdyN/btsMq2cdnRG/p63L0mZ0Y7W7RBwdR4R5w1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/mVdyN/btsMq2cdnRG/p63L0mZ0Y7W7RBwdR4R5w1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/mVdyN/btsMq2cdnRG/p63L0mZ0Y7W7RBwdR4R5w1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmVdyN%2FbtsMq2cdnRG%2Fp63L0mZ0Y7W7RBwdR4R5w1%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;660&quot; height=&quot;238&quot; data-origin-width=&quot;982&quot; data-origin-height=&quot;354&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;creact-react-app client 명령어로 프로젝트를 생성한다. client 경로에 가면 package.json , node_module등의 파일/폴더가 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;663&quot; data-origin-height=&quot;899&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c9pkhh/btsMro0uAmL/FTf34h1M3DIxEtvkeTowh1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c9pkhh/btsMro0uAmL/FTf34h1M3DIxEtvkeTowh1/img.png&quot; data-alt=&quot;실행화면 1&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c9pkhh/btsMro0uAmL/FTf34h1M3DIxEtvkeTowh1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc9pkhh%2FbtsMro0uAmL%2FFTf34h1M3DIxEtvkeTowh1%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;663&quot; height=&quot;899&quot; data-origin-width=&quot;663&quot; data-origin-height=&quot;899&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;실행화면 1&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;516&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/YhDW8/btsMrwc1JHb/jsXvOrSt5gBJmFuETPZV60/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/YhDW8/btsMrwc1JHb/jsXvOrSt5gBJmFuETPZV60/img.png&quot; data-alt=&quot;실행 두번째 화면&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/YhDW8/btsMrwc1JHb/jsXvOrSt5gBJmFuETPZV60/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYhDW8%2FbtsMrwc1JHb%2FjsXvOrSt5gBJmFuETPZV60%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;667&quot; height=&quot;492&quot; data-origin-width=&quot;700&quot; data-origin-height=&quot;516&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;실행 두번째 화면&lt;/figcaption&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;5) react 서버 실행&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;910&quot; data-origin-height=&quot;546&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/Kt9I5/btsMpkyFAOR/A9xOR7kZYkhAfHWjkexWM1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/Kt9I5/btsMpkyFAOR/A9xOR7kZYkhAfHWjkexWM1/img.png&quot; data-alt=&quot;실행된 화면 #1&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/Kt9I5/btsMpkyFAOR/A9xOR7kZYkhAfHWjkexWM1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKt9I5%2FbtsMpkyFAOR%2FA9xOR7kZYkhAfHWjkexWM1%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;910&quot; height=&quot;546&quot; data-origin-width=&quot;910&quot; data-origin-height=&quot;546&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;실행된 화면 #1&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1258&quot; data-origin-height=&quot;776&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cTXxeV/btsMplK0fmA/84UvVg4InBdMzRLReUz7OK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cTXxeV/btsMplK0fmA/84UvVg4InBdMzRLReUz7OK/img.png&quot; data-alt=&quot;실행된 화면 #2&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cTXxeV/btsMplK0fmA/84UvVg4InBdMzRLReUz7OK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcTXxeV%2FbtsMplK0fmA%2F84UvVg4InBdMzRLReUz7OK%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;1258&quot; height=&quot;776&quot; data-origin-width=&quot;1258&quot; data-origin-height=&quot;776&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;실행된 화면 #2&lt;/figcaption&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;6) 파일 수정&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;/client/src/index.js를 열어 편집하면 갱신되어 바로 화면에서 수정된게 보인다.&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;금일은 설치방법과 hello world 와 같은 샘플 파일 생성 및 실행방법에 대해서 알아보았습니다&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;chatgpt로 yarn이 무엇인지 간단히 확인해보았고 이어서 실전프로그램을 실행해 가면서 chatgpt로 어떻게 접근하고&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;리액트, Next.js, Nuxt.js 프로그램 의뢰는 카톡친추 dev.megahit 로 해주세요&lt;/p&gt;</description>
      <category>리액트 JS 프로젝트</category>
      <category>Next.js</category>
      <category>node</category>
      <category>nodejs</category>
      <category>Nuxt.js</category>
      <category>react</category>
      <category>vue.js</category>
      <category>리액트</category>
      <category>리액트 네이티브</category>
      <author>리액트JS</author>
      <guid isPermaLink="true">https://reactnode.tistory.com/1</guid>
      <comments>https://reactnode.tistory.com/1#entry1comment</comments>
      <pubDate>Thu, 20 Feb 2025 23:43:03 +0900</pubDate>
    </item>
  </channel>
</rss>