전남대 FE_이은진_1주차 과제 Step2,3

react-gift/.gitignore

@@ -0,0 +1,25 @@
+# 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.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*storybook.log

react-gift/.prettierrc

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

react-gift/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  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'],
+};
+export default config;

react-gift/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

react-gift/README.md

@@ -0,0 +1,30 @@
+# react-gift-react-foundation
+FE 카카오 선물하기 1주차 과제: React 기초
+
+📝 Requirements
+---
+- Create React App을 기반으로 프로젝트를 생성해요.
+- Typescript로 프로젝트가 동작되게 세팅하고, 절대 경로로 Import 할 수 있게 alias를 설정해주세요.
+- tsconfig에 어떤 항목들로 구성되어 있는지 살펴보고, 필요하다 생각되는 설정들이 있다면 자유롭게 설정해주세요.
+- ESLint, Prettier를 추가하고 본인만의 Lint 룰을 세팅해주세요. (가장 대표적인 룰은 eslint-config-airbnb에요. 다만, 꼭 Airbnb룰을 적용할 필요는 없어요.)
+- emotion 스타일 라이브러리를 추가하고, reset css를 적용해주세요.
+- gitignore를 추가하고, 프로젝트에 불필요한 코드들은 정리해주세요. (ex. 사용하지 않는 icon 등)
+- 본인만의 폴더 구조 기준을 세우고 반영해주세요.
+- 본인만의 기준으로 일관된 코드를 작성해주세요.
+<br>
+<br>
+<br>
+# STEP3
+📝질문 1. webpack은 무엇이고 어떤 역할을 하고 있나요?
+---
+Webpack은 하나 이상의 파일로 합쳐주는 자바 번들러이다. 자바는 원래 간단한 기능을 추가하기 위해 만들어진 언어지만, 자바 개발 추세로 이어지면서 애플리케이션이 커졌고, 이를 대처하기 위해 생겨난 것이 번들러이다. 번들러는 파일 단위의 모듈 관리를 가능하게 하고, 성능을 최적화 시키며 종속성 문제를 해결 시킨다
+
+📝질문 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요?
+---
+JSX는 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법이다. 브라우저는 원래 JSX 파일을 직접 읽을 수 없다.브라우저가 JSX를 이해하고 실행하려면, 이를 브라우저가 이해할 수 있는 순수 JavaScript로 변환해야 합니다. 트랜스파일링이나 Webpack과 같은 모듈 번들러를 통해 브라우저가 이해할 수 있는 JS 코드로 바꿔준다
+
+
+📝질문 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요?
+---
+React에서 상태 변화가 발생할 때 컴포넌트는 이를 감지하고 업데이트를 트리거한다. 이 과정은 "상태(State)"와 "프로퍼티(Props)"를 통해 이루어진다.
+setstate나 usestate 훅을 통해 상태가 업데이트되고, 리액트가 새로운 상태를 반영해서 가상 DOM을 업데이트한다.가상 DOM에서 변경된 부분만 실제 DOM에 반영하고, 이를 통해 최소한의 DOM 조작으로 성능을 최적화한다

react-gift/eslint.config.mjs

@@ -0,0 +1,50 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "@typescript-eslint/eslint-plugin";
+import tsparser from "@typescript-eslint/parser";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import prettier from "eslint-plugin-prettier";
+import airbnb from "eslint-config-airbnb";
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+    languageOptions: {
+      parser: tsparser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+      globals: globals.browser,
+    },
+    plugins: {
+      react: pluginReactConfig,
+      reactHooks: require("eslint-plugin-react-hooks"),
+      ts: tseslint,
+      jsxA11y: require("eslint-plugin-jsx-a11y"),
+      import: require("eslint-plugin-import"),
+      prettier: prettier,
+    },
+    rules: {
+      "prettier/prettier": "error",
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/no-unused-vars": "error",
+      "react/jsx-filename-extension": [1, { extensions: [".jsx", ".tsx"] }],
+      "import/no-unresolved": "off",
+      "import/extensions": "off",
+    },
+    settings: {
+      "import/resolver": {
+        typescript: {},
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReactConfig,
+  airbnb,
+  prettier.configs.recommended,
+];