강원대 FE_조중현_1주차 과제

.eslintignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+dist/

.eslintrc.js

@@ -0,0 +1,47 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'airbnb',
+    'plugin:prettier/recommended',
+  ],
+  plugins: ['react', '@typescript-eslint', 'prettier'],
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    'prettier/prettier': 'error',
+    'react/jsx-filename-extension': [
+      1,
+      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
+    ],
+    'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    'react/require-default-props': 'off',
+    'no-unused-vars': 'warn',
+    'import/no-unresolved': 'off', // 임시로 경고 무시
+    'import/extensions': 'off', // 임시로 경고 무시
+    'react/function-component-definition': [
+      2,
+      { namedComponents: 'arrow-function' },
+    ],
+    'react/jsx-props-no-spreading': 'off',
+  },
+};

.gitignore

@@ -0,0 +1,80 @@
+node_modules/# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE/Editor settings
+.vscode/
+.idea/
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# macOS system files
+.AppleDouble
+.LSOverride
+Icon
+__MACOSX
+
+# Windows system files
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+$RECYCLE.BIN/
+
+# Linux system files
+*~
+.nfs*
+
+# TypeScript build artifacts
+*.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Icons and image files
+*.png
+*.jpg
+*.jpeg
+*.gif
+*.ico
+
+# Miscellaneous
+*.lock
+*.log
+*.bak
+*.tmp
+*.cache
+*.dist
+*.sync
+
+# Generated files
+dist/
+build/
+tmp/
+out/

.prettierignore

@@ -0,0 +1,3 @@
+node_modules/
+build/
+dist/

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": true,
+  "endOfLine": "lf"
+}

.storybook/main.js

@@ -0,0 +1,27 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+  addons: [
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+
+  staticDirs: ['..\\public'],
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+
+  tags: ['autodocs'],
+};
+
+export default preview;

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "files.eol": "\n",
+  "prettier.endOfLine": "auto"
+}

README.md

@@ -1,2 +1,35 @@
-# react-gift-react-foundation
-FE 카카오 선물하기 1주차 과제: React 기초
+# FE 카카오 선물하기 1주차 과제: React 기초
+
+---
+
+## 구현 컴포넌트
+
+### Button.tsx
+
+### Input.tsx
+
+### GoodsItem.tsx
+
+Default와 Ranking컴포넌트가 구현되어있습니다.
+
+### Grid.tsx
+
+### Container.tsx
+
+### Image.tsx
+
+코드에 사용자가 number값을 입력하여 storybook에서 선택할 수 있습니다.
+
+---
+
+### 질문 1: webpack은 무엇이고 어떤 역할을 하고 있나요?
+
+webpack은 모듈 번들러(Module Bundler)로, 여러 개의 파일(HTML, CSS, JavaScript, 이미지 등)을 하나의 번들 파일로 결합하여 웹 애플리케이션의 로딩 속도를 향상시키는 도구입니다. 웹팩은 다양한 플러그인과 로더를 사용하여 여러 가지 기능을 수행할 수 있습니다.
+
+### 질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?
+
+브라우저는 기본적으로 JSX(JavaScript XML)를 직접 이해하거나 실행할 수 없습니다. JSX는 React에서 사용되는 JavaScript 확장 문법으로, JavaScript 코드 안에 HTML 같은 구조를 작성할 수 있게 합니다. 브라우저에서 JSX 파일을 읽고 실행하기 위해서는 Babel과 같은 트랜스파일러를 사용한 사전 처리가 필요합니다.
+
+### 질문 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?
+
+userState같은 훅을 사용하여 상태를 정의하고 이것의 상태 업데이트 함수가 호출되면 리액트는 해당 컴포넌트의 상태가 변경되었음을 인식 및 재 렌더링 합니다. 그에 따라 변경된 상태를 사용하여 UI를 업데이트합니다.

craco.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@utils': path.resolve(__dirname, 'src/utils'),
+    },
+  },
+};

eslint.config.mjs

@@ -0,0 +1,13 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReactConfig from 'eslint-plugin-react/configs/recommended.js';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { languageOptions: { parserOptions: { ecmaFeatures: { jsx: true } } } },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReactConfig,
+];