<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>씨앤텍시스템즈 기술블로그</title>
    <link>https://cntechsystems.tistory.com/</link>
    <description>씨앤텍시스템즈 기술블로그 입니다.</description>
    <language>ko</language>
    <pubDate>Sun, 12 Apr 2026 06:52:36 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>씨앤텍</managingEditor>
    <image>
      <title>씨앤텍시스템즈 기술블로그</title>
      <url>https://tistory1.daumcdn.net/tistory/3117726/attach/4f49c8d0d60448fe855ef1563f5305e3</url>
      <link>https://cntechsystems.tistory.com</link>
    </image>
    <item>
      <title>홈페이지 제작 문의</title>
      <link>https://cntechsystems.tistory.com/173</link>
      <description>&lt;h2 style=&quot;text-align: center;&quot; data-ke-size=&quot;size26&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&quot; 고객의 미래를 함께하는 씨앤텍시스템즈&amp;nbsp; &quot;&lt;/b&gt;&lt;/span&gt;&lt;/h2&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;안녕하세요 &lt;b&gt;씨앤텍시스템즈 기술연구소&lt;/b&gt;입니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;color: #000000; font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;회사소개&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1500&quot; data-origin-height=&quot;1125&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ccSS2A/btsFBdM35Ks/vWYGIcBYX9xJhX8aKgLSXk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ccSS2A/btsFBdM35Ks/vWYGIcBYX9xJhX8aKgLSXk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ccSS2A/btsFBdM35Ks/vWYGIcBYX9xJhX8aKgLSXk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FccSS2A%2FbtsFBdM35Ks%2FvWYGIcBYX9xJhX8aKgLSXk%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;333&quot; height=&quot;1125&quot; data-origin-width=&quot;1500&quot; data-origin-height=&quot;1125&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&amp;nbsp;2005년에 설립된 DW, ETL, BA, BIG DATA,&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;솔루션 구축 컨설팅 &lt;/b&gt;&lt;b&gt;전문기업 씨앤텍시스템즈의&lt;/b&gt;&lt;b&gt;&amp;nbsp;소개합니다.&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;기술연구소는&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;전문화된 인력과 기술력&lt;/b&gt;을 바탕으로 &lt;b&gt;차세대 기술 개발&lt;/b&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;R&amp;amp;D 사업 등 새로운 IT 기술에 도전&lt;/b&gt;하고&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;지속적인 연구 개발&lt;/b&gt;을 통하여&lt;b&gt; 주도적인 기업&lt;/b&gt;으로 이끌어 나가고 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;최근 자사 &lt;b&gt;ETL 솔루션 개발 및 &lt;/b&gt;&lt;b&gt;디지털 헬스케어, 인공지능 학습,&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;span style=&quot;font-size: 1.12em; text-align: center; letter-spacing: 0px;&quot;&gt;다양한 분야에 도전하며 &lt;/span&gt;&lt;span style=&quot;font-size: 1.12em; text-align: center; letter-spacing: 0px;&quot;&gt;완수해 왔습니다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;기업 홈페이지,&lt;/b&gt; &lt;b&gt;대기업 사내포털사이트, ETL 솔루션, 알고리즘&lt;/b&gt; 등&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이러한 경험을 바탕으로&lt;/span&gt;&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;새로운 웹 에이전시 사업에서 차별화된 서비스를 제공하고자 합니다.&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;홈페이지 제작 과정&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;씨앤텍시스템즈 기술연구소에서는 비즈니스 성공 위한 철저한 5단계 홈페이지 제작 과정을 소개합니다.&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/blockquote&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;1.&amp;nbsp; 기획&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/QoqW3/btsFELuOoMi/n7GTSOERWYR8j9stKVTbE0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/QoqW3/btsFELuOoMi/n7GTSOERWYR8j9stKVTbE0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/QoqW3/btsFELuOoMi/n7GTSOERWYR8j9stKVTbE0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FQoqW3%2FbtsFELuOoMi%2Fn7GTSOERWYR8j9stKVTbE0%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;220&quot; height=&quot;220&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;시장 분석과 경쟁 조사를 통해 현명한 결정을 인도&lt;/b&gt;하며&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;브랜드 메시지와 사용자 경험을 바탕으로 전략적 기획&lt;/b&gt;을 진행합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;비즈니스 목표와 고객 기대치를 정확하게 파악&lt;/b&gt;하고&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이를 기반으로 &lt;b&gt;효과적인 웹 전략을 수립&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;2. 디자인 제시&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bPQ9lk/btsFFM7QVX4/u7slmwGQ3DY4fqGyiomwk0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bPQ9lk/btsFFM7QVX4/u7slmwGQ3DY4fqGyiomwk0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bPQ9lk/btsFFM7QVX4/u7slmwGQ3DY4fqGyiomwk0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbPQ9lk%2FbtsFFM7QVX4%2Fu7slmwGQ3DY4fqGyiomwk0%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;220&quot; height=&quot;220&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&amp;nbsp;&lt;b&gt;독창적이고 혁신적인 디자인&lt;/b&gt;을 제시하여&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;브랜드의 아이덴티티&lt;/b&gt;를 돋보이게 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;주 사용자의 환경과 시각적 효과를 균형 있게&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;고려하여 맞춤형 웹 디자인&lt;/b&gt;을 제시합니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;3. 제작&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bLeBPA/btsFEZGnCAV/N6TUI494XSPN3TuTpo6qNk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bLeBPA/btsFEZGnCAV/N6TUI494XSPN3TuTpo6qNk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bLeBPA/btsFEZGnCAV/N6TUI494XSPN3TuTpo6qNk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbLeBPA%2FbtsFEZGnCAV%2FN6TUI494XSPN3TuTpo6qNk%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;220&quot; height=&quot;220&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&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;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/h4&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;디자인 콘셉트를 기반&lt;/b&gt;으로 자사 &lt;b&gt;전문 개발인력의 &lt;/b&gt;&lt;b&gt;기술&lt;/b&gt;과&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;자체 개발 활용하여 웹사이트를 제작&lt;/b&gt;합니다.&lt;b&gt;&lt;br /&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;사용자의 편의성과 기능성을 강화&lt;/b&gt;하며,&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;다양한 디바이스와 플랫폼에서 원활한 작동&lt;/b&gt;이 가능한&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;반응형 웹사이트를 제공&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;4. 최적화&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cAgW1g/btsFEYgpcPW/GzQPRVKvWCnr6RKokV7kq0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cAgW1g/btsFEYgpcPW/GzQPRVKvWCnr6RKokV7kq0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cAgW1g/btsFEYgpcPW/GzQPRVKvWCnr6RKokV7kq0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcAgW1g%2FbtsFEYgpcPW%2FGzQPRVKvWCnr6RKokV7kq0%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;220&quot; height=&quot;220&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&amp;nbsp;&lt;/h4&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;웹사이트의 성능 최적화와 가시성을 향상하고,&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;사용자 경험을 통해 UI/UX를 보안&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;SEO 전략과 데이터 기반의 의사결정&lt;/b&gt;으로&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;웹사이트의 지속적인 향상 하는데 주력&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;h4 style=&quot;text-align: center;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;5. 배포 및 서비스 운영&lt;/b&gt;&lt;/span&gt;&lt;/h4&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ez5FoD/btsFCwk7S8j/CQWaUw18U0V4IDWMh8Kue1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ez5FoD/btsFCwk7S8j/CQWaUw18U0V4IDWMh8Kue1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ez5FoD/btsFCwk7S8j/CQWaUw18U0V4IDWMh8Kue1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fez5FoD%2FbtsFCwk7S8j%2FCQWaUw18U0V4IDWMh8Kue1%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;220&quot; height=&quot;220&quot; data-origin-width=&quot;512&quot; data-origin-height=&quot;512&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 style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;최종 웹사이트를 안정적으로 배포&lt;/b&gt;하고,&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;지속적인 운영을 위해&amp;nbsp; &lt;/b&gt;&lt;b&gt;유지보수 인력을 배치&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;추가 요청사항 및 관리 매뉴얼 배포&lt;/b&gt;로&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;효율적인 운영을 위한 최적화된 방법을 제공&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;최신 기술과 보안 취약점을 정기적으로 업데이트&lt;/b&gt;하며&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;이를 통해 &lt;b&gt;신뢰성 있는 웹 경험을 제시&lt;/b&gt;합니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;b&gt;체계적인 5단계 프로세스는 &lt;/b&gt;&lt;b&gt;오직 씨앤텍시스템즈에서만 경험할 수 있습니다.&lt;/b&gt;&lt;/blockquote&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt; Your Business with Us &lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&lt;b&gt;&lt;/b&gt;&lt;/b&gt;&lt;b&gt;시장분석과 경쟁조사를 통해 효과적인 전략 수립&lt;br /&gt;&lt;br /&gt;&lt;/b&gt;&lt;b&gt;브랜드의 강점을 최대한 발휘하며 사용자 편의성에 초점을 맞춘 디자인&lt;br /&gt;&lt;br /&gt;&lt;/b&gt;&lt;b&gt;비즈니스 목표와 고객 기대치를 파악한 철저한 전략과 장기적인 운영 및 관리&lt;/b&gt;&lt;/span&gt;&lt;/blockquote&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;홍보팜플릿_최종.png&quot; data-origin-width=&quot;5159&quot; data-origin-height=&quot;8146&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JpljL/btsFEifyMXP/AviyYByvUUdZ6Kr7lsIJz0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JpljL/btsFEifyMXP/AviyYByvUUdZ6Kr7lsIJz0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JpljL/btsFEifyMXP/AviyYByvUUdZ6Kr7lsIJz0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJpljL%2FbtsFEifyMXP%2FAviyYByvUUdZ6Kr7lsIJz0%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;5159&quot; height=&quot;8146&quot; data-filename=&quot;홍보팜플릿_최종.png&quot; data-origin-width=&quot;5159&quot; data-origin-height=&quot;8146&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;프로젝트 상담과 예상 비용에 대한 정보는 언제든 문의해시기 바랍니다.&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;전화 또는 자사의 대표 메일로 문의하시면&lt;/b&gt; 빠르게 답변받으실 수 있습니다.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;또한 &lt;b&gt;자세한 상담과 프로젝트에 대한 상세한 정보는 아래에 [비밀댓글]&lt;/b&gt; 남겨주시면 답변드리겠습니다.&lt;/span&gt;&lt;/blockquote&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style4&quot; /&gt;&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;span style=&quot;background-color: #fcfcfc; text-align: left;&quot;&gt;감사합니다&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;h3 style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Production/홈페이지 제작</category>
      <category>UIUX</category>
      <category>디지털 마케팅</category>
      <category>반응형웹</category>
      <category>웹 개발</category>
      <category>웹개발</category>
      <category>웹디자인</category>
      <category>웹에이전시</category>
      <category>웹호스팅</category>
      <category>프로잭트 의뢰</category>
      <category>홈페이지 제작</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/173</guid>
      <comments>https://cntechsystems.tistory.com/173#entry173comment</comments>
      <pubDate>Fri, 8 Mar 2024 16:08:18 +0900</pubDate>
    </item>
    <item>
      <title>CentOS7, Apache를 활용한 HTTPS 환경 구성(자체 서명 SSL/TLS)</title>
      <link>https://cntechsystems.tistory.com/172</link>
      <description>&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;안녕하세요,&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;씨앤텍시스템즈 황순호 연구원입니다.&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이번 포스트는 Apache 웹서버를 활용하여 HTTPS 웹 환경을 구성하는 방법에 대해 작성하도록 하겠습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;HTTPS는 웹 트래픽을 암호화하는 프로토콜로 클라이언트와 웹 서버 사이에 주고받는 정보를 보호합니다. 개발 환경에서 이러한 HTTPS 구성이 필요한 이유는 타 도메인에 대한 쿠키 전송이나 webRTC와 같은 기술을 적용할 때 HTTP 환경에서는 웹 브라우저 보안 정책 상 제한되는 기능이 많기 때문에 개발 및 테스트 어려움을 겪게 됩니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;본래 HTTPS 구성을 위해서는 Digicert, GlobalSign, Comodo 등 다양한 인증기관(CA)에 신청하여 인증서를 받는 과정이 필요합니다. 또, 제약사항이 있으나 무료로 인증서를 발급하는 CA도 존재합니다. 개발을 테스트하기 위한 환경에서는 이러한 과정 없이 자체적으로 인증서에 서명하고 발급하여 사용할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이번 목표는 CentOS7이 설치된 서버와 같은 네트워크에 존재하는 Windows 클라이언트에서 https 프로토콜을 이용한 통신을 진행하는 것입니다.&lt;/p&gt;
&lt;hr data-ke-style=&quot;style2&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;1. openssl 설치&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;먼저 CentOS에서 openssl을 통하여 인증서를 생성하도록 합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;openssl이 설치되지 않은 경우 다음 명령어를 이용하여 설치합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1707895152627&quot; class=&quot;cmake&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;sudo yum install openssl&lt;/code&gt;&lt;/pre&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;설치가 되었는지 확인합니다.&lt;/p&gt;
&lt;pre id=&quot;code_1707895152628&quot; class=&quot;applescript&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;openssl version&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;285&quot; data-origin-height=&quot;33&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dxGR8Y/btsERz3axkf/GjQctZoVaBYOcmnVkXVXE0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dxGR8Y/btsERz3axkf/GjQctZoVaBYOcmnVkXVXE0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dxGR8Y/btsERz3axkf/GjQctZoVaBYOcmnVkXVXE0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdxGR8Y%2FbtsERz3axkf%2FGjQctZoVaBYOcmnVkXVXE0%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;285&quot; height=&quot;33&quot; data-origin-width=&quot;285&quot; data-origin-height=&quot;33&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;2.&amp;nbsp; 웹페이지 생성&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;Apache에서 클라이언트에 제공할 테스트용 웹페이지를 하나 생성합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저의 경우는 /var/www/testweb 디렉토리에 웹페이지를 생성하였습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1707895152628&quot; class=&quot;dts&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;mkdir /var/www/testweb
echo &quot;&amp;lt;h1&amp;gt;https&amp;lt;/h1&amp;gt;&quot; &amp;gt;/var/www/testweb/index.html&lt;/code&gt;&lt;/pre&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;3.&amp;nbsp; windows hosts 도메인 등록&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;발급받아 사용가능한 도메인이 있다면 3번 항목은 생략하도록 합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;CentOS가 동작하는 서버의 IP를 알기 위해 ip addr 명령어를 입력합니다. 현재 사용하는 centos7은 내부 네트워크 상에 192.168.1.69 IP 주소를 가지고 있습니다.&amp;nbsp;&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;780&quot; data-origin-height=&quot;215&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bvKCFM/btsEP3KswAH/bRfusR1MlHVv7Vz6QKd4l1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bvKCFM/btsEP3KswAH/bRfusR1MlHVv7Vz6QKd4l1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bvKCFM/btsEP3KswAH/bRfusR1MlHVv7Vz6QKd4l1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbvKCFM%2FbtsEP3KswAH%2FbRfusR1MlHVv7Vz6QKd4l1%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;780&quot; height=&quot;215&quot; data-origin-width=&quot;780&quot; data-origin-height=&quot;215&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;접속에 사용할 임의의 도메인을 정하여 windows 클라이언트에 등록합니다.&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저는 test-ssl.com을 접속할 도메인명으로 정하였고&amp;nbsp; hosts 파일에 이를 등록하도록 합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;windows CMD를 관리자 권한으로 실행 후 다음 명령어를 입력합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;i&gt;※ Windows10 기준 파일 경로이며 사용하는 Windows 버전에 따라 달라질 수 있습니다.&lt;/i&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1707895152630&quot; class=&quot;taggerscript&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;notepad C:\Windows\system32\drivers\etc\hosts&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;host 파일.png&quot; data-origin-width=&quot;545&quot; data-origin-height=&quot;31&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cNWbQZ/btsES4uQdpu/fZfwWhGzBraqcPpAAZo5iK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cNWbQZ/btsES4uQdpu/fZfwWhGzBraqcPpAAZo5iK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cNWbQZ/btsES4uQdpu/fZfwWhGzBraqcPpAAZo5iK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNWbQZ%2FbtsES4uQdpu%2FfZfwWhGzBraqcPpAAZo5iK%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;545&quot; height=&quot;31&quot; data-filename=&quot;host 파일.png&quot; data-origin-width=&quot;545&quot; data-origin-height=&quot;31&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;host 파일 수정.png&quot; data-origin-width=&quot;601&quot; data-origin-height=&quot;488&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/djocL4/btsERxK2SZb/E7AYCZf8ckeZ19tEnsEfK0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/djocL4/btsERxK2SZb/E7AYCZf8ckeZ19tEnsEfK0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/djocL4/btsERxK2SZb/E7AYCZf8ckeZ19tEnsEfK0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdjocL4%2FbtsERxK2SZb%2FE7AYCZf8ckeZ19tEnsEfK0%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;601&quot; height=&quot;488&quot; data-filename=&quot;host 파일 수정.png&quot; data-origin-width=&quot;601&quot; data-origin-height=&quot;488&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;메모장이 실행되며 위 이미지와 같은 화면이 출력됩니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;맨 밑에 한 줄을 입력하였고 이로써 test-ssl.com 도메인에 대한 IP주소는 192.168.1.69로 인식하게 되었습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;4.&amp;nbsp; openssl을 이용한 인증서 생성&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;수동으로 인증서를 만들 경우 주체 대체 이름이 설정되지 않아 이후 HTTPS 구성을 하여도 웹 브라우저에서 경고창을 출력합니다. 따라서 인증서 생성에 앞서 인증서 설정 파일을 미리 생성합니다. CentOS로 돌아와 vi 또는 사용하는 텍스트 에디터로 다음과 같이 내용 작성 후 저장합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1707895152630&quot; class=&quot;ini&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;[req]
default_bits = 2048
prompt = no
default_md = sha256
x509_extensions = ext
distinguished_name = dn
[dn]
C = KR
ST = Seoul
L = Seoul
O = CNT
emailAddress = CNT@mail.com
CN = *.test-ssl.com //사용할 도메인 명으로 와일드 카드를 적용하였음
[ext]
subjectAltName = @alt_names
[alt_names]
DNS.1 = test-ssl.com //주체 대체 이름 1
DNS.2 = www.test-ssl.com //주체 대체 이름 2&lt;/code&gt;&lt;/pre&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저는 이 파일을 san.conf 이름으로 저장하였습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;이제 위 설정파일을 바탕으로 인증서를 생성합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;san.conf가 저장된 디렉토리에서 다음 명령어를 입력하여 키와 인증서를 동시에 생성합니다.&lt;/p&gt;
&lt;pre id=&quot;code_1707895152631&quot; class=&quot;vim&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;openssl req -new -x509 -newkey rsa:2048 -sha256 -nodes -keyout server.key -days 3600 -out server.crt -config san.conf&lt;/code&gt;&lt;/pre&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;272&quot; data-origin-height=&quot;55&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/wWJ2L/btsETjkZneZ/T87UB1uFfJ32FDWYJZQp4K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/wWJ2L/btsETjkZneZ/T87UB1uFfJ32FDWYJZQp4K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/wWJ2L/btsETjkZneZ/T87UB1uFfJ32FDWYJZQp4K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FwWJ2L%2FbtsETjkZneZ%2FT87UB1uFfJ32FDWYJZQp4K%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;272&quot; height=&quot;55&quot; data-origin-width=&quot;272&quot; data-origin-height=&quot;55&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;5.&amp;nbsp; Apache 설정&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;해당키와 인증서 파일을 Apache에 등록하기 위해&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;임의의 디렉토리를 만들어 키와 인증서 파일을 저장합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저는 apache가 설치된 디렉토리 내 키와 인증서 파일을 저장하였습니다.(/etc/httpd/conf.d/key)&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;새로운 apache 설정파일을 생성하고 다음 내용을 작성하여 저장합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;저는 testweb.conf 이름으로 저장하였습니다. (/etc/httpd/conf.d/testweb.conf)&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1707895152632&quot; class=&quot;apache&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;&amp;lt;VirtualHost *:443&amp;gt;
    ServerName test-ssl.com
    DocumentRoot /var/www/testweb
    SSLEngine             on
    SSLCertificateFile    /etc/httpd/conf.d/KEY/server.crt
    SSLCertificateKeyFile /etc/httpd/conf.d/KEY/server.key
&amp;lt;/VirtualHost&amp;gt;

&amp;lt;VirtualHost *:80&amp;gt;
    ServerName test-ssl.com
    Redirect / https://test-ssl.com
&amp;lt;/VirtualHost&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;https 프로토콜이 동작하는 포트인 443으로 요청이 오면 앞서 생성한 /var/www/testweb 디렉토리에 index.html을 제공하도록 설정되었습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;apache 웹서버를 재실행시킵니다.&lt;/p&gt;
&lt;pre id=&quot;code_1707895152633&quot; class=&quot;ebnf&quot; style=&quot;color: #333333; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;sudo systemctl restart httpd&lt;/code&gt;&lt;/pre&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;6.&amp;nbsp; Windows 인증서 설치&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;거의 다 왔는데요, 공인 인증서가 아닌 자체적으로 서명된 인증서이므로 클라이언트에서는 아직 유효한 인증서로 인식하지 않습니다. 따라서 접속할 클라이언트에 앞서 생성한 server.crt 파일을 설치합니다.&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;466&quot; data-origin-height=&quot;578&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bEhQCS/btsES061BDs/0RPlLoNgLUWwNzoo8jS8w1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bEhQCS/btsES061BDs/0RPlLoNgLUWwNzoo8jS8w1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bEhQCS/btsES061BDs/0RPlLoNgLUWwNzoo8jS8w1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbEhQCS%2FbtsES061BDs%2F0RPlLoNgLUWwNzoo8jS8w1%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;466&quot; height=&quot;578&quot; data-origin-width=&quot;466&quot; data-origin-height=&quot;578&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&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;607&quot; data-origin-height=&quot;567&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/wgrte/btsELptW5Yg/WqS8t0f7mFR5A19HyA7PW0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/wgrte/btsELptW5Yg/WqS8t0f7mFR5A19HyA7PW0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/wgrte/btsELptW5Yg/WqS8t0f7mFR5A19HyA7PW0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fwgrte%2FbtsELptW5Yg%2FWqS8t0f7mFR5A19HyA7PW0%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;607&quot; height=&quot;567&quot; data-origin-width=&quot;607&quot; data-origin-height=&quot;567&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&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;606&quot; data-origin-height=&quot;564&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/3HFsM/btsESng9Lgg/WMxW4pMdkJrr7RRvUcwaiK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/3HFsM/btsESng9Lgg/WMxW4pMdkJrr7RRvUcwaiK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/3HFsM/btsESng9Lgg/WMxW4pMdkJrr7RRvUcwaiK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3HFsM%2FbtsESng9Lgg%2FWMxW4pMdkJrr7RRvUcwaiK%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;606&quot; height=&quot;564&quot; data-origin-width=&quot;606&quot; data-origin-height=&quot;564&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;h4 style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;7.&amp;nbsp; HTTPS 동작 확인&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;인증서 설치까지 마쳤다면 이제 웹브라우저를 이용하여 test-ssl.com에 접속을 합니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&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;674&quot; data-origin-height=&quot;307&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/0uTrd/btsESM2hH2T/N1wE3aOuJvwwtUlyegjvWk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/0uTrd/btsESM2hH2T/N1wE3aOuJvwwtUlyegjvWk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/0uTrd/btsESM2hH2T/N1wE3aOuJvwwtUlyegjvWk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0uTrd%2FbtsESM2hH2T%2FN1wE3aOuJvwwtUlyegjvWk%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;674&quot; height=&quot;307&quot; data-origin-width=&quot;674&quot; data-origin-height=&quot;307&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;857&quot; data-origin-height=&quot;545&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bqdU4e/btsES842ntp/s0aFYLnkCORIkT2e0UXkN1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bqdU4e/btsES842ntp/s0aFYLnkCORIkT2e0UXkN1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bqdU4e/btsES842ntp/s0aFYLnkCORIkT2e0UXkN1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqdU4e%2FbtsES842ntp%2Fs0aFYLnkCORIkT2e0UXkN1%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;857&quot; height=&quot;545&quot; data-origin-width=&quot;857&quot; data-origin-height=&quot;545&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr data-ke-style=&quot;style7&quot; data-ke-type=&quot;horizontalRule&quot; /&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;별도의 경고 없이 접속이 되고 인증서에 대한 정보도 확인할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;감사합니다.&lt;/b&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web Programming</category>
      <category>apache</category>
      <category>HTTPS</category>
      <category>SSL</category>
      <category>TLS</category>
      <author>씨애</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/172</guid>
      <comments>https://cntechsystems.tistory.com/172#entry172comment</comments>
      <pubDate>Wed, 14 Feb 2024 16:25:20 +0900</pubDate>
    </item>
    <item>
      <title>How to install Oracle21c on RHEL 8.9</title>
      <link>https://cntechsystems.tistory.com/171</link>
      <description>&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;안녕하세요, &lt;span style=&quot;color: #006dd7;&quot;&gt;씨앤텍시스템즈 이형빈 연구원&lt;/span&gt;입니다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;이번 포스트는 Redhat 8.9 환경에 Oracle21c 버전을 설치하는 방법을 소개해 드리겠습니다.&lt;/b&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;246&quot; data-origin-height=&quot;121&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bv8Oly/btsCZhp3Tap/C4HWexK0o5Xxrxtb5nvbk0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bv8Oly/btsCZhp3Tap/C4HWexK0o5Xxrxtb5nvbk0/img.png&quot; data-alt=&quot;ORACLE LOGO&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bv8Oly/btsCZhp3Tap/C4HWexK0o5Xxrxtb5nvbk0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbv8Oly%2FbtsCZhp3Tap%2FC4HWexK0o5Xxrxtb5nvbk0%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;246&quot; height=&quot;121&quot; data-origin-width=&quot;246&quot; data-origin-height=&quot;121&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;ORACLE LOGO&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;-&amp;nbsp; 사용 환경&lt;/p&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;Remote Desktop Client : MobaXterm&lt;/li&gt;
&lt;li&gt;Virtual Machine Software : VMware Workstation&lt;/li&gt;
&lt;li&gt;OS : Red Hat Enterprise Linux 8.9&lt;/li&gt;
&lt;li&gt;Hard Dist : 40GB&lt;/li&gt;
&lt;li&gt;Memory : 4GB&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1. Oracle21c 다운로드&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;a href=&quot;https://www.oracle.com/database/technologies/oracle21c-linux-downloads.html&quot;&gt;https://www.oracle.com/database/technologies/oracle21c-linux-downloads.html&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1704260524327&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;Oracle Database 21c Download for Linux x86-64&quot; data-og-description=&quot;Oracle Database 21c Grid Infrastructure (21.3) for Linux x86-64 Contains the Grid Infrastructure Software including Oracle Clusterware, Automated Storage Management (ASM), and ASM Cluster File System. Download and install prior to installing Oracle Real Ap&quot; data-og-host=&quot;www.oracle.com&quot; data-og-source-url=&quot;https://www.oracle.com/database/technologies/oracle21c-linux-downloads.html&quot; data-og-url=&quot;https://www.oracle.com/database/technologies/oracle21c-linux-downloads.html&quot; data-og-image=&quot;&quot;&gt;&lt;a href=&quot;https://www.oracle.com/database/technologies/oracle21c-linux-downloads.html&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://www.oracle.com/database/technologies/oracle21c-linux-downloads.html&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&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;Oracle Database 21c Download for Linux x86-64&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;Oracle Database 21c Grid Infrastructure (21.3) for Linux x86-64 Contains the Grid Infrastructure Software including Oracle Clusterware, Automated Storage Management (ASM), and ASM Cluster File System. Download and install prior to installing Oracle Real Ap&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;www.oracle.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위의 링크에 들어가서 &lt;span&gt;Oracle Database 21c (21.3) for Linux x86-64 &lt;/span&gt;&lt;span&gt;를 다운로드 받아 줍니다&lt;span&gt;.&amp;nbsp;&lt;/span&gt;&lt;/span&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;span&gt;&lt;span&gt;2. 사용자와 그룹을 만들어 줍니다.&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1704260820823&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# groupadd -g 54321 oinstall
[root@localhost ~]# groupadd -g 54322 dba
[root@localhost ~]# groupadd -g 54323 oper
[root@localhost ~]# useradd -u 54321 -g oinstall -G dba,oper oracle21c
[root@localhost ~]# passwd oracle21c&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;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;oinstall(Oracle Inventory Group) : Oracle &lt;/span&gt;소프트웨어 설치 시의 기본 그룹으로 설치된 소프트웨어의 인벤토리 정보를 관리합니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;dba(Database Administrator Group) : &lt;/span&gt;데이터베이스 관리자 권한을 가진 사용자를 그룹화한 것입니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;oper(Operator Group) : &lt;/span&gt;데이터베이스 운영을 위한 추가적인 권한을 제공합니다&lt;span&gt;. &lt;/span&gt;데이터베이스를 운영하는데 필요한 권한을 가진 사용자를 그룹화 합니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;oracle21c : oracle21c &lt;/span&gt;사용자는 소유자로서&lt;span&gt;, &lt;/span&gt;데이터베이스 서비스를 운영하는데 사용합니다&lt;span&gt;. &lt;/span&gt;이 사용자는&lt;span&gt; oinstall &lt;/span&gt;그룹의 일부이며&lt;span&gt;, &lt;span&gt;&amp;nbsp; &lt;/span&gt;dba &lt;/span&gt;및&lt;span&gt; oper &lt;/span&gt;그룹에도 속해 있어 데이터베이스를 설치하고 운영하는데 필요한 권한을 가지고 있습니다&lt;span&gt;. &lt;/span&gt;따라서 이 사용자가 소유하는 디렉토리에는 데이터베이스 소프트웨어가 설치됩니다&lt;span&gt;.&lt;/span&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;3. 이제 리소스를 충분히 할당하기 위한 설정을 해보겠습니다.&lt;/p&gt;
&lt;pre id=&quot;code_1704261158067&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# vi /etc/security/limits.conf&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;맨 아래줄의 다음에 대한 내용을 추가하고 저장합니다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704261237291&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;oracle   soft   nofile    1024
oracle   hard   nofile    65536
oracle   soft   nproc    16384
oracle   hard   nproc    16384
oracle   soft   stack    10240
oracle   hard   stack    32868
oracle   hard   memlock    134217728
oracle   soft   memlock    134217728&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;&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;4. 다음은 오라클 설치를 위해 커널 파라미터 값을 설정하고, 시스템이 부팅될 때마다 자동으로 적용하게 해봅시다.&lt;/p&gt;
&lt;pre id=&quot;code_1704261493343&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# vi /etc/sysctl.conf&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;맨 아래에 다음에 대한 내용을 추가하고 저장합니다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704261542748&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;fs.file-max = 6815744
kernel.sem = 250 32000 100 128
kernel.shmmni = 4096
kernel.shmall = 1073741824
kernel.shmmax = 4398046511104
kernel.panic_on_oops = 1
net.core.rmem_default = 262144
net.core.rmem_max = 4194304
net.core.wmem_default = 262144
net.core.wmem_max = 1048576
net.ipv4.conf.all.rp_filter = 2
net.ipv4.conf.default.rp_filter = 2
fs.aio-max-nr = 1048576
net.ipv4.ip_local_port_range = 9000 65500&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 id=&quot;code_1704261613084&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# sysctl -p&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;5. 오라클을 설치할 홈 디렉토리를 생성하고 사용자에게 소유권을 부여합니다.&lt;/p&gt;
&lt;pre id=&quot;code_1704261977715&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# mkdir -p /u01/app/oracle/product/21.0.0.0/
[root@localhost ~]# chown -R oracle21c:oinstall /u01/
[root@localhost ~]# chmod -R 775 /u01/&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;6. 자 이제 Oracle21c 설치를 위해 사전패키지 설치 작업을 수행해 봅시다.&lt;/p&gt;
&lt;pre id=&quot;code_1704261702428&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# yum -y install sysstat-11.7.3-11.el8.x86_64
[root@localhost ~]# yum -y install ksh-20120801-259.el8.x86_64
[root@localhost ~]# yum -y install glibc
[root@localhost ~]# yum -y install make-1:4.2.1-11.el8.x86_64&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;7. 네트워크를 통한 문제가 발생하지 않게 하기위해 방화벽 서비스를 중지하고 비활성화 합니다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704261871348&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# systemctl stop firewalld
[root@localhost ~]# systemctl disable firewalld&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;8.&amp;nbsp;이제&amp;nbsp;생성한&amp;nbsp;oracle21c&amp;nbsp;사용자로&amp;nbsp;로그인하여&amp;nbsp;환경&amp;nbsp;변수를&amp;nbsp;설정해&amp;nbsp;보겠습니다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704262900884&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# su - oracle21c&lt;/code&gt;&lt;/pre&gt;
&lt;pre id=&quot;code_1704262318535&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost ~]$ vi ~/.bash_profile&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 id=&quot;code_1704262385363&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# Oracle Settings
PATH=$PATH:$HOME/.local/bin:$HOME/bin

export PATH

export ORACLE_BASE=/u01/app/oracle
export ORACLE_HOME=$ORACLE_BASE/product/21.0.0.0
export ORACLE_SID=CNT
export PATH=/usr/sbin:$PATH
export PATH=$ORACLE_HOME/bin:$PATH
export LD_LIBRARY_PATH=$ORACLE_HOME/lib:/lib:/usr/lib
export CLASSPATH=$ORACLE_HOME/jlib:$ORACLE_HOME/rdbms/jlib&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 id=&quot;code_1704262451192&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracel21c@localhost ~]$ cat ~/.bash_profile&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704262623687&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# .bash_profile

# Get the aliases and functions
if [ -f ~/.bashrc ]; then
        . ~/.bashrc
fi

# User specific environment and startup programs

# Oracle Settings
PATH=$PATH:$HOME/.local/bin:$HOME/bin

export PATH

export ORACLE_BASE=/u01/app/oracle
export ORACLE_HOME=$ORACLE_BASE/product/21.0.0.0
export ORACLE_SID=CNT
export PATH=/usr/sbin:$PATH
export PATH=$ORACLE_HOME/bin:$PATH
export LD_LIBRARY_PATH=$ORACLE_HOME/lib:/lib:/usr/lib
export CLASSPATH=$ORACLE_HOME/jlib:$ORACLE_HOME/rdbms/jlib&lt;/code&gt;&lt;/pre&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;9. 이제 1번에서 다운받은 LINUX.X64_213000_db_home을 MobaXterm을 이용하여 옮겨주세요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;옮겨준 뒤 리스트를 확인해 봅시다.&lt;/p&gt;
&lt;pre id=&quot;code_1704264280198&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# ls -lst&lt;/code&gt;&lt;/pre&gt;
&lt;pre id=&quot;code_1704264333038&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;3036356 -rw-r--r--. 1 root root 3109225519  1월  2 16:38 LINUX.X64_213000_db_home.zip
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 공개
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 다운로드
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 문서
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 바탕화면
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 비디오
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 사진
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 서식
      0 drwxr-xr-x. 2 root root          6  1월  2 16:24 음악
      4 -rw-r--r--. 1 root root       1312  1월  2 16:22 initial-setup-ks.cfg
      4 -rw-------. 1 root root        974  1월  2 16:11 anaconda-ks.cfg&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 id=&quot;code_1704264513711&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# cp LINUX.X64_213000_db_home.zip /u01/app/oracle/product/21.0.0.0/&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;MobaXterm에 탭을 하나 더 열고 oracle21c 사용자로 로그인 해줍니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;잘 복사되었는지 복사해 준 경로로 가봅시다.&lt;/p&gt;
&lt;pre id=&quot;code_1704264618843&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost ~]$ cd /u01/app/oracle/product/21.0.0.0/
[oracle21c@localhost 21.0.0.0]$ ls -lst
합계 3036356
3036356 -rw-r--r--. 1 oracle21c oinstall 3109225519  1월  2 16:48 LINUX.X64_213000_db_home.zip&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;그런데 압축파일의 권한에 대한 퍼미션이 생각한 것과 다르군요.&amp;nbsp; root 사용자로 다시 돌아가서 권한을 다시 주겠습니다.&lt;/p&gt;
&lt;pre id=&quot;code_1704265060340&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# chown -R oracle21c:oinstall /u01
[root@localhost ~]# chmod -R 775 /u01&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;권한을 주었으니 다시 oracle21c 사용자로 돌아가 변경 되었는지 확인 해보겠습니다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704265174878&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost 21.0.0.0]$ ls -lst
합계 3036356
3036356 -rwxrwxr-x. 1 oracle21c oinstall 3109225519  1월  2 16:56 LINUX.X64_213000_db_home.zip&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;&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;10. 이제 압축을 풀어봅시다.&lt;/p&gt;
&lt;pre id=&quot;code_1704265262844&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost 21.0.0.0]$ unzip LINUX.X64_213000_db_home.zip&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;&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;p data-ke-size=&quot;size16&quot;&gt;정상적으로 압축이 풀렸다면 이런 형태로 나오게 됩니다.&lt;/p&gt;
&lt;pre id=&quot;code_1704265358790&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost 21.0.0.0]$ ls -lst
합계 3036444
3036356 -rwxrwxr-x.  1 oracle21c oinstall 3109225519  1월  2 16:56 LINUX.X64_213000_db_home.zip
      4 drwxrwxr-x. 11 oracle21c oinstall       4096  1월  2 17:49 install
      0 drwxrwxr-x.  4 oracle21c oinstall         30  1월  2 17:33 cfgtoollogs
     12 drwxrwxr-x.  2 oracle21c oinstall       8192  1월  2 17:33 bin
      0 drwxrwxr-x.  4 oracle21c oinstall         87  1월  2 17:33 clone
      0 drwxrwxr-x.  5 oracle21c oinstall        173  1월  2 17:33 deinstall
      0 drwxrwxr-x.  2 oracle21c oinstall        102  1월  2 17:33 addnode
      4 drwxrwxr-x.  8 oracle21c oinstall       4096  1월  2 17:33 oui
      4 drwxrwxr-x. 13 oracle21c oinstall       4096  1월  2 17:33 inventory
      4 -rwxrwxr-x.  1 oracle21c oinstall        507  1월  2 17:33 root.sh
     16 drwxrwxr-x.  4 oracle21c oinstall      12288  1월  2 17:33 lib
      0 drwxrwxr-x.  6 oracle21c oinstall         53  1월  2 17:32 sqlplus
      4 -rwxrwxr-x.  1 oracle21c oinstall         56  1월  2 17:31 oraInst.loc
      0 drwxrwxr-x.  9 oracle21c oinstall         93  7월 28  2021 assistants
      0 drwxrwxr-x.  7 oracle21c oinstall         69  7월 28  2021 crs
      0 drwxrwxr-x.  8 oracle21c oinstall         82  7월 28  2021 javavm
      4 drwxrwxr-x.  7 oracle21c oinstall       4096  7월 28  2021 jdk
      4 drwxrwxr-x. 13 oracle21c oinstall       4096  7월 28  2021 OPatch
      0 drwxrwxr-x.  5 oracle21c oinstall         41  7월 28  2021 hs
      0 drwxrwxr-x. 10 oracle21c oinstall        106  7월 28  2021 network
      0 drwxrwxr-x. 13 oracle21c oinstall        140  7월 28  2021 rdbms
      4 -rwxrwxr-x.  1 oracle21c oinstall        695  7월 28  2021 root.sh.old
      0 drwxrwxr-x. 11 oracle21c oinstall        119  7월 28  2021 ctx
      0 drwxrwxr-x.  3 oracle21c oinstall         20  7월 28  2021 demo
      8 drwxrwxr-x.  2 oracle21c oinstall       4096  7월 28  2021 jlib
      0 drwxrwxr-x.  8 oracle21c oinstall        101  7월 28  2021 odbc
      0 drwxrwxr-x.  5 oracle21c oinstall        119  7월 28  2021 sdk
      0 drwxrwxr-x.  2 oracle21c oinstall         23  7월 28  2021 ords
      0 drwxrwxr-x.  2 oracle21c oinstall         26  7월 28  2021 QOpatch
      0 drwxrwxr-x.  2 oracle21c oinstall         29  7월 28  2021 instantclient
      0 drwxrwxr-x.  2 oracle21c oinstall         33  7월 28  2021 utl
      0 drwxrwxr-x.  6 oracle21c oinstall         78  7월 28  2021 plsql
      4 drwxrwxr-x.  3 oracle21c oinstall       4096  7월 28  2021 sqlpatch
      0 drwxrwxr-x.  2 oracle21c oinstall         22  7월 28  2021 dbs
      0 drwxrwxr-x.  5 oracle21c oinstall         52  7월 28  2021 R
      0 drwxrwxr-x.  3 oracle21c oinstall         18  7월 28  2021 css
      0 drwxrwxr-x.  7 oracle21c oinstall         71  7월 28  2021 cv
      0 drwxrwxr-x.  3 oracle21c oinstall         20  7월 28  2021 data
      0 drwxrwxr-x.  3 oracle21c oinstall         20  7월 28  2021 diagnostics
      0 drwxrwxr-x.  3 oracle21c oinstall         19  7월 28  2021 dv
      0 drwxrwxr-x.  4 oracle21c oinstall         32  7월 28  2021 has
      0 drwxrwxr-x.  3 oracle21c oinstall         17  7월 28  2021 jdbc
      0 drwxrwxr-x. 10 oracle21c oinstall        112  7월 28  2021 ldap
      0 drwxrwxr-x.  8 oracle21c oinstall         76  7월 28  2021 md
      0 drwxrwxr-x.  4 oracle21c oinstall         31  7월 28  2021 mgw
      0 drwxrwxr-x.  5 oracle21c oinstall         46  7월 28  2021 nls
      0 drwxrwxr-x.  5 oracle21c oinstall         42  7월 28  2021 olap
      0 drwxrwxr-x.  4 oracle21c oinstall         35  7월 28  2021 oml4py
      0 drwxrwxr-x.  7 oracle21c oinstall         65  7월 28  2021 opmn
      0 drwxrwxr-x.  4 oracle21c oinstall         34  7월 28  2021 oracore
      0 drwxrwxr-x.  6 oracle21c oinstall         52  7월 28  2021 ord
      0 drwxrwxr-x.  3 oracle21c oinstall         19  7월 28  2021 oss
      0 drwxrwxr-x.  4 oracle21c oinstall         33  7월 28  2021 owm
      0 drwxrwxr-x.  5 oracle21c oinstall         39  7월 28  2021 perl
      0 drwxrwxr-x.  7 oracle21c oinstall         67  7월 28  2021 precomp
      0 drwxrwxr-x.  4 oracle21c oinstall         28  7월 28  2021 python
      0 drwxrwxr-x.  4 oracle21c oinstall         29  7월 28  2021 racg
      0 drwxrwxr-x.  3 oracle21c oinstall         21  7월 28  2021 relnotes
      4 -rwxrwxr-x.  1 oracle21c oinstall         10  7월 28  2021 root.sh.old.1
      0 drwxrwxr-x.  3 oracle21c oinstall         18  7월 28  2021 slax
      0 drwxrwxr-x.  4 oracle21c oinstall         41  7월 28  2021 sqldeveloper
      0 drwxrwxr-x.  3 oracle21c oinstall         17  7월 28  2021 sqlj
      0 drwxrwxr-x.  6 oracle21c oinstall         54  7월 28  2021 srvm
      0 drwxrwxr-x.  4 oracle21c oinstall         31  7월 28  2021 suptools
      0 drwxrwxr-x.  3 oracle21c oinstall         17  7월 28  2021 ucp
      0 drwxrwxr-x.  4 oracle21c oinstall         31  7월 28  2021 usm
      0 drwxrwxr-x.  7 oracle21c oinstall         69  7월 28  2021 xdk
      4 -rwxrwxr-x.  1 oracle21c oinstall       2927  7월 20  2020 schagent.conf
      4 -rwxrwxr-x.  1 oracle21c oinstall       1783  3월  9  2017 runInstaller
      4 -rwxrwxr-x.  1 oracle21c oinstall        852  8월 18  2015 env.ora&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;11. 이제 설치 마법사를 실행합니다.&lt;/p&gt;
&lt;pre id=&quot;code_1704265418803&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost 21.0.0.0]$ ./runInstaller&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;12. 소프트웨어만 설정 을 누른 후 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진1.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/puHiN/btsC0aK1amp/c4C6DPjBhd6lWWJr10bHaK/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/puHiN/btsC0aK1amp/c4C6DPjBhd6lWWJr10bHaK/img.jpg&quot; data-alt=&quot;사진1&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/puHiN/btsC0aK1amp/c4C6DPjBhd6lWWJr10bHaK/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpuHiN%2FbtsC0aK1amp%2Fc4C6DPjBhd6lWWJr10bHaK%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진1.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&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 data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;13. 단일 인스턴스 데이터베이스 설치 를 누른 후 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진2.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/nM9af/btsCUBCCCsn/0AD092BEoU7MvfWL5WOxh1/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/nM9af/btsCUBCCCsn/0AD092BEoU7MvfWL5WOxh1/img.jpg&quot; data-alt=&quot;사진2&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/nM9af/btsCUBCCCsn/0AD092BEoU7MvfWL5WOxh1/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnM9af%2FbtsCUBCCCsn%2F0AD092BEoU7MvfWL5WOxh1%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진2.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&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;14. Enterprise Edition 을 누른 후 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진3.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/doeF8g/btsCZ8sUG0u/qKi2zLVmvGPpTJfdLSXf00/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/doeF8g/btsCZ8sUG0u/qKi2zLVmvGPpTJfdLSXf00/img.jpg&quot; data-alt=&quot;사지3&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/doeF8g/btsCZ8sUG0u/qKi2zLVmvGPpTJfdLSXf00/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdoeF8g%2FbtsCZ8sUG0u%2FqKi2zLVmvGPpTJfdLSXf00%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진3.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사지3&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;15. Oracle 기본 위치 를 /u01/app/oracle로 설정하고 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진4.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/eQCwYI/btsC4p8ifXg/5j4DQvxLFKtkpVNhzLJ3gk/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/eQCwYI/btsC4p8ifXg/5j4DQvxLFKtkpVNhzLJ3gk/img.jpg&quot; data-alt=&quot;사진4&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/eQCwYI/btsC4p8ifXg/5j4DQvxLFKtkpVNhzLJ3gk/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FeQCwYI%2FbtsC4p8ifXg%2F5j4DQvxLFKtkpVNhzLJ3gk%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진4.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진4&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;16. 인벤토리 디렉토리 를 /u01/app/oraInventory 로 설정&amp;nbsp;후 다음으로 넘어가세요.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;oraInventory 그룹 이름 은 oinstall로 변경해 주세요.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진5.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cBgEul/btsCVI2FrJu/vOIw2g2IkuyF1HTk6akzOK/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cBgEul/btsCVI2FrJu/vOIw2g2IkuyF1HTk6akzOK/img.jpg&quot; data-alt=&quot;사진5&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cBgEul/btsCVI2FrJu/vOIw2g2IkuyF1HTk6akzOK/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcBgEul%2FbtsCVI2FrJu%2FvOIw2g2IkuyF1HTk6akzOK%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진5.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진5&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;17. 데이터베이스 운영자(OSOPER)그룹(선택사항) 은 oinstall 로 설정 후 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진6.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/12JYb/btsCZ3ypX6k/NkFAruRkGwDkk1PgxhumRK/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/12JYb/btsCZ3ypX6k/NkFAruRkGwDkk1PgxhumRK/img.jpg&quot; data-alt=&quot;사진6&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/12JYb/btsCZ3ypX6k/NkFAruRkGwDkk1PgxhumRK/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F12JYb%2FbtsCZ3ypX6k%2FNkFAruRkGwDkk1PgxhumRK%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진6.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진6&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;18. 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진7.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bydEqR/btsCU1uCcoJ/qkKLoxYMvX1xOaKc0GDqp1/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bydEqR/btsCU1uCcoJ/qkKLoxYMvX1xOaKc0GDqp1/img.jpg&quot; data-alt=&quot;사진7&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bydEqR/btsCU1uCcoJ/qkKLoxYMvX1xOaKc0GDqp1/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbydEqR%2FbtsCU1uCcoJ%2FqkKLoxYMvX1xOaKc0GDqp1%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진7.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진7&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;19. 필요 조건 검사를 확인하고 다음으로 넘어가세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진8.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/nSS81/btsCTWtvNBh/Zl4uqe35Bntu7TGd1MCMC1/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/nSS81/btsCTWtvNBh/Zl4uqe35Bntu7TGd1MCMC1/img.jpg&quot; data-alt=&quot;사진8&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/nSS81/btsCTWtvNBh/Zl4uqe35Bntu7TGd1MCMC1/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FnSS81%2FbtsCTWtvNBh%2FZl4uqe35Bntu7TGd1MCMC1%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진8.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진8&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;20. 요약을 확인 후 설치를 눌러주세요.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진9.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b92n8p/btsCVFY2Kqu/lRe4Y5ZoE6bIf0pGepyQN0/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b92n8p/btsCVFY2Kqu/lRe4Y5ZoE6bIf0pGepyQN0/img.jpg&quot; data-alt=&quot;사진9&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b92n8p/btsCVFY2Kqu/lRe4Y5ZoE6bIf0pGepyQN0/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb92n8p%2FbtsCVFY2Kqu%2FlRe4Y5ZoE6bIf0pGepyQN0%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진9.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진9&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;21.&amp;nbsp; 설치가 정상적으로 진행 중입니다.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진10.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/1rFj9/btsCX36v3O0/FEK8ka3y0aKTcRAT9Q0N2K/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/1rFj9/btsCX36v3O0/FEK8ka3y0aKTcRAT9Q0N2K/img.jpg&quot; data-alt=&quot;사진10&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/1rFj9/btsCX36v3O0/FEK8ka3y0aKTcRAT9Q0N2K/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1rFj9%2FbtsCX36v3O0%2FFEK8ka3y0aKTcRAT9Q0N2K%2Fimg.jpg&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;801&quot; height=&quot;632&quot; data-filename=&quot;사진10.jpg&quot; data-origin-width=&quot;801&quot; data-origin-height=&quot;632&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진10&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;22. 설치 중간에 사진 캡처를 못하였는데, 구성 스크립트를 실행하세요 란 알림이 등장합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;설치 마법사를 종료하지 마시고, MobaXterm을 이용하여 root로 로그인 하여 아래 스크립트 명령을 실행해 주세요.&lt;/p&gt;
&lt;pre id=&quot;code_1704266607045&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[root@localhost ~]# /oracle/app/oraInventory/orainstRoot.sh
Changing permissions of /u01/app/oraInventory.
Adding read,write permissions for group.
Removing read,write,execute permissions for world.

Changing groupname of /u01/app/oraInventory to dba.
The execution of the script is complete.
[root@localhost ~]#
[root@localhost ~]#
[root@localhost ~]# /u01/app/oracle/product/21.0.0.0/root.sh
Performing root user operation.

The following environment variables are set as:
    ORACLE_OWNER= oracle21c
    ORACLE_HOME=  /u01/app/oracle/product/21.0.0.0

Enter the full pathname of the local bin directory: [/usr/local/bin]: /usr/local/bin&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;23. 이제 설치가 완료 되었습니다.&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;사진11.jpg&quot; data-origin-width=&quot;802&quot; data-origin-height=&quot;631&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/GwynO/btsC4s40Y6s/YVQe9PJTJbh8ogsyoT5CK0/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/GwynO/btsC4s40Y6s/YVQe9PJTJbh8ogsyoT5CK0/img.jpg&quot; data-alt=&quot;사진11&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/GwynO/btsC4s40Y6s/YVQe9PJTJbh8ogsyoT5CK0/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGwynO%2FbtsC4s40Y6s%2FYVQe9PJTJbh8ogsyoT5CK0%2Fimg.jpg&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;802&quot; height=&quot;631&quot; data-filename=&quot;사진11.jpg&quot; data-origin-width=&quot;802&quot; data-origin-height=&quot;631&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;사진11&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;24. 마지막으로 잘 설치되었는지 확인해 보겠습니다.&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1704266784237&quot; class=&quot;shell&quot; data-ke-language=&quot;shell&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;[oracle21c@localhost 21.0.0.0]$ sqlplus -v

SQL*Plus: Release 21.0.0.0.0 - Production
Version 21.3.0.0.0

[oracle21c@localhost 21.0.0.0]$&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; 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;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;이렇게 이번 포스트에는 Linux Red Hat 8.9 버전에 Oracle21c를 설치하는 방법에 대해 작성해 보았습니다.&lt;/b&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;감사합니다.&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Data/Database</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/171</guid>
      <comments>https://cntechsystems.tistory.com/171#entry171comment</comments>
      <pubDate>Wed, 3 Jan 2024 16:42:04 +0900</pubDate>
    </item>
    <item>
      <title>SVG를 이용하여 Animation 만들기_후속</title>
      <link>https://cntechsystems.tistory.com/170</link>
      <description>&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;안녕하세요 씨앤텍시스템즈입니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;오늘은 SVG를 이용한 Animation을 생성하기 후속편으로, svg의 속성 대해서 알아보겠습니다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;svg태그를 html에서 사용하다보면, 아래와 같이 svg에 preserveAspectRatio 속성이 사용되는 것을 확인할 수 있습니다.&lt;/p&gt;
&lt;pre id=&quot;code_1703743455625&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;      &amp;lt;svg
        width=&quot;1440&quot;
        height=&quot;2093&quot;
        viewBox=&quot;0 0 1440 2093&quot;
        fill=&quot;none&quot;
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
        preserveAspectRatio=&quot;xMinYMid meet&quot;
      &amp;gt;
      --생략--&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;이 속성(preserveAspectRatio)을 본격적으로 다루기 전에 viewBox와 viewport에 대해서 먼저 정리하고 넘어가겠습니다.&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;viewBox는 svg가 가지고 있는 도형의 원형 즉, Figma에서 추출한 frame의 크기로써, frame 크기와 동일한 값으로써 초기 형성된다고 정리하면 쉽습니다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;viewport는 viewBox를 감싸는 박스로 예를 들어, &lt;u&gt;사용자가 창문을 통해 viewBox를 보게 될 때&lt;/u&gt; 그 &lt;b&gt;&quot;창문&quot;&lt;/b&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;따라서, preserveAspectRatio 속성은 viewport(창문)의 크기에 따라 viewBox를 원하는 기준의 빙뉼로 맞춰(fit) 생성해 준다고 생각할 수 있습니다.&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;&lt;span&gt;meet / slice&lt;/span&gt;&lt;/b&gt;&lt;span&gt;속성 값을 기준으로&lt;/span&gt;&lt;b&gt;&lt;span&gt;&lt;b&gt;Alignment value&lt;/b&gt;&lt;/span&gt;&lt;/b&gt;&lt;span&gt;의 차이에 대해서 살펴보겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&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;span&gt;, Viewbox&lt;/span&gt;가&lt;span&gt; 200x200&lt;/span&gt;이고&lt;span&gt;, &lt;b&gt;viewport&lt;/b&gt;&lt;/span&gt;&lt;b&gt;&lt;span&gt;&amp;nbsp;== viewbox &lt;/span&gt;&lt;/b&gt;면 아이콘이 &lt;span&gt;아래와 같은 모양입니다&lt;span&gt;.&lt;/span&gt;&lt;/span&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;278&quot; data-origin-height=&quot;232&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/IXCxo/btsCP2sb7A6/sUTT6hR5JT2BkL4vtWIqB0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/IXCxo/btsCP2sb7A6/sUTT6hR5JT2BkL4vtWIqB0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/IXCxo/btsCP2sb7A6/sUTT6hR5JT2BkL4vtWIqB0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIXCxo%2FbtsCP2sb7A6%2FsUTT6hR5JT2BkL4vtWIqB0%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;278&quot; height=&quot;232&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;232&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;이제 viewport와 viewbox의 크기가 다른 경우,&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;도형(원형)의 유지 여부와 무엇을 기준으로 늘릴 것인지 지정해 주는 속성값에 대해서 알아보겠습니다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&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;&lt;span&gt;viewport(창문)&lt;/span&gt;의 &lt;span&gt;height가&lt;/span&gt;&amp;nbsp;&lt;span&gt;viewbox&lt;/span&gt;의 &lt;span&gt;height &lt;/span&gt;값보다 큰 경우를&lt;/b&gt; 만들어 보겠습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703743841579&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;  svg {
            border: 1px solid black;
            height: 100%;
            width: 200;
        }&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;viewBox는 아래와 같이 svg 태그에서 확인할 수 있습니다.&lt;/p&gt;
&lt;pre id=&quot;code_1703743872077&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;  &amp;lt;svg width=&quot;200&quot; height=&quot;200&quot; viewBox=&quot;0 0 200 200&quot; fill=&quot;none&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&amp;gt;&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;&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;853&quot; data-origin-height=&quot;805&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b75jIR/btsCP5boEqh/hBib19QvMZwLzT8JwlW9x0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b75jIR/btsCP5boEqh/hBib19QvMZwLzT8JwlW9x0/img.png&quot; data-alt=&quot;viewport = 검정색 border&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b75jIR/btsCP5boEqh/hBib19QvMZwLzT8JwlW9x0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb75jIR%2FbtsCP5boEqh%2FhBib19QvMZwLzT8JwlW9x0%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;360&quot; height=&quot;340&quot; data-origin-width=&quot;853&quot; data-origin-height=&quot;805&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;viewport = 검정색 border&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;&lt;b&gt;&lt;span&gt; ①, ②, ③&lt;/span&gt;에 해당하는 &lt;span&gt;Slice &lt;/span&gt;&lt;/b&gt;속성은 &lt;u&gt;&lt;span&gt;&amp;ldquo;viewport&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;이 &lt;span&gt;viewbox&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;보다 클 때&lt;span&gt;, &lt;/span&gt;&lt;/u&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Viewport&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;이 기준이 되도록 &lt;span&gt;viewbox&lt;/span&gt;의 비율을 맞추고&lt;span&gt;, &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Viewport&lt;/span&gt;의 &lt;span&gt;width&lt;/span&gt;값에 해당하는 &lt;span&gt;viewbox&lt;/span&gt;의 위치를 &lt;span&gt;x&lt;/span&gt;좌표를 이용하여 지정해준다&lt;span&gt;&amp;rdquo;&lt;/span&gt;라고 정리할 수 있습니다&lt;span&gt;.&lt;/span&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;따라서 &lt;span&gt;&lt;b&gt;①&lt;/b&gt;은 아래와 같은 그림이고&lt;span&gt;,&lt;/span&gt;&lt;/span&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;278&quot; data-origin-height=&quot;260&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/uJpE0/btsCN0PaAgM/UltWBnNRiJs9XXOb09sX2K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/uJpE0/btsCN0PaAgM/UltWBnNRiJs9XXOb09sX2K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/uJpE0/btsCN0PaAgM/UltWBnNRiJs9XXOb09sX2K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuJpE0%2FbtsCN0PaAgM%2FUltWBnNRiJs9XXOb09sX2K%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;278&quot; height=&quot;260&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;260&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음과 같은 &lt;u&gt;&lt;span&gt;preserveAspectRatio &lt;/span&gt;&lt;/u&gt;속성의 값을 갖습니다&lt;span&gt;:&lt;b&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt; xMin&lt;/span&gt;YMin slice&lt;/b&gt;&lt;/span&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;같은 방식으로 &lt;b&gt;②&lt;/b&gt;&lt;/span&gt;는 아래와 같은 그림이고&lt;span&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;260&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/xFYmR/btsCIFyuj79/QKq3IkjD94SXxdU0npJAQ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/xFYmR/btsCIFyuj79/QKq3IkjD94SXxdU0npJAQ0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/xFYmR/btsCIFyuj79/QKq3IkjD94SXxdU0npJAQ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FxFYmR%2FbtsCIFyuj79%2FQKq3IkjD94SXxdU0npJAQ0%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;278&quot; height=&quot;260&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;260&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음과 같은 속성값을 갖습니다&lt;span&gt;:&lt;b&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt; xMid&lt;/span&gt;YMid slice&lt;/b&gt;&lt;/span&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;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; &lt;span&gt;③&lt;/span&gt;&lt;/b&gt;&lt;span&gt;은 아래와 같은 그림이고,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;297&quot; data-origin-height=&quot;260&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bQ4Yxi/btsCLrT3ITv/xKRA5rm9WAb7dCeBl2uY6k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bQ4Yxi/btsCLrT3ITv/xKRA5rm9WAb7dCeBl2uY6k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bQ4Yxi/btsCLrT3ITv/xKRA5rm9WAb7dCeBl2uY6k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbQ4Yxi%2FbtsCLrT3ITv%2FxKRA5rm9WAb7dCeBl2uY6k%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;297&quot; height=&quot;260&quot; data-origin-width=&quot;297&quot; data-origin-height=&quot;260&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음과 같은 속성값을 갖습니다&lt;span&gt;:&lt;b&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt; xMax&lt;/span&gt;YMax slice&lt;/b&gt;&lt;/span&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;span&gt;, Y&lt;/span&gt;좌표값은 영향이 없다는 것을 알 수 있습니다&lt;span&gt;. &lt;/span&gt;따라서 직접 코드를 작성해 보면,&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;span&gt;1.&lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;xMin&lt;b&gt;YMin&lt;/b&gt; slice &lt;/span&gt;&lt;span&gt;&amp;rarr;&lt;/span&gt;&lt;span&gt; xMin&lt;b&gt;YMax&lt;/b&gt; slice &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;span&gt;2.&lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;xMid&lt;b&gt;YMid&lt;/b&gt; slice &lt;/span&gt;&lt;span&gt;&amp;rarr; xMid&lt;b&gt;YMax&lt;/b&gt; slice&lt;/span&gt;&lt;span&gt; &lt;/span&gt;와 같은 결과를 확인할 수 있습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&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;span&gt;, ⑤, ⑥&lt;/span&gt;에 대해서 살펴보겠습니다&lt;span&gt;.&lt;/span&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;853&quot; data-origin-height=&quot;805&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b75jIR/btsCP5boEqh/hBib19QvMZwLzT8JwlW9x0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b75jIR/btsCP5boEqh/hBib19QvMZwLzT8JwlW9x0/img.png&quot; data-alt=&quot;viewport = 검정색 border&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b75jIR/btsCP5boEqh/hBib19QvMZwLzT8JwlW9x0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb75jIR%2FbtsCP5boEqh%2FhBib19QvMZwLzT8JwlW9x0%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;360&quot; height=&quot;340&quot; data-origin-width=&quot;853&quot; data-origin-height=&quot;805&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;viewport = 검정색 border&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;&lt;b&gt;④, ⑤, ⑥ 에 해당하는 &lt;span&gt;meet &lt;/span&gt;&lt;/b&gt;속성은 &lt;span&gt;&amp;ldquo;viewport&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;이 &lt;span&gt;viewbox&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;보다 클 때&lt;span&gt;, &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;ldquo;viewBox&lt;/span&gt;의&lt;b&gt; 원형 비율을&lt;/b&gt; 그대로 유지한 채 &lt;span&gt;viewport&lt;/span&gt;라는 창문에서 어디에 위치할 것인가를 &lt;span&gt;y&lt;/span&gt;좌표를 통해 지정해준다&lt;span&gt;&amp;rdquo;&lt;/span&gt;라고 생각하면 편리할 것 같습니다&lt;span&gt;.&lt;/span&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;그림으로 쉽게 살펴보자면 &lt;span&gt; &lt;b&gt;④&lt;/b&gt;&lt;/span&gt;번은 아래와 같고&lt;span&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;535&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cta3T5/btsCDe9j0nN/oaZEMUdoVzKGKkHMb81Ml1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cta3T5/btsCDe9j0nN/oaZEMUdoVzKGKkHMb81Ml1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cta3T5/btsCDe9j0nN/oaZEMUdoVzKGKkHMb81Ml1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fcta3T5%2FbtsCDe9j0nN%2FoaZEMUdoVzKGKkHMb81Ml1%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;278&quot; height=&quot;535&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;535&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;속성값은&lt;b&gt; &lt;span&gt;xMin&lt;span style=&quot;color: #ee2323;&quot;&gt;YMin&lt;/span&gt; meet &lt;/span&gt;&lt;/b&gt;입니다&lt;span&gt;.&lt;/span&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;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt; &lt;b&gt;⑤&lt;/b&gt; &lt;/b&gt;&lt;/span&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;278&quot; data-origin-height=&quot;534&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/snYZ5/btsCDfG7TWZ/ZzWj2h5HSYnkymwKTYCzgk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/snYZ5/btsCDfG7TWZ/ZzWj2h5HSYnkymwKTYCzgk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/snYZ5/btsCDfG7TWZ/ZzWj2h5HSYnkymwKTYCzgk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FsnYZ5%2FbtsCDfG7TWZ%2FZzWj2h5HSYnkymwKTYCzgk%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;278&quot; height=&quot;534&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;534&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;속성값은 &lt;b&gt;&lt;span&gt;xMid&lt;span style=&quot;color: #ee2323;&quot;&gt;YMid&lt;/span&gt; meet &lt;/span&gt;&lt;/b&gt;입니다&lt;span&gt;.&lt;/span&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;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;⑥&lt;/b&gt; 번은 아래와 같고&lt;span&gt;, &lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;576&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/SCTJ8/btsCQq7ELJV/04SVK9zK6vCeK26ZIu8MbK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/SCTJ8/btsCQq7ELJV/04SVK9zK6vCeK26ZIu8MbK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/SCTJ8/btsCQq7ELJV/04SVK9zK6vCeK26ZIu8MbK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FSCTJ8%2FbtsCQq7ELJV%2F04SVK9zK6vCeK26ZIu8MbK%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;278&quot; height=&quot;576&quot; data-origin-width=&quot;278&quot; data-origin-height=&quot;576&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;속성값은&lt;b&gt; &lt;span&gt;xMax&lt;span style=&quot;color: #ee2323;&quot;&gt;YMax&lt;/span&gt; meet &lt;/span&gt;&lt;/b&gt;입니다&lt;span&gt;.&lt;/span&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;span&gt;, X&lt;/span&gt;좌표값은 영향이 없다는 것을 알 수 있습니다&lt;span&gt;. &lt;/span&gt;따라서&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;span&gt;1.&lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;b&gt;xMin&lt;/b&gt;YMin meet &lt;/span&gt;&lt;span&gt;&amp;rarr;&lt;/span&gt;&lt;span&gt;&lt;b&gt; xMax&lt;/b&gt;YMin meet &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&lt;span&gt;2.&lt;span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span&gt;&lt;b&gt;xMid&lt;/b&gt;YMid meet &lt;/span&gt;&lt;span&gt;&amp;rarr; &lt;b&gt;xMax&lt;/b&gt;YMax meet&lt;/span&gt;&lt;span&gt; &lt;/span&gt;와 같은 결과를 확인할 수 있습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&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;⑦&lt;/b&gt;번은 &lt;span&gt;&amp;ldquo;&lt;/span&gt;&lt;b&gt;원형의 비율에 상관없이 &lt;/b&gt;정해진 &lt;span&gt;viewport&lt;/span&gt;의 크기에 &lt;span&gt;viewBox&lt;/span&gt;를 억지로 맞춘다&lt;span&gt;&amp;rdquo;&lt;/span&gt;라고 생각하면 좋을 것 같습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&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;&lt;span&gt;viewport&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;이 &lt;span&gt;viewBox&lt;/span&gt;의 &lt;span&gt;height &lt;/span&gt;보다 작은 경우를&lt;/b&gt; 만들어 보겠습니다&lt;span&gt;.&lt;/span&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;869&quot; data-origin-height=&quot;777&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/tsrQh/btsCJiiZsuj/9cWorkdPNY7YnI122Ymsmk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/tsrQh/btsCJiiZsuj/9cWorkdPNY7YnI122Ymsmk/img.png&quot; data-alt=&quot;viewport = 검정색 border&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/tsrQh/btsCJiiZsuj/9cWorkdPNY7YnI122Ymsmk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtsrQh%2FbtsCJiiZsuj%2F9cWorkdPNY7YnI122Ymsmk%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;413&quot; height=&quot;369&quot; data-origin-width=&quot;869&quot; data-origin-height=&quot;777&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;viewport = 검정색 border&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt; &lt;b&gt;&lt;span&gt;①',&lt;span&gt;&amp;nbsp;&lt;/span&gt;②',&lt;span&gt;&amp;nbsp;&lt;/span&gt;③'&lt;/span&gt;에 해당하는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;Slice&lt;/span&gt;&lt;/b&gt; &lt;/b&gt;속성은 &lt;span&gt;&amp;ldquo;&lt;u&gt;viewport&lt;/u&gt;&lt;/span&gt;&lt;u&gt;의 &lt;span&gt;height&lt;/span&gt;이 &lt;span&gt;viewbox&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;보다 작을 때&lt;span&gt;,&lt;/span&gt;&lt;/u&gt;&lt;span&gt; &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Viewport&lt;/span&gt;의 &lt;span&gt;width&lt;/span&gt;가 기준이 되도록 &lt;span&gt;viewbox&lt;/span&gt;의 비율을 맞추고&lt;span&gt;, &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Viewport&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;값에 해당하는 &lt;span&gt;viewbox&lt;/span&gt;의 위치를 &lt;span&gt;y&lt;/span&gt;좌표를 이용하여 지정해준다&lt;span&gt;&amp;rdquo;&lt;/span&gt;라고 정리할 수 있습니다&lt;span&gt;.&lt;/span&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;span&gt; &lt;b&gt;&lt;b&gt;&lt;span&gt;①'&lt;/span&gt;&lt;/b&gt;&lt;/b&gt; &lt;/span&gt;의 그림은 다음과 같고&lt;span&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;418&quot; data-origin-height=&quot;216&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ZQ7vn/btsCKrNAEmz/uSgvHTLnQXU4m46jOP87AK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ZQ7vn/btsCKrNAEmz/uSgvHTLnQXU4m46jOP87AK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ZQ7vn/btsCKrNAEmz/uSgvHTLnQXU4m46jOP87AK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FZQ7vn%2FbtsCKrNAEmz%2FuSgvHTLnQXU4m46jOP87AK%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;418&quot; height=&quot;216&quot; data-origin-width=&quot;418&quot; data-origin-height=&quot;216&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;속성값은&lt;b&gt; &lt;span&gt;xMin&lt;span style=&quot;color: #ee2323;&quot;&gt;YMin&lt;/span&gt; slice &lt;/span&gt;&lt;/b&gt;입니다&lt;span&gt;.&lt;/span&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;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;&lt;b&gt;&lt;span&gt; &lt;b&gt;&lt;b&gt;&lt;span&gt;②'&lt;/span&gt;&lt;/b&gt;&lt;/b&gt; &lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/span&gt;의 그림은 다음과 같고,&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;418&quot; data-origin-height=&quot;216&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bnxvcw/btsCQ3dkvEk/kFip4RL03910wFwgdDVZhK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bnxvcw/btsCQ3dkvEk/kFip4RL03910wFwgdDVZhK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bnxvcw/btsCQ3dkvEk/kFip4RL03910wFwgdDVZhK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbnxvcw%2FbtsCQ3dkvEk%2FkFip4RL03910wFwgdDVZhK%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;418&quot; height=&quot;216&quot; data-origin-width=&quot;418&quot; data-origin-height=&quot;216&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코드는 &lt;b&gt;&lt;span&gt;xMid&lt;span style=&quot;color: #ee2323;&quot;&gt;YMid&lt;/span&gt; slice &lt;/span&gt;&lt;/b&gt;입니다&lt;span&gt;.&lt;/span&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;&lt;b&gt;&lt;span&gt; &lt;b&gt;&lt;b&gt;&lt;span&gt;③'&lt;/span&gt;&lt;/b&gt;&lt;/b&gt; &lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/span&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;418&quot; data-origin-height=&quot;216&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bE9Q6t/btsCKrtd6Nv/vFafwENIx4xI5ESFPH4OU0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bE9Q6t/btsCKrtd6Nv/vFafwENIx4xI5ESFPH4OU0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bE9Q6t/btsCKrtd6Nv/vFafwENIx4xI5ESFPH4OU0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbE9Q6t%2FbtsCKrtd6Nv%2FvFafwENIx4xI5ESFPH4OU0%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;418&quot; height=&quot;216&quot; data-origin-width=&quot;418&quot; data-origin-height=&quot;216&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코드는&lt;b&gt; &lt;span&gt;xMax&lt;span style=&quot;color: #ee2323;&quot;&gt;YMax&lt;/span&gt; slice &lt;/span&gt;&lt;/b&gt;와 같습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&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;869&quot; data-origin-height=&quot;777&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/tsrQh/btsCJiiZsuj/9cWorkdPNY7YnI122Ymsmk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/tsrQh/btsCJiiZsuj/9cWorkdPNY7YnI122Ymsmk/img.png&quot; data-alt=&quot;viewport = 검정색 border&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/tsrQh/btsCJiiZsuj/9cWorkdPNY7YnI122Ymsmk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FtsrQh%2FbtsCJiiZsuj%2F9cWorkdPNY7YnI122Ymsmk%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;413&quot; height=&quot;369&quot; data-origin-width=&quot;869&quot; data-origin-height=&quot;777&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;viewport = 검정색 border&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;④', ⑤', ⑥' 에 해당하는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;meet&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt; 속성은&amp;nbsp;&amp;nbsp;&lt;span&gt;&amp;ldquo;viewport&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;이 &lt;span&gt;viewbox&lt;/span&gt;의 &lt;span&gt;height&lt;/span&gt;보다 작을 때&lt;span&gt;, &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;ldquo;viewBox&lt;/span&gt;의&lt;b&gt; 원형 비율을&lt;/b&gt; 그대로 유지한 채 &lt;span&gt;viewport&lt;/span&gt;라는 창문에서 어디에 위치할 것인가를 &lt;span&gt;x&lt;/span&gt;좌표를 통해 지정해준다&lt;span&gt;&amp;rdquo;&lt;/span&gt;라고 생각하면 편리할 것 같습니다&lt;span&gt;.&lt;/span&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;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;&lt;b&gt;&lt;span&gt;&lt;span&gt; &lt;b&gt;④'&lt;/b&gt; &amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/span&gt;의 그림은 다음과 같습니다:&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;258&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/VGZBn/btsCN7OgRP6/BgBCkYlZXFkqEh1HLExIXk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/VGZBn/btsCN7OgRP6/BgBCkYlZXFkqEh1HLExIXk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/VGZBn/btsCN7OgRP6/BgBCkYlZXFkqEh1HLExIXk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FVGZBn%2FbtsCN7OgRP6%2FBgBCkYlZXFkqEh1HLExIXk%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;620&quot; height=&quot;258&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;258&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코드는 &lt;span&gt;&lt;b&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;xMin&lt;/span&gt;YMin meet&lt;/b&gt; &lt;/span&gt;과 같습니다&lt;span&gt;.&lt;/span&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;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;&lt;b&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt; &lt;b&gt;⑤'&lt;/b&gt; &amp;nbsp;&lt;/span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/span&gt;의 그림은 다음과 같고,&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;563&quot; data-origin-height=&quot;257&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/JKdH0/btsCEJg5lQE/MTN8khypLVHmjGnGKDthxK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/JKdH0/btsCEJg5lQE/MTN8khypLVHmjGnGKDthxK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/JKdH0/btsCEJg5lQE/MTN8khypLVHmjGnGKDthxK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJKdH0%2FbtsCEJg5lQE%2FMTN8khypLVHmjGnGKDthxK%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;563&quot; height=&quot;257&quot; data-origin-width=&quot;563&quot; data-origin-height=&quot;257&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;코드는&lt;b&gt; &lt;span&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;xMid&lt;/span&gt;YMid meet &lt;/span&gt;&lt;/b&gt;과 같습니다&lt;span&gt;.&lt;/span&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;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;&lt;b&gt;&lt;span&gt;&lt;span&gt; &lt;b&gt;⑥'&lt;/b&gt; &amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/span&gt;의 그림은 다음과 같고,&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;257&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/d3sSnZ/btsCKPHDQ3H/xqtEe7LejX1jKfLZFC6om1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/d3sSnZ/btsCKPHDQ3H/xqtEe7LejX1jKfLZFC6om1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/d3sSnZ/btsCKPHDQ3H/xqtEe7LejX1jKfLZFC6om1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd3sSnZ%2FbtsCKPHDQ3H%2FxqtEe7LejX1jKfLZFC6om1%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;620&quot; height=&quot;257&quot; data-origin-width=&quot;620&quot; data-origin-height=&quot;257&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;코드는&lt;b&gt; &lt;span&gt;&lt;span style=&quot;color: #ee2323;&quot;&gt;xMax&lt;/span&gt;YMax meet&lt;/span&gt;&lt;/b&gt;과 같습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style1&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&lt;span&gt;⑦&amp;rsquo;&lt;/span&gt;&lt;/b&gt;는 위의 내용과 같이&lt;span&gt;, &amp;ldquo;&lt;/span&gt;&lt;b&gt;원형의 비율에 상관없이 &lt;/b&gt;정해진 &lt;span&gt;viewport&lt;/span&gt;의 크기에 &lt;span&gt;viewBox&lt;/span&gt;를 억지로 맞춘다&lt;span&gt;&amp;rdquo;&lt;/span&gt;라고 생각하면 좋을 것 같습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style2&quot; /&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;span&gt;svg&lt;/span&gt;의 &lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span&gt;preserveAspectRatio &lt;/span&gt;속성에 대해서 알아 보았습니다&lt;span&gt;. &lt;/span&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;&lt;span&gt;감사합니다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>Web Programming/Design</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/170</guid>
      <comments>https://cntechsystems.tistory.com/170#entry170comment</comments>
      <pubDate>Thu, 28 Dec 2023 16:03:25 +0900</pubDate>
    </item>
    <item>
      <title>SVG를 이용하여 Animation 만들기</title>
      <link>https://cntechsystems.tistory.com/169</link>
      <description>&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;오늘은 SVG를 이용한 Animation을 생성하는 방법에 대해서 정리하겠습니다.&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;&lt;span&gt;&lt;a title=&quot;유튜브 채널로 이동&quot; href=&quot;https://youtu.be/UTHgr6NLeEw?si=L0r4UHGpoLLN96Ld&quot;&gt;https://youtu.be/UTHgr6NLeEw?si=L0r4UHGpoLLN96Ld&lt;/a&gt; &lt;/span&gt;&lt;span&gt;자료를 참고하여 작성하였습니다&lt;span&gt;.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;figure data-ke-type=&quot;video&quot; data-ke-style=&quot;alignCenter&quot; data-video-host=&quot;youtube&quot; data-video-url=&quot;https://www.youtube.com/watch?v=UTHgr6NLeEw&quot; data-video-thumbnail=&quot;https://scrap.kakaocdn.net/dn/OCVGR/hyUTBqk4zf/xTwGnxxRGkBgO8ln0ljFG1/img.jpg?width=1280&amp;amp;height=720&amp;amp;face=0_0_1280_720&quot; data-video-width=&quot;860&quot; data-video-height=&quot;484&quot; data-video-origin-width=&quot;860&quot; data-video-origin-height=&quot;484&quot; data-ke-mobilestyle=&quot;widthContent&quot; data-original-url=&quot;&quot; data-video-title=&quot;&quot;&gt;&lt;iframe src=&quot;https://www.youtube.com/embed/UTHgr6NLeEw&quot; width=&quot;860&quot; height=&quot;484&quot; frameborder=&quot;&quot; allowfullscreen=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;figcaption style=&quot;display: none;&quot;&gt;&lt;/figcaption&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;&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;이 글의 각 파트별 마지막에는 아래의 두 가지 animation을 완성할 수 있습니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;svg_1.gif&quot; data-origin-width=&quot;120&quot; data-origin-height=&quot;100&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/stEwI/btsCBMxP2T1/Zx8eqIfF94ilXghvkeKeFK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/stEwI/btsCBMxP2T1/Zx8eqIfF94ilXghvkeKeFK/img.gif&quot; data-alt=&quot;animation1&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/stEwI/btsCBMxP2T1/Zx8eqIfF94ilXghvkeKeFK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/stEwI/btsCBMxP2T1/Zx8eqIfF94ilXghvkeKeFK/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;236&quot; height=&quot;197&quot; data-filename=&quot;svg_1.gif&quot; data-origin-width=&quot;120&quot; data-origin-height=&quot;100&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;animation1&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;&amp;nbsp;&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-filename=&quot;bult2.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/64tbI/btsCIGKmH0g/gnZdWQ44SWmX1ZoIWMcmQK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/64tbI/btsCIGKmH0g/gnZdWQ44SWmX1ZoIWMcmQK/img.gif&quot; data-alt=&quot;animation2&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/64tbI/btsCIGKmH0g/gnZdWQ44SWmX1ZoIWMcmQK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/64tbI/btsCIGKmH0g/gnZdWQ44SWmX1ZoIWMcmQK/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;237&quot; height=&quot;320&quot; data-filename=&quot;bult2.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;animation2&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;목표 1 : animation1&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;먼저, animation1을 만드는 과정을 살펴보겠습니다.&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;940&quot; data-origin-height=&quot;1161&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/zOe2f/btsCzQgo0h7/Q817N3Ut8nN6UiLrKhD9D0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/zOe2f/btsCzQgo0h7/Q817N3Ut8nN6UiLrKhD9D0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/zOe2f/btsCzQgo0h7/Q817N3Ut8nN6UiLrKhD9D0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzOe2f%2FbtsCzQgo0h7%2FQ817N3Ut8nN6UiLrKhD9D0%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;489&quot; height=&quot;604&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;1161&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;/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;그리고 나면, Figma(선택)를 통해 animation을 적용할 도형을 만들어 줍니다.&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;571&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bcicrL/btsCEK7yGNu/yCPzhyGAmmrDVJyHKpRKF1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bcicrL/btsCEK7yGNu/yCPzhyGAmmrDVJyHKpRKF1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bcicrL/btsCEK7yGNu/yCPzhyGAmmrDVJyHKpRKF1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbcicrL%2FbtsCEK7yGNu%2FyCPzhyGAmmrDVJyHKpRKF1%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;537&quot; height=&quot;326&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;571&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;그래픽의 픽셀이 깨지지 않게 하기 위해서 frame은 최대한 작은 사이즈로 만들어 줍니다.&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&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;746&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/blcqqL/btsCCwuYIEP/Ks7vtOqfEvAMk1jHrIxHIK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/blcqqL/btsCCwuYIEP/Ks7vtOqfEvAMk1jHrIxHIK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/blcqqL/btsCCwuYIEP/Ks7vtOqfEvAMk1jHrIxHIK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FblcqqL%2FbtsCCwuYIEP%2FKs7vtOqfEvAMk1jHrIxHIK%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;564&quot; height=&quot;448&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;746&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;코드로 뽑을 때 파악하기 쉽도록 &lt;span&gt;layer &lt;/span&gt;별로 이름을 지정해줍니다&lt;span&gt;.&lt;/span&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;659&quot; data-origin-height=&quot;628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/TJtMs/btsCLsriTmL/EeEHEJQHMbvrm0pCwK7k91/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/TJtMs/btsCLsriTmL/EeEHEJQHMbvrm0pCwK7k91/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/TJtMs/btsCLsriTmL/EeEHEJQHMbvrm0pCwK7k91/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FTJtMs%2FbtsCLsriTmL%2FEeEHEJQHMbvrm0pCwK7k91%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;493&quot; height=&quot;470&quot; data-origin-width=&quot;659&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추출할 도형의 포지션을 지정해 줍니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;Dark1&lt;/span&gt;과 &lt;span&gt;light1&lt;/span&gt;을 차례로 일부가 겹치도록 배치하고&lt;span&gt;, dark2&lt;/span&gt;를 &lt;span&gt;light1&lt;/span&gt;위에 완전히 겹치도록 배치합니다&lt;span&gt;. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추출은 위와 같은 포지션으로 하지만 &lt;span&gt;Dark2&lt;/span&gt;는&lt;span&gt; css&lt;/span&gt;로 &lt;span&gt;frame &lt;/span&gt;밖에서 들어가도록 할 겁니다&lt;span&gt;. &lt;/span&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&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;1019&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b9kth4/btsCJivWc9m/oc8eKXnKHcZR9zJdmmYVd1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b9kth4/btsCJivWc9m/oc8eKXnKHcZR9zJdmmYVd1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b9kth4/btsCJivWc9m/oc8eKXnKHcZR9zJdmmYVd1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb9kth4%2FbtsCJivWc9m%2Foc8eKXnKHcZR9zJdmmYVd1%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;536&quot; height=&quot;581&quot; data-origin-width=&quot;940&quot; data-origin-height=&quot;1019&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;이제 &lt;span&gt;triangles frame&lt;/span&gt;을 추출하는데&lt;span&gt;, &lt;/span&gt;더보기를 눌러 &lt;span&gt;include &amp;lsquo;id&amp;rsquo; attribute&lt;/span&gt;를 체크해서 추출합니다&lt;span&gt;. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;gt; svg에 해당하는 object 별로 id를 생성하여, css 를 작성하는 데 큰 도움이 됩니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703742644849&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;body&amp;gt;

    &amp;lt;svg

      width=&quot;120&quot;

      height=&quot;100&quot;

      viewBox=&quot;0 0 120 100&quot;

      fill=&quot;none&quot;

      xmlns=&quot;http://www.w3.org/2000/svg&quot;

    &amp;gt;

      &amp;lt;g id=&quot;triangles&quot;&amp;gt;

        &amp;lt;rect width=&quot;120&quot; height=&quot;100&quot; /&amp;gt;

        &amp;lt;g id=&quot;lightGroup&quot;&amp;gt;

          &amp;lt;path

            id=&quot;light1&quot;

            d=&quot;M41 48.268C42.3333 49.0378 42.3333 50.9623 41 51.7321L20 63.8564C18.6667 64.6262 17 63.664 17 62.1244L17 37.8756C17 36.336 18.6667 35.3738 20 36.1436L41 48.268Z&quot;

          /&amp;gt;

        &amp;lt;/g&amp;gt;

        &amp;lt;g id=&quot;darkGroup&quot;&amp;gt;

          &amp;lt;path

            id=&quot;dark1&quot;

            d=&quot;M49 48.268C50.3333 49.0378 50.3333 50.9623 49 51.7321L28 63.8564C26.6667 64.6262 25 63.664 25 62.1244L25 37.8756C25 36.336 26.6667 35.3738 28 36.1436L49 48.268Z&quot;

          /&amp;gt;

          &amp;lt;path

            id=&quot;dark2&quot;

            d=&quot;M41 48.268C42.3333 49.0378 42.3333 50.9623 41 51.7321L20 63.8564C18.6667 64.6262 17 63.664 17 62.1244L17 37.8756C17 36.336 18.6667 35.3738 20 36.1436L41 48.268Z&quot;

          /&amp;gt;

        &amp;lt;/g&amp;gt;

      &amp;lt;/g&amp;gt;

    &amp;lt;/svg&amp;gt;&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;span&gt;Html &lt;/span&gt;파일을 만들어, Figma를 통해 추출했던&amp;nbsp;&lt;span&gt;svg&lt;/span&gt;를 불러옵니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이때&lt;span&gt;, inline&lt;/span&gt;으로 &lt;span&gt;object&lt;/span&gt;의 색상과 투명도가 기입되어 있는 &lt;span&gt;&amp;ldquo;fill&amp;rdquo; &lt;/span&gt;속성 및 &lt;span&gt;&amp;ldquo;fill-opacity&amp;rdquo; &lt;/span&gt;속성은 삭제하여&lt;span&gt; style&lt;/span&gt;에서&lt;span&gt; css&lt;/span&gt;를 지정하는데 지장이 없도록 초기화해줍니다&lt;span&gt;. &lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703742672518&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;  :root {

        --dark-color: #ea906c;

        --light-color: #eee2de;

      }

      svg {

        cursor: pointer;

      }

 

      #darkGroup {

        fill: var(--dark-color);

      }

      #lightGroup {

        fill: var(--light-color);

      }

      #dark1,

      #dark2,

      #light1 {

        opacity: 0.8;

      }&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;span&gt;(&lt;/span&gt;정적&lt;span&gt;) &lt;/span&gt;스타일은 위와 같이 작성해 주고&lt;span&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703742697881&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;   #dark1,

      #light1,

      #dark2 {

        transition: all 1s ease;

      }

      #dark2 {

        transform: translateX(-100%);

      }

      svg:hover #light1 {

        transform: translateX(20%);

      }

      svg:hover #dark1 {

        transform: translateX(40%);

        opacity: 0;

      }

      svg:hover #dark2 {

        transform: translateX(0%);

      }&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;애니메이션&lt;span&gt;(&lt;/span&gt;동적&lt;span&gt;) &lt;/span&gt;스타일은 위와 같이 작성해 줍니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;그러면 도형이 부드럽게 동작하는 모습을 확인 할 수 있습니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;추가로&lt;span&gt;, svg &lt;/span&gt;도형을 클릭할 때 &lt;span&gt;color palette &lt;/span&gt;색상에 따라서 도형의 색상을 변화시키려면&lt;span&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;아래와 같이 &lt;span&gt;script&lt;/span&gt;를 작성합니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1703742719699&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;   &amp;lt;script&amp;gt;

      const svg = document.getElementById(&quot;triangles&quot;);

 

      svg.addEventListener(&quot;click&quot;, onClick);

 

      function onClick(event) {

        const colors = [&quot;#2B2A4C&quot;, &quot;#B31312&quot;, &quot;#ea906c&quot;, &quot;#eee2de&quot;];

        const rando = () =&amp;gt; colors[Math.floor(Math.random() * colors.length)];

        document.documentElement.style.cssText = `

            --dark-color: ${rando()};

            --light-color: ${rando()};

            `;

      }

    &amp;lt;/script&amp;gt;&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위와 같이 작성하면 첫 번째 목표를 마무리할 수 있습니다&lt;span&gt;.&lt;/span&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-filename=&quot;svg_1.gif&quot; data-origin-width=&quot;120&quot; data-origin-height=&quot;100&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c9oxRw/btsCG2GVNIu/e9RoiTFbeecnKaNHB8W6OK/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c9oxRw/btsCG2GVNIu/e9RoiTFbeecnKaNHB8W6OK/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c9oxRw/btsCG2GVNIu/e9RoiTFbeecnKaNHB8W6OK/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/c9oxRw/btsCG2GVNIu/e9RoiTFbeecnKaNHB8W6OK/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;120&quot; height=&quot;100&quot; data-filename=&quot;svg_1.gif&quot; data-origin-width=&quot;120&quot; data-origin-height=&quot;100&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;목표2 : animation2&lt;/h3&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;span&gt;Figma &lt;/span&gt;생성 작업은 생략합니다&lt;span&gt;.&lt;/span&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;span&gt;&lt;a href=&quot;https://github.com/fireship-io/animated-svg-demo/blob/main/phone.html&quot;&gt;https://github.com/fireship-io/animated-svg-demo/blob/main/phone.html&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;(위의 깃헙 사이트에서 &lt;span&gt;svg파일을&lt;/span&gt;&amp;nbsp;준비할 수 있습니다&lt;span&gt;.)&lt;/span&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&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;384&quot; data-origin-height=&quot;619&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/C1IkE/btsCCx1Izdw/OA6J0TXKcmsw4dmtyanvDK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/C1IkE/btsCCx1Izdw/OA6J0TXKcmsw4dmtyanvDK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/C1IkE/btsCCx1Izdw/OA6J0TXKcmsw4dmtyanvDK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FC1IkE%2FbtsCCx1Izdw%2FOA6J0TXKcmsw4dmtyanvDK%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;173&quot; height=&quot;279&quot; data-origin-width=&quot;384&quot; data-origin-height=&quot;619&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;span&gt;#skeleton&lt;/span&gt;에 해당하는 &lt;span&gt;object&lt;/span&gt;를 먼저 준비합니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;#skeleton&lt;/span&gt;이 아래에서 위로 올라오는 애니메이션을 다음과 같이 넣어 줍니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703742740749&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt; &amp;lt;style&amp;gt;

        #skeleton {

            animation: fadeInUp 1s;

            animation-iteration-count: infinite;

        }

 

        @keyframes fadeInUp {

            from {

                /* start of the animation */

                opacity: 0;

                transform: translateY(20%);

            } to {

                /* end of the animation */

                opacity: 1;

                transform: translateY(0);

            }

        }

    &amp;lt;/style&amp;gt;&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;&amp;nbsp;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;phone_animation_1.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cYjn5Y/btsCN0OA05R/bIk7GtE2ik357KkaMijzO0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cYjn5Y/btsCN0OA05R/bIk7GtE2ik357KkaMijzO0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cYjn5Y/btsCN0OA05R/bIk7GtE2ik357KkaMijzO0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/cYjn5Y/btsCN0OA05R/bIk7GtE2ik357KkaMijzO0/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;262&quot; height=&quot;353&quot; data-filename=&quot;phone_animation_1.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&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;span&gt;#skeletion&lt;/span&gt;에 해당하는 &lt;span&gt;animation&lt;/span&gt;이 완성되면 위와 같이 동작합니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이제 &lt;span&gt;#skeleton&lt;/span&gt;에 해당하는 &lt;span&gt;animation&lt;/span&gt;의 반복성을 없애줍니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703742752774&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;#bolt g {

            opacity: 0;

            animation: dropIn 8s ease forwards infinite;

            /* 이때 forwards 속성은 animation의 마지막 상태를 유지한다는 말입니다. */

            /* infinite 속성은 animation을 반복한다는 뜻입니다. */

        }

 

        @keyframes dropIn {

            20% {

                opacity: 0;

                transform: translateY(-20%);

            }

            30%, 100% {

                opacity: 1;

                transform: translateY(0);

            }

        }&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;span&gt;animation&lt;/span&gt;을 생성하여&lt;span&gt; #bolt g( &lt;/span&gt;이하 &lt;span&gt;#bolt)&lt;/span&gt;에 해당하는 &lt;span&gt;object&lt;/span&gt;가 위에서 아래로 내려오도록 만들어 줍니다&lt;span&gt;.&lt;/span&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-filename=&quot;bolt1.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bYqp51/btsCLp898zT/nfsEhJEYlXM0FvxrJZdDA0/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bYqp51/btsCLp898zT/nfsEhJEYlXM0FvxrJZdDA0/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bYqp51/btsCLp898zT/nfsEhJEYlXM0FvxrJZdDA0/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/bYqp51/btsCLp898zT/nfsEhJEYlXM0FvxrJZdDA0/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;210&quot; height=&quot;283&quot; data-filename=&quot;bolt1.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&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;span&gt;#bolt&lt;/span&gt;가 차례로 내려오도록 &lt;span&gt;delay&lt;/span&gt;를 걸어주는 작업을 합니다&lt;span&gt;.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;#bolt&lt;/span&gt;에 해당하는 &lt;span&gt;svg &lt;/span&gt;코드를 보면&lt;span&gt;,&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703742768308&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt; &amp;lt;g id=&quot;bolt4&quot; style=&quot;--order: 4&quot;&amp;gt;

--- 생략 ---&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;위와 같이 각각의 &lt;span&gt;#bolt&lt;/span&gt;에 해당하는 &lt;span&gt;style&lt;/span&gt;이 기입되어 있습니다&lt;span&gt;. &lt;/span&gt;이 속성을 이용하여&lt;/p&gt;
&lt;pre id=&quot;code_1703742779101&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;  #bolt g {

            opacity: 0;

            animation: dropIn 8s ease forwards;

            animation-delay: calc(var(--order) * 200ms)

        }&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;각각의 &lt;span&gt;#bolt&lt;/span&gt;가 &lt;span&gt;0.2 &lt;/span&gt;초의 차이를 가지고 &lt;span&gt;animation &lt;/span&gt;동작되도록 만들어 줍니다&lt;span&gt;. &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;각각의 &lt;span&gt;#bolt&lt;/span&gt;가 내려온 상태가 유지되도록 &lt;span&gt;animation-fill-mode &lt;/span&gt;속성을 &lt;span&gt;forwards&lt;/span&gt;로 기입함으로써 두 번째 목표를 마무리 합니다&lt;span&gt;. (&lt;/span&gt;녹화용으로는 &lt;span&gt;animation-literation-count &lt;/span&gt;속성에 &lt;span&gt;infinite&lt;/span&gt;를 걸어두었습니다&lt;span&gt;.)&lt;/span&gt;&lt;/span&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-filename=&quot;bult2.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/RHYkt/btsCN7mD8vM/PC9pv4X8LZ4DYcs3YH7sG1/img.gif&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/RHYkt/btsCN7mD8vM/PC9pv4X8LZ4DYcs3YH7sG1/img.gif&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/RHYkt/btsCN7mD8vM/PC9pv4X8LZ4DYcs3YH7sG1/img.gif&quot; srcset=&quot;https://blog.kakaocdn.net/dn/RHYkt/btsCN7mD8vM/PC9pv4X8LZ4DYcs3YH7sG1/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;248&quot; height=&quot;335&quot; data-filename=&quot;bult2.gif&quot; data-origin-width=&quot;728&quot; data-origin-height=&quot;982&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;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span&gt;이상으로 &lt;b&gt;SVG를 이용하여 Animation 만들기를&lt;/b&gt;&amp;nbsp;마치겠습니다.&lt;/span&gt;&lt;span&gt;&lt;/span&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;다음 글에서는 svg 속성을 살펴보는 시간을 갖도록 하겠습니다.&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;span&gt;감사합니다.&lt;/span&gt;&lt;/p&gt;</description>
      <category>Web Programming/Design</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/169</guid>
      <comments>https://cntechsystems.tistory.com/169#entry169comment</comments>
      <pubDate>Wed, 27 Dec 2023 15:22:04 +0900</pubDate>
    </item>
    <item>
      <title>Angular Router 적용</title>
      <link>https://cntechsystems.tistory.com/168</link>
      <description>&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;안녕하세요, &lt;span style=&quot;color: #006dd7;&quot;&gt;씨앤텍 시스템즈 임재원 연구원&lt;/span&gt;입니다&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #000000; text-align: start;&quot; data-ke-size=&quot;size18&quot;&gt;이번 포스트는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;Angular&lt;/span&gt;에 기본적인&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;Router&lt;/span&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-filename=&quot;angular-4-pragmatycznie-40-638-1.jpg&quot; data-origin-width=&quot;638&quot; data-origin-height=&quot;479&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cRuKL1/btsCraq2y6q/KXrUbsiENukg59xtpnEyy1/img.jpg&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cRuKL1/btsCraq2y6q/KXrUbsiENukg59xtpnEyy1/img.jpg&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cRuKL1/btsCraq2y6q/KXrUbsiENukg59xtpnEyy1/img.jpg&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcRuKL1%2FbtsCraq2y6q%2FKXrUbsiENukg59xtpnEyy1%2Fimg.jpg&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;638&quot; height=&quot;479&quot; data-filename=&quot;angular-4-pragmatycznie-40-638-1.jpg&quot; data-origin-width=&quot;638&quot; data-origin-height=&quot;479&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;Node version&amp;nbsp; &amp;nbsp;-20.9.0&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Angular CLI&amp;nbsp; &amp;nbsp; -17.0.3&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;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;b&gt;&amp;nbsp;Angular Router 란 ?&amp;nbsp;&lt;/b&gt;&lt;/blockquote&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Angular 애플리케이션에서 내비게이션을 관리하기 위한 라이브러리입니다.&amp;nbsp;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;단일 페이지 애플리케이션(SPA)에서 페이지간의 전환 및 라우팅을 담당합니다&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;SPA는 페이지를 새로 로드하지 않고도 동적으로 내용을 갱신할 수 있는 웹 애플리케이션을 의미합니다.&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;blockquote data-ke-style=&quot;style3&quot;&gt;&lt;b&gt;&amp;lt;router Link =&quot;&quot;&amp;gt; 와&amp;nbsp; &amp;lt;a href=&quot;&quot;&amp;gt; 의 차이점 ?&amp;nbsp;&lt;/b&gt;&lt;/blockquote&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;&amp;lt;router Link =&quot;&quot;&amp;gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;*SPA의 장점 중 하나인 동적 로딩을 구현할 수 있습니다&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;lt;a href=&quot;&quot;&amp;gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;*전체 페이지를 다시 로드하게 되어 브라우저가 서버로부터 새로운 HTML을 요청하고 응답을 받아오게 됩니다&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;*페이지 전환 시&amp;nbsp; 새로고침이 발생합니다&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style5&quot; /&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;1. Angular 프로젝트를 생성합니다&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;nbsp; -ng new --no--standalone&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; *17 버전 이후로는 Angular app.module.ts 없는 상태로 생성되기 때문에 저는&amp;nbsp; --no -standalone&amp;nbsp; 명령어를 통해&amp;nbsp; app.module.ts를 생성하겠습니다&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;프로젝트 생성.PNG&quot; data-origin-width=&quot;2287&quot; data-origin-height=&quot;198&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/49AWI/btsCoGqtEIC/jAuHqI5wR1s0oLOaGVqR21/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/49AWI/btsCoGqtEIC/jAuHqI5wR1s0oLOaGVqR21/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/49AWI/btsCoGqtEIC/jAuHqI5wR1s0oLOaGVqR21/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F49AWI%2FbtsCoGqtEIC%2FjAuHqI5wR1s0oLOaGVqR21%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;2287&quot; height=&quot;198&quot; data-filename=&quot;프로젝트 생성.PNG&quot; data-origin-width=&quot;2287&quot; data-origin-height=&quot;198&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;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;2. ng serve 명령어로 프로젝트를 실행합니다&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;nbsp;-ng serve&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2283&quot; data-origin-height=&quot;718&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/pkEdQ/btsCl0QNYM0/KlAleOiDL5h8XRQAKQcpHK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/pkEdQ/btsCl0QNYM0/KlAleOiDL5h8XRQAKQcpHK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/pkEdQ/btsCl0QNYM0/KlAleOiDL5h8XRQAKQcpHK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpkEdQ%2FbtsCl0QNYM0%2FKlAleOiDL5h8XRQAKQcpHK%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;2283&quot; height=&quot;718&quot; data-origin-width=&quot;2283&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&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1918&quot; data-origin-height=&quot;995&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/WPu6P/btsCr5W4tan/U39fHNXfEJpHnouPAGffx1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/WPu6P/btsCr5W4tan/U39fHNXfEJpHnouPAGffx1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/WPu6P/btsCr5W4tan/U39fHNXfEJpHnouPAGffx1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWPu6P%2FbtsCr5W4tan%2FU39fHNXfEJpHnouPAGffx1%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;1918&quot; height=&quot;995&quot; data-origin-width=&quot;1918&quot; data-origin-height=&quot;995&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;3. 라우팅 할 컴포넌트 생성하기&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;nbsp;-ng generate component First&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;&amp;nbsp;-ng generate component Second&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;2296&quot; data-origin-height=&quot;470&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bnZbTU/btsClJ2NvpY/MkNKPKDTE7sA79kHGin4Qk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bnZbTU/btsClJ2NvpY/MkNKPKDTE7sA79kHGin4Qk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bnZbTU/btsClJ2NvpY/MkNKPKDTE7sA79kHGin4Qk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbnZbTU%2FbtsClJ2NvpY%2FMkNKPKDTE7sA79kHGin4Qk%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;2296&quot; height=&quot;470&quot; data-origin-width=&quot;2296&quot; data-origin-height=&quot;470&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&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;4 .app.routing.module.ts 파일 상단에 방금 만든 컴포넌트들을 import 하기&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703135433929&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;5. app.module.ts에서 자동으로 import가 되었는지 확인&lt;/b&gt;&amp;nbsp;&lt;/p&gt;
&lt;pre id=&quot;code_1703135812279&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module'; //자동으로 import 됐는지 확인
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component'; 

@NgModule({
  declarations: [
    AppComponent,
    FirstComponent,
    SecondComponent
  ],
  imports: [
    BrowserModule, //자동으로 import 됐는지 확인
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;6&lt;/b&gt;. &lt;b&gt;app.routing.module.ts파일에 라우팅규칙을 Routes&amp;nbsp; 배열에 등록&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703136043010&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;const routes: Routes = [
  {path: 'First',  component: FirstComponent}, // path에 URL 주소를 지정 , Component에 해당 URL 주소에 연결될 컴포넌트를 지정
  {path: 'Second', component: SecondComponent}
];&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;7.app.component.html 파일 router&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1703137534121&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;h2&amp;gt;Angular-Router-Test&amp;lt;/h2&amp;gt;

&amp;lt;li&amp;gt;&amp;lt;a routerLink=&quot;/First&quot; routerLinkActive=&quot;active&quot; ariaCurrentWhenActive=&quot;page&quot;&amp;gt;First Component&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;&amp;lt;a routerLink=&quot;/Second&quot; routerLinkActive=&quot;active&quot; ariaCurrentWhenActive=&quot;page&quot;&amp;gt;Second Component&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;

&amp;lt;router-outlet&amp;gt;&amp;lt;/router-outlet&amp;gt;&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;b&gt;-routerLink&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;클릭 시 이동할 경로를 지정합니다&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;-routerLinkActive&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;routerLinkActive는 현재 활성화된 링크에 대한 CSS클래스를 정의합니다&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;-ariaCurrentWhenActive= &quot;page&quot;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;현재 페이지를 나타내는 역할을 부여합니다&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;현재 선택된 메뉴 항목을 시각적으로 구별하는데 도움이 됩니다&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;-&amp;lt;router-outlet &amp;gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;라우터가 동적으로 로드하는 컴포넌트를 표시하는 역할을하는 디렉티브입니다&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;8. 실행화면&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;( &lt;b&gt;1&lt;/b&gt; ). First Component 클릭시&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1410&quot; data-origin-height=&quot;256&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/yZVkS/btsCok2uNNS/6MeDEpqPkTsoYjh7sHx2p1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/yZVkS/btsCok2uNNS/6MeDEpqPkTsoYjh7sHx2p1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/yZVkS/btsCok2uNNS/6MeDEpqPkTsoYjh7sHx2p1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyZVkS%2FbtsCok2uNNS%2F6MeDEpqPkTsoYjh7sHx2p1%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;256&quot; data-origin-width=&quot;1410&quot; data-origin-height=&quot;256&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;( 2 ). Second Component 클릭시&amp;nbsp;&lt;/b&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1405&quot; data-origin-height=&quot;229&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dQRR9v/btsCnF60kiy/ZLSQDUdRg2IBA20lHwKU90/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dQRR9v/btsCnF60kiy/ZLSQDUdRg2IBA20lHwKU90/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dQRR9v/btsCnF60kiy/ZLSQDUdRg2IBA20lHwKU90/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdQRR9v%2FbtsCnF60kiy%2FZLSQDUdRg2IBA20lHwKU90%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;1405&quot; height=&quot;229&quot; data-origin-width=&quot;1405&quot; data-origin-height=&quot;229&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;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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;지금까지 Angular에서 Router를 사용하는 방법에 대해&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;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web Programming/Angular</category>
      <category>angular</category>
      <category>AngularJS</category>
      <category>Router</category>
      <category>라우터</category>
      <category>엥귤러</category>
      <category>웹프로그래밍</category>
      <category>자바스크립트</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/168</guid>
      <comments>https://cntechsystems.tistory.com/168#entry168comment</comments>
      <pubDate>Thu, 21 Dec 2023 15:17:29 +0900</pubDate>
    </item>
    <item>
      <title>Talend Studio와 TAC를 이용한 ETL 데모</title>
      <link>https://cntechsystems.tistory.com/167</link>
      <description>&lt;h3 id=&quot;%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94%C2%A0%EC%94%A8%EC%95%A4%ED%85%8D%20%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%A6%88%EC%9D%98%20%EA%B9%80%EC%A4%80%ED%98%95%C2%A0%EC%9E%85%EB%8B%88%EB%8B%A4.&quot; style=&quot;text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;color: #006dd7;&quot;&gt;&lt;u&gt;&lt;span&gt;&lt;b&gt;안녕하세요 씨앤텍시스템즈 김준형입니다.&lt;/b&gt;&lt;/span&gt;&lt;/u&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;이번 포스트는&lt;span style=&quot;color: #006dd7;&quot;&gt; Talend 기능&lt;/span&gt;에 대해서 정리해 보았습니다.&amp;nbsp;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;&lt;b&gt;Oralce의 테이블을 호출하고 ETL 기능을 수행하면서 Talend 기능을 살펴보겠습니다.&lt;/b&gt;&lt;/span&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;1200&quot; data-origin-height=&quot;628&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/DevLh/btsCgtKpUu5/tvBPx6hjwyMlC454BI5GOk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/DevLh/btsCgtKpUu5/tvBPx6hjwyMlC454BI5GOk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/DevLh/btsCgtKpUu5/tvBPx6hjwyMlC454BI5GOk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDevLh%2FbtsCgtKpUu5%2FtvBPx6hjwyMlC454BI5GOk%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;720&quot; height=&quot;377&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;628&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;Talend Studio의 실행환경은 윈도우에서 진행하였습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt; &lt;span style=&quot;color: #333333; text-align: center;&quot;&gt;TAC&lt;span&gt;(&lt;/span&gt;&lt;/span&gt;Talend Administrator Center)는 Linux 환경에 설치하고 윈도우에서 Web환경에서 진행했습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&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;1008&quot; data-origin-height=&quot;605&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/YxxMr/btsCguP8afD/ICDZdGIBYhmT0aVgzcbZqk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/YxxMr/btsCguP8afD/ICDZdGIBYhmT0aVgzcbZqk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/YxxMr/btsCguP8afD/ICDZdGIBYhmT0aVgzcbZqk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FYxxMr%2FbtsCguP8afD%2FICDZdGIBYhmT0aVgzcbZqk%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;617&quot; height=&quot;370&quot; data-origin-width=&quot;1008&quot; data-origin-height=&quot;605&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;먼저 Talend Studio 실행화면입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;여기서 Local에 Project를 만들고 고를 수 있고, TAC에서 만든 프로젝트를 연결할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size18&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;1407&quot; data-origin-height=&quot;755&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/uD3hL/btsCfZv6sPD/2BtWu4sNW34kSeTkwi5bJ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/uD3hL/btsCfZv6sPD/2BtWu4sNW34kSeTkwi5bJ0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/uD3hL/btsCfZv6sPD/2BtWu4sNW34kSeTkwi5bJ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuD3hL%2FbtsCfZv6sPD%2F2BtWu4sNW34kSeTkwi5bJ0%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;1407&quot; height=&quot;755&quot; data-origin-width=&quot;1407&quot; data-origin-height=&quot;755&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Talend Studio 메인화면입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;왼쪽 Repository에서 Job을 만들고 Database를 연결해서 불러올 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;가운데 설정창에서 옵션을 수정하거나 Job을 실행시킬 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;오른쪽 Palette에서 다양한 Talend 기능들을 Drag &amp;amp; Drop으로 Job을 만들 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1405&quot; data-origin-height=&quot;761&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/AWgHc/btsCf3SNX1S/ULrKypCxalKyYHqsu6G8TK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/AWgHc/btsCf3SNX1S/ULrKypCxalKyYHqsu6G8TK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/AWgHc/btsCf3SNX1S/ULrKypCxalKyYHqsu6G8TK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FAWgHc%2FbtsCf3SNX1S%2FULrKypCxalKyYHqsu6G8TK%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;1405&quot; height=&quot;761&quot; data-origin-width=&quot;1405&quot; data-origin-height=&quot;761&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;먼저 왼쪽 Repository에서 연결해 둔 Oracle에서 Table 하나를 Drag &amp;amp; Drop으로 불러오겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;869&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/KoZ1S/btsB7RsmB56/knfaO6aSbSiR6287E8HqmK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/KoZ1S/btsB7RsmB56/knfaO6aSbSiR6287E8HqmK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/KoZ1S/btsB7RsmB56/knfaO6aSbSiR6287E8HqmK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FKoZ1S%2FbtsB7RsmB56%2FknfaO6aSbSiR6287E8HqmK%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;2000&quot; height=&quot;869&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;869&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;테이블과 테이블을 tMap 기능을 이용해서 이어줄 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;1083&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/zDqVr/btsB7RFTdfx/pEYDbf4GmyxF97lpsz93i0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/zDqVr/btsB7RFTdfx/pEYDbf4GmyxF97lpsz93i0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/zDqVr/btsB7RFTdfx/pEYDbf4GmyxF97lpsz93i0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzDqVr%2FbtsB7RFTdfx%2FpEYDbf4GmyxF97lpsz93i0%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;2000&quot; height=&quot;1083&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;1083&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;tMap을 눌러 들어오면 다음과 같이 모달창을 볼 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;여기에서는 컬럼명을 수정하거나 타입을 바꿀 수 있고 원하는 컬럼만 Target에 넣을 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1405&quot; data-origin-height=&quot;762&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bWMKIr/btsCfZ3WChd/voSKB2v61E4fTDZbb6XfU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bWMKIr/btsCfZ3WChd/voSKB2v61E4fTDZbb6XfU1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bWMKIr/btsCfZ3WChd/voSKB2v61E4fTDZbb6XfU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWMKIr%2FbtsCfZ3WChd%2FvoSKB2v61E4fTDZbb6XfU1%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;1405&quot; height=&quot;762&quot; data-origin-width=&quot;1405&quot; data-origin-height=&quot;762&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;컬럼수가 많을때는 Auto map 기능을 통해서 컬럼들을 자동으로 이어줄 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;867&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/blzF0O/btsB8TwWgz0/g976KirP69eQAKi58RkOi0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/blzF0O/btsB8TwWgz0/g976KirP69eQAKi58RkOi0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/blzF0O/btsB8TwWgz0/g976KirP69eQAKi58RkOi0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FblzF0O%2FbtsB8TwWgz0%2Fg976KirP69eQAKi58RkOi0%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;2000&quot; height=&quot;867&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;867&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Subjob을 사용하지 않을 때는 Deactivate로 Job에서 잠시 제외할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;771&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bzCsCy/btsB5BxjfJa/JCWcDkrZztuwVi6lVKfoR1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bzCsCy/btsB5BxjfJa/JCWcDkrZztuwVi6lVKfoR1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bzCsCy/btsB5BxjfJa/JCWcDkrZztuwVi6lVKfoR1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbzCsCy%2FbtsB5BxjfJa%2FJCWcDkrZztuwVi6lVKfoR1%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;2000&quot; height=&quot;771&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;771&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음엔 다음과 같이 2개의 테이블을 하나의 테이블로 이행해 보겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1600&quot; data-origin-height=&quot;900&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bhAl8r/btsCfZQpn81/R1oeHnrQVmyDLSKVeTIe3k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bhAl8r/btsCfZQpn81/R1oeHnrQVmyDLSKVeTIe3k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bhAl8r/btsCfZQpn81/R1oeHnrQVmyDLSKVeTIe3k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbhAl8r%2FbtsCfZQpn81%2FR1oeHnrQVmyDLSKVeTIe3k%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;1600&quot; height=&quot;900&quot; data-origin-width=&quot;1600&quot; data-origin-height=&quot;900&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;tMap에 들어오면 다음과 같이 왼쪽에 테이블 2개 오른쪽에 Target테이블 1개 배치되어 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1398&quot; data-origin-height=&quot;499&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bF8EiU/btsB7jo9uRG/oAKNyaaL6KVvueu66bnRXk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bF8EiU/btsB7jo9uRG/oAKNyaaL6KVvueu66bnRXk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bF8EiU/btsB7jo9uRG/oAKNyaaL6KVvueu66bnRXk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbF8EiU%2FbtsB7jo9uRG%2FoAKNyaaL6KVvueu66bnRXk%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;1398&quot; height=&quot;499&quot; data-origin-width=&quot;1398&quot; data-origin-height=&quot;499&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;먼저 두 테이블의 ID 컬럼을 이어서 연결합니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;992&quot; data-origin-height=&quot;525&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/GSviM/btsB6OC8iKY/NXayE9v1gFpAaYMx6nVQK0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/GSviM/btsB6OC8iKY/NXayE9v1gFpAaYMx6nVQK0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/GSviM/btsB6OC8iKY/NXayE9v1gFpAaYMx6nVQK0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGSviM%2FbtsB6OC8iKY%2FNXayE9v1gFpAaYMx6nVQK0%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;992&quot; height=&quot;525&quot; data-origin-width=&quot;992&quot; data-origin-height=&quot;525&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같이 두개의 테이블이 ID 컬럼으로 키값이 연결되었습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1402&quot; data-origin-height=&quot;503&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bjLAru/btsCbe1IbPG/YjIgWyXJ8kbUetsqa5O2E0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bjLAru/btsCbe1IbPG/YjIgWyXJ8kbUetsqa5O2E0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bjLAru/btsCbe1IbPG/YjIgWyXJ8kbUetsqa5O2E0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjLAru%2FbtsCbe1IbPG%2FYjIgWyXJ8kbUetsqa5O2E0%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;1402&quot; height=&quot;503&quot; data-origin-width=&quot;1402&quot; data-origin-height=&quot;503&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;왼쪽 컬럼들을 선택해서 Target으로 옮길 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;컬럼을 선택할 때 Shift나 CTRL키를 이용해서 다량으로 선택할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1403&quot; data-origin-height=&quot;503&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/rndNw/btsB6nyYS1T/hPQ3FVa98mUmIQF1dulJQ0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/rndNw/btsB6nyYS1T/hPQ3FVa98mUmIQF1dulJQ0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/rndNw/btsB6nyYS1T/hPQ3FVa98mUmIQF1dulJQ0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrndNw%2FbtsB6nyYS1T%2FhPQ3FVa98mUmIQF1dulJQ0%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;1403&quot; height=&quot;503&quot; data-origin-width=&quot;1403&quot; data-origin-height=&quot;503&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;String Type으로 되어있는 EXTIME 컬럼을 Date타입으로 변경해 보겠습니다.&lt;br /&gt;가운데 Talend 함수를 하나 만들고 EXTIME 컬럼을 옮겨서 위치시겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;그 후에 가운데 ...을 클릭해서보면&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1362&quot; data-origin-height=&quot;1103&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cTYIhF/btsB7hZbtyT/Aoaa1LlF8FJvmrbEbBeAGk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cTYIhF/btsB7hZbtyT/Aoaa1LlF8FJvmrbEbBeAGk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cTYIhF/btsB7hZbtyT/Aoaa1LlF8FJvmrbEbBeAGk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcTYIhF%2FbtsB7hZbtyT%2FAoaa1LlF8FJvmrbEbBeAGk%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;1362&quot; height=&quot;1103&quot; data-origin-width=&quot;1362&quot; data-origin-height=&quot;1103&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같은 Talend 함수창을 볼 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Talend Studio는 JAVA로 이루어져 있기 때문에 다양한 JAVA 함수를 그대로 사용할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1358&quot; data-origin-height=&quot;1097&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ejjlzf/btsB8TwXuEC/MdTA4ijeW9rGqaiYLGc2k0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ejjlzf/btsB8TwXuEC/MdTA4ijeW9rGqaiYLGc2k0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ejjlzf/btsB8TwXuEC/MdTA4ijeW9rGqaiYLGc2k0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fejjlzf%2FbtsB8TwXuEC%2FMdTA4ijeW9rGqaiYLGc2k0%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;1358&quot; height=&quot;1097&quot; data-origin-width=&quot;1358&quot; data-origin-height=&quot;1097&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;TalendDate 함수중에 parseDate 함수를 이용해서 String -&amp;gt; Date 타입으로 변경해 보겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;parseDate를 더블클릭하여 본문에 띄워주시고, 데이터 형식에 맞게 날짜 형식을 변경해주고, 마지막 변수에 가져온 EXTIME 을 넣습니다. 그 후에 OK를 눌러주면&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1403&quot; data-origin-height=&quot;764&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/IC34k/btsCc4EKzX8/DJR06tlhXcDnjwicAJMh4K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/IC34k/btsCc4EKzX8/DJR06tlhXcDnjwicAJMh4K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/IC34k/btsCc4EKzX8/DJR06tlhXcDnjwicAJMh4K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FIC34k%2FbtsCc4EKzX8%2FDJR06tlhXcDnjwicAJMh4K%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;1403&quot; height=&quot;764&quot; data-origin-width=&quot;1403&quot; data-origin-height=&quot;764&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같이 가운데 함수안으로 들어가게 되고, 오른쪽 Target으로 Drag해서 옮깁니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;수정된 컬럼은 이름이 다르게 되어있기 때문에 오른쪽 밑에서 원하는 이름으로 변경한 뒤에 Date Pattern을 맞춥니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Date Pattern에 커서를 두고 CTRL+Space 키를 누르면 Pattern을 고를 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;811&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/u5M2Y/btsCf6PzQw1/9DT1wxBU9nc1lfkrkJwPU1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/u5M2Y/btsCf6PzQw1/9DT1wxBU9nc1lfkrkJwPU1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/u5M2Y/btsCf6PzQw1/9DT1wxBU9nc1lfkrkJwPU1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fu5M2Y%2FbtsCf6PzQw1%2F9DT1wxBU9nc1lfkrkJwPU1%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;2000&quot; height=&quot;811&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;811&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이제 완성한 Job을 실행해 보겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Target쪽 테이블을 눌러 옵션을 보면 Action on table 항목이 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;데이터 이행을 할 때 Target쪽에 만들어진 테이블이 없으면 만들고 넣어라 할 수도 있고,&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Truncate 후에 넣을수도 있습니다. 상황에 맞게 Option을 선택하면 되겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1618&quot; data-origin-height=&quot;1125&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/BK0f8/btsB7WAF9o7/WCEheGzQRIoqnapuDxnVTk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/BK0f8/btsB7WAF9o7/WCEheGzQRIoqnapuDxnVTk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/BK0f8/btsB7WAF9o7/WCEheGzQRIoqnapuDxnVTk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FBK0f8%2FbtsB7WAF9o7%2FWCEheGzQRIoqnapuDxnVTk%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;1618&quot; height=&quot;1125&quot; data-origin-width=&quot;1618&quot; data-origin-height=&quot;1125&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Run 탭에 와서 실행시킬 수 있습니다.&lt;br /&gt;Run 탭에서는 실행관련된 다양한 옵션을 수정할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;병렬로 실행할 수 있는 옵션과 JAVA기반 이기 때문에 JAVA RAM할당을 변경할 수도 있고,&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Job을 실행시킬 Job Server를 고를 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1612&quot; data-origin-height=&quot;1125&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dFAPqT/btsB6lVxyPd/DuInnM5w9EKTv6HImBJNC1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dFAPqT/btsB6lVxyPd/DuInnM5w9EKTv6HImBJNC1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dFAPqT/btsB6lVxyPd/DuInnM5w9EKTv6HImBJNC1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdFAPqT%2FbtsB6lVxyPd%2FDuInnM5w9EKTv6HImBJNC1%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;1612&quot; height=&quot;1125&quot; data-origin-width=&quot;1612&quot; data-origin-height=&quot;1125&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Job을 실행시키면 진행과정을 실시간으로 확인할 수 있고, 넘어가는 속도와 평균을 알 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;오류가 생길 경우 화면에서 확인 가능하고 Console 창에서 오류 이유를 찾을 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1137&quot; data-origin-height=&quot;792&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/1AgB0/btsB7cDBUjn/1SvkhkAetWjyGQFwGXCA3K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/1AgB0/btsB7cDBUjn/1SvkhkAetWjyGQFwGXCA3K/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/1AgB0/btsB7cDBUjn/1SvkhkAetWjyGQFwGXCA3K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1AgB0%2FbtsB7cDBUjn%2F1SvkhkAetWjyGQFwGXCA3K%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;1137&quot; height=&quot;792&quot; data-origin-width=&quot;1137&quot; data-origin-height=&quot;792&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음은 데이터 이행중에 tFilterRow 기능을 통해서 필터에 해당하는 값만 뽑아내서 Target에 넣는 기능입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;tFilterRow를 클릭해서 상황에 맞는 옵션을 설정해 줄 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1608&quot; data-origin-height=&quot;1125&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/J4s0N/btsB7QfWl61/tBYNyliKgWpuTyia5ZtcZK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/J4s0N/btsB7QfWl61/tBYNyliKgWpuTyia5ZtcZK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/J4s0N/btsB7QfWl61/tBYNyliKgWpuTyia5ZtcZK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJ4s0N%2FbtsB7QfWl61%2FtBYNyliKgWpuTyia5ZtcZK%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;857&quot; height=&quot;600&quot; data-origin-width=&quot;1608&quot; data-origin-height=&quot;1125&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;514&quot; data-origin-height=&quot;649&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/T7Epk/btsCf4YxvEu/DbvOf9qSOa4JAltQdzKVQ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/T7Epk/btsCf4YxvEu/DbvOf9qSOa4JAltQdzKVQ1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/T7Epk/btsCf4YxvEu/DbvOf9qSOa4JAltQdzKVQ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FT7Epk%2FbtsCf4YxvEu%2FDbvOf9qSOa4JAltQdzKVQ1%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;326&quot; height=&quot;649&quot; data-origin-width=&quot;514&quot; data-origin-height=&quot;649&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같이 필터에 해당하는 28rows만 Target에 이동했습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이처럼 다양한 ETL 기능들을 Palette에서 골라서 사용할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;926&quot; data-origin-height=&quot;955&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/oWWPt/btsB7VIzhdc/kf7On1ZnNBg24i6uNDXKO0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/oWWPt/btsB7VIzhdc/kf7On1ZnNBg24i6uNDXKO0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/oWWPt/btsB7VIzhdc/kf7On1ZnNBg24i6uNDXKO0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FoWWPt%2FbtsB7VIzhdc%2Fkf7On1ZnNBg24i6uNDXKO0%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;926&quot; height=&quot;955&quot; data-origin-width=&quot;926&quot; data-origin-height=&quot;955&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이제 만들어진 Job을 TAC를 이용해서 스케줄링 작업을 해보겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;해당하는 Job을 클릭하고 Build Job을 클릭합니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1200&quot; data-origin-height=&quot;1125&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bJ8mw9/btsB8VauFPx/3UzEuzBgCMpzRByxjuE8tK/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bJ8mw9/btsB8VauFPx/3UzEuzBgCMpzRByxjuE8tK/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bJ8mw9/btsB8VauFPx/3UzEuzBgCMpzRByxjuE8tK/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJ8mw9%2FbtsB8VauFPx%2F3UzEuzBgCMpzRByxjuE8tK%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;1200&quot; height=&quot;1125&quot; data-origin-width=&quot;1200&quot; data-origin-height=&quot;1125&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같이 옵션과 위치를 지정해주고 Job을 Zip파일로 압축하겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;압축할 때 Context를 이용해서 Database연결 변수나 파일위치 변수를 선택해 줄 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1600&quot; data-origin-height=&quot;900&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ecmMou/btsCewOzrg0/jovcdjnW2z8Y6WmyRjyi90/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ecmMou/btsCewOzrg0/jovcdjnW2z8Y6WmyRjyi90/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ecmMou/btsCewOzrg0/jovcdjnW2z8Y6WmyRjyi90/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FecmMou%2FbtsCewOzrg0%2FjovcdjnW2z8Y6WmyRjyi90%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;1600&quot; height=&quot;900&quot; data-origin-width=&quot;1600&quot; data-origin-height=&quot;900&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;그럼 이제 TAC로 넘어오도록 하겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;TAC는 리눅스에 설치했고, 윈도우 Web으로 들어온 상태입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;TAC는 유저관리, 프로젝트 관리, 스케줄링 관리, 모니터링 등 모든 진행상황을 확인하고 관리할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;먼저 로그인을 하겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1600&quot; data-origin-height=&quot;900&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/b2rmA7/btsB7k9GPrp/ktjlsnp6Z57rvYAbGwLKfk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/b2rmA7/btsB7k9GPrp/ktjlsnp6Z57rvYAbGwLKfk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/b2rmA7/btsB7k9GPrp/ktjlsnp6Z57rvYAbGwLKfk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb2rmA7%2FbtsB7k9GPrp%2Fktjlsnp6Z57rvYAbGwLKfk%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;1600&quot; height=&quot;900&quot; data-origin-width=&quot;1600&quot; data-origin-height=&quot;900&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같이 왼쪽에 다양한 메뉴를 확인할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;먼저 User 관리메뉴입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;사용자를 만들고 수정하고 지울 수 있고, 권한을 부여해서 권한관리도 수행할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;955&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/cmO5Wi/btsB7TcVwci/aQkpmm8iVmKkXzJQCorM41/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/cmO5Wi/btsB7TcVwci/aQkpmm8iVmKkXzJQCorM41/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/cmO5Wi/btsB7TcVwci/aQkpmm8iVmKkXzJQCorM41/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcmO5Wi%2FbtsB7TcVwci%2FaQkpmm8iVmKkXzJQCorM41%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;2000&quot; height=&quot;955&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;955&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음은 Project를 관리할 수 있는 메뉴입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Talend Project는 git과 연결해서 다른 user와 Job을 공유해서 사용할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Job은 한명이 수정중이면 다른 user는 수정할 수 없고 실행만 시킬 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;957&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ts2IT/btsB6Memu2z/nyZNvCL9HnJXkda39nwp01/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ts2IT/btsB6Memu2z/nyZNvCL9HnJXkda39nwp01/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ts2IT/btsB6Memu2z/nyZNvCL9HnJXkda39nwp01/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fts2IT%2FbtsB6Memu2z%2FnyZNvCL9HnJXkda39nwp01%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;2000&quot; height=&quot;957&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;957&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Project를 user당 권한을 부여할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Read / Write 권한을 나누어 관리 할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1402&quot; data-origin-height=&quot;673&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/lHW6X/btsB6xBg6PN/H2lfoX3qj1a6I9vbSc3t61/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/lHW6X/btsB6xBg6PN/H2lfoX3qj1a6I9vbSc3t61/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/lHW6X/btsB6xBg6PN/H2lfoX3qj1a6I9vbSc3t61/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlHW6X%2FbtsB6xBg6PN%2FH2lfoX3qj1a6I9vbSc3t61%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;1402&quot; height=&quot;673&quot; data-origin-width=&quot;1402&quot; data-origin-height=&quot;673&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음은 Job CONDUCTOR 입니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이 메뉴에서는 Job을 스케줄에 올릴 수 있고 시간 설정이 가능합니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Task를 하나 만들고 항목들을 입력하고 Talend Studio에서 Build해서 만든 Job zip파일을 불러오겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;2000&quot; data-origin-height=&quot;1077&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bSjum8/btsCfzq0uoW/cuI1AtLSeGYgSKtFe6hi6k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bSjum8/btsCfzq0uoW/cuI1AtLSeGYgSKtFe6hi6k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bSjum8/btsCfzq0uoW/cuI1AtLSeGYgSKtFe6hi6k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbSjum8%2FbtsCfzq0uoW%2FcuI1AtLSeGYgSKtFe6hi6k%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;2000&quot; height=&quot;1077&quot; data-origin-width=&quot;2000&quot; data-origin-height=&quot;1077&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음과 같이 Job을 불러올 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Job을 불러올 때는 Talend Studio에서 TAC에 Project를 연결해서 Job을 만들어야 넣을 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1600&quot; data-origin-height=&quot;900&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dK7KTA/btsB6xH00hI/ixaj66TUMgeq9JQoAkqvuk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dK7KTA/btsB6xH00hI/ixaj66TUMgeq9JQoAkqvuk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dK7KTA/btsB6xH00hI/ixaj66TUMgeq9JQoAkqvuk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdK7KTA%2FbtsB6xH00hI%2Fixaj66TUMgeq9JQoAkqvuk%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;1600&quot; height=&quot;900&quot; data-origin-width=&quot;1600&quot; data-origin-height=&quot;900&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;상단에 Run을 이용해서 실행해 보면 실행되는 Job을 실시간으로 확인할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이때 사용되는 Job Server는 Linux에 설치된 Job Server를 이용해서 실행하고 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1600&quot; data-origin-height=&quot;900&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/ctIQMU/btsB8UvUAJL/3QPkycYIVuCBzkhnxeRIH0/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/ctIQMU/btsB8UvUAJL/3QPkycYIVuCBzkhnxeRIH0/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/ctIQMU/btsB8UvUAJL/3QPkycYIVuCBzkhnxeRIH0/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctIQMU%2FbtsB8UvUAJL%2F3QPkycYIVuCBzkhnxeRIH0%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;1600&quot; height=&quot;900&quot; data-origin-width=&quot;1600&quot; data-origin-height=&quot;900&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;아래에 위치한 Triggers 탭을 이용해서 Job이 실행될 시간을 정할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;Trigger를 하나 만들고 오른쪽 옵션에서 시간과 interval을 입력해서 추가할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&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;1600&quot; data-origin-height=&quot;900&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dB46GN/btsB80CFbci/Uo2EOEKOzDsZWk9WmQkWek/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dB46GN/btsB80CFbci/Uo2EOEKOzDsZWk9WmQkWek/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dB46GN/btsB80CFbci/Uo2EOEKOzDsZWk9WmQkWek/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdB46GN%2FbtsB80CFbci%2FUo2EOEKOzDsZWk9WmQkWek%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;1600&quot; height=&quot;900&quot; data-origin-width=&quot;1600&quot; data-origin-height=&quot;900&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;실행중이거나 실행 완료된 Task는 모니터링 메뉴에서 확인 가능하고, 실패시 오류 로그나 이유를 찾아 볼 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;이렇게 이번 포스트에는 Talend Studio의 기능과 TAC의 기능을 살펴보았습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;다음엔 더 다양한 Talend의 기능을 소개해보고 실제 사례와 경험을 포스팅하겠습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 id=&quot;%EA%B0%90%EC%82%AC%ED%95%A9%EB%8B%88%EB%8B%A4.&quot; style=&quot;background-color: #ffffff; color: #333333; text-align: center;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;a style=&quot;color: #000000;&quot; href=&quot;https://cntechsystems.tistory.com/91#%EA%B0%90%EC%82%AC%ED%95%A9%EB%8B%88%EB%8B%A4.&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: 'Noto Sans Demilight', 'Noto Sans KR';&quot;&gt;감사합니다.&lt;/span&gt;&lt;/b&gt;&lt;/a&gt;&lt;/h3&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Business/Talend</category>
      <category>ETL</category>
      <category>QLIK</category>
      <category>tac</category>
      <category>TALEND</category>
      <category>Talend ETL</category>
      <category>Talend Studio</category>
      <category>Talend 데모</category>
      <category>무료 ETL</category>
      <category>씨앤텍시스템즈</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/167</guid>
      <comments>https://cntechsystems.tistory.com/167#entry167comment</comments>
      <pubDate>Mon, 18 Dec 2023 17:09:02 +0900</pubDate>
    </item>
    <item>
      <title>Spring Boot에서 MyBatis 적용</title>
      <link>https://cntechsystems.tistory.com/166</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;안녕하세요, 씨앤텍시스템즈 육지후 연구원입니다.&lt;/b&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;이번 포스트에서는 SpringBoot에서 MyBatis를 적용하는 방법에 대해 작성하려 합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #9d9d9d;&quot;&gt;※&amp;nbsp; 사전에 Spring Boot가 설치되어 있어야 합니다. ※&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;color: #9d9d9d; text-align: center;&quot;&gt;※&amp;nbsp; 해당 포스트는 Oracle을 사용하지만 다른 DB도 사용할 수 있습니다. ※&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;344&quot; data-origin-height=&quot;312&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/1Prdz/btsBXSedjW8/TedapkuxNEBDt2oSOevfVk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/1Prdz/btsBXSedjW8/TedapkuxNEBDt2oSOevfVk/img.png&quot; data-alt=&quot;MyBatis Logo&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/1Prdz/btsBXSedjW8/TedapkuxNEBDt2oSOevfVk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1Prdz%2FbtsBXSedjW8%2FTedapkuxNEBDt2oSOevfVk%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;291&quot; height=&quot;264&quot; data-origin-width=&quot;344&quot; data-origin-height=&quot;312&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;MyBatis Logo&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;1. MyBatis란?&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;MyBatis는 간단하게 데이터베이스를 쉽게 다룰 수 있도록 도와주는 프레임워크입니다. 프로그램에 있는 SQL 쿼리들을 한 구성파일에 구성하여 프로그램 코드와 SQL을 분리할 수 있는 장점을 가지고 있고 조회 결과를 사용자 정의 DTO, MAP 등으로 맵핑하여 사용할 수 있어 빠른 개발이 가능하고 생산성이 향상된다는 특징이 있습니다.&lt;b&gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;2.&amp;nbsp; 환경설정&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;pom.xml&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702541065311&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;dependency&amp;gt;
&amp;lt;groupId&amp;gt;org.mybatis.spring.boot&amp;lt;/groupId&amp;gt;
&amp;lt;artifactId&amp;gt;mybatis-spring-boot-starter&amp;lt;/artifactId&amp;gt;
&amp;lt;version&amp;gt;3.0.0&amp;lt;/version&amp;gt;
&amp;lt;/dependency&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;Spring Boot 프로젝트 생성 시 Spring Boot Starter에 MyBatis Framework 혹은 아래 코드를 pom.xml에 추가합니다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;application.properties&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702541867599&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;spring.datasource.url=jdbc:oracle:thin:@localhost:1521/cdb1?characterEncoding=UTF-8&amp;amp;serverTimezone=UTC
spring.datasource.username={DB 아이디}
spring.datasource.password={DB 비밀번호}&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;DB와 연결해줍니다.&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;SpringBootApplication&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702624788439&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;@Bean
	public SqlSessionFactory sqlSessionFactory(DataSource dataSource) throws Exception{
		SqlSessionFactoryBean sessionFactory = new SqlSessionFactoryBean();
		sessionFactory.setDataSource(dataSource);
		
        /* xml 파일 위치 지정 */
        /* src/main/resources에 있는 mapper폴더 아래 모든 xml 파일 */
        Resource[] res = new PathMatchingResourcePatternResolver().getResources(&quot;classpath:mapper/*.xml&quot;);
        sessionFactory.setMapperLocations(res);
        
        /* xml 파일에서 사용할 Model 폴더 지정 */
        sessionFactory.setTypeAliasesPackage(&quot;com.cnt.hmm.cognos.portal.model&quot;);
		
        return sessionFactory.getObject();
}&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;3. 로직 작성&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;Model&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702624992205&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;public class User {

	private String userId;
	private String userNm;
	private String userPw;
	private String userEmail;
	private String userPh;
	private String userLocation;
	private int userFailCount;
    		
            		⋮
    }&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;Controller&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702625140217&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;@RestController
public class UserController {

	/* 의존성 주입 */
    @Autowired
    public UserController(UserService userService) {
        this.userService = userService;
    }
	
    /* 유저 정보 불러오기 */
    @GetMapping(value = &quot;/api/cnt/test&quot;)
    public HashMap&amp;lt;Object, Object&amp;gt; test() throws Exception {
        HashMap&amp;lt;Object, Object&amp;gt; result = new HashMap&amp;lt;Object, Object&amp;gt;();
        try {
            List&amp;lt;User&amp;gt; userList = userService.selectUserList();
            result.put(&quot;result&quot;, userList);
        } catch(Exception e) {
            e.printStackTrace();
        }
        return result;
    }
 }&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;b&gt;Service&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702625220092&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;public interface UserService {

    List&amp;lt;User&amp;gt; selectUserList() throws Exception;
}&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;b&gt;ServiceImpl&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702625257426&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;@Service
public class UserServiceImpl implements UserService {

    private UserMapper userMapper;

    @Autowired
    public UserServiceImpl(UserMapper userMapper) {
        this.userMapper = userMapper;
    }

    @Override
    public List&amp;lt;User&amp;gt; selectUserList() throws Exception {
        return userMapper.selectUserList();
    }
}&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;b&gt;Mapper&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702625308914&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;@Mapper
public interface UserMapper {

    List&amp;lt;User&amp;gt; selectUserList() throws Exception;
}&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;b&gt;xml&lt;/b&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702625342830&quot; class=&quot;java&quot; data-ke-language=&quot;java&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;&amp;lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&amp;gt;
&amp;lt;!DOCTYPE mapper
		PUBLIC &quot;-//mybatis.org//DTD Mapper 3.0//EN&quot;
		&quot;http://mybatis.org/dtd/mybatis-3-mapper.dtd&quot;&amp;gt;

&amp;lt;mapper namespace=&quot;com.cnt.hmm.cognos.portal.mapper.UserMapper&quot;&amp;gt;

    &amp;lt;select id=&quot;selectUserList&quot; resultType=&quot;User&quot;&amp;gt;
        SELECT USER_ID as userId
             , USER_NM as userNm
             , USER_PW as userPw
             , USER_EMAIL as userEmail
             , USER_PH as userPh
             , USER_LOCATION as userLocation
             , USER_FAIL_COUNT as userFailCount 
          FROM USER_INFO_VIEW ORDER BY USER_ID DESC
    &amp;lt;/select&amp;gt;
	
&amp;lt;/mapper&amp;gt;&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;&amp;nbsp;위에서 Model 클래스의 경로를 설정했기 때문에 resultType에 클래스명으로만 작성이 가능합니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;데이터를 가져올 때 저장할 객체의 속성 이름과 같도록 as를 사용해서 데이터를 객체로 받습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;객체와 이름을 동일하게 적을 경우 객체로 정보가 알아서 저장됩니다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&amp;nbsp;&lt;b&gt;3. 결과&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;로직을 작성했으니 Postman으로 테스트를 해보겠습니다.&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;688&quot; data-origin-height=&quot;53&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/c1lRk7/btsB3cQSajS/kEC1bpyecIAELN3rKH9l7K/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/c1lRk7/btsB3cQSajS/kEC1bpyecIAELN3rKH9l7K/img.png&quot; data-alt=&quot;Postman Request&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/c1lRk7/btsB3cQSajS/kEC1bpyecIAELN3rKH9l7K/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc1lRk7%2FbtsB3cQSajS%2FkEC1bpyecIAELN3rKH9l7K%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;688&quot; height=&quot;53&quot; data-origin-width=&quot;688&quot; data-origin-height=&quot;53&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Postman Request&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style8&quot; /&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;589&quot; data-origin-height=&quot;469&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/daZQTJ/btsB2askcq5/yYSd41Mic65L7nyJ91Yp1k/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/daZQTJ/btsB2askcq5/yYSd41Mic65L7nyJ91Yp1k/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/daZQTJ/btsB2askcq5/yYSd41Mic65L7nyJ91Yp1k/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdaZQTJ%2FbtsB2askcq5%2FyYSd41Mic65L7nyJ91Yp1k%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;589&quot; height=&quot;469&quot; data-origin-width=&quot;589&quot; data-origin-height=&quot;469&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;p&gt;&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1227&quot; data-origin-height=&quot;87&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/3VZ6X/btsB1C3RHPR/LURJwV5T9YfrbpTqmTMQsk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/3VZ6X/btsB1C3RHPR/LURJwV5T9YfrbpTqmTMQsk/img.png&quot; data-alt=&quot;Oracle Data (DBeaver)&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/3VZ6X/btsB1C3RHPR/LURJwV5T9YfrbpTqmTMQsk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3VZ6X%2FbtsB1C3RHPR%2FLURJwV5T9YfrbpTqmTMQsk%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;1227&quot; height=&quot;87&quot; data-origin-width=&quot;1227&quot; data-origin-height=&quot;87&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;Oracle Data (DBeaver)&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;그리고 DB에 있는 Data를 확인해보면 일치하여 결과가 잘 나온다는 것을 확인할 수 있습니다.&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style7&quot; /&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;지금까지 SpringBoot에서 MyBatis를 적용하고 사용하는 방법에 대해 작성해보았습니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;감사합니다.&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: center;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Web Programming</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/166</guid>
      <comments>https://cntechsystems.tistory.com/166#entry166comment</comments>
      <pubDate>Fri, 15 Dec 2023 16:54:55 +0900</pubDate>
    </item>
    <item>
      <title>Redhat 8.8 IBM DB2 11.5.8 서버 설치 (root)</title>
      <link>https://cntechsystems.tistory.com/165</link>
      <description>&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;안녕하세요, &lt;span style=&quot;color: #006dd7;&quot;&gt;씨앤텍시스템즈&lt;/span&gt;입니다.&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이번 게시물은 Redhat 8.8 환경에 IBM DB2 서버 기본 설치에 대해 알아보겠습니다.&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 alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;pngwing.com.png&quot; data-origin-width=&quot;500&quot; data-origin-height=&quot;500&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bqsSKO/btsB1LYUBvs/fwEhaoY4LeZJ7rtZQ1mYZ1/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bqsSKO/btsB1LYUBvs/fwEhaoY4LeZJ7rtZQ1mYZ1/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bqsSKO/btsB1LYUBvs/fwEhaoY4LeZJ7rtZQ1mYZ1/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqsSKO%2FbtsB1LYUBvs%2FfwEhaoY4LeZJ7rtZQ1mYZ1%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;352&quot; height=&quot;500&quot; data-filename=&quot;pngwing.com.png&quot; data-origin-width=&quot;500&quot; data-origin-height=&quot;500&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;1. 사용환경&lt;/b&gt;&lt;/h4&gt;
&lt;table style=&quot;border-collapse: collapse; width: 88.1395%; height: 84px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 20px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Remote Network Tool&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 20px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;MobaXterm&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;Virtual Machine Software&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Oracle VM VirtualBox&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;OS&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Red Hat Enterprise Linux release 8.8 (0otpa)&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Memory&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;8192MB&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Processor&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;4 CPU&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;2. 설치파일&lt;/b&gt;&lt;/h4&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;v11.5.8_linuxx64_server_dec.tar.gz&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&amp;nbsp;&lt;/h4&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;3. 시스템 요구사항&lt;/b&gt;&lt;/h4&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&lt;a href=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot;&gt;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1702516452897&quot; style=&quot;color: #333333; text-align: start;&quot; data-og-image=&quot;&quot; data-og-url=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; data-og-source-url=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; data-og-host=&quot;www.ibm.com&quot; data-og-description=&quot;System requirements for IBM Db2 for Linux, UNIX, and Windows&quot; data-og-title=&quot;System requirements for IBM Db2 for Linux, UNIX, and Windows&quot; data-og-type=&quot;website&quot; data-ke-align=&quot;alignCenter&quot; data-ke-type=&quot;opengraph&quot;&gt;&lt;a style=&quot;color: #000000;&quot; href=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; data-source-url=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;div class=&quot;og-text&quot;&gt;
&lt;p class=&quot;og-title&quot; style=&quot;color: #000000;&quot; data-ke-size=&quot;size16&quot;&gt;System requirements for IBM Db2 for Linux, UNIX, and Windows&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; style=&quot;color: #909090;&quot; data-ke-size=&quot;size16&quot;&gt;System requirements for IBM Db2 for Linux, UNIX, and Windows&lt;/p&gt;
&lt;p class=&quot;og-host&quot; style=&quot;color: #909090;&quot; data-ke-size=&quot;size16&quot;&gt;www.ibm.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;해당 IBM URL에서 버전에 해당하는 소프트웨어, 시스템 요구사항을 제공하고 있습니다.&lt;/span&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;&lt;b&gt;4. DB2 설치&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;1) 루트 계정 접속&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;2) 설치파일 압축해제&lt;/p&gt;
&lt;pre id=&quot;code_1702516872733&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# tar -xvzf v11.5.8_linuxx64_server_dec.tar.gz&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - 압축 파일을 해제하면 'server_dec' 폴더가 생성됩니다.&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;3) 설치 폴더 들어가기&lt;/p&gt;
&lt;pre id=&quot;code_1702517095918&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# cd server_dec/&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;&amp;nbsp;4) 설치 전 필요 패키지 검사&lt;/p&gt;
&lt;pre id=&quot;code_1702517230005&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# ./db2prereqcheck -v 11.5.8.0&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - 필자는 11.5.8 버전을 설치하기에 해당 버전의 필요 패키지를 검사했습니다.&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;5) db2 설치 파일 실행(slient)&lt;/p&gt;
&lt;pre id=&quot;code_1702517465203&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# ./db2_install&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - &quot;server_dec/db2_install&quot; 실행&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - GUI 설치도 있지만 필자는 Slinet 모드로 설치를 진행했습니다.&lt;/p&gt;
&lt;pre id=&quot;code_1702518768940&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;라이센스 동의 : yes
설치 경로 : yes =&amp;gt; 기본경로 no =&amp;gt; 임의로 지정
제품 설치 : SERVER
DB2 pureScale Feature : no&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;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;6) 인스턴스 생성&lt;/p&gt;
&lt;pre id=&quot;code_1702519600414&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# cd /opt/ibm/db2/V11.5/instance/&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - 인스턴스 명령어가 있는 폴더 진입 '&amp;lt;installation_directory&amp;gt;/instance/'&lt;/p&gt;
&lt;pre id=&quot;code_1702519717098&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# ./db2icrt -u tistory tistory
DBI1446I  The db2icrt command is running.


DB2 installation is being initialized.&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; -&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;7) DB2 테스트&lt;/p&gt;
&lt;pre id=&quot;code_1702519801290&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# su - tistory&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - 인스턴스로 생성한 사용자 계정으로 로그인합니다&lt;/p&gt;
&lt;pre id=&quot;code_1702519835020&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2start
12/14/2023 11:09:17     0   0   SQL1063N  DB2START processing was successful.
SQL1063N  DB2START processing was successful.&lt;/code&gt;&lt;/pre&gt;
&lt;pre id=&quot;code_1702520013837&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2stop
2023-12-14 11:13:09     0   0   SQL1064N  DB2STOP processing was successful.
SQL1064N  DB2STOP processing was successful.&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - db2 시작 및 정지 명령어를 통해 테스트합니다&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;&lt;b&gt;5. DB2 설정&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;1) 인스턴스 계정 로그인&lt;/p&gt;
&lt;pre id=&quot;code_1702520076403&quot; class=&quot;bash&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;# su - tistory&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;&amp;nbsp;2) TCP/IP, Port 설정&lt;/p&gt;
&lt;pre id=&quot;code_1702520132437&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2set DB2COMM=tcpip
$ db2 update dbm cfg using svcename 50000
DB20000I  The UPDATE DATABASE MANAGER CONFIGURATION command completed
successfully.&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;&amp;nbsp;3) db2 시작 및 서비스 확인&lt;/p&gt;
&lt;pre id=&quot;code_1702520190131&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2start
12/14/2023 11:15:15     0   0   SQL1063N  DB2START processing was successful.
SQL1063N  DB2START processing was successful.
$ netstat -antup | grep 50000
(Not all processes could be identified, non-owned process info
 will not be shown, you would have to be root to see it all.)
tcp6       0      0 :::50000                :::*                    LISTEN      87484/db2sysc 0&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - 위와 같이 50000 포트에 db2가 동작하고 있는 것을 볼 수 있습니다&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;&lt;b&gt; ※&amp;nbsp;인스턴스 제거&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; 1) 루트 권한 계정으로 로그인&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; 2) 인스턴스 제거&lt;/p&gt;
&lt;pre id=&quot;code_1702520329860&quot; class=&quot;bash&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;# cd /opt/ibm/db2/V11.5/instance/&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp; - 인스턴스 명령어가 있는 폴더 진입 '&amp;lt;installation_directory&amp;gt;/instance/'&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;Redhat 8.8 환경에 IBM DB2 Enterprise Server 11.5.8.0 설치를 해보았습니다.&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;</description>
      <category>Data/Database</category>
      <category>DB2</category>
      <category>DB2 설치</category>
      <category>IBM DB2</category>
      <category>IBM DB2 설치</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/165</guid>
      <comments>https://cntechsystems.tistory.com/165#entry165comment</comments>
      <pubDate>Thu, 14 Dec 2023 14:46:13 +0900</pubDate>
    </item>
    <item>
      <title>Redhat 8.8 IBM DB2 11.5.8 서버 사용자 설치 (non-root)</title>
      <link>https://cntechsystems.tistory.com/164</link>
      <description>&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&lt;b&gt;안녕하세요, &lt;span style=&quot;color: #006dd7;&quot;&gt;씨앤텍시스템즈&lt;/span&gt;입니다.&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;이번 게시물은 IBM DB2 사용자 설치(non-root) 방법에 대해 알아보겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: left;&quot; data-ke-size=&quot;size14&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;※ 실 사용 시 root 계정을 사용하지 못하는 경우가 빈번히 발생하므로 사용자 설치를 통해&lt;/span&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;이를 해결하기 위함입니다.&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure class=&quot;imageblock alignLeft&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-filename=&quot;pngwing.com.png&quot; data-origin-width=&quot;500&quot; data-origin-height=&quot;500&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bGHdz8/btsBXN3VtNo/W2vSZBam0eTps4K7DjGZ81/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bGHdz8/btsBXN3VtNo/W2vSZBam0eTps4K7DjGZ81/img.png&quot; data-alt=&quot;IBM DB2 Logo&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bGHdz8/btsBXN3VtNo/W2vSZBam0eTps4K7DjGZ81/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbGHdz8%2FbtsBXN3VtNo%2FW2vSZBam0eTps4K7DjGZ81%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;356&quot; height=&quot;500&quot; data-filename=&quot;pngwing.com.png&quot; data-origin-width=&quot;500&quot; data-origin-height=&quot;500&quot;/&gt;&lt;/span&gt;&lt;figcaption&gt;IBM DB2 Logo&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;1. 사용환경&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;table style=&quot;border-collapse: collapse; width: 88.1395%; height: 84px;&quot; border=&quot;1&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;text-align: center; width: 49.8681%; height: 20px;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Remote Network Tool&lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;text-align: center; width: 49.8681%; height: 20px;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt; &lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;MobaXterm&lt;/span&gt; &lt;/span&gt;&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;height: 16px; text-align: center; width: 49.8681%;&quot;&gt;&lt;b&gt;Virtual Machine Software&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;text-align: center; width: 49.8681%; height: 16px;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt; &lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Oracle VM VirtualBox&lt;/span&gt; &lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;OS&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Red Hat Enterprise Linux release 8.8 (0otpa)&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Memory&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;8192MB&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 16px;&quot;&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;Processor&lt;/span&gt;&lt;/b&gt;&lt;/td&gt;
&lt;td style=&quot;width: 49.8681%; height: 16px; text-align: center;&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;4 CPU&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 style=&quot;color: #333333; text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;2. 설치파일&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;v11.5.8_linuxx64_server_dec.tar.gz&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;3. 시스템 요구사항&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&lt;a href=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; target=&quot;_blank&quot; rel=&quot;noopener&amp;nbsp;noreferrer&quot;&gt;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1702454127426&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;System requirements for IBM Db2 for Linux, UNIX, and Windows&quot; data-og-description=&quot;System requirements for IBM Db2 for Linux, UNIX, and Windows&quot; data-og-host=&quot;www.ibm.com&quot; data-og-source-url=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; data-og-url=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; data-og-image=&quot;&quot;&gt;&lt;a href=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://www.ibm.com/support/pages/system-requirements-ibm-db2-linux-unix-and-windows&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url();&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;System requirements for IBM Db2 for Linux, UNIX, and Windows&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;System requirements for IBM Db2 for Linux, UNIX, and Windows&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;www.ibm.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;해당 IBM URL에서 버전에 해당하는 소프트웨어, 시스템 요구사항을 제공하고 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;4. 사전 준비사항&lt;/b&gt;&lt;/h3&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;IBM DB2를 사용자 설치로 진행하기는 하나 sudo 권한이 필요하기 때문에 사용자 계정을 sudoer에 추가해 주겠습니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;1) root 권한으로 /etc/suoders 파일 수정&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702346767540&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;# visudo&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;2) sudoer 파일에 아래와 같이 사용자 추가 후 저장&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702346946341&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;## Allow root to run any commands anywhere
root    ALL=(ALL)       ALL
tistory       ALL=(ALL)       ALL&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;5. IBM DB2 설치 (non-root)&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;1) 설치파일 압축해제&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702347388155&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ tar -xvzf v11.5.8_linuxx64_server_dec.tar.gz&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;2) 설치 폴더 들어가기 &lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp; - 경로 : &amp;lt;Install_Direcotry&amp;gt;/serverdec&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702347789559&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ cd server_dec/&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;3) DB2 필요 패키지 검색&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&amp;nbsp; - 설치 전 필요한 패키지들이 표시되는데 해당 패키지들을 설치합니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702357124878&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ ./db2prereqcheck -v 11.5.8.0&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;4) DB2 설치 파일 실행&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702364848088&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ ./db2_install&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;5) CLI 응답하며 설치 진행&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702367840630&quot; class=&quot;bash&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;yes -&amp;gt; SERVER&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;6) 재로그인 후 db2 서비스를 정지합니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702368303933&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2stop&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;6. IBM DB2 설정&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;1) 사용자 계정으로 로그인합니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702367911701&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ su - tistory&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;2) DB2 instance 폴더(&amp;lt;install_directory&amp;gt;/sqllib/instance)로 들어갑니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702367977415&quot; class=&quot;bash&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;$ cd sqllib/instance/&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;3) db2rfe.cfg 파일을 수정 및 저장합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&amp;nbsp; - OS 인증을 허용하여 OS 계정을 DB계정으로 사용 가능하게 합니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702368072478&quot; class=&quot;bash&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;$ sudo vi ./db2rfe.cfg

-- 수정 내용
ENABLE_OS_AUTHENTICATION=YES&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;4) DB2 설정을 적용합니다.&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&amp;nbsp; - 혹 인스턴스 실행 중이라는 오류 발생 시, 'db2stop' 명령어를 통해 db2 서비스를 종료합니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702368260846&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ sudo ./db2rfe -f db2rfe.cfg&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;5) TCP/IP , 포트 설정&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702432206995&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2set DB2COMM=tcpip
$ db2 update dbm cfg using svcename 50000
DB20000I  The UPDATE DATABASE MANAGER CONFIGURATION command completed
successfully.&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;6) DB2 서비스 시작&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702432236528&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2start
12/13/2023 11:17:21     0   0   SQL1063N  DB2START processing was successful.
SQL1063N  DB2START processing was successful.&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;7) DB 서비스 확인&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702445464514&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ netstat -antup | grep 50000
(Not all processes could be identified, non-owned process info
 will not be shown, you would have to be root to see it all.)
tcp6       0      0 :::50000                :::*                    LISTEN      28594/db2sysc 0&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;7. Sample DB 생성 및 조회&lt;/span&gt;&lt;/b&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;1) 사용자 계정 로그인&lt;/span&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;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;2) db2 sample db 생성&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&amp;nbsp; - &lt;b&gt;db2sampl&lt;/b&gt; 은 샘플 데이터베이스 생성 단축어이며 &lt;b&gt;dbpath&lt;/b&gt; 옵션은 샘플 데이터베이스가 생성되는 경로입니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702445644850&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;$ db2sampl -dbpath $HOME&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;3) db2 cli 접속&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702452415304&quot; class=&quot;bash&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;$ db2
(c) Copyright IBM Corporation 1993,2007
Command Line Processor for DB2 Client 11.5.8.0
db2 =&amp;gt;&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;4) 인스턴스 시스템 데이터베이스 목록&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif; color: #333333; text-align: start;&quot;&gt;&amp;nbsp; - SAMPLE 데이터베이스가 있는 것을 볼 수 있습니다.&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702453882120&quot; class=&quot;bash&quot; style=&quot;background-color: #f6f7f8; color: #555555; text-align: start;&quot; data-ke-type=&quot;codeblock&quot; data-ke-language=&quot;bash&quot;&gt;&lt;code&gt;db2 =&amp;gt;list db directory
 System Database Directory

 Number of entries in the directory = 1

Database 1 entry:

 Database alias                       = SAMPLE
 Database name                        = SAMPLE
 Local database directory             = /home/tistory
 Database release level               = 15.00
 Comment                              =
 Directory entry type                 = Indirect
 Catalog database partition number    = 0
 Alternate server hostname            =
 Alternate server port number         =&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;5) 데이터베이스 연결&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702453956630&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;db2 =&amp;gt; connect to sample

   Database Connection Information

 Database server        = DB2/LINUXX8664 11.5.8.0
 SQL authorization ID   = TISTORY
 Local database alias   = SAMPLE&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;6) 테이블 목록&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702454020983&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;db2 =&amp;gt; list tables

Table/View                      Schema          Type  Creation time
------------------------------- --------------- ----- --------------------------
ACT                             TISTORY         T     2023-12-13-14.33.29.563707
ADEFUSR                         TISTORY         S     2023-12-13-14.33.33.057501
CATALOG                         TISTORY         T     2023-12-13-14.33.38.300749
CL_SCHED                        TISTORY         T     2023-12-13-14.33.24.716948
CUSTOMER                        TISTORY         T     2023-12-13-14.33.37.370116
DEPARTMENT                      TISTORY         T     2023-12-13-14.33.25.908953
DEPT                            TISTORY         A     2023-12-13-14.33.26.777276&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;span style=&quot;font-family: AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, 돋움, sans-serif;&quot;&gt;&amp;nbsp;7) 테이블 조회&lt;/span&gt;&lt;/p&gt;
&lt;pre id=&quot;code_1702454044286&quot; class=&quot;bash&quot; data-ke-language=&quot;bash&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;db2 =&amp;gt; select * from ACT

ACTNO  ACTKWD ACTDESC
------ ------ --------------------
    10 MANAGE MANAGE/ADVISE
    20 ECOST  ESTIMATE COST
    30 DEFINE DEFINE SPECS
    40 LEADPR LEAD PROGRAM/DESIGN
    50 SPECS  WRITE SPECS
    60 LOGIC  DESCRIBE LOGIC
    70 CODE   CODE PROGRAMS
    80 TEST   TEST PROGRAMS
    90 ADMQS  ADM QUERY SYSTEM
   100 TEACH  TEACH CLASSES
   110 COURSE DEVELOP COURSES
   120 STAFF  PERS AND STAFFING
   130 OPERAT OPER COMPUTER SYS
   140 MAINT  MAINT SOFTWARE SYS
   150 ADMSYS ADM OPERATING SYS
   160 ADMDB  ADM DATA BASES
   170 ADMDC  ADM DATA COMM
   180 DOC    DOCUMENT

  18 record(s) selected.&lt;/code&gt;&lt;/pre&gt;
&lt;hr contenteditable=&quot;false&quot; data-ke-type=&quot;horizontalRule&quot; data-ke-style=&quot;style6&quot; /&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;이렇게 db2 사용자 설치 및 설정 후 샘플 데이터베이스를 생성하여 조회하는 것까지 알아보았습니다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;다음 게시물은 IBM DB2 기본 설치로 뵙겠습니다.&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;</description>
      <category>Data/Database</category>
      <category>DB2</category>
      <category>DB2 설치</category>
      <category>IBM DB2</category>
      <category>IBM DB2 NON-ROOT</category>
      <category>IBM DB2 설치</category>
      <author>씨앤텍</author>
      <guid isPermaLink="true">https://cntechsystems.tistory.com/164</guid>
      <comments>https://cntechsystems.tistory.com/164#entry164comment</comments>
      <pubDate>Wed, 13 Dec 2023 17:27:14 +0900</pubDate>
    </item>
  </channel>
</rss>