[1단계 - 나만의 유튜브 강의실] 병민(윤병인) 미션 제출합니다.

.eslintrc.json

@@ -0,0 +1,20 @@
+{
+  "env": {
+    "browser": true,
+    "es2022": true,
+    "jest": true
+  },
+  "extends": ["airbnb-base", "plugin:prettier/recommended"],
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": "latest"
+  },
+  "rules": {
+    "no-alert": "off",
+    "max-depth": ["error", 2],
+    "max-lines-per-function": ["error", 15],
+    "no-unused-expressions": ["error", { "allowShortCircuit": true }],
+    "class-methods-use-this": "off"
+  },
+  "ignorePatterns": ["**/*.test.*"]
+}

.prettierrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  printWidth: 100, // 한 줄 최대 문자 수
+  tabWidth: 2, // 들여쓰기 시, 탭 너비
+  // useTabs: false, // 스페이스 대신 탭 사용
+  // semi: true, // 문장 끝 세미콜론 사용
+  singleQuote: true, // 작은 따옴표 사용
+  // trailingComma: 'all', // 꼬리 콤마 사용
+  // bracketSpacing: true, // 중괄호 내에 공백 사용
+  arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
+  proseWrap: 'never', // 마크다운 포매팅 제외
+  endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
+};

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          chrome: '87',
+        },
+        useBuiltIns: 'usage',
+        corejs: '3.6.4',
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-transform-runtime'],
+};

index.html

@@ -25,35 +25,8 @@ <h3 hidden>검색어 입력</h3>
         <input id="search-input-keyword" type="text" placeholder="검색" class="search-input__keyword">
         <button id="search-button" class="search-input__search-button button">검색</button>
       </section>
-      <!-- 2-1 검색 결과가 있을 경우, 아래와 같은 검색 결과 목록을 보여줍니다.-->
-      <section class="search-result">
-        <h3 hidden>검색 결과</h3>
-        <ul class="video-list">
-          <!-- <li class="video-item" data-video-id="">
-            <img
-              src="https://i.ytimg.com/vi/ECfuKi5-Cfs/hq720.jpg?sqp=-oaymwEcCOgCEMoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDvmIcX-TgdcH2g_Bd4AUxw6hjmvQ"
-              alt="video-item-thumbnail" class="video-item__thumbnail">
-            <h4 class="video-item__title">[Playlist] 너무 좋은데 괜찮으시겠어요?</h4>
-            <p class="video-item__channel-name">essential;</p>
-            <p class="video-item__published-date">2022년 3월 2일</p>
-            <button class="video-item__save-button button">⬇ 저장</button>
-          </li> -->
-        </ul>
-      </section>
-      <!-- 2-2 검색 결과가 없을 경우, `search-result--no-result` class를 붙이고 아래와 같은 no-result를 보여줍니다.-->
-      <!-- <section class="search-result search-result--no-result">
-        <h3 hidden>검색 결과</h3>
-        <div class="no-result">
-          <img src="./src/assets/images/not_found.png" alt="no result image" class="no-result__image">
-          <p class="no-result__description">
-            검색 결과가 없습니다<br />
-            다른 키워드로 검색해보세요
-          </p>
-        </div>
-      </section> -->
     </div>
   </div>
-  <script type="module" src="./src/js/index.js"></script>
 </body>
 
 </html>

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  silent: false,
+};