frontend-survival-week01 assignment

.github/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
           globs: |
             README.md
       - name: Lint
-        run: npx eslint --ext .js,.jsx,.ts,.tsx .
+        run: npx eslint --fix src/**/*.{ts,tsx}
       - name: Compile to check syntax
         run: npx tsc --noEmit
       - name: Run tests

.gitignore

@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

.parcelrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["@parcel/config-default"],
+  "reporters":  ["...", "parcel-reporter-static-files-copy"]
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "editor.rulers": [
+        80
+    ],
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "trailing-spaces.trimOnSave": true
+}

README.md

@@ -1,3 +1,131 @@
 # frontend-survival-week01
 
 프론트엔드 생존코스 1주차 과제
+
+1.node 버전 18.18.0 이상 설치 필요  
+>node -v  # 노트 버전 확인  
+>nvm install 18.20.4  # LTS 버전  
+>nvm list  # 설치된 node 버전 전부 확인 가능  
+>nvm use 18.20.4  # 이걸로 변경  
+
+2.npm init 하기  
+>npm init -y  
+2-1.[.gitignore] 파일 생성.
+
+3.typescript 설치  
+>npm i -D typescript  # 개발도구라 -D  
+3-1. tsc(type script compiler) 설치  
+>npx tsc --init  
+3-2. tsconfig.json 파일에서 jsx 부분 주석 제거  
+
+4.ESLint 설치
+>npm i -D eslint  
+>npx eslint --init  
+-> To check syntax and find problems  
+-> javaScript modules(import/export)  
+-> React  
+-> Yes  #typescript 사용  
+-> Browser  
+-> Yes  #지금 설치?  
+-> npm  
+==> 안타깝게도 eslint.config.mjs 파일이 생성 됨.  
+
+아래 항목들을 eslint.config.mjs 에 추가해줘야 하는데, 공식문서 어케 보는지 모르겠음. gpt 한테 물어 봄.  
+4-1.eslintjs 파일에 jest:true 추가  
+4-2.eslintjs 파일에 plugin:react/jsx-runtime 추가  
+4-3.[.eslintignore] 파일은 이제 더 이상 지원하지 않는단다. 설정 파일에 ignore 항목 형식으로 추가해야 한다.  
+수정 된 eslint.config.mjs 파일
+
+import globals from "globals";  
+import pluginJs from "@eslint/js";  
+import tseslint from "typescript-eslint";  
+import pluginReact from "eslint-plugin-react";  
+
+export default [  
+  {  
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]  
+  },  
+  {  
+    languageOptions: {
+      ...globals.browser,  
+      ...globals.jest  
+    }  
+  },  
+  pluginJs.configs.recommended,  
+  ...tseslint.configs.recommended,  
+  pluginReact.configs.flat.recommended,  
+  {  
+    settings: {  
+      react: {  
+        version: 'detect',  
+      },  
+    },  
+    rules: {  
+      'react/react-in-jsx-scope': 'off',  
+    },  
+    extends: [  
+      'plugin:react/jsx-runtime', // JSX Runtime 설정 추가  
+    ],  
+  },  
+  {  
+    ignores: [  
+      "node_modules/", // node_modules 폴더 무시  
+      "dist/",         // dist 폴더 무시  
+      ".parcel-cache/" // .parcel-cache 폴더 무시  
+    ]  
+  }  
+];  
+
+5.React 설치
+>npm i react react-dom
+>npm i -D @types/react @types/react-dom  
+
+6.jest(테스팅 도구) 설치  
+>npm i -D jest @types/jest @swc/core @swc/jest jest-environment-jsdom
+@testing-library/react @testing-library/jest-dom@5.16.4  
+6-1. jset.config.js 파일 만들기  
+
+7.Parcel 설치  
+>npm i -D parcel  
+7-1. package.json 파일 scripts 에 아래 명령어 추가.  
+"scripts": {  
+    "start": "parcel --port 8080",  
+    "build": "parcel build",  
+    "check": "tsc --noEmit",  
+    "lint": "eslint --fix src/**/*.{ts,tsx}",  
+    "test": "jest",  
+    "coverage": "jest --coverage --coverage-reporters html",  
+    "watch:test": "jest --watchAll"  
+},  
+
+8.기타  
+8-1.package.json 기본 파일 잡아주기.  
+"source": "index.html",  
+
+8-2. ts-node 실행  
+>npx ts-node  # ts-node 명령모드로 전환 됨.  
+
+8-3. static에 넣은 이미지를 보기 위해  
+>npm i -D parcel-reporter-static-files-copy  
+[.parcelrc] 파일 생성  
+{  
+  "extends": ["@parcel/config-default"],  
+  "reporters":  ["...", "parcel-reporter-static-files-copy"]  
+}  
+
+8-4. 빌드하면, 배포용 이미지. dist 폴더에 생김. 배포  
+>npx parcel build  
+>npx servor dist  
+
+8-5. 확장 프로그램 설치. eslint  
+
+8-6. [.vscode] 폴더 생성. settings.json 파일 생성  
+{  
+    "editor.rulers": [  
+        80  
+    ],  
+    "editor.codeActionsOnSave": {  
+        "source.fixAll.eslint": "explicit"  
+    },  
+    "trailing-spaces.trimOnSave": true  
+}

eslint.config.mjs

@@ -0,0 +1,40 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]
+  },
+  {
+    languageOptions: { 
+      ...globals.browser,
+      ...globals.jest
+    }
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+    },
+    extends: [
+      'plugin:react/jsx-runtime', // JSX Runtime 설정 추가
+    ],
+  },
+  {
+    ignores: [
+      "node_modules/", // node_modules 폴더 무시
+      "dist/",         // dist 폴더 무시
+      ".parcel-cache/" // .parcel-cache 폴더 무시
+    ]
+  }
+];

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8">
+        <title>React Demo</title>
+        <body>
+            <div id="root"></div>
+            <div id="demo"></div>
+            <script type="module" src="./src/main.tsx"></script>
+        </body>
+    </head>
+</html>

jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+    testEnvironment: 'jsdom',
+    setupFilesAfterEnv: [
+      '@testing-library/jest-dom/extend-expect',
+    ],
+    transform: {
+      '^.+\\.(t|j)sx?$': ['@swc/jest', {
+        jsc: {
+          parser: {
+            syntax: 'typescript',
+            jsx: true,
+            decorators: true,
+          },
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      }],
+    },
+    testPathIgnorePatterns: [
+      '<rootDir>/node_modules/',
+      '<rootDir>/dist/',
+    ],
+  };