fix: prettier, eslint 설정 적용

limkhl · limkhl · commit 43eb6c5c2762 · 2021-09-22T11:39:00.000+09:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,16 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["google", "plugin:prettier/recommended"],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "require-jsdoc": "off",
+    "linebreak-style": ["error", "windows"],
+    "prettier/prettier": ["error", { "endOfLine": "auto" }]
+  }
+}
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "semi": true,
+  "useTabs": false,
+  "endOfLine": "lf"
+}
diff --git a/README.md b/README.md
@@ -1,14 +1,22 @@
 # 25 Beginner JavaScript Project Ideas
+
 ## 규칙
+
 - 브랜치명은 JSmini_lia 형식으로 만들어 주세요.
 - 매주 주어진 양의 project를 완성 후 project 단위로 PR해 주세요!
-    - [Project1/리아] 프로젝트명
-    - 예) [Project1/리아] Colors
+  - [Project1/리아] 프로젝트명
+  - 예) [Project1/리아] Colors
 
 ## 1회차(~9/12)
+
 ### Project 1 Colors
+
 ![image](https://user-images.githubusercontent.com/64760270/132218819-23e9edb1-9596-4a31-9618-5e7e6adeecb0.png)
+
 ### Project 2 Hex colors gradient
+
 ![image](https://user-images.githubusercontent.com/64760270/132218843-b12f04ef-8259-43da-8a82-4ae9d48446cb.png)
+
 ### Project 3 Random quote generator
+
 ![image](https://user-images.githubusercontent.com/64760270/132218869-39280963-64e9-4ac6-a074-c8cb4b984927.png)
diff --git a/eslintrc.js b/eslintrc.js
diff --git a/index.html b/index.html
@@ -5,19 +5,12 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>JS Mini Project 25</title>
-    <link
-      rel="shortcut icon"
-      href="/src/assets/favicon.ico"
-      type="image/x-icon"
-    />
+    <link rel="shortcut icon" href="/src/assets/favicon.ico" type="image/x-icon" />
     <link
       href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
       rel="stylesheet"
     />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"
-    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />
     <link rel="stylesheet" href="/src/styles/style.css" />
   </head>
   <body>
diff --git a/prettierrc.json b/prettierrc.json
diff --git a/project1-colors/src/Button.js b/project1-colors/src/Button.js
@@ -1,14 +1,12 @@
 export default function Button({ $target, onClick }) {
-  const $button = document.createElement("button");
+  const $button = document.createElement('button');
   $target.append($button);
-  $button.textContent = "Click Me!";
+  $button.textContent = 'Click Me!';
 
-  $button.addEventListener("click", (e) => {
+  $button.addEventListener('click', () => {
     const generateRandomColorCode = () => {
       const randomHex = Math.floor(Math.random() * 16777215).toString(16);
-      return randomHex.length < 6
-        ? `${"0".repeat(6 - randomHex.length)}${randomHex}`
-        : randomHex;
+      return randomHex.length < 6 ? `${'0'.repeat(6 - randomHex.length)}${randomHex}` : randomHex;
     };
     onClick(generateRandomColorCode());
   });
diff --git a/project1-colors/src/Project1Page.js b/project1-colors/src/Project1Page.js
@@ -1,9 +1,9 @@
-import Button from "./Button.js";
+import Button from './Button.js';
 
 export default function Project1Page({ $target }) {
-  const $page = document.createElement("div");
+  const $page = document.createElement('div');
 
-  $page.className = "project1 page";
+  $page.className = 'project1 page';
 
   new Button({
     $target: $page,
diff --git a/project1-colors/src/main.js b/project1-colors/src/main.js
@@ -1,6 +1,6 @@
-import Button from "./Button.js";
+import Button from './Button.js';
 
-const $app = document.querySelector("#app");
+const $app = document.querySelector('#app');
 
 new Button({
   $target: $app,
diff --git a/project2-HexColorsGradient/src/Button.js b/project2-HexColorsGradient/src/Button.js
@@ -1,24 +1,18 @@
 export default function Button({ $target, onClick }) {
-  const $button = document.createElement("button");
+  const $button = document.createElement('button');
   $target.append($button);
-  $button.textContent = "Click Me!";
+  $button.textContent = 'Click Me!';
 
-  $button.addEventListener("click", (e) => {
+  $button.addEventListener('click', (e) => {
     const generateRandomDirection = () => {
       return Math.floor(Math.random() * 2) === 0 ? `right` : `left`;
     };
 
     const generateRandomColorCode = () => {
       const randomHex = Math.floor(Math.random() * 16777215).toString(16);
-      return randomHex.length < 6
-        ? `${"0".repeat(6 - randomHex.length)}${randomHex}`
-        : randomHex;
+      return randomHex.length < 6 ? `${'0'.repeat(6 - randomHex.length)}${randomHex}` : randomHex;
     };
 
-    onClick(
-      generateRandomDirection(),
-      generateRandomColorCode(),
-      generateRandomColorCode()
-    );
+    onClick(generateRandomDirection(), generateRandomColorCode(), generateRandomColorCode());
   });
 }
diff --git a/project2-HexColorsGradient/src/Project2Page.js b/project2-HexColorsGradient/src/Project2Page.js
@@ -1,10 +1,10 @@
-import Button from "./Button.js";
-import Sign from "./Sign.js";
+import Button from './Button.js';
+import Sign from './Sign.js';
 
 export default function Project2Page({ $target }) {
-  const $page = document.createElement("div");
+  const $page = document.createElement('div');
 
-  $page.className = "project2 page";
+  $page.className = 'project2 page';
 
   const signBoard = new Sign({ $target: $page });
 
diff --git a/project2-HexColorsGradient/src/Sign.js b/project2-HexColorsGradient/src/Sign.js
@@ -1,12 +1,12 @@
 export default function Sign({ $target }) {
-  const $signContainer = document.createElement("div");
+  const $signContainer = document.createElement('div');
   $target.append($signContainer);
 
   this.state = {
-    direction: "right",
+    direction: 'right',
     colorCode: {
-      start: "ffffff",
-      end: "ffffff",
+      start: 'ffffff',
+      end: 'ffffff',
     },
   };
 
diff --git a/project2-HexColorsGradient/src/main.js b/project2-HexColorsGradient/src/main.js
@@ -1,7 +1,7 @@
-import Button from "./Button.js";
-import Sign from "./Sign.js";
+import Button from './Button.js';
+import Sign from './Sign.js';
 
-const $app = document.querySelector("#app");
+const $app = document.querySelector('#app');
 
 const signBoard = new Sign({ $target: $app });
 
diff --git a/project2-HexColorsGradient/src/style.css b/project2-HexColorsGradient/src/style.css
@@ -1,9 +1,9 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');
 
 * {
   margin: 0;
   padding: 0;
-  font-family: "Noto Sans KR", sans-serif;
+  font-family: 'Noto Sans KR', sans-serif;
 }
 
 :root {
diff --git a/project3-RandomQuoteGenerator/src/App.js b/project3-RandomQuoteGenerator/src/App.js
@@ -1,17 +1,15 @@
-import { request } from "./api.js";
-import Button from "./Button.js";
-import QuoteBox from "./QuoteBox.js";
+import { request } from './api.js';
+import Button from './Button.js';
+import QuoteBox from './QuoteBox.js';
 
 export default function App({ $target }) {
   const quoteBox = new QuoteBox({ $target });
   new Button({
     $target,
     onClick: async () => {
       const generatedQuoteSet = await request();
-      const quote = `"${generatedQuoteSet.quote.replace("\uFFFD", "'")}"`;
-      const author = generatedQuoteSet.author
-        ? `- ${generatedQuoteSet.author}`
-        : ``;
+      const quote = `"${generatedQuoteSet.quote.replace('\uFFFD', "'")}"`;
+      const author = generatedQuoteSet.author ? `- ${generatedQuoteSet.author}` : ``;
 
       quoteBox.setState({
         ...quoteBox.state,
diff --git a/project3-RandomQuoteGenerator/src/Button.js b/project3-RandomQuoteGenerator/src/Button.js
@@ -1,9 +1,9 @@
 export default function Button({ $target, onClick }) {
-  const $button = document.createElement("button");
+  const $button = document.createElement('button');
   $target.append($button);
-  $button.textContent = "Generate Quote";
+  $button.textContent = 'Generate Quote';
 
-  $button.addEventListener("click", (e) => {
+  $button.addEventListener('click', (e) => {
     onClick();
   });
 }
diff --git a/project3-RandomQuoteGenerator/src/Project3Page.js b/project3-RandomQuoteGenerator/src/Project3Page.js
@@ -1,9 +1,9 @@
-import App from "./App.js";
+import App from './App.js';
 
 export default function Project3Page({ $target }) {
-  const $page = document.createElement("div");
+  const $page = document.createElement('div');
 
-  $page.className = "project3 page";
+  $page.className = 'project3 page';
 
   new App({ $target: $page });
 
diff --git a/project3-RandomQuoteGenerator/src/QuoteBox.js b/project3-RandomQuoteGenerator/src/QuoteBox.js
@@ -1,11 +1,11 @@
 export default function QuoteBox({ $target }) {
-  const $box = document.createElement("div");
+  const $box = document.createElement('div');
   $target.append($box);
-  $box.className = "quoteContainer";
+  $box.className = 'quoteContainer';
 
   this.state = {
-    quote: "",
-    author: "",
+    quote: '',
+    author: '',
   };
 
   this.setState = (nextState) => {
diff --git a/project3-RandomQuoteGenerator/src/api.js b/project3-RandomQuoteGenerator/src/api.js
@@ -1,11 +1,11 @@
-export const API_END_POINT = "https://free-quotes-api.herokuapp.com/";
+export const API_END_POINT = 'https://free-quotes-api.herokuapp.com/';
 
 export const request = async () => {
   try {
     const res = await fetch(API_END_POINT);
 
     if (!res.ok) {
-      throw new Error("API 호출 에러");
+      throw new Error('API 호출 에러');
     }
     return await res.json();
   } catch (e) {
diff --git a/project3-RandomQuoteGenerator/src/main.js b/project3-RandomQuoteGenerator/src/main.js
@@ -1,5 +1,5 @@
-import App from "./App.js";
+import App from './App.js';
 
-const $app = document.querySelector("#app");
+const $app = document.querySelector('#app');
 
 new App({ $target: $app });
diff --git a/project3-RandomQuoteGenerator/src/style.css b/project3-RandomQuoteGenerator/src/style.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&display=swap');
 
 * {
   margin: 0;
@@ -12,8 +12,8 @@
   --button-hover-color: #138496;
   --button-font-color: white;
   --button-border-color: #117a8b;
-  --font-quote: "Caveat", cursive;
-  --font-author: "Dancing Script", cursive;
+  --font-quote: 'Caveat', cursive;
+  --font-author: 'Dancing Script', cursive;
 }
 
 #app {
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,15 +1,15 @@
-import Header from "../layouts/Header.js";
+import Header from '../layouts/Header.js';
 
-import HomePage from "../pages/HomePage.js";
-import NotFoundPage from "../pages/NotFoundPage.js";
-import Project1Page from "../../project1-colors/src/Project1Page.js";
-import Project2Page from "../../project2-HexColorsGradient/src/Project2Page.js";
-import Project3Page from "../../project3-RandomQuoteGenerator/src/Project3Page.js";
+import HomePage from '../pages/HomePage.js';
+import NotFoundPage from '../pages/NotFoundPage.js';
+import Project1Page from '../../project1-colors/src/Project1Page.js';
+import Project2Page from '../../project2-HexColorsGradient/src/Project2Page.js';
+import Project3Page from '../../project3-RandomQuoteGenerator/src/Project3Page.js';
 
 export default function App({ $target }) {
   new Header({ $target });
 
-  const $main = document.createElement("main");
+  const $main = document.createElement('main');
   $target.append($main);
 
   const homePage = new HomePage({ $target: $main });
@@ -25,7 +25,7 @@ export default function App({ $target }) {
     if (pathname === `/`) {
       homePage.render();
     } else if (pathname.indexOf(`/project/`) === 0) {
-      const [, , projectId] = pathname.split("/");
+      const [, , projectId] = pathname.split('/');
       switch (parseInt(projectId)) {
         case 1:
           project1Page.render();
@@ -44,8 +44,8 @@ export default function App({ $target }) {
 
   this.route();
 
-  window.addEventListener("click", (e) => {
-    if (e.target.className === "link") {
+  window.addEventListener('click', (e) => {
+    if (e.target.className === 'link') {
       e.preventDefault();
       history.pushState(null, null, e.target.href);
 
diff --git a/src/data/projectList.js b/src/data/projectList.js
@@ -1,5 +1,5 @@
 export const projectList = [
-  { id: 1, title: "Colors" },
-  { id: 2, title: "Hex Colors Gradient" },
-  { id: 3, title: "Random Quote Generator" },
+  { id: 1, title: 'Colors' },
+  { id: 2, title: 'Hex Colors Gradient' },
+  { id: 3, title: 'Random Quote Generator' },
 ];
diff --git a/src/layouts/Header.js b/src/layouts/Header.js
@@ -1,5 +1,5 @@
 export default function Header({ $target }) {
-  const $header = document.createElement("header");
+  const $header = document.createElement('header');
   $target.append($header);
 
   this.render = () => {
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,5 @@
-import App from "./components/App.js";
+import App from './components/App.js';
 
-const $target = document.querySelector("#app");
+const $target = document.querySelector('#app');
 
 new App({ $target });
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
diff --git a/src/pages/NotFoundPage.js b/src/pages/NotFoundPage.js
diff --git a/src/styles/project3.css b/src/styles/project3.css
diff --git a/src/styles/style.css b/src/styles/style.css
