KDT_정태욱_6_RE

.babelrc.js

@@ -0,0 +1,4 @@
+// https://velog.io/@sooyun9600/React-is-not-defined-에러-해결
+module.exports = {
+  presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
+}

.env

@@ -0,0 +1,3 @@
+# 안중요한 내용이라 깃헙에 올립니다!
+OMDB_API_KEY=7035c60c
+PORT=6060

.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['plugin:react/recommended', 'airbnb', 'prettier'],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'no-console': 'warn', // console 사용시 warning이 나타납니다. (production할 떄 지워줘야하니까 warn합니다.)
+    'linebreak-style': 'off', // crlf, lf 상관없도록 변경합니다. (윈도우, 맥 번갈아서 쓰고 있습니다.)
+    semi: ['error', 'never'], // semicolon을 제거합니다.
+    'no-underscore-dangle': ['warn', { allowAfterThis: true }], // this._bar()는 가능하고 그 외는 warning이 나타납니다.
+    'max-len': ['warn', { code: 120, tabWidth: 2 }],
+    'spaced-comment': 'off', // 주석 스타일 강제 취소 (html, css 파일에서 주석을 달면 이 에러가 납니다.)
+    'no-param-reassign': 'off', // DOM을 다루다보면 재할당 할 일이 생긴다고 판단했습니다.
+    'import/extensions': 'warn', // js파일을 spliting하기 위해 on -> warn으로 변경 하였습니다.
+    'prefer-arrow-callback': 'off', // this를 다루게 될 일이 있을 수도 있으니까 off하였습니다.
+    'no-plusplus': 'off',
+    'no-await-in-loop': 'warn',
+    'prefer-const': 'off',
+    // library가 .js인 경우도 있기 때문에 .jsx, .js를 모두 컴포넌트로 사용할 수 있습니다.
+    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
+  },
+}

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+build
+build-ssr
+.ssr-server-cache

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "singleAttributePerLine": false
+}

.vscode/javascript.code-snippets

@@ -0,0 +1,59 @@
+{
+  // scope 속성 주의!
+  "Print to console log": {
+    "prefix": "log",
+    "body": ["console.log($0)"],
+    "description": "Log output to console",
+    "scope": "javascript, typescript, javascriptreact, typescriptreact"
+  },
+  "Print to console error": {
+    "prefix": "elog",
+    "body": ["console.error($0)"],
+    "description": "Log output to console",
+    "scope": "javascript, typescript, javascriptreact, typescriptreact"
+  },
+  "Throw new Error": {
+    "prefix": "tne",
+    "body": ["throw new Error($0)"],
+    "scope": "javascript, typescript, javascriptreact, typescriptreact"
+  },
+  "ES6 import from ": {
+    "prefix": "imf",
+    "body": ["import $0 from '$1'"],
+    "scope": "javascript, typescript, javascriptreact, typescriptreact"
+  },
+  "for loop": {
+    "prefix": "for",
+    "body": ["for (let i= 0, len= $0; i < len; i++) {\n  \n}"]
+  },
+  "Try Catch Scope": {
+    "prefix": "tc",
+    "body": "try {\n  $0\n} catch (err) {\n  throw new Error(err)\n}",
+    "scope": "javascript, typescript, javascriptreact, typescriptreact"
+  },
+  "reactFunction": {
+    "prefix": "rfc",
+    "body": "import React from 'react';\n\nexport default function ${1:${TM_FILENAME_BASE}}() {\n\treturn (\n\t\t<div>\n\t\t\t\n\t\t</div>\n\t);\n}\n\n",
+    "description": "Creates a React Function component",
+    "scope": "javascriptreact, typescriptreact"
+  },
+  "reactStatelessImplicitReturn": {
+    "prefix": "rsi",
+    "body": "import React from 'react';\n\nexport const ${1:${TM_FILENAME_BASE}} = (props) => {\n\t\t\t$0\n\t};",
+    "description": "Creates a React Function component",
+    "scope": "javascriptreact, typescriptreact"
+  },
+  // postcss 에시입니다. 고쳐쓰세요!
+  "Import Module CSS": {
+    "prefix": "si",
+    "body": ["import styles from './$TM_FILENAME_BASE.module.css'"],
+    "description": "Import PostCSS",
+    "scope": "javascriptreact, typescriptreact"
+  },
+  "ClassName": {
+    "prefix": "cn",
+    "body": ["className={styles.$0}"],
+    "description": "Adding className",
+    "scope": "javascriptreact, typescriptreact"
+  }
+}

.vscode/settings.json

@@ -0,0 +1,48 @@
+{
+  // * prettier default
+  //  .prettierrc.json || .prettierrc.json
+  // "editor.defaultFormatter": "esbenp.prettier-vscode", // prettier가 deafault fomatter 입니다
+  // "prettier.singleQuote": true, // single quote를 사용합니다.
+  // "prettier.semi": false,
+  // "prettier.tabWidth": 2,
+  // "prettier.trailingComma": "all",
+  // "prettier.singleAttributePerLine": false,
+  // "prettier.printWidth": 100,
+
+  // * prettier 개별 설정
+  "[javascript]": {},
+
+  "[typescriptreact]": {
+    "prettier.singleAttributePerLine": true
+  },
+  "[javascriptreact]": {
+    "prettier.singleAttributePerLine": true
+  },
+
+  "eslint.validate": [
+    "javascript", // elint검사가 필요한 경우 이 곳에 언어를 추가해주세요
+    "html" // Add "html" to enable linting `.html` files.
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true // eslint auto fix를 enableg합니다.
+  },
+
+  // * vscode 기능 설정
+  "editor.linkedEditing": true,
+  "editor.minimap.autohide": true,
+  "eslint.enable": true,
+  "window.zoomLevel": 1, // zoom level을 기본값으로 설정
+  "editor.snippetSuggestions": "top" // intellisense가 최상위에 sinnpet을 출력합니다.
+
+  // theme
+  // "editor.tokenColorCustomizations": {
+  //   "comments": "#8d818e",
+  //   "functions": "#e27979",
+  //   "types": "#c2f2e3",
+  //   "strings": "#c9e3f3",
+  //   "keywords": "#f9dbdb",
+  //   "numbers": "#f5f3f3",
+  //   "variables": "#7091ee",
+  //   "textMateRules": []
+  // }
+}