<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>Hello world!</title>
    <link>https://chillcoding.tistory.com/</link>
    <description></description>
    <language>ko</language>
    <pubDate>Thu, 16 Jul 2026 05:34:56 +0900</pubDate>
    <generator>TISTORY</generator>
    <ttl>100</ttl>
    <managingEditor>chillcoder</managingEditor>
    <item>
      <title>[JS 빌트인 메서드] Array.prototype.indexOf() - 배열 요소 검색하기</title>
      <link>https://chillcoding.tistory.com/37</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;자바스크립트는 많은 유용한 빌트인 메서드들을 제공한다.&lt;br /&gt;MDN 사이트에 들어가서 검색하면 어렵지 않게 메서드에 대한 정보를 찾을 수 있지만,&lt;br /&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;Array.prototype.indexOf 메서드는 Array.prototype의 메서드로,&lt;br /&gt;배열 객체가 상속받아 자신의 메서드처럼 사용할 수 있다.&lt;br /&gt;(참고로 프로토타입은 자바스크립트에서 중요한 개념이므로 다음 포스팅에서 따로 다룰 예정이다...)&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #f6e199;&quot;&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;원본 배열에서 인수로 전달된 요소를 검색하여 첫번째 인덱스 반환, 없으면 -1 반환&lt;/p&gt;
&lt;pre class=&quot;angelscript&quot;&gt;&lt;code&gt;const array = [2, 2, 9, 9];
array.indexOf(2); // 0
array.indexOf(7); // -1&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #f6e199;&quot;&gt;&lt;b&gt;Parameters&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;pre class=&quot;stylus&quot;&gt;&lt;code&gt;indexOf(searchElement) // 요소
indexOf(searchElement, fromIndex) // 요소, 검색을 시작할 인덱스&lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #f6e199;&quot;&gt;&lt;b&gt;Return value&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;i&gt;searchElement&lt;/i&gt; 의 인덱스&lt;/li&gt;
&lt;li&gt;여러 개일 경우 첫번째 인덱스&lt;/li&gt;
&lt;li&gt;존재 안할 경우 -1&lt;/li&gt;
&lt;/ul&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #f6e199;&quot;&gt;&lt;b&gt;Examples&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;1. 특정 요소의 개수 확인하기&lt;/p&gt;
&lt;pre class=&quot;maxima&quot;&gt;&lt;code&gt;const indices = \[\];  
const array = \[&quot;a&quot;, &quot;b&quot;, &quot;a&quot;, &quot;c&quot;, &quot;a&quot;, &quot;d&quot;\];  
const element = &quot;a&quot;;  
let idx = array.indexOf(element);  

while (idx !== -1) {  
  indices.push(idx);  
  idx = array.indexOf(element, idx + 1);  
}  

console.log(indices); // \[0, 2, 4\]  
console.log(indices.length) // 3  &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;2. 요소가 있는지 확인하고, 없을 경우 요소 업데이트하기&lt;/p&gt;
&lt;pre class=&quot;livescript&quot;&gt;&lt;code&gt;function updateVegetablesCollection(veggies, veggie) {  
  if (veggies.indexOf(veggie) === -1) {  
    veggies.push(veggie);  
    console.log(\`New veggies collection is: ${veggies}\`);  
  } else {  
    console.log(\`${veggie} already exists in the veggies collection.\`);  
  }  
}  

const veggies = \[&quot;potato&quot;, &quot;tomato&quot;, &quot;chillies&quot;, &quot;green-pepper&quot;\];  

updateVegetablesCollection(veggies, &quot;spinach&quot;);  
// New veggies collection is: potato,tomato,chillies,green-pepper,spinach  
updateVegetablesCollection(veggies, &quot;spinach&quot;);  
// spinach already exists in the veggies collection.  &lt;/code&gt;&lt;/pre&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;b&gt;&lt;span style=&quot;background-color: #f6e199;&quot;&gt;Also see&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;&lt;i&gt;Array.prototype.include()&lt;/i&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;pre class=&quot;gauss&quot;&gt;&lt;code&gt;// 아래 코드는   
if (veggies.indexOf(veggie) === -1)   

// Array.prototype.include 메서드를 사용하여  
// 아래와 같이 쓸 수 있다.  
if (!veggies.includes(veggie))  &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;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#finding_if_an_element_exists_in_the_array_or_not_and_updating_the_array&quot;&gt;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1705000464418&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;Array.prototype.indexOf() - JavaScript | MDN&quot; data-og-description=&quot;The indexOf() method of Array instances returns the first index at which a given element can be found in the array, or -1 if it is not present.&quot; data-og-host=&quot;developer.mozilla.org&quot; data-og-source-url=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#finding_if_an_element_exists_in_the_array_or_not_and_updating_the_array&quot; data-og-url=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/ev65Q0/hyU5MdfKrg/Ua4WxvURbzzzkCDt3xklAk/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080&quot;&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#finding_if_an_element_exists_in_the_array_or_not_and_updating_the_array&quot; target=&quot;_blank&quot; rel=&quot;noopener&quot; data-source-url=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#finding_if_an_element_exists_in_the_array_or_not_and_updating_the_array&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/ev65Q0/hyU5MdfKrg/Ua4WxvURbzzzkCDt3xklAk/img.png?width=1920&amp;amp;height=1080&amp;amp;face=0_0_1920_1080');&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;Array.prototype.indexOf() - JavaScript | MDN&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; data-ke-size=&quot;size16&quot;&gt;The indexOf() method of Array instances returns the first index at which a given element can be found in the array, or -1 if it is not present.&lt;/p&gt;
&lt;p class=&quot;og-host&quot; data-ke-size=&quot;size16&quot;&gt;developer.mozilla.org&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>JavaScript</category>
      <category>prototype_method</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/37</guid>
      <comments>https://chillcoding.tistory.com/37#entry37comment</comments>
      <pubDate>Fri, 12 Jan 2024 04:10:09 +0900</pubDate>
    </item>
    <item>
      <title>[VSCode] 맥 Mac VSCode 기본 단축키</title>
      <link>https://chillcoding.tistory.com/36</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table style=&quot;height: 138px;&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr style=&quot;height: 18px;&quot;&gt;
&lt;th style=&quot;height: 18px;&quot;&gt;General&lt;/th&gt;
&lt;th style=&quot;height: 18px;&quot;&gt;&amp;nbsp;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;⇧⌘P&lt;/td&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;Sh명령 팔레트 표시&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;⌘,&lt;/td&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;사용자 설정&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;⌘K ⌘S&lt;/td&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;단축키 설정&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;⌃`&lt;/td&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;터미널 토글&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;⇧⌘M&lt;/td&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;Problems 패널 토글&lt;/td&gt;
&lt;/tr&gt;
&lt;tr style=&quot;height: 20px;&quot;&gt;
&lt;td style=&quot;height: 20px;&quot;&gt;⌃⌘Space&lt;/td&gt;
&lt;td style=&quot;height: 20px;&quot;&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Basic Editing&lt;/th&gt;
&lt;th&gt;&amp;nbsp;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;⌘X&lt;/td&gt;
&lt;td&gt;라인 잘라내기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘C / ⌘V&lt;/td&gt;
&lt;td&gt;라인 복사/붙여넣기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥&amp;darr; / ⇧⌥&amp;uarr;&lt;/td&gt;
&lt;td&gt;라인 아래/위 복사&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘Enter / ⇧⌘Enter&lt;/td&gt;
&lt;td&gt;라인 위/아래 삽입&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧Tab / Tab&lt;/td&gt;
&lt;td&gt;라인 내어쓰기/공백&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘[ / ⌘]&lt;/td&gt;
&lt;td&gt;라인 내어쓰기/들여쓰기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌥⌘[ / ⌥⌘]&lt;/td&gt;
&lt;td&gt;현재 토글 접기/펼치기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&amp;nbsp;&lt;/td&gt;
&lt;td&gt;모든 토글 접기/펼치기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘/&lt;/td&gt;
&lt;td&gt;라인 주석&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥A&lt;/td&gt;
&lt;td&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Movement&amp;amp;selection&lt;/th&gt;
&lt;th&gt;&amp;nbsp;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;⌥&amp;larr; / ⌥&amp;rarr;&lt;/td&gt;
&lt;td&gt;단어 단위로 왼/오 커서 이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥&amp;larr; / ⇧⌥&amp;rarr;&lt;/td&gt;
&lt;td&gt;단어 단위로 왼/오 커서 선택이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌥&amp;darr; / ⌥&amp;uarr;&lt;/td&gt;
&lt;td&gt;라인 아래/위 이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘&amp;larr;(Home) / ⌘&amp;rarr;(End)&lt;/td&gt;
&lt;td&gt;라인 시작/끝으로 커서 이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌘&amp;larr;(⇧Home) / ⇧⌘&amp;rarr;(⇧End)&lt;/td&gt;
&lt;td&gt;라인 시작/끝으로 커서 선택이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘&amp;uarr; / ⌘&amp;darr;&lt;/td&gt;
&lt;td&gt;파일의 시작/끝으로 커서 이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌘&amp;uarr; / ⇧⌘&amp;darr;&lt;/td&gt;
&lt;td&gt;파일의 시작/끝으로 커서 선택이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌘&lt;/td&gt;
&lt;td&gt;매칭 브래킷으로 커서 이동&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘PgUp /⌘PgDn&lt;/td&gt;
&lt;td&gt;스크롤 페이지 위, 아래&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌃PgUp / ⌃PgDn&lt;/td&gt;
&lt;td&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Multi-cursor&lt;/th&gt;
&lt;th&gt;&amp;nbsp;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;⌥ + click&lt;/td&gt;
&lt;td&gt;커서 삽입&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌥⌘&amp;uarr; / ⌥⌘&amp;darr;&lt;/td&gt;
&lt;td&gt;위/아래 커서 삽입&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘U&lt;/td&gt;
&lt;td&gt;마지막 커서 실행 취소&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥ + drag mouse&lt;/td&gt;
&lt;td&gt;컬럼 선택&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥⌘&amp;uarr; / &amp;darr;&lt;/td&gt;
&lt;td&gt;컬럼 선택 위, 아래&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥⌘&amp;larr; / &amp;rarr;&lt;/td&gt;
&lt;td&gt;컬럼 선택 좌, 우&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥⌘PgUp&lt;/td&gt;
&lt;td&gt;컬럼 선택 페이지 Up&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌥⌘PgDn&lt;/td&gt;
&lt;td&gt;컬럼 선택 페이지 Down&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Search&amp;amp;replace&lt;/th&gt;
&lt;th&gt;&amp;nbsp;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;⌘F / ⌥⌘F&lt;/td&gt;
&lt;td&gt;찾기/찾아바꾸기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘G / ⇧⌘G&lt;/td&gt;
&lt;td&gt;다음/이전 찾기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌥Enter&lt;/td&gt;
&lt;td&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;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;table data-ke-align=&quot;alignLeft&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;File management&lt;/th&gt;
&lt;th&gt;&amp;nbsp;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;⇧⌘N&lt;/td&gt;
&lt;td&gt;새 파일 열기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘W&lt;/td&gt;
&lt;td&gt;파일 닫기&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘\&lt;/td&gt;
&lt;td&gt;에디터 분할&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘1 / ⌘2 / ⌘3&lt;/td&gt;
&lt;td&gt;1, 2, 3번째 편집기 그룹 포커싱&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌘S&lt;/td&gt;
&lt;td&gt;저장&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;⌥⌘S&lt;/td&gt;
&lt;td&gt;전체 저장&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</description>
      <category>VSCode</category>
      <category>IDE</category>
      <category>Mac</category>
      <category>VSCode</category>
      <category>단축키</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/36</guid>
      <comments>https://chillcoding.tistory.com/36#entry36comment</comments>
      <pubDate>Thu, 11 Jan 2024 22:38:43 +0900</pubDate>
    </item>
    <item>
      <title>[HTML&amp;amp;CSS] Emmet - HTML element 생성하기</title>
      <link>https://chillcoding.tistory.com/35</link>
      <description>&lt;h3&gt;Emmet 이란?&lt;/h3&gt;
&lt;p&gt;Emmet은  &amp;quot;Expressive Meta-Markup Language&amp;quot;의 약자로,&lt;br&gt;HTML 및 CSS 코드를 간결하게 작성하고 생성하기 위한 확장도구이다. Emmet을 사용하여 HTML 및 CSS를 빠르게 작성할 수 있다.&lt;/p&gt;
&lt;p&gt;다양한 IDE에서 지원되며, Visual Studio Code에서는 1.26.0부터 내장되어 별도로 설치하지 않아도 된다.&lt;/p&gt;
&lt;h3&gt;&lt;strong&gt;Emmet 구문 사용하기&lt;/strong&gt;&lt;/h3&gt;
&lt;p&gt;바로 예시로 살펴보자. HTML 파일에서 다음과 같이 작성해볼 수 있다.&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;// 기본 구문: 태그명
// div
&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;
// p
&amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
// span
&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;


// 요소 복제하기
// li*3
&amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;


// 요소 class 및 id 추가하기: &amp;#39;.&amp;#39;, &amp;#39;#&amp;#39;
// 참고로 태그명 생략할 경우, 디폴트로 &amp;lt;div&amp;gt;가 생성됨
// div.container
&amp;lt;div class=&amp;quot;container&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
// div#container
&amp;lt;div id=&amp;quot;container&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;


// 형제 요소 생성하기: &amp;#39;+&amp;#39;
// div+p+span
&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;p&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;


// 자식 요소 생성하기(요소 nesting): &amp;#39;&amp;gt;&amp;#39;
// ul&amp;gt;li.item*3
&amp;lt;ul&amp;gt;
  &amp;lt;li class=&amp;quot;item&amp;quot;&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li class=&amp;quot;item&amp;quot;&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li class=&amp;quot;item&amp;quot;&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;


// 번호 자동 매김: &amp;#39;$&amp;#39;
// ul&amp;gt;li.item$*3
&amp;lt;ul&amp;gt;
  &amp;lt;li class=&amp;quot;item1&amp;quot;&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li class=&amp;quot;item2&amp;quot;&amp;gt;&amp;lt;/li&amp;gt;
  &amp;lt;li class=&amp;quot;item3&amp;quot;&amp;gt;&amp;lt;/li&amp;gt;
&amp;lt;/ul&amp;gt;

&lt;/code&gt;&lt;/pre&gt;</description>
      <category>HTML &amp;amp; CSS</category>
      <category>CSS</category>
      <category>emmet</category>
      <category>HTML</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/35</guid>
      <comments>https://chillcoding.tistory.com/35#entry35comment</comments>
      <pubDate>Thu, 21 Dec 2023 04:46:11 +0900</pubDate>
    </item>
    <item>
      <title>[JavaScript 기초] 표현식과 문 관련 기본용어</title>
      <link>https://chillcoding.tistory.com/34</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;아래 용어들은 '모던 자바스크립트 deep dive' 책을 바탕으로 정리하였다.&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;개발 공부를 하다보면 기본 용어에 대한 이해가 정립이 안되어 있다는 것을 느낄 때가 많았다.&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;&amp;lt;표현식과&amp;nbsp;문&amp;nbsp;관련&amp;nbsp;기본용어&amp;gt;&lt;/p&gt;
&lt;div data-ccp-timestamp=&quot;1702621086261&quot;&gt;
&lt;table style=&quot;border-collapse: collapse; width: 100%;&quot; border=&quot;1&quot; width=&quot;873&quot; data-ke-align=&quot;alignLeft&quot;&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;22&quot;&gt;No.&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;KR&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;ENG&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;Def.&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;Desc.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;110&quot;&gt;1&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;값&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;value&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;표현식이 평가되어 생성된 결과&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;- 모든 값은 데이터 타입을 가지며, 메모리에 이진수의 나열로 저장된다.&lt;br /&gt;- 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.&lt;br /&gt;- 값을 생성하는 방법 중 하나로 리터럴이 있다.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;68&quot;&gt;2&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;변수&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;variable&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;&lt;span&gt;하나의 값&lt;/span&gt;&lt;span&gt;을 저장하기 위해 확보한 메모리 공간 자체, 또는 그 메모리 공간을 식별하기 위해 붙인 이름&lt;/span&gt;&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;- 따라서, 변수에 할당되는 것은 값이다.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;88&quot;&gt;3&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;리터럴&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;literal&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;사람이 이해할 수 있는 문자(숫자, 알파벳 등) 또는 약속된 기호('', &quot;&quot;, [], {}, // 등)로 표기한 코드&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;- 즉, 코드상의 3은 단순한 아라비아 숫자 3이 아니라 숫자 리터럴이다. 숫자 리터럴 3을 코드에 기술하면 자바스크립트 엔진이 이를 평가해 숫자 값 3을 생성한다.&lt;br /&gt;- 리터럴 종류&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;66&quot;&gt;4&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;표현식&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;expression&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;값으로 평가될 수 있는 문&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;- 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.&lt;br /&gt;- 리터럴도 값으로 평가되므로, 리터럴도 표현식이다&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;227&quot;&gt;5&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;문&lt;br /&gt;(=명령문)&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;statement&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;프로그램을 구성하는 기본 단위이자 최소 실행 단위&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;&lt;span&gt; - 프로그램은 문의 집합이며, 프로그래밍은 문을 작성하고 순서에 맞게 나열하는 것&lt;br /&gt;- 어떤 실행을 명령하느냐에 따라 선언문(변수 선언문, 함수 선언문 등), 할당문, 조건문, 반복문으로 구분할 수 있다.&lt;br /&gt;- 값으로 평가될 수 있는지에 따라 표현식인 문과 표현식이 아닌 문으로 나눌 수 있다. 이를 구분하는 방법은 &lt;/span&gt;&lt;span&gt;해당 문을 변수에 할당해 보는 것이다.&lt;/span&gt;&lt;span&gt; (변수에는 값만 할당될 수 있다.)&lt;br /&gt;- 문은 여러 토큰으로 구성된다.&lt;/span&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td width=&quot;36&quot; height=&quot;66&quot;&gt;6&lt;/td&gt;
&lt;td width=&quot;104&quot;&gt;토큰&lt;/td&gt;
&lt;td width=&quot;118&quot;&gt;token&lt;/td&gt;
&lt;td width=&quot;236&quot;&gt;문법적인 의미를 가지며 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소&lt;/td&gt;
&lt;td width=&quot;379&quot;&gt;- ex) var sum = 1 + 2; 에서 토큰은 각각 var, sum, =, 1, +, 2, ; 가 된다.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>JavaScript</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/34</guid>
      <comments>https://chillcoding.tistory.com/34#entry34comment</comments>
      <pubDate>Fri, 15 Dec 2023 15:21:04 +0900</pubDate>
    </item>
    <item>
      <title>[html/css] 역사로 알아보는 CSS가 어려워진 이유</title>
      <link>https://chillcoding.tistory.com/33</link>
      <description>&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;a href=&quot;https://yozm.wishket.com/magazine/detail/1319/&quot;&gt;https://yozm.wishket.com/magazine/detail/1319/&lt;/a&gt;&lt;/p&gt;
&lt;figure id=&quot;og_1693286479892&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;역사로 알아보는 CSS가 어려워진 이유: ①웹 문서에서 웹 애플리케이션으로 | 요즘IT&quot; data-og-description=&quot;CSS는 배우기 어렵지 않으며 CSS를 작성하는 것 역시 어렵지 않습니다.&amp;nbsp;하지만 CSS&amp;nbsp;개발을 하다 보면 'CSS를 이렇게 쓰는 게 맞는가?'&amp;nbsp;하는 의문이 들 때가 생깁니다. 처음 배울 때와 달리 점점 CSS&quot; data-og-host=&quot;yozm.wishket.com&quot; data-og-source-url=&quot;https://yozm.wishket.com/magazine/detail/1319/&quot; data-og-url=&quot;https://yozm.wishket.com/magazine/detail/1319/yozm.wishket.com/magazine/detail/1319/&quot; data-og-image=&quot;https://scrap.kakaocdn.net/dn/pg0AW/hyTMiL3b4w/kGbIKjfPV1rBm8iH0uVak0/img.jpg?width=630&amp;amp;height=404&amp;amp;face=59_6_476_315,https://scrap.kakaocdn.net/dn/Lge0f/hyTMf9DAQh/tK0LphTzWPImjEWg4EdvNk/img.jpg?width=630&amp;amp;height=404&amp;amp;face=59_6_476_315&quot;&gt;&lt;a style=&quot;color: #000000;&quot; href=&quot;https://yozm.wishket.com/magazine/detail/1319/&quot; data-source-url=&quot;https://yozm.wishket.com/magazine/detail/1319/&quot;&gt;
&lt;div class=&quot;og-image&quot; style=&quot;background-image: url('https://scrap.kakaocdn.net/dn/pg0AW/hyTMiL3b4w/kGbIKjfPV1rBm8iH0uVak0/img.jpg?width=630&amp;amp;height=404&amp;amp;face=59_6_476_315,https://scrap.kakaocdn.net/dn/Lge0f/hyTMf9DAQh/tK0LphTzWPImjEWg4EdvNk/img.jpg?width=630&amp;amp;height=404&amp;amp;face=59_6_476_315');&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;역사로 알아보는 CSS가 어려워진 이유: ①웹 문서에서 웹 애플리케이션으로 | 요즘IT&lt;/p&gt;
&lt;p class=&quot;og-desc&quot; style=&quot;color: #909090;&quot; data-ke-size=&quot;size16&quot;&gt;CSS는 배우기 어렵지 않으며 CSS를 작성하는 것 역시 어렵지 않습니다.&amp;nbsp;하지만 CSS&amp;nbsp;개발을 하다 보면 'CSS를 이렇게 쓰는 게 맞는가?'&amp;nbsp;하는 의문이 들 때가 생깁니다. 처음 배울 때와 달리 점점 CSS&lt;/p&gt;
&lt;p class=&quot;og-host&quot; style=&quot;color: #909090;&quot; data-ke-size=&quot;size16&quot;&gt;yozm.wishket.com&lt;/p&gt;
&lt;/div&gt;
&lt;/a&gt;&lt;/figure&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>컨퍼런스&amp;amp;스크랩</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/33</guid>
      <comments>https://chillcoding.tistory.com/33#entry33comment</comments>
      <pubDate>Tue, 29 Aug 2023 14:20:38 +0900</pubDate>
    </item>
    <item>
      <title>[VSCode] 디버깅(Debugging) &amp;amp; 관련 단축키</title>
      <link>https://chillcoding.tistory.com/28</link>
      <description>&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #8cb3be;&quot;&gt;&lt;b&gt;&lt;span style=&quot;background-color: #8cb3be;&quot;&gt;&lt;b&gt;디버깅(Debugging)이&lt;/b&gt;&lt;/span&gt;란?&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;디버깅(Debugging)은 코드에서 오류를 찾기 위해 코드의 실행/동작 과정을 분석하고 추적하는 것을 말한다.&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;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #8cb3be;&quot;&gt;&lt;b&gt;디버깅(Debugging) 단계&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;VSCode에서 디버깅은 다음과 같은 단계로 진행된다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;1.&amp;nbsp; 소스 코드에 중단점(Breakpoint) 설정&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;중단점은 코드 동작을 일시 정지시키는 지점을 의미합니다. 중단점은 코드 줄의 왼쪽 마진을 클릭(빨간색으로 표시)하거나, 해당 줄로 이동한 후 F9 키를 눌러 설정할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;2.&amp;nbsp; 디버깅 창으로 이동&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;왼쪽 사이드바에서 벌레 모양의 디버그 아이콘을 클릭하거나, Ctrl+Shift+D 단축키를 사용하여 디버깅 창으로 이동한다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;3.&amp;nbsp; 디버그 세션 시작 &amp;amp; &lt;b&gt;스텝(Step) &lt;/b&gt;진행&lt;/b&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size18&quot;&gt;디버그 실행 버튼('Run and Debug')을 클릭하거나, F5 키를 클릭하여 디버그 세션을 시작한다. 세션을 시작하면 설정한 중단점마다 코드 동작이 일시정지된다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size14&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;186&quot; data-origin-height=&quot;38&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/dgkw3x/btsglODjbNg/FpYBOTYJOK3foAKA09Sjfk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/dgkw3x/btsglODjbNg/FpYBOTYJOK3foAKA09Sjfk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/dgkw3x/btsglODjbNg/FpYBOTYJOK3foAKA09Sjfk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdgkw3x%2FbtsglODjbNg%2FFpYBOTYJOK3foAKA09Sjfk%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;186&quot; height=&quot;38&quot; data-origin-width=&quot;186&quot; data-origin-height=&quot;38&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;size18&quot;&gt;세션을 시작한 후에는 디버그 스텝(Step)을 통해 중단점을 단계별로 이동할 수 있습니다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size18&quot;&gt;위에 뜨는 탭을 클릭해 다음 줄로 이동(&quot;Step Over&quot;), 함수 내부로 이동(&quot;Step Into&quot;), 함수 바깥으로 이동(&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&quot;Step Out&quot;)하거나&lt;/span&gt;, 각각에 해당하는 단축키를 사용할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;4.&amp;nbsp; 디버그 콘솔 창(Debug Console)으로 변수값 확인 또는 명령 실행&lt;/b&gt;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size18&quot;&gt;디버그 콘솔 창은 디버깅 도중에 프로그램의 상태를 확인하고 조작할 수 있는 창이다. 이 창에서는 다음과 같은 작업을 수행할 수 있다.&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;- 변수 확인&lt;/b&gt; &lt;b&gt;:&lt;/b&gt; 변수를 입력하고 엔터를 누르면 해당 변수값을 확인할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;- 명령 실행 :&lt;/b&gt; 프로그램이 일시 중지된 상태에서 명령을 실행할 수 있다. 예를 들어, 특정 함수를 호출하거나 원하는 동작을 수행할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;5.&amp;nbsp; 디버그 설정(Debug Configuration)&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size14&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;언어와 프레임워크에 따라 디버그를 설정하거나 .launch.json 파일에서 커스터마이징할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&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;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #8cb3be;&quot;&gt;&lt;b&gt;*주요 단축키*&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;- 중단점 설정 : &lt;b&gt;F9&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;- 디버그 시작/중지 : &lt;b&gt;F5&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;한 줄씩 실행(Step Over) : &lt;b&gt;F10&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;함수 내부로 진입(Step Into) : &lt;b&gt;F11&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;함수에서 빠져나오기(Step Out) : &lt;b&gt;Shift + F11&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;다음 중단점으로 이동 : &lt;b&gt;F5&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;-&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;디버그 콘솔 열기/닫기 : &lt;b&gt;Ctrl +&lt;/b&gt; &lt;b&gt;백틱(`)&lt;/b&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;이외에도 VSCode의 '키 바인딩 설정'에서 디버그 관련 단축키를 사용자 지정할 수 있다.&lt;/p&gt;</description>
      <category>VSCode</category>
      <category>debugging</category>
      <category>VSCode</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/28</guid>
      <comments>https://chillcoding.tistory.com/28#entry28comment</comments>
      <pubDate>Thu, 18 May 2023 00:31:21 +0900</pubDate>
    </item>
    <item>
      <title>[Python] 자료형별 주요 메서드 2 - 딕셔너리</title>
      <link>https://chillcoding.tistory.com/27</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;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&amp;lt;딕셔너리 메서드&amp;gt;&lt;/b&gt;&lt;/h4&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;background-color: #ffc9af;&quot;&gt;&lt;b&gt;딕셔너리&amp;nbsp;길이&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;len(딕셔너리)&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;&lt;span style=&quot;background-color: #ffc9af;&quot;&gt;&lt;b&gt;딕셔너리 찾기&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;딕셔너리['key']&lt;/b&gt; : 키에 해당하는 벨류 반환, 키가 존재하지 않을 경우 KeyError (따라서 예외 처리를 하지 않으면 종료 처리가 됨)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;딕셔너리.get('key')&lt;/b&gt; : 키&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;에 해당하는&lt;span&gt; &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;벨류&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;반환, 키가 존재하지 않을 경우 None 반환 (이때 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;None은 디폴트 값으로 두 번째 인자로 줘서 재설정 가능&lt;/span&gt;)&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;* 참고) request.POST['key']&amp;nbsp; vs&amp;nbsp; &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;request.POST.get('key')&lt;/span&gt;&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;'key'&lt;/b&gt; &lt;b&gt;in 딕셔너리 &lt;/b&gt;: 해당 키가 딕셔너리에 있는지 확인, True 또는 False 반환&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;b&gt;딕셔너리.keys()&lt;/b&gt; : 딕셔너리의 모든 키를 리스트로 반환&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;딕셔너리.values()&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;&lt;span style=&quot;background-color: #ffc9af;&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;&lt;b&gt;딕셔너리['key'] = value&lt;/b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;: 딕셔너리에&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;키-&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;벨류&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;추가&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;딕셔너리.setdefault(&lt;b&gt;'key', &lt;b&gt;value&lt;/b&gt;&lt;/b&gt;)&lt;/b&gt; : 특정 키에 해당하는 디폴트 값을 저장하고 반환, 키가 존재하지 않을 경우에도 추가되어 저장됨&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;딕셔너리.update(&lt;b&gt;딕셔너리&lt;/b&gt;)&lt;/b&gt; :&amp;nbsp; 키가 존재할 경우 해당하는 값이 업데이트되고, &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;키가 존재하지&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;않을 경우에 추가되어 업데이트됨&lt;/p&gt;
&lt;pre id=&quot;code_1683008858103&quot; class=&quot;python&quot; data-ke-language=&quot;python&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;my_dict = {'a': 1, 'b': 2, 'c': 3}
other_dict = {'b': 4, 'd': 5}

my_dict.update(other_dict)
print(my_dict) # {'a': 1, 'b': 4, 'c': 3, 'd': 5}&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;background-color: #ffc9af;&quot;&gt;&lt;b&gt;딕셔너리 삭제&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;딕셔너리.clear()&lt;/b&gt; : 딕셔너리의 모든 요소를 삭제하는 메서드&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;b&gt;del 딕셔너리['key']&lt;/b&gt; : 해당하는 키-&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;벨류&lt;span&gt;&amp;nbsp;&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;b&gt;딕셔너리.pop('key')&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;&lt;span style=&quot;background-color: #ffc9af;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;딕셔너리&amp;nbsp;정렬&lt;/span&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 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;background-color: #ffc9af;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;딕셔너리 튜플 리스트 변환&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&lt;b&gt;딕셔너리.items()&lt;/b&gt; : 딕셔너리의 모든&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt; 키-&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;벨류&lt;span&gt;&amp;nbsp;&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;b&gt;dict(튜플 리스트)&lt;/b&gt; : 튜플 리스트 형태의 키-값 쌍을 딕셔너리로 변환&lt;/p&gt;</description>
      <category>Python</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/27</guid>
      <comments>https://chillcoding.tistory.com/27#entry27comment</comments>
      <pubDate>Wed, 10 May 2023 04:40:53 +0900</pubDate>
    </item>
    <item>
      <title>크레인 인형뽑기 게임</title>
      <link>https://chillcoding.tistory.com/26</link>
      <description>&lt;div style=&quot;background-color: #282c34; color: #abb2bf;&quot;&gt;
&lt;div&gt;&lt;span style=&quot;color: #abb2bf;&quot;&gt;&lt;span style=&quot;color: #abb2bf;&quot;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;pre id=&quot;code_1682958054330&quot; class=&quot;python&quot; data-ke-language=&quot;python&quot; data-ke-type=&quot;codeblock&quot;&gt;&lt;code&gt;'''

https://school.programmers.co.kr/learn/courses/30/lessons/64061
크레인 인형뽑기 게임

문제 설명
해당 코드는 인형뽑기 게임에서 인형을 뽑는 과정을 시뮬레이션하고,
제거된 인형의 개수를 반환

제한사항
board 배열은 2차원 배열로 크기는 &quot;5 x 5&quot; 이상 &quot;30 x 30&quot; 이하입니다.
board의 각 칸에는 0 이상 100 이하인 정수가 담겨있습니다.
0은 빈 칸을 나타냅니다.
1 ~ 100의 각 숫자는 각기 다른 인형의 모양을 의미하며 같은 숫자는 같은 모양의 인형을 나타냅니다.
moves 배열의 크기는 1 이상 1,000 이하입니다.
moves 배열 각 원소들의 값은 1 이상이며 board 배열의 가로 크기 이하인 자연수입니다.

'''

# 풀이1

board = [[0,0,0,0,0],[0,0,1,0,3],[0,2,5,0,1],[4,2,4,4,2],[3,5,1,3,1]]
moves = [1,5,3,5,1,2,1,4]
# result = 4

def solution(board, moves):
    answer = 0
    basket = [0]  # board에서 0은 빈칸. basket에 0 append 안됨.
    for j in moves:
        for i in board:  #  moves[0]인 1을 기준으로 i[1-1]=i[0]들을 체크하고 싶은거니까 for문 순서 바꾸기 
            if i[j-1] != 0:
                if i[j-1] == basket[-1]:  # basket에 새로 들어올 값이랑 현재 basket의 맨 마지막 값이랑 같으면
                    answer += 2
                    basket.pop()  # basket에서 맨 마지막꺼 빼기
                else:
                    basket.append(i[j-1])
                i[j-1] = 0  # 빈칸으로 만들어주기
                break  # 모든 i들을 다 하는게 아니라 0이 아닌 값을 찾으면 for문 빠져나오게!
            else:
                pass  # 세로줄에 0만 있으면 아무 동작 안하게
    return answer

print(solution(board, moves))




# 풀이2

board = [[0,0,0,0,0],
         [0,0,1,0,3],
         [0,2,5,0,1],
         [4,2,4,4,2],
         [3,5,1,3,1]] # 인형뽑기 게임판의 상태
moves = [1,5,3,5,1,2,1,4] # 인형 뽑는 위치
# result = 4

def solution(board, moves):
    basket = [] # 인형을 넣을 빈 리스트
    answer = 0 # 제거된 인형의 개수 초기화

    for i in moves: # moves 리스트의 원소를 하나씩 도는데,
        for j in range(len(board)): # 이 때 board 리스트의 원소를 돌면서,
            if board[j][i-1] != 0: # 해당 위치에서 가장 위에 있는 인형을 뽑아준다.
                basket.append(board[j][i-1])
                board[j][i-1] = 0

                if len(basket) &amp;gt; 1:
                    if basket[-1] == basket[-2]:
                        basket.pop(-1)
                        basket.pop(-1)
                        answer += 2     
                break
    return answer
    
    
# 풀이3

# 보드 정렬하기, 0은 아예 넣지 않고 
# 시계방향으로 90도 돌려버리기
arr = [] # new_board 안에 넣기위한 임시 리스트
new_board = [] # 0빼고 90도 돌려버린 보드
for i in range(len(board[0])):
    for j in range(len(board[0])):
        if board[j][i]:
            arr.append(board[j][i])
    arr.reverse()
    new_board.append(arr)

result = []
answer = 0

for i in moves:
    # 인덱스니까 -1값을 사용
    if new_board[i-1]:
        # result가 비어있거나, 이번에 뽑은 값과 전에 뽑은 값이 다르면
        # 그냥 크레인으로 뽑아서 result에 넣기
        if not result or new_board[i-1][-1] != result[-1]:
            result.append(new_board[i-1].pop())
        # 리스트가 비어있지 않고, 이전에 뽑은값 == 전에 뽑은 값이면
        # result에 넣지 않고, result에서 pop 하고, 카운트를 2개 올림
        else:
            new_board[i-1].pop()
            result.pop()
            answer += 2&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;/div&gt;</description>
      <category>자료구조&amp;amp;알고리즘</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/26</guid>
      <comments>https://chillcoding.tistory.com/26#entry26comment</comments>
      <pubDate>Tue, 2 May 2023 01:25:33 +0900</pubDate>
    </item>
    <item>
      <title>[Django] Django의 패키지(Package) &amp;amp; 앱(App)</title>
      <link>https://chillcoding.tistory.com/25</link>
      <description>&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #f6e199; color: #000000;&quot;&gt;&lt;b&gt;패키지, 앱, 모듈? 그게 뭔데?&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;패키지, 앱, 모듈은 모두 프로그래밍에서 코드를 구조화하는 방식이다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&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;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;패키지(Package)&lt;/b&gt; : 여러 모듈을 모아 놓은 디렉토리. 관련된 모듈들을 그룹핑해서 보다 체계적으로 관리할 수 있으며, 패키지는 하위 패키지를 포함할 수도 있다.&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;앱(Application)&lt;/b&gt; : 일반적으로 기능별로 분리되어 있는 작은 단위의 독립적인 모듈이다. 앱은 패키지와 유사한 구조를 가지고 있다.&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;모듈(Module)&lt;/b&gt; : 코드가 들어 있는 파일. 모듈은 변수, 함수, 클래스 등을 정의할 수 있으며, 다른 모듈에서 import해서 사용할 수 있다.&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;패키지, 앱, 모듈로 코드를 구조화하면 관리와 유지보수가 편리하고 코드의 재사용성도 높아진다.&lt;/span&gt;&lt;/p&gt;
&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;span style=&quot;background-color: #ffc1c8;&quot;&gt;&lt;b&gt;Django의 패키지(Package) &amp;amp; 앱(App)&lt;/b&gt;&lt;/span&gt;&lt;b&gt;&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p style=&quot;text-align: justify;&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;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;패키지(Package)&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;span style=&quot;text-align: start;&quot;&gt;django.apps&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.conf&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.forms&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.http&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.shortcuts&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.template&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.utils&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;p 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;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;각 패키지에 포함된 앱(App) / 모듈&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django :&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django-admin&lt;/b&gt; : Django 프로젝트를 관리하기 위한 커맨드라인 도구&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.conf&lt;/b&gt; : Django 설정을 담은 패키지&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.urls&lt;/b&gt; : URLconf를 작성하기 위한 모듈&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;span style=&quot;text-align: start;&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;&lt;span style=&quot;text-align: start;&quot;&gt;django.apps :&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.apps.AppConfig&lt;/b&gt; : Django 어플리케이션의 구성을 포함하는 클래스 &lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.apps.registry &lt;/b&gt;: Django 어플리케이션 레지스트&lt;/span&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib :&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib.admin&lt;/b&gt; : Django 관리자 사이트&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib.auth&lt;/b&gt; : 인증 및 권한 관리를 위한 앱&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib.contenttypes&lt;/b&gt; : 데이터베이스에 저장된 모델의 타입을 추적하고 관리하기 위한 앱&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib.sessions&lt;/b&gt; : 세션을 관리하기 위한 앱&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib.messages&lt;/b&gt; : 사용자에게 메시지를 전달하기 위한 앱&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.contrib.staticfiles&lt;/b&gt; : 정적 파일 관리를 위한 앱&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li style=&quot;list-style-type: none;&quot;&gt;
&lt;ul style=&quot;list-style-type: disc;&quot; data-ke-list-type=&quot;disc&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core:&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.exceptions&lt;/b&gt; : Django의 예외 처리 관련 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.files&lt;/b&gt; : 파일 처리 관련 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.mail&lt;/b&gt; : 이메일 발송을 위한 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.management&lt;/b&gt; : 프로젝트 관리 명령어 모음&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.cache&lt;/b&gt; : 캐시 프레임워크 관련 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.checks&lt;/b&gt; : Django 구성을 확인하고 수정하기 위한 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.serializers&lt;/b&gt; : 객체 직렬화 및 역직렬화 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.servers&lt;/b&gt; : 개발용 웹 서버 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.signals&lt;/b&gt; : Django에서 사용되는 신호 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.core.validators&lt;/b&gt; : 입력 값의 유효성 검사를 위한 모듈&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db:&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db.backends&lt;/b&gt; : 데이터베이스 백엔드 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db.models&lt;/b&gt; : Django의 ORM을 사용하여 데이터 모델을 정의하기 위한 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db.migrations&lt;/b&gt; : 데이터베이스 스키마 변경 사항을 관리하기 위한 앱&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db.transaction&lt;/b&gt; : 데이터베이스 트랜잭션 관리를 위한 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.db.utils&lt;/b&gt; : 데이터베이스 유틸리티 모듈&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.forms:&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.forms.fields&lt;/b&gt; : 입력 양식 필드 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.forms.forms&lt;/b&gt; : 양식 생성 및 처리 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.forms.models&lt;/b&gt; : 모델 폼 관련 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.forms.widgets&lt;/b&gt; : 입력 양식 위젯 모듈&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.http:&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.http.request&lt;/b&gt; : HTTP 요청 관련 클래스 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.http.response&lt;/b&gt; : HTTP 응답 관련 클래스 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.http.multipartparser&lt;/b&gt; : 파일 업로드를 처리하기 위한 파서 모듈&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.http.cookie&lt;/b&gt; : 쿠키 처리 모듈&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.shortcuts:&lt;/b&gt;&lt;/span&gt;
&lt;ul style=&quot;list-style-type: circle;&quot; data-ke-list-type=&quot;circle&quot;&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.shortcuts.render&lt;/b&gt; : 템플릿을 사용하여 HTTP 응답 생성을 간단히 처리하는 함수&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;b&gt;django.shortcuts.get_object_or_404&lt;/b&gt; : 객체가 존재하지 않을 경우 Http404 예외를 발생시키는 함수&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 style=&quot;text-align: justify;&quot; data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #ffc9af; color: #000000;&quot;&gt;&lt;b&gt;그래서 그거 어떻게 쓰는건데&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&amp;lsquo;django-admin startproject&amp;rsquo;를 했을 때 생성되는 settings.py 파일을 살펴보면, 아래와 같이 contrib 패키지의 몇몇 앱들이 기본으로 제공된다. 따라서 contrib 패키지를 알고 있다면 대부분의 기본 앱들을 알고 있다고 할 수 있다.&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&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;593&quot; data-origin-height=&quot;246&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/bJCdFh/btsc3A3sH4n/l6BLYPbMldpknSwXYadt01/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/bJCdFh/btsc3A3sH4n/l6BLYPbMldpknSwXYadt01/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/bJCdFh/btsc3A3sH4n/l6BLYPbMldpknSwXYadt01/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJCdFh%2Fbtsc3A3sH4n%2Fl6BLYPbMldpknSwXYadt01%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;593&quot; height=&quot;246&quot; data-origin-width=&quot;593&quot; data-origin-height=&quot;246&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;
&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;s&gt;&amp;lsquo;INSTALLED_APPS&amp;rsquo;에 적혀있지 않은 장고 패키지/앱은 어떻게 저기에 추가로 일일이 따로 안적고 바로 import가 가능한거지?&lt;/s&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;이 외에도 다양한 패키지/앱들이 존재하지만, 이는 사용자가 필요에 따라 따로 설치하거나 개발해야 하는 경우가 많기 때문에 Django 공식 문서에서도 자세하게 다루지 않는다. 필요한 앱은 필요한 기능을 가진 서드파티 라이브러리를 설치하거나 직접 개발해야 한다.&lt;/span&gt;&lt;/p&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&amp;nbsp;&lt;/h3&gt;
&lt;h3 data-ke-size=&quot;size23&quot;&gt;&lt;span style=&quot;background-color: #9feec3; color: #000000;&quot;&gt;&lt;b&gt;Django 프레임워크의 소스 코드&lt;/b&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;p data-ke-size=&quot;size16&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;div style=&quot;color: #000000;&quot;&gt;
&lt;div&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;span style=&quot;text-align: start;&quot;&gt;Django &lt;/span&gt;공식문서&lt;span style=&quot;background-color: #f7f7f8; text-align: start;&quot;&gt;(&lt;/span&gt;&lt;a style=&quot;color: #000000;&quot; href=&quot;https://docs.djangoproject.com/&quot;&gt;https://docs.djangoproject.com/)&lt;/a&gt;에는 주요 패키지/앱의 사용법이나 동작 방식 위주로 나와있기 때문에 &lt;span style=&quot;text-align: start;&quot;&gt;Django가 어떤 패키지, 앱들로 이뤄져 있는지와 같은 총체적인&lt;/span&gt; 정보를 얻기 힘들다.&amp;nbsp;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #000000;&quot;&gt;&lt;span style=&quot;color: #000000; text-align: justify;&quot;&gt;Django 공식 GitHub 레포지토리(&lt;/span&gt;&lt;a href=&quot;https://github.com/django/django)&quot;&gt;https://github.com/django/django)&lt;/a&gt;&lt;span style=&quot;color: #000000; text-align: justify;&quot;&gt;에 들어가면 Django 프레임워크의 소스 코드를 확인할 수 있다. 해당 레포지토리에서 Django의 버전에 따라 브랜치를 선택하여 django 패키지를 비롯하여 다른 패키지/앱들의 소스 코드를 살펴볼 수 있다.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;figure class=&quot;imageblock alignCenter&quot; data-ke-mobileStyle=&quot;widthOrigin&quot; data-origin-width=&quot;1142&quot; data-origin-height=&quot;953&quot;&gt;&lt;span data-url=&quot;https://blog.kakaocdn.net/dn/caBn6q/btsc3zcK0xP/e8ydKg3VfFWF72gX8Zx5Gk/img.png&quot; data-phocus=&quot;https://blog.kakaocdn.net/dn/caBn6q/btsc3zcK0xP/e8ydKg3VfFWF72gX8Zx5Gk/img.png&quot;&gt;&lt;img src=&quot;https://blog.kakaocdn.net/dn/caBn6q/btsc3zcK0xP/e8ydKg3VfFWF72gX8Zx5Gk/img.png&quot; srcset=&quot;https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcaBn6q%2Fbtsc3zcK0xP%2Fe8ydKg3VfFWF72gX8Zx5Gk%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;1142&quot; height=&quot;953&quot; data-origin-width=&quot;1142&quot; data-origin-height=&quot;953&quot;/&gt;&lt;/span&gt;&lt;/figure&gt;

&lt;p style=&quot;text-align: justify;&quot; data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;/div&gt;
&lt;div style=&quot;color: #000000;&quot;&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;</description>
      <category>Django &amp;amp; DRF</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/25</guid>
      <comments>https://chillcoding.tistory.com/25#entry25comment</comments>
      <pubDate>Fri, 28 Apr 2023 16:40:26 +0900</pubDate>
    </item>
    <item>
      <title>[Python] 자료형별 주요 메서드 1 - 문자열, 리스트</title>
      <link>https://chillcoding.tistory.com/24</link>
      <description>&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;u&gt;이 메서드들은 무조건 암기할 것!!&lt;/u&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&amp;lt;문자열 메서드&amp;gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;문자열 길이&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;len(문자열)&lt;/b&gt; : 문자열 길이를 반환&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;문자열 세기/찾기&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.count(&quot;문자&quot;)&lt;/b&gt; : 문자열 내에서 특정 문자가 몇 개 있는지 세는 메서드&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.find(&quot;문자열&quot;)&lt;/b&gt; : 문자열 내에서 특정 문자열이 처음 나오는 위치(인덱스)를 찾아주는 세는 메서드, 없을 경우 -1 반환(따라서 -1이 나올 경우 어떤 로직을 실행하라고 처리 가능)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;문자열.index(&quot;문자열&quot;)&lt;/b&gt; :&lt;span&gt; 문자열 내에서 특정 문자열이 처음 나오는 위치(인덱스)를 찾아주는 세는 메서드, 없을 경우 ValueError 반환(따라서 Try, Except로 처리 가능)&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;문자열 합치기/쪼개기&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&lt;b&gt;&quot;문자열&quot;.join(문자열 리스트)&lt;/b&gt; : 특정 문자열로 리스트 문자열들을 합치는 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;메서드&lt;/span&gt;, 문자열을 반환 (특정 문자열은 임의의 문자열).&amp;nbsp; *&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;참고) &quot;.\n&quot;.join(문자열 리스트)&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;&quot;문자&quot;.split(문자열)&lt;/b&gt; : 특정 문자를 기준으로 문자열을 쪼개는 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;메서드&lt;/span&gt;, 리스트를 반환 (특정 문자는 문자열이 포함하고 있는 문자)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;문자열 대소문자 변환&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.upper()&lt;/b&gt; : 문자열 내의 모든 문자를 대문자로 변환하는 메서드 (검색할 때 유용)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.lower()&lt;/b&gt; : 문자열 내의 모든 문자를 소문자로 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;변환하는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;메서드 (검색할 때 유용)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;문자열.swapcase()&lt;/b&gt; :&lt;span&gt; &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;문자열 내의 모든&lt;span&gt;&amp;nbsp;대&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;문자를&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;소문자로, 소문자를 대문자로&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;변환하는&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;메서드&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;문자열 대문자 변환&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.upper()&lt;/b&gt; : 문자열 내의 모든 문자를 대문자로&lt;span&gt;&amp;nbsp;&lt;/span&gt;변환하는&amp;nbsp;메서드&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.capitalize()&lt;/b&gt; : 문자열의 첫 알파벳만 대문자로&lt;span&gt;&amp;nbsp;&lt;/span&gt;변환하는&amp;nbsp;메서드&lt;/p&gt;
&lt;p style=&quot;color: #333333; text-align: start;&quot; data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.title()&lt;/b&gt; : 공백, 숫자, 특수문자로 나눠진 영단어들의 첫 문자를 대문자로&lt;span&gt;&amp;nbsp;&lt;/span&gt;변환하는&amp;nbsp;메서드&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;문자열 대소문자 검사&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.isupper()&lt;/b&gt; : 문자열 내의 모든 문자가 대문자인지 검사하는 메서드, true / false 반환&amp;nbsp; (한글, 숫자, 공백, 특수문자일 경우에도 false 반환)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;b&gt;문자열.islower()&lt;/b&gt; : 문자열 내의 모든 문자가 소문자인지 검사하는 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;메서드&lt;/span&gt;, true / false 반환 (한글, 공백, 특수문자일 경우에도 false 반환)&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #99cefa;&quot;&gt;&lt;b&gt;문자열 바꾸기&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.replace(&quot;문자열&quot;, &quot;문자열&quot;)&lt;/b&gt; : 문자열 내의 특정 문자열을 다른 문자열로 바꾸는 메서드&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;h4 data-ke-size=&quot;size20&quot;&gt;&lt;b&gt;&amp;lt;리스트 메서드&amp;gt;&lt;/b&gt;&lt;/h4&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;리스트 길이&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;len(리스트)&lt;/b&gt; : 리스트 길이(요소 개수)를 반환&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;리스트 찾기&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;리스트.index(요소)&lt;/b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;: 리스트 &lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;내에서 특정 요소가 처음 나오는 위치(인덱스)를 찾아주는 세는 메서드, 없을 경우 ValueError 반환(따라서 Try, Except로 처리 가능)&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;문자열.count(&quot;문자&quot;)&lt;/b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&amp;nbsp;&lt;/span&gt;: &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;리스트&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;내에서 특정 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;요소가&lt;span&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;몇 개 있는지 세는 메서드&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;리스트 삭제&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;리스트.clear()&lt;/b&gt; : 리스트의 모든 요소 삭제하는 메서드, 빈 리스트를 반환&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;리스트.pop(인덱스)&lt;/b&gt; : 지정한 위치([]를 제외한 인덱스 값)의 요소를 삭제하는 메서드, 해당 요소를 반환 (존재하지 않는 인덱스를 지정할 경우 IndexError 반환)&amp;nbsp; =&amp;gt; 파이썬에서는 pop이 있기 때문에 리스트가 스택 역할을 할 수 있다.&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;리스트.remove(요소)&lt;/b&gt; : 특정 요소를 삭제하는 메서드, 여러개일 경우 가장 앞에 있는 요소만 삭제 (존재하지 않는 요소를 지정할 경우 ValueError 반환)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;del 리스트[인덱스]&amp;nbsp; / &lt;/b&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;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;리스트 추가/삽입&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&lt;b&gt;리스트.append(요소)&lt;/b&gt; : 리스트의 맨 뒤에 새로운 요소를 추가하는 메서드&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;리스트.insert(인덱스, 요소) &lt;/span&gt;&lt;/span&gt;&lt;/b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;: 리스트의 특정 위치에 요소를 삽입하는 메서드&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;리스트.extend(리스트) &lt;/b&gt;: 리스트를 확장하여 새로운 요소들을 추가하는 메서드, += 연산자로 대체가능&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;background-color: #9feec3;&quot;&gt;&lt;b&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;리스트 정렬&lt;/span&gt;&lt;/b&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;&lt;b&gt;리스트.sort()&lt;/b&gt; : 리스트를 오름차순으로 정렬/수정하는 메서드 (내림차순의 경우 'reverse=True'를 인자로 줌)&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;sorted(리스트)&lt;/b&gt; : 리스트를 오름차순으로 정렬된 새로운 리스트 생성하는 메서드 (내림차순의 경우 &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;'reverse=True'를 두번째 인자로 줌&lt;/span&gt;)&amp;nbsp; &lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;**&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;color: #333333; text-align: start;&quot;&gt;&lt;span&gt;참고) &lt;/span&gt;&lt;/span&gt;리스트.sort(key=lambda x: 표현식)&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&lt;b&gt;리스트.reverse()&lt;/b&gt; : 리스트의 요소 순서를 반대로 뒤집는 메서드&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;
&lt;p data-ke-size=&quot;size18&quot;&gt;&amp;nbsp;&lt;/p&gt;</description>
      <category>Python</category>
      <author>chillcoder</author>
      <guid isPermaLink="true">https://chillcoding.tistory.com/24</guid>
      <comments>https://chillcoding.tistory.com/24#entry24comment</comments>
      <pubDate>Fri, 28 Apr 2023 10:10:23 +0900</pubDate>
    </item>
  </channel>
</rss>